Месяц любви закончился. Некоторые из нас праздновали валентинки, некоторые - нет. В Developers in Vogue мы решили проявить любовь как можно лучше. Для сообщества был организован конкурс, который был размещен в Твиттере.
Я люблю кодировать. Мне тоже понравился приз, и я постарался его получить. Угадай, что? Я сделал!! В этом посте я покажу вам, как я работал над задачей.
Поскольку задача позволяла нам использовать любой фреймворк, я выбрал свой готовый фреймворк, bootstrap. Bootstrap удовлетворяет почти все потребности CSS. Для статических файлов, например изображений и музыки, я использовал облачную систему управления файлами. Остальные функции и дизайн я использовал ванильный Javascript и CSS.
Решение
Сначала я создал целевую страницу с помощью HTML. Мне нравится простая концепция дизайна. Все, что мне нужно на целевой странице, - это таймер и кнопка для прохождения теста. Чтобы страница выглядела лучше, я добавил сердечко и цитату о любви, как показано ниже:
Для стилизации я начал с цвета фона тела. Я решил использовать градиентные цвета, так как в последнее время они популярны в дизайнерском сообществе. Я использовал инструмент под названием UIGradient для создания цвета. UIGradient имеет ряд цветовых градиентов, и я решил выбрать King Yna.
Я хотел, чтобы все мои элементы были посередине. Итак, я создал контейнер div с сердцем класса, выровняв класс и его текст посередине.
Чтобы страница выглядела более живой при загрузке, я использовал CSS, чтобы цитата о любви подпрыгивала внутрь и вниз.
Таймер обратного отсчета
Я использовал javascript для реализации таймера обратного отсчета, как показано ниже.
Сначала создайте переменную countDownDate, которая хранит время до даты обратного отсчета. Метод getTime () из объекта Date () в javascript получает время в миллисекундах с 1 января 1970 г.
var countDownDate = new Date («14 февраля 2019 г., 00:00:00»). GetTime ( );
Затем получите текущее время в миллисекундах и сохраните его в переменной now.
var now = new Date (). GetTime ();
Чтобы узнать разницу во времени между датой обратного отсчета и текущим временем, возьмите var countDownDate минус var now. Результат различия выражается в миллисекундах и сохраняется в переменной с именем distance.
var distance = countDownDate - now;
Следующий шаг - преобразовать расстояние (которое представляет собой разницу во времени в миллисекундах) в дни, часы, минуты и секунды, а затем отобразить результат на странице HTML.
var days = Math.floor (distance / ( 1000 * 60 * 60 * 24));
var hours = Math.floor ((distance% (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor ((distance% (1000 * 60 * 60)) / (1000 * 60));
var секунды = Math.floor ((distance% (1000 * 60)) / 1000);
document.getElementById («theTimer»). innerHTML = дни + «d» + часы + «h» + минуты + «m» + секунды + «s»;
Чтобы убедиться, что отрицательные дни не отображаются, проверьте, передается ли countDownDate, проверив, меньше ли расстояние, чем ноль. Если дата обратного отсчета уже в прошлом, вместо времени, оставшегося до даты обратного отсчета, отображается «EXPIRED».
if (distance ‹0) {
clearInterval (x) ;
document.getElementById («theTimer»). innerHTML = «EXPIRED»;
}
}
Викторина на День Святого Валентина
Я использовал форму для выполнения викторины. Форма отображается только после нажатия кнопки «Пройти тест». Поэтому я делаю кнопку и модальное окно, содержащие форму, доступными для JS, создавая переменные, btn и модальные, следующим образом:
var modal = document.getElementById ('myModal');
var btn = document.getElementById («myBtn»);
В CSS модальное окно скрыто с помощью display: none.
При нажатии кнопки «Пройти тест» отображается модальное окно.
Модальное окно содержит викторины. У викторин есть несколько вариантов. Поскольку пользователь может выбрать только один ответ, использовались переключатели.
Когда пользователь выбрал все ответы, результаты вычисляются в javascript. Баллы начисляются в зависимости от выбора пользователя.
Результаты и отображение результатов
Затем результаты отображаются под формой.
Полный код доступен на Github и codepen. Следующее видео содержит демонстрацию.
Https://res.cloudinary.com/dioamq4tm/video/upload/v1551361057/final.mp4
Изначально это было размещено на Eva’s Medium.
