You’ve learned HTML and CSS and started to learn JavaScript. You studied all the basics. Now it is time to practice.

But... What should I build?

We'll build 10 projects in 10 days. We'll be exploring 10 beginner-friendly JavaScript projects one by one that will help you sharpen your skills and get you started on your journey to becoming a skilled web developer. These projects are easy to follow and require minimal experience, making them perfect for beginners. Let's get started and dive into the exciting world of JavaScript projects! We'll be focusing on JavaScript so I won't explain every HTML and CSS code. You can style it however you want and add things to make your own.

Let's go.

What we will build in 10 days:

1. Simple Calculator

2. Random Quote Generator

3. To-do List

4. Image Slider

5. Stopwatch

6. Weather App with an API

7. Random Number Guessing Game

8. Rock-Paper-Scissors

9. Memory Game

10. Countdown Timer.

Day 2.

Random Quote Generator.

We'll build a 'Random Quote Generator'. When the user clicks the button it generates a quote.

As always, you can change the design, add things, and make it your own.

What we need for HTML is simple.

1. An area where the quote will be displayed.

2. A button that the user clicks to see the quote.

   <div id="quote-container">
    <h1 id="quote-text">Click the button to generate a quote!</h1>
    <button id="quote-button" onclick="generateQuote()">Generate Quote</button>
    </div>

When a button element with the id "quote-button" is clicked, it calls the generateQuote() function using the onclick attribute.

Simple CSS.

body {
  font-family: sans-serif;
  background-color: #f2f2f2;
}

#quote-container {
  text-align: center;
  margin-top: 20vh;
}

#quote-text {
  font-size: 2rem;
  margin-bottom: 3rem;
  padding:0 1rem;

}

#quote-button {
  font-size: 1.25rem;
  padding: 1rem;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

And JS.

const quotes = [
  "The only way to do great work is to love what you do. - Steve Jobs",
  "Success is not final, failure is not fatal: It is the courage to continue that counts. - Winston Churchill",
  "Believe you can and you're halfway there. - Theodore Roosevelt",
  "I have not failed. I've just found 10,000 ways that won't work. - Thomas Edison",
  "If you want to live a happy life, tie it to a goal, not to people or things. - Albert Einstein",
  "The best way to predict your future is to create it. - Abraham Lincoln"
];

This code defines an array called quotes that contains several strings, each representing a quote. In JavaScript, an array is a collection of values that are stored in a single variable. In this case, the values are strings, but arrays can also contain numbers, objects, or other data types. When the user clicks the button, one of them will be displayed. Now, we need to build the function that allows us to make it happen.

We could use an API to collect the quotes, but I wanted to keep it simple. We'll learn and use APIs in future projects.

function generateQuote() {
  const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  document.getElementById("quote-text").textContent = randomQuote;
}

This code defines a function called generateQuote that is called when the user clicks the "Generate Quote" button. A function is a block of code that can be called multiple times with different inputs. In this case, the function doesn't take any inputs, but it performs two actions:

1. It generates a random quote from the quotes array by doing the following:

• Multiplying Math.random() by quotes.length to get a random number between 0 and the length of the array (exclusive).

• Rounding the result down to the nearest integer using Math.floor().

• Using the resulting index to get a quote from the quotes array.

1. It sets the text of the HTML element with the ID "quote-text" to the random quote using document.getElementById().textContent.

That's it. Hope you like it

See you tomorrow.

Here is the GitHub code.