Scrimba JavaScript Passenger Counter App

Zaid Marrie — Sun, 19 Sep 2021 13:50:40 +0000

I recently started a JavaScript course on scrimba. As part of this course I was required to create a passenger counter app. It was relatively easy.

I completed this again locally.

This was my HTML code:

<!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 App</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js" defer></script>
</head>
<body>

    <div class="container">
        <h1>People entered:</h1>
        <h2 id="count-display">0</h2>
        <div class="row">
            <a href="#" class="btn" id="increment-btn" onclick="increment()">Increment</a>
            <a href="#" class="btn" id="save-btn" onclick="save()">Save</a>
        </div>
        <p id="entries-log">Previous entries: </p>
    </div>
</body>
</html>

This is my CSS styles:

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --primary-dark: #23242b;
    --btn-1: #c40000;
    --btn-2: #01750b;
}

body {
    margin: 0;
    min-height: 100vh;
    text-align: center;
    color: var(--primary-dark);
    background-image: url(station.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}

h1 {
    letter-spacing: 0.125em;
    text-transform: capitalize;
}

h2 {
    font-size: 4rem;
    margin: 0.75em 0;
}

.btn {
    color: #FFFFFF;
    padding: 0.75em 1.8em;
    text-decoration: none;
    display: inline-block;
    border-radius: 0.25em;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
}

.btn + .btn {
    margin-left: 0.25em;
}

#increment-btn {
    background-color: var(--btn-1);
}

#save-btn {
    background-color: var(--btn-2);
}

#entries-log {
    font-weight: bold;
}

This is my JavaScript Code:

let countDisplay = document.getElementById('count-display');
let entryLog = document.getElementById('entries-log')
let count = 0;

// Increment count being displayed
function increment() {
    count++;
    countDisplay.textContent = count;
}

// Save and log entries of people entering the station and reinitialize count
function save() {
    entryLog.textContent += count + " - ";
    count = 0;
}

DEV Community: Zaid Marrie

Scrimba JavaScript Passenger Counter App

This was my HTML code:

This is my CSS styles:

This is my JavaScript Code: