Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель - продемонстрировать манипуляции с DOM с помощью JavaScript. Итак, что же конкретно он делает?

В нем есть форма, которая принимает имя владельца автомобиля, его/ее номер телефона, номерной знак автомобиля и его модель. При отправке формы выполняется проверка, после чего все данные сохраняются в таблице под названием "Припаркованные автомобили", причем каждая строка в этой таблице соответствует всем данным о припаркованном автомобиле. В конце каждой строки есть кнопка удаления, при нажатии на которую строка удаляется, а все ее содержимое переносится в таблицу, называемую таблицей поступлений.

Идея заключается в том, что вся информация о припаркованных автомобилях, которые готовы к выезду, будет передана в эту таблицу квитанций. Когда происходит эта передача, производится расчет того, сколько денег причитается каждому автомобилю, исходя из его пребывания в таблице припаркованных автомобилей. В конце каждой строки этой таблицы квитанций есть кнопка просмотра и кнопка удаления. Кнопка удаления просто удаляет строку, в которой она находится, а кнопка просмотра открывает модальное окно, содержащее все необходимые сведения об автомобиле.

Если вам интересно, что такое модал, то модал - это диалоговое окно/всплывающее окно, которое отображается поверх текущей страницы. Чтобы вернуться на текущую страницу, вы должны взаимодействовать с модалом, выполнив какое-либо действие или закрыв его.

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

В начале этой статьи я упомянул манипуляции с DOM, что же такое DOM? Когда веб-страница загружается, браузер создает объектную модель страницы, модель DOM строится как дерево объектов (элементов HTML).

В принципе, мы можем использовать DOM для манипуляции элементами HTML с помощью JavaScript. Эта манипуляция включает создание или удаление элементов HTML, добавление CSS к элементам HTML, реакцию на события HTML, добавление/изменение/удаление событий HTML и многое другое.

JavaScript видит объекты в дереве DOM как 3 типа узлов, узлы элементов (теги), узлы атрибутов (id, имя класса ...), текстовые узлы.

Katsotaanpa esimerkkiä tältä pysäköintisivustolta.

let names = document.getElementById('name');
let plate = document.getElementById('plate');
let model = document.getElementById('model');
let phone = document.getElementById('phone');

В этом фрагменте кода с помощью JavaScript я использую имя, номерной знак, модель и телефон из HTML-формы, которую я создал для получения информации о припаркованном автомобиле. Этот доступ был сделан с использованием атрибутов id, которые я определил.

Теперь давайте посмотрим фрагмент кода, как была добавлена одна из функций, которые мы видели выше, т.е. валидация формы.

Я сделал так, чтобы форма не допускала пустых сообщений, чтобы она принимала только 10 цифр в качестве номера телефона (обычно люди в Эфиопии пишут номера телефонов в виде 10 цифр) и чтобы при вводе номера не допускались пробелы.

let na = document.getElementById('name').value;
    if (na == "") {
      nameErrors.innerHTML=`<i class="bi bi-exclamation-circle"></i> Name must be filled out`;
      nameErrors.style=`color: red;font-size: 11px;margin-top:0.3em`;
      return;
  }
    if (na != "") {
      nameErrors.innerHTML= ``;
  }
  
    let pho = document.getElementById('phone').value;
    if (pho == "") {
      phoneErrors.innerHTML=`<i class="bi bi-exclamation-circle"></i> Phone Number must be filled out`;
      phoneErrors.style=`color: red;font-size: 11px;margin-top:0.3em`;
      return;
  }
  if (pho.length !=10) {
    phoneErrors.innerHTML=`<i class="bi bi-exclamation-circle"></i> Phone Number must be 10 digits`;
    phoneErrors.style=`color: red;font-size: 11px;margin-top:0.3em`;
    return;
}
    if (pho != "") {
      phoneErrors.innerHTML= ``;
  }
  
    let pla = document.getElementById('plate').value;
    if (pla == "") {
      plateErrors.innerHTML=`<i class="bi bi-exclamation-circle"></i> License plate must be filled out`;
      plateErrors.style=`color: red;font-size: 11px;margin-top:0.3em`;
      return;
    }
    if (/\s/.test(pla)) {//to make sure the plate number inserted doesn't have spaces
      plateErrors.innerHTML=`<i class="bi bi-exclamation-circle"></i> No spaces allowed`;
      plateErrors.style=`color: red;font-size: 11px;margin-top:0.3em`;
      return;
  }
    if (pla != "") {
      plateErrors.innerHTML= ``;
    }
  
    let mod = document.getElementById('model').value;
    if (mod == "") {
      modelErrors.innerHTML=`<i class="bi bi-exclamation-circle"></i> Car Model must be filled out`;
      modelErrors.style=`color: red;font-size: 11px;margin-top:0.3em`;
      return;
    }
    if (mod != "") {
      modelErrors.innerHTML= ``;
    }

После получения элементов формы с помощью их атрибутов id простым добавлением '.value' мы могли получить значение, которое они содержат внутри. После получения этих значений были использованы простые условия if, чтобы проверить, соответствуют ли они требованиям для занесения в таблицу припаркованных автомобилей.

Создание определенных JS-функций для каждой функциональности, которую я хотел добавить на этот сайт, и добавление слушателей событий к каждой кнопке для вызова этих функций было в основном ядром манипуляций с DOM, которые я хотел показать на примере.

Метод addEventListener() интерфейса EventTarget устанавливает функцию, которая будет вызываться всякий раз, когда указанное событие будет доставлено к цели.

let button= document.getElementById('btn1');
    
    button.addEventListener('click', createTable);

В нашем случае, например, при нажатии на кнопку регистрации в HTML-форме (событие) вызывается функция createTable (цель события). Эта функция содержит часть валидации формы, которую мы видели выше, и много шуток о том, как именно данные о каждом автомобиле были перенесены в таблицу parked cars.

Эти фрагменты кода являются примером, чтобы показать некоторые основные концепции, если вы хотите увидеть более подробно, пожалуйста, нажмите на ссылку в конце этой статьи.

Как должен выглядеть сайт

На изображении выше я ввел данные трех человек: Абебе - первый, Дансо - второй и Бекеле - третий. Я удалил Дансо из таблицы припаркованных автомобилей, и его данные были автоматически перенесены в таблицу квитанций.

При нажатии на кнопку просмотра открывается вот такой модал.

Для получения более подробной информации об HTML, CSS и JS, использованных при создании этого сайта, ниже есть ссылка на мой профиль на GitHub.

SB122129/Parking-Management: Простой сайт по управлению парковкой, демонстрирующий манипуляции с DOM с помощью JavaScript (github.com)