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 1:

1. Simple Calculator.

We'll build a simple calculator that can perform simple arithmetic operations.

First, we need to set up the basic HTML structure for our calculator.

We need:

1. An input field for the user to enter numbers

2. Buttons for the user to perform operations

3. An output field to display the results.

<div class="calculator">
        <form>
            <input type="text" name="result" id="result" readonly>
            <div class="buttons">
                <button onclick="clearResult()">C</button>
                <button onclick="backspace()">CE</button>
                <button onclick="insert('+')">+</button>
                <button onclick="insert('-')">-</button>
                <button onclick="insert('*')">*</button>
                <button onclick="insert('/')">/</button>
                <button onclick="calculate()">=</button>
                <button onclick="insert('7')">7</button>
                <button onclick="insert('8')">8</button>
                <button onclick="insert('9')">9</button>
                <button onclick="insert('4')">4</button>
                <button onclick="insert('5')">5</button>
                <button onclick="insert('6')">6</button>
                <button onclick="insert('1')">1</button>
                <button onclick="insert('2')">2</button>
                <button onclick="insert('3')">3</button>
                <button onclick="insert('0')">0</button>
                <button onclick="insert('.')">.</button>
            </div>
        </form>
    </div>

I added onclick events to the buttons, it is for calling a function when the user clicks on a button.

Simple CSS.

.calculator {
    margin: 50px auto;
    width: 200px;
    height: 250px;
    background-color: #eee;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 0px 10px #ccc;
}

input[type="text"] {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    font-size: 24px;
    text-align: right;
    margin-bottom: 10px;
    padding-right: 10px;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
}

button {
    width: 100%;
    height: 50px;
    background-color: #fff;
    color: #333;
    font-size: 24px;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 0px 5px #ccc;
    cursor: pointer;
}

button:hover {
    background-color: #333;
    color: #fff;
}

Now, JavaScript.

let result = document.getElementById('result');

function insert(char) {
    result.value += char;
}

function backspace() {
    result.value = result.value.slice(0, -1);
}

function clearResult() {
    result.value = '';
}

function calculate() {
    result.value = eval(result.value);
}

The first function, insert(char), takes a parameter called char and appends it to the end of the text in the HTML element with the id result.

For example, if the user clicks the button with the number '5', the value of the result element will be updated to include '5'.

backspace() function removes the last character from the result element. For example, if the user has entered '123' and presses the backspace button, the text in the 'result element will be updated to '12'.

clearResult() function, sets the value of the result element to an empty string. This will clear any text that the user has entered.

calculate() function, evaluates the current value of the result element as a mathematical expression using the eval() function in JavaScript. This means that if the user enters a mathematical expression, such as '2+2', and then clicks the equals button, the result of the expression (4) will be displayed in the result element.

However, it's important to note that using eval() to evaluate user input can be unsafe and lead to potential security vulnerabilities. The main reason for avoiding eval() is security. Since eval() evaluates any JavaScript code passed to it as a string, it can also execute malicious code. This can lead to a potential security vulnerability in your application. For example, if an attacker manages to inject malicious code into a string that is then passed to eval(), the code will be executed just like any other valid JavaScript code.

Here is the GitHub code.

That's it. Hope you like it.

See you on day 2.