Day 5 of learning JavaScript: People Counter App

Today I wanted to finish the people counter app. So at first, I created the save button in the HTML document, which would save the previous entries. I also created an h2 element underneath, where the previous entries were shown:

<button id="save-btn" onclick="save()">SAVE</button>
<h2 id="previous-entries">Previous entries: </h2>

After this was done, I had every element I needed to finish the app. That's why I created the CSS file right after that. Here You can see the finished HTML file as well as the finished CSS file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Passenger Counter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>People entered:</h1>
    <h2 id="count-el">0</h2>
    <button id="increment-btn" onclick="increment()">INCREMENT</button>
    <button id="save-btn" onclick="save()">SAVE</button>
    <h2 id="previous-entries">Previous entries: </h2>
    <script src="index.js"></script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    background-image: radial-gradient(white, lightblue);
}

button{
    margin: 0.5rem;
    padding: 0.25rem;
    width: 50%;
    border: 2px solid black;
    border-radius: 5px;
}

h2{
    margin: 1rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 140%;
}

#increment-btn{
    background-color: red;
    color: white;    
    cursor: pointer;
}

#save-btn{
    background-color: green;
    color: white;
    cursor: pointer;
}

#count-el{
    margin-bottom: 0.5rem;
    font-size: 250%;
}

#increment-btn:hover{
    opacity: 65%;
}

#save-btn:hover{
    opacity: 65%;
}

After this, the project looked like that:

So now everything besides the JavaScript code to make the save button work is finished. One new thing I learned about JavaScript is, that there is a better way to implement text into an HTML element than ".innerText". The command everyone should use is ".textContent". Also, I learned short forms of mathematical operations:

let count = 0

count = count + 1 //if something is added to the variable like here, you can write it like you see underneath

count += 1 

// works with every kind of mathematical operations.

After this was finished, I knew everything I needed to know to create the save button. So I just did it and came up with a solution:

let countEl = document.getElementById("count-el")
let count = 0

let saveEl = document.getElementById("previous-entries") // selects the HTML element and saves it in the variable

function increment(){
    count += 1
    countEl.textContent = count
}

function save(){ // the function that is executed when clicking on the button
    let countStr = " " + count + " - " // the count and the signs that should be shown 1 save are saved in this variable
    saveEl.textContent += countStr // adds the count and the signs to the h2 in the HTML when clicking th button
    countEl.textContent = 0 // the previous h1 number gets a reset to 0
    count = 0 // count also gets a reset to 0, so whe start again at the beginning
}

That is the solution and also the full JavaScript file we need. If you want to try it, you can try it yourself and check it with the code. I hope you learned something valuable today.

Day 5 of learning JavaScript: People Counter App - Save Button