Mixed Messages - with HTML/CSS

Projects Portfolio Project: Mixed Messages
1

Here’s a link to my Project:

Link to Repo:

It didn’t take me long, a couple of hours, but I didn’t want to spend too long doing this at the moment.

I did everything through VSCode on PC (using the built-in terminal).

The quotes are stored in objects inside of an array, and I use a random number generator to select which object to display the information for.

The function is triggered when you click on the button, and the function edits the innerHTML of the message/button and src for the image.

I’m still getting used to using branches. I keep forgetting to switch… oops.

At some point soon, I plan to improve this by:

  • Making it so quotes don’t repeat.

  • Adding more quotes.

  • Making the Image the same size each time.

  • Tidying up the Code, adding more comments.

  • Add more info to the README

(It’s also day 30 since I joined Codecademy, and started the 30 day challenge! woo!)

2 Likes
2

We can see the logic you are using to that end but could it not be simplified by shuffling the array then generating a random pick. There would be less repeats, and less logic.

The points I immediately favored were,

  • caching of DOM nodes
  • the array of objects
  • where and how the listener is registered

The point that struck me was the use of Title-case in what are sentences (with full stops indicating such). I’ve only just seen the JS but overall, pretty tidy job once the excess of logic is removed.

2 Likes
3

Yeah the title case was just inherited from the website I copied from, rather than writing them myself - that’s something I can add to my list of things to fix.

That’s a great suggestion for the repeats too - thanks!

I was considering just making it loop in order of index around the array, but hadn’t gotten around to deciding what to do next.

1 Like
4

A week or so back, @jagking refined my shuffle function to make it very fast, and in JS one rather doubts it can be much improved. Go back and snag that function (just include attribution with a link to the topic). You can see how it is implemented in the example(s).

We could write a function that changes the case from Title case to Sentence case, but it would still require human inspection to isolate personal pronouns and place names. Might not be the best use of our time, though. Manual changing would get the job done quickly. Whomever thought it a good idea to use Title case might not have given it much more than a passing fancy and figured it was cool. Bad idea, in my humble view.

Aside

Seems every time one asks for the project narrative page it gets ignored. Can you please post a link to the landing page so we can view the criteria and other instructions?

1 Like
5

Brilliant thanks!

That works perfectly - I’ve altered the code, and included a link to the forum. I also made it so that the array length variable resets after all of the quotes have been seen, and it starts again.

Here’s the link for the project:

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-javascript-syntax-portfolio-project/modules/fscp-mixed-messages/kanban_projects/mixed-messages

There are also a few other quotes (I removed the title case manually), and the image now has a max-height, so that the button doesn’t move too much each time.

1 Like
6

Still a few capitals in the quotes.

    <head>
        <link href="./resources/css/style.css" rel="stylesheet" rel="type/css"/>
        <title>Mixed Messages</title>
    </head>

Nothing should be written before the <title/> except the character encoding.

    <head>
        <meta charset="UTF-8"/>
        <title>Mixed Messages</title>
        <link href="./resources/css/style.css" rel="stylesheet" rel="type/css"/>
    </head>

With the character encoding now set, you can remove all the entities from your code and replace them with their respective character.

"... don't..."

Otherwise, looks good.

1 Like
7

Ahh. Brilliant. I forgot about the meta tag and was wondering why it wasn’t working. Will be going over HTML/CSS next anyway, so will get a refresher.

All fixed now! Thank you so much for your help!

1 Like