Skip to content

nilstarbb/advent-of-js

Repository files navigation

Advent of JavaScript

1 - Pomodoro Timer

Live Demo | Code | Tutorial

Users should be able to:

  • Start the timer by clicking on the start link/button.
  • Once the user clicks start, the word start will change to stop. Then, the user can click on the stop button to make the timer stop.
  • Click on the gear icon to change the length (minutes and seconds) of the timer.
  • Once the timer finishes, the ring should change from green to red and an alert message is passed to the browser.

Pomodoro Timer

2 - eCommerce Component

Live Demo | Code | Tutorial

Users should be able to:

  • View the plates on the left side of the screen and add them to your cart on the right side.
  • When there are no plates within your cart, you should see a message that says, "Your cart is empty."
  • When a plate is added to your cart, the Subtotal and Totals will automatically update.
  • When products are in your cart, you should be able to increase and decrease the quantity.
    • A user should not be able to mark the quantity as a negative number.
    • If the quantity goes down to 0, the user will have the option to delete or remove the product from their cart entirely.
  • Tax is based on the state of Tennessee sales tax: 0.0975

eCommerce Component

3 - Piano Keyboard

Live Demo | Code | Tutorial

Users should be able to:

  • See the keyboard centered on the page
  • Whenever a user hovers over a specific key it will change colors
    • White keys will change to yellow #ffd200
    • Black keys will change to pink #f40082
  • When a user clicks on a specific key, it will play an audio clip.
    • The audio clips are numbered, but I did not specifically number the keys. You can pick which key should be associated with each audio file.
    • If a user clicks on one key, then immediately clicks on a second key. The 2 files should both play. Meaning, clicking on one key will not stop an existing audio file from playing.

Piano Keyboard

4 - Computer Keyboard

Live Demo | Code | Tutorial

Users should be able to:

  • See the computer keyboard centered on the page
  • A random letter will start to jiggle.
  • The user should type the same key that's jiggling and it will stop.
  • A new, random key will start jiggling

Computer Keyboard

5 - Multiple Checkboxes

Live Demo | Code | Tutorial

Users should be able to:

  • See the list of podcast episodes
  • Check one episode, shift click (use ctrl instead) to select all the episodes in between

Multiple Checkboxes

6 - Range Slider

Live Demo | Code | Tutorial

Users should be able to:

  • Move the knob on the range and the dollar amount above it will update.

Range Slider

7 - Tip Calculator

Live Demo | Code | Tutorial

Users should be able to:

  • calculate tip based on tip percentage, bill amount, and number of people

Tip Calculator

8 - Weather API

Live Demo | Code | Tutorial

Users should be able to:

  • view weather for the upcoming week

Weather API

9 - Image Carousel

Live Demo | Code | Tutorial

Users should be able to:

  • toggle left and right through the image thumbnails
  • click an image to select it manually

Image Carousel

10 - 4 Digit Code

Live Demo | Code | Tutorial

Users should be able to:

  • type in a digit and automatically be taken to the next input
  • paste in a 4 digit code

4 Digit Code

11 - Accordions

Live Demo | Code | Tutorial

Users should be able to:

  • Click on a collapsed question to expand it and view the answer.
  • Click on a collapsed answer to collapse it and hide the answer.

Accordions

12 - Rock, Paper, Scissors

Live Demo | Code | Tutorial

Users should be able to:

  • play the game and see the results

Accordions

13 - Custom Modal

Live Demo | Code | Tutorial

Users should be able to:

  • Click on a point on the image, that triggers the modal
  • Click on the x within the modal to close the modal

Custom Modal

14 - Calendar Picker

Live Demo | Code | Tutorial

Users should be able to:

  • view calendar with correct days with the current day highlighted
  • navigate through different months

Calendar Picker