/advent-of-javascript

Primary LanguageHTML

Advent of JavaScript

Day 1 - Pomodoro Timer

Overview

These are the starter files and a suggested solution to the Pomodoro Timer. You can find more details about the challenge by logging into Podia.

Challenge

Within the STARTER-FILES folder, you'll find everything you need to get started.

Users should be able to:

  • Start and Stop the Timer
  • Click on the gear icon to change the length (minutes and seconds) for the timer.

Day 2 - Typography

Poppins - Regular and Bold https://fonts.google.com/specimen/Poppins?query=poppins

Colors

  • Background color - #EFF0F6
  • Border Color - #D7D7F9
  • Primary - #6B00F5
  • Pattens Blue - #e1f1fe
  • Pale Rose - #ffe2f0
  • Ghost White - #f7f7fe
  • White Ice - #defef0

Content

  • French Fries with Ketchup - $2.23
  • Salmon and Vegetables - $5.12
  • Spaghetti with Meat Sauce - $7.82
  • Chicken Salad with Parmesean - $6.98
  • Fish Sticks and Fries - $6.34
  • Ravioli - $6.45
  • Tortellini - $6.05
  • Bacon, Eggs, and Toast - $5.99

Day 3 - Keyboard

Day 4 - Keyboard

In this project, we're going to create a computer keyboard.

You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this would be a great way to push yourself.

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

[[FREE]] Need some support on this challenge? Upgrade to the Solution tier. You'll get a video explanation, from Amy.

[[SOLUTION]] Need some support on this challenge? Join the Learn Build Teach Discord community. We have a separate channel set up specifically for the Advent of CSS.

Taking your Project to the Next Level

  • Use a framework or library like Tailwind CSS, Styled Components, or CSS Modules. Or, if you're feeling particularly adventurous, try writing everything in Vanilla CSS.
  • Keep track of how many keys are successfully typed correctly, the first time.
  • Keep track of how many keys are missed
  • Time the user to see how many successful key presses they can get within a given amount of time.

FAQs

  • Can I use libraries / frameworks on these projects?
    • Of course! We're providing the design files, but you can use whatever tools and frameworks you'd like.
  • Oh no! I'm stuck!
    • Consider purchasing the Solutions (if you haven't already). You'll get access to a video, where James explains how to write all the code.
    • Check out the Learn Build Teach Discord. We have a specific channel set up, just for the Advent of JavaScript.
  • Can I use this project in my portfolio?
    • Sure! But, be honest about the work that you did

Day 4 - Multiple Checkboxes

In this project, we're going to check multiple checkboxes at one time.

You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this would be a great way to push yourself.

Users should be able to:

  • See the list of podcast episodes
  • Check one episode, shift click to select all the episodes in between

[[FREE]] Need some support on this challenge? Upgrade to the Solution tier. You'll get a video explanation, from Amy.

[[SOLUTION]] Need some support on this challenge? Join the Learn Build Teach Discord community. We have a separate channel set up specifically for the Advent of JS.

Need some support on this challenge? Join the Learn Build Teach Discord community. We have a separate channel set up specifically for the Advent of JavaScript.

Getting Started

  1. To get started, download the zip file. This includes all the project assets you need to get started: HTML, CSS, images, and fonts.
  2. Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.
  3. Open the project's README.md file (that's this!). It has additional information on how the project is structured.
  4. Customize your project/file architecture to your liking.
  5. Happy coding!
  6. Once you're finished, share your work using #adventofjs

Taking your Project to the Next Level

  • Use a framework like React, Vue, or Svelte. Or, if you're feeling particularly adventurous, try writing everything in Vanilla JavaScript.
  • Add an additional checkbox to the top of the list, with the ability to check or uncheck all items at once.
  • Take a step back and try writing the HTML and CSS for this project yourself. Start with the provided Figma file. If you get stuck, you can always purchase the Advent of CSS solutions, where Amy explains how to build this.

FAQs

  • Can I use libraries / frameworks on these projects?
    • Of course! We're providing the vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.
  • Oh no! I'm stuck!
  • Can I use this project in my portfolio?
    • Sure! But, be honest about the work that you did