/LAB-02-magic-8-ball

Code 201

Primary LanguageJavaScript

Alchemy Bootstrap Template

Magic 8 Ball Plan

HTML elements needed?

  • Text area for question (static)
  • Button (static)
  • P to hold answer (dynamic)

What state do I need?

  • answer
  • randomIdx

What events am I listening for? What happens when events are fired?

  • button click
    • generate a random index
    • get the value of the answer
    • display the answer on the page

Making a plan

(bolded steps are mandatory, unbolded are for more advanced projects)

  1. Make a drawing of your app. Simple "wireframes"
  2. Once you have a drawing, name the HTML elements you'll need to realize your vision
  3. For each HTML element ask: Why do I need this?
  4. Ask which of out HTML elements are hard coded, and which are dynamically generated?
  5. Once we know why we need each element, think about how to implement the "Why" as a "How"
  6. Is there some state we need to initialize?
  7. Find all the 'events' (user clicks, form submit, on load etc) in your app. Ask one by one, "What happens when" for each of these events. Does any state change?
  8. Think about how to validate each of your steps
  9. Ask: should any of this work be abstracted into functions? (i.e., is the work complicated? can it be resused?)
  10. Consider your data model. What objects will you be using? What are the key/value pairs? What arrays do you need? What needs to live in local storage?
  11. Consider what features depend on what other features. Use this dependency logic to figure out what order to complete tasks.

To Run Cypress Tests

  • npm install
  • npm test
  • Cypress will open -- you should then click "run <#> integration spec(s)"
  • Make sure all tests pass