Как закодировать инкрементную кнопку с помощью ванильного JavaScript

Что мы будем делать.

Мы будем создавать приложение, которое подсчитывает количество людей, нажав кнопку один раз, оно будет считаться один раз, оно будет делать это неоднократно…
Путь того, что мы будем использовать, — это JavaScript, Html и Css.. (приложение для начинающих, а не продвинутых программистов).

Введение

Поскольку сильный ветер технологий дует сильно, И это влияет на весь земной шар, я тогда замечаю, что в некоторых организациях, когда хотят посчитать количество людей, они приводят кого-то, чтобы начать считать с 1-конец. Примером такой компании является Железнодорожный вокзал. Если, например, у меня есть ежедневная обязанность пересчитать всех на вокзале с моей книгой и ручкой. Вы все согласитесь со мной, что этот метод очень напряженный.. с ванильным JavaScript я могу просто носить с собой свою систему или телефон, все, что я буду делать, это нажимать на свою кнопку и сохранять ее в конце дня…< br /> Итак, вы готовы начать со мной?

Предпосылка

Ниже приведен список элементов, которые вам нужно будет создать вместе со мной, хотя вам не нужно много.
 Sublime или vs code
 Любой браузер на ваш выбор
 Возможно, изображение

Кодирование приложения увеличения и уменьшения
Итак, здесь начинается кодирование. Ниже приведен 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" onclick="increment()">INCREMENT</button>
    <button  id="save-btn" onclick="save()">Save</button>
<p id="save-el">Previous enteries: </p>
<script src="build_a_passenger_counter_app.js"></script>
</body>
</html>

Вот код css для красоты интерфейса

body{
    background-image: url(post-img2.jpg);
    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.

let count = 0
let countEl = document.getElementById("count-el")
let count = 0
let countEl = document.getElementById("count-el")
function increment() {
    count += 1
    countEl = document.getElementById("count-el")
    countEl.textContent = count
}   
let saveEl = document.getElementById("save-el")
function save() {
    let all = count + " - "
    saveEl.textContent += all
    countEl.textContent = 0
    count = 0
}

Вау, вы много работали, чтобы добраться до этого момента. Вы только что закончили создание приложения-счетчика, которое можно использовать на любом собрании.

Заключение Вы завершили работу над приложением Counter, и до встречи в следующем уроке.

об авторе

Эммануэль Околи начал свой путь в качестве инженера-программиста в 2020 году. За эти годы он приобрел полноценные навыки в JavaScript, PHP, HTML и CSS и многом другом.

В настоящее время он работает фрилансером, создает веб-сайты для клиентов и пишет технические руководства, обучая других тому, что делает он.
Эммануэль Околи открыт и готов выслушать вас. Вы можете связаться с ним на Linked-In, Facebook, Github или на его сайте.