learn-javascript

The Lottery (game)

This exercise incorporates variables, conditionals, functions, event listeners, and HTML DOM manipulation using pure (“vanilla”) Javascript.

Instructions

The following prompt to create a lottery game follows a typical app development process.

  1. Fork the template on codepen.io or copy the file
  2. Start by building the simple prototype (v.1) containing the core logic or proof of concept of the program, then add the interface and features in each successive version.
  3. Try to code each version by only looking at the interface and Javascript console, but not the actual source code.
  4. You can use MDN docs, Google, class notes, etc.

Versions

  1. Lottery v.1
    • Intro to conditionals and Math.random()
    • Use console.log() to display results in the console
  2. Lottery v.2
    • For user input, first select the button var button = document.querySelector("button")
    • Then add an event listener button.addEventListener(function() { /* code */ }))
    • You should be able to play the game with the button and see results in the console
  3. Lottery v.3
    • Update elements in the page via the DOM Javascript
    • Display all results within the HTML of the page
  4. Lottery v.4
    • Use fetch() to get data from an API to somehow “seed” the randomness in your lottery game.
    • Add a section of “behind the curtain” controls to manipulate the odds of the game (mwah hah hah!)