Random Message Generator

Your HTML and CSS skills will come in handy to make this look great, but the focus of this project is to give you an opportunity to use JavaScript. Specifically, you will use what you have learned about DOM Manipulation and Arrays.

Must-Haves

  • At least one button that the user clicks
  • Upon the user click of the button, a message appears, related to your topic of choice
  • A visually appealing site

Tips

  • Look back to the Intro to Arrays lesson to brush up on how to randomly select an element from an array.
  • Follow the iterations closely. This project brings a lot of your new knowledge together; the iterations help you break down this big problem into bite-sized chunks.

Here is an example of something like you will build.

Here’s another example:

Iteration 1 - Wireframe & Vision

  • Draw out a wireframe, or a rough draft, of what you what the site to look like!
  • Like we did with the Photo Gallery, label each section with the HTML element that will be used
  • Get your assets together: Are you going to use photos? Quotes? Store links to images or any text you want to use in a GoogleDoc or as comments in a CodePen. Also, decide on your color palette. Color Supply is a great resource for this!
  • Make sure your wireframe and assets are approved by your instructor before moving on

Iteration 2 - HTML & CSS

  • Now that you have wireframes, write out the HTML & CSS to make this come to life

Iteration 3 - DOM Manipulation

  • Write an event listener and handler for your button(s). Make sure they are working with a console.log()
  • Create a variable for any other HTML element you may need to access with JavaScript

Iteration 4 - Random Generation

  • Create an array of your “messages” that will be randomly picked from
  • Inside your event handler, write logic to randomly select a message from the array
  • Your event handler should also make sure that the selected message appears on the screen for your user