Создание простого приложения для подсчета пользователей с помощью HTML, CSS и JavaScript
Приложение People Counter - это веб-приложение, созданное с использованием HTML, CSS и JavaScript и предназначенное для подсчета количества людей, входящих в определенную зону, например в магазин или место проведения мероприятия. Ознакомившись с руководством по проекту приложения People Counter до конца, вы улучшите свои навыки в разработке интерфейсов.
Приложение People Counter разработано таким образом, чтобы предложить простой и эффективный метод подсчета количества людей, входящих в определенную зону и выходящих из нее. Она направлена на замену ручных методов подсчета цифровым решением, которое является точным, надежным и удобным в использовании.
Предпосылки
Чтобы создать это приложение для подсчета пользователей, вам понадобятся базовые знания HTML, CSS и JavaScript. Вы должны быть знакомы с HTML для структурирования приложения, CSS для его стилизации и JavaScript для реализации логики приложения.
Для написания кода требуется текстовый редактор или IDE (например, Visual Studio Code), а для тестирования - веб-браузер. Необязательные требования включают учетную запись на GitHub для размещения приложения.
Возможности приложения People Counter
В этом проекте вы создадите приложение People Counter со следующими функциями:
- Подсчет в реальном времени: Приложение обеспечивает обновление текущего количества людей в режиме реального времени по мере того, как люди входят и выходят.
- Функция сброса: Пользователи могут в любое время обнулить счетчик.
- Простой интерфейс: Приложение имеет понятный и интуитивно понятный интерфейс, упрощающий работу пользователей.
- Адаптивный дизайн: Убедитесь, что приложение быстро реагирует и хорошо работает на разных устройствах.
Структура кода
Создайте новую папку для вашего проекта, назовите ее так, как вы хотите, и внутри нее создайте три файла с именами index.html, style.css и script.js. Эти файлы послужат основой для вашего проекта. Теперь откройте папку в текстовом редакторе или IDE (например, Visual Studio Code) и выполните следующие действия:
Шаг 1. Структура HTML:
Откройте файл index.html и вставьте следующий HTML-код для приложения «Счетчик посетителей»:
<!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">
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Carter+One&family=Cookie&family=Island+Moments&family=PT+Serif+Caption&family=Playfair+Display+SC:wght@400;700;900&family=Red+Hat+Display:wght@700;900&display=swap" rel="stylesheet">
<title>People Counter Application</title>
</head>
<body>
<h1 class="main-header">People Counter Application</h1>
<div class="container">
<h1>People Entered: </h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
<button id="decrement-btn">Decrement</button>
<button id="save-btn">Save</button>
<button id="reset-btn">Reset</button>
<p>Saved Counts: <span id="save-el"></span></p>
</div>
<script src="script.js"></script>
</body>
</html>Приведенный выше HTML-код настраивает простое приложение для подсчета пользователей. Он включает метаданные для кодировки символов, настроек области просмотра и совместимости. Он ссылается на внешний CSS-файл для стилизации и Google Fonts для пользовательских шрифтов.
Основная часть содержит заголовок, контейнер для счетчика и кнопок, а также раздел для отображения сохраненных значений. В конце приведена ссылка на JavaScript-файл script.js для обеспечения функциональности. Приложение позволяет пользователям увеличивать и уменьшать значение счетчика, сохранять значение, сбрасывать значение и отображать сохраненные значения.
Шаг 2. Создание стиля CSS:
Откройте файл style.css и вставьте следующий CSS-код для оформления приложения People Counter:
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Carter+One&family=Cookie&family=Island+Moments&family=PT+Serif+Caption&family=Playfair+Display+SC:wght@400;700;900&family=Red+Hat+Display:wght@700;900&display=swap');
/* UNIVERSAL SELECTOR STYLING STARTS HERE */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* BODY STYLING STARTS HERE */
body {
display: flex;
align-items: center;
justify-content: center;
background-image: url("https://source.unsplash.com/1600x900/?people");
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
color: white;
text-align: center;
position: relative;
min-height: 100vh;
}
.main-header {
display: block;
position: absolute;
top: 20px;
font-weight: bold;
text-transform: uppercase;
font-size: 2.2em;
background-color: black;
padding: 10px;
}
/* DIV CONTAINER STYLING STARTS HERE */
.container {
background-color: black;
width: 100%;
max-width: 500px;
padding: 2em 4em;
color: white;
border-radius: 35px;
margin: 6em 2em;
}
.container h1 {
margin-top: 2px;
margin-bottom: 10px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
font-size: 2.2em;
}
.container h2 {
font-size: 2.2em;
margin-top: 0;
margin-bottom: 20px;
}
.container button {
border: none;
padding-top: 10px;
padding-bottom: 10px;
background-color: goldenrod;
color: white;
text-transform: uppercase;
width: 250px;
margin: auto;
display: flex;
justify-content: center;
margin-bottom: 6px;
margin-top: 6px;
border-radius: 5px;
font-weight: bold;
letter-spacing: 1px;
font-size: 20px;
}
/* HOVER BUTTON STYLING STARTS HERE */
.container button:hover {
background-color: rgb(126, 91, 5);
color: white;
transition: 0.3s ease-in-out;
}
/* PARAGRAPH STYLING STARTS HERE */
.container p {
color: white;
font-size: 1.2em;
letter-spacing: 1px;
}
/* MEDIA QUERY STYLING STARTS HERE */
@media screen and (max-width: 660px) {
.main-header {
font-size: 2em;
}
}
@media screen and (max-width: 580px) {
.main-header {
font-size: 22px;
padding: 10px;
}
.container h1 {
letter-spacing: 2px;
font-size: 30px;
}
.container h2 {
font-size: 30px;
}
.container button {
padding-top: 10px;
padding-bottom: 10px;
background-color: goldenrod;
width: 200px;
font-size: 20px;
}
.container p {
font-size: 20px;
}
}
@media screen and (max-width: 360px) {
.main-header {
font-size: 1.5em;
padding: 10px;
}
.container h1 {
letter-spacing: 1px;
font-size: 22px;
}
.container h2 {
font-size: 20px;
}
.container button {
width: 120px;
font-size: 13px;
}
.container p {
font-size: 10px;
}
}Приведенный выше CSS-код стилизует приложение People Counter. Он включает в себя оформление текста, главного заголовка, контейнера, заголовков, кнопок, абзацев и адаптивный дизайн с использованием медиа-запросов.
Код устанавливает фон, стили шрифтов, цвета, расположение и отзывчивость элементов на странице, чтобы создать визуально привлекательный и функциональный пользовательский интерфейс для приложения People Counter.
Шаг 3. Логика JavaScript:
Откройте файл script.js и добавьте функциональность в приложение People Counter, используя следующий код JavaScript:
let countEl = document.querySelector('#count-el');
let incrementEl = document.querySelector('#increment-btn');
let decrementEl = document.querySelector('#decrement-btn');
let saveBtn = document.getElementById("save-btn");
let resetEl = document.querySelector('#reset-btn');
let saveEl = document.getElementById("save-el");
let count = localStorage.getItem('count') ? parseInt(localStorage.getItem('count')) : 0;
countEl.innerText = count;
incrementEl.addEventListener('click', () => {
count += 1;
countEl.innerText = count;
});
decrementEl.addEventListener('click', () => {
count -= 1;
if (count < 0) count = 0;
countEl.innerText = count;
});
resetEl.addEventListener('click', () => {
count = 0;
countEl.innerText = count;
});
saveBtn.addEventListener('click', () => {
let countStr = `${count} - `;
saveEl.textContent += countStr;
localStorage.setItem('count', count);
countEl.textContent = 0;
count = 0;
});Приведенный выше код на JavaScript определяет функциональность приложения People Counter. Оно выбирает различные элементы из HTML-документа, инициализирует переменную count и настраивает прослушиватели событий для кнопок увеличения (increment), уменьшения (decrement), сброса (reset) и сохранения (save).
Код увеличивает и уменьшает счетчик в зависимости от нажатия кнопки, сохраняет его в локальном хранилище, при необходимости сбрасывает и соответствующим образом обновляет отображение. Приложение позволяет пользователям взаимодействовать со счетчиком, сохранять значения и возвращать их к нулю.
Тестирование и отладка
Чтобы протестировать приложение в вашем веб-браузере, выполните следующие действия:
- Открытие HTML-файла: Убедитесь, что вы сохранили все файлы HTML, CSS и JavaScript в той же папке, что и указано ранее. Затем откройте HTML-файл в своем веб-браузере, дважды щелкнув по нему. Это откроет файл в вашем веб-браузере по умолчанию.
- Проверка элемента: Как только приложение будет загружено в браузер, щелкните правой кнопкой мыши на странице и выберите “Проверить” или нажмите “Ctrl+Shift+I”, чтобы открыть инструменты разработчика. Это позволит вам увидеть любые ошибки в консоли и проверить элементы на странице.
- Тестирование функциональности: взаимодействие с вашим приложением для проверки его функциональности. Это поможет вам выявить любые ошибки или неполадки в вашем коде.
- Отладка: Если вы столкнетесь с какими-либо ошибками или проблемами, используйте консоль в инструментах разработчика для отладки вашего кода JavaScript. Ищите сообщения об ошибках и номера строк, чтобы точно определить, где возникает проблема.
- Внесение изменений: Если вам нужно внести изменения в свой код, вернитесь в редактор кода, внесите необходимые корректировки, сохраните файл, а затем обновите браузер, чтобы увидеть изменения, отраженные в вашем приложении.
Полученные знания
Этот проект научил меня важности планирования и разработки логики приложения перед написанием кода. Я также улучшил свое понимание стилей CSS, событий JavaScript и манипуляций с DOM, которые имеют решающее значение для создания интерактивных веб-приложений.
Развертывание
Проект приложения People Counter доступен на страницах GitHub, и к нему можно получить доступ онлайн, перейдя по ссылке ниже:
Протестировать приложение: https://wasiu-akindoyin.github.io/People-Counter-Web-Application/
Вы можете получить доступ к репозиторию GitHub здесь, чтобы просмотреть исходный код или внести свой вклад в его разработку.
Заключение
Приложение People Counter — простой, но эффективный инструмент для отслеживания количества людей, входящих в определенную зону. Благодаря удобному интерфейсу и простым возможностям настройки его можно адаптировать к различным сценариям использования. Приложение People Counter может изменить правила игры в управлении мероприятиями, предоставив организаторам мощный инструмент для оптимизации операций, оптимизации впечатлений посетителей и достижения успеха.
Спасибо, что дочитали до конца, и увидимся в следующем выпуске.
