Сегодня курс прошел с использованием Moment.js для создания приложения обратного отсчета.
Целью урока было сделать приложение для обратного отсчета, сколько дней осталось до Рождества. Тем не менее, я решил, что сделаю его более актуальным для себя и сделаю приложение обратного отсчета, чтобы показать, сколько дней до Самоа, поскольку мы собираемся в семейную поездку в конце июня. А затем, как только я добился этого, я добавил обратный отсчет для Раротонги, почему стоит отправиться только на один тихоокеанский остров, когда вы можете посетить два за один год.
Moment.js — это библиотека, поэтому нам нужно сослаться на нее в приложении.
Во-первых, мы охватили библиотеку.
var today = moment().format('YYYY-MM-DD');
today; // returns the days date 2019-03-30
Метод isBefore() показывает, предшествуют ли дни другому дню
var then = moment('27/08/2019', 'DD/MM/YYYY')
var now = moment('27/09/2019', 'DD/MM/YYYY')
//to see if the variable of then is before the variable of now we go like this
then.isBefore(now); //returns true
Метод add() добавляет желаемое количество времени
moment().add(1, 'hour'); //adds an hour to the time
Метод diff() вычисляет разницу между двумя значениями времени.
var time1 = moment(); var time2 = moment(); //to find the difference in the time between creating the two variables time1.diff(time2, 'seconds') // 2
Тогда пришло время сделать приложение
Во-первых, я создал HTML для приложения.
HTML был базовым и содержал только изображение и одну строку слов. В демонстрационном видео они используют санту и слова «Считай дни до следующего Рождества», но так как я решил сделать это до Самоа, я сделал изображение черепахи и «Дней до Самоа». Позже добавили еще один для Раротонга.
<body> <img src="images/turtle.jpg" /> <h1>Days until Samoa</h1> <h2 id="countdown"></h2> <img src="images/raro.jpeg" /> <h1>Days until Rarotonga</h1> <h2 id="countdown2"></h2>
Он включал изображения и заголовок, а также тег h2 с идентификатором «обратный отсчет» для дней, которые должны отображаться и быть связаны с JS и CSS.
Затем я сделал CSS для веб-сайта. Я изменил цвет фона на небесно-голубой и поместил изображение в центр, используя сетку отображения и поместив элемент в центр. Затем я изменил высоту изображения, а также для большего эффекта решил сделать изображения круглыми, используя радиус границы 50%.
body {
background-color: skyblue;
display: grid;
place-items: center;
}
img {
height: 400px;
border-radius: 50%;
}
Наконец, я добавил к нему Javascript, чтобы он добавил обратный отсчет.
Сначала я создал переменную с именем now и сделал ее равной дате и времени, когда пользователь открывает приложение с помощью moment().
var now = moment();
А затем добавить переменную с именем Samoa и сделать ее равной дате, когда мы уезжаем в Самоа.
var samoa = moment('06/29/2019', 'MM/DD/YYYY');
Затем в учебнике было рассказано, как сделать так, чтобы, если дата Рождества уже наступила, добавить год к дате, поскольку Рождество происходит каждый год. Однако, к сожалению, я не думаю, что буду ездить на Самоа каждый год, поэтому я закомментировал этот код. Но было полезно знать для дальнейшего использования
if (christmas.isBefore(now, 'days')) {
christmas = christmas.add(1, 'year');
}
Чтобы узнать разницу, я объявил переменную diff и использовал метод diff().
var diff = samoa.diff(now, 'days');
Теперь я хочу поместить результаты этого сравнения в тег h2. Для этого я создал переменную с именем counter и использовал метод DOM для доступа к этому тегу h2. Для отображения содержимого я использовал свойство innerHTML, чтобы сделать его равным переменной diff.
var counter = document.getElementById('countdown');
counter.innerHTML = diff;
Как я уже упоминал выше, я затем прошел и сделал это снова для Раротонга, следуя тому же методу, описанному выше.
Затем я развернул веб-сайт с помощью Netlify https://ecstatic-bose-95c8e2.netlify.com/?fbclid=IwAR0mzuF8qSzLurx4jkAwOMZyzyfdgAd5wXH6zj4EVcNTlCC_DYQ8DqOLHlk
Затем, наконец, я захотел сделать сайт удобным для мобильных устройств, поэтому я использовал инструмент @mediascreen и сделал максимальную ширину 100%, а высоту — автоматической.
@media screen and (max-width: 768px) {
img {
max-width: 100%;
height: auto;
}
Было здорово сделать приложение, которое в настоящее время могло бы пригодиться мне в реальном мире. 90 дней до Самоа и 167 дней до Раротонги!
