vanilla-button-inc

Initial solution

by Tracy-Gregory Gilmore

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
  <h1>People Entered:</h1>
  <h2 id="count-el">0</h2>
  <button id="increment-btn" class="increment-btn">INCREMENT</button>
  <button id="save-btn" class="save-btn">Save</button>
  <p id="save-el"></p>

  <script src="build_a_passenger_counter_app.js"></script>
</body>
</html>

CSS

body{
    background-image: url(https://images.unsplash.com/photo-1547060037-a9b0a6be328c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center;
}

h1{
    margin-top: 10px;
    margin-bottom: 10px;
}

h2{
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 20px;
}

button{
    border: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    background-color: darkred;
    width: 200px;
    margin-bottom: 5px;
    border-radius: 5px;
}

button: hover{
    transition: 5s;
    background-color: red;
}

.increment-btn{
    background-color: darkred;
}

.save-btn{
    background-color: darkgreen;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
	const counts = [];
	let count = 0;
	const countEl = document.getElementById("count-el");
	const saveEl = document.getElementById("save-el");
	
  document.getElementById("increment-btn").addEventListener('click', () => {
    count++;
    countEl.textContent = count;  
  });

	document.getElementById("save-btn").addEventListener('click', () => {
	  counts.push(count);
    saveEl.textContent = `Previous enteries: ${counts.join(' - ')}`;
    count = 0;
    countEl.textContent = count;  
  });
});