mcnadams / coin-toss

Coin Toss

Build a Coin Toss betting game!

Previous Techniques and Concepts Used in this Lab

1. Tool: Use 3rd-party testing library
2. Variables: Declaring and assign const variable
3. Variables: Assign variable from property of global object
4. Testing: TDD a pure function
5. Functions: Calling a function
6. Functions: Using an anonymous function as a function argument
7. Functions: Define function parameter
8. Testing: Test assertions with assert.equal

Project Increments and T&C

Page Structure

Setup your document title and styled header

New T&C:

1. HTML Elements: <title>, <h1>
2. CSS Styling: Use body for global styling
3. CSS Styling: font-family, background, color, text-align, font-size, font-weight

Flip

User clicks the flip button and the app randomly determines heads or tails and shows an image corresponding to the result.

New T&C:

1. HTML Elements: <button>, <section>, <img>
2. CSS Selectors: id (#), tag, and class (.)
3. CSS Styling: visibility, margin, padding, margin: auto, min-height
4. ESModules: export default and import default
5. Built-in (Browser): global document
6. DOM Traversal: document.getElementById('id') matches HTML attribute id="id"
7. Built-in (JavaScript): Math.random() returns 0 to <1
8. Variables: Declare let variable with sensible default
9. Control Flow: if and else conditionality
10. Functions: Call a function with a variable
11. Variables: Reassign let variable in conditional block
12. DOM Node: set property image.src =
13. DOM Node: remove class element.classList.remove('class-to-remove')
14. Functions: Call a function with two params
15. DOM Events: subscribe to click event with addEventListener

Bet

User chooses heads or tails then clicks the flip button (note: now a form submit, not just a button click). The app performs the flip as above, then determines whether the user won or loss and displays an appropriate message.

New T&C:

1. HTML Elements: named radio inputs
2. HTML Attributes: required inputs
3. App Design: evolve code: button click becomes form submit
4. DOM Events: subscribe to form subscribe event with addEventListener
5. DOM Events: use event callback argument to prevent default behavior
6. DOM Node: add class element.classList.add('class-to-add')
7. DOM Node: set text element.textContent =

Track Wins and Loses

The app displays a "wins" and "losses" count (both initially 0). As each flip bet is determined above, the app increments the appropriate count.

New T&C:

1. Variables: Declare module-level let variable as state
2. Variables: Reassign module-level state variable

Full Betting (STRETCH)

The app displays the amount of money the user has (pick a default like $1000). The user is prompted for an amount for each bet along with their guess. The app adds or subtracts the bet amount from the total money of money the user has.

New T&C:

1. HTML Attribute: numeric type input
2. Built-in (Browser): Format number as currency with .toLocaleString()

Going Broke (STRETCH)

The app stops the game and alerts the user if the amount goes negative

New T&C:

1. App Design: Two-stage logic checking (toss check, then broke check)
2. HTML Attributes: Disable button with button.disabled = true