Это третья неделя предварительного курса в Wecode! На этой неделе мы продолжим изучение различных концепций JavaScript. Поскольку план обучения на прошлой неделе и на этой неделе зависит от нас индивидуально, я решил пройти короткий онлайн-курс по созданию приложения-викторины с использованием HTML, CSS и JavaScript.
В целом, мне нравится мое приложение, и мне очень понравился этот курс Джеймса Куика на Udemy. Я многому научился на этом курсе, и мне еще есть что повторить, повторить и напомнить. Я всем рекомендую этот курс. Ссылка приведена ниже:
Какое приложение для викторин я сделал?
Итак, я создал приложение-викторину, которое позволяет вам решать случайно сгенерированные вопросы, связанные с компьютером / программированием. Когда вы играете в игры, он позволяет узнать, какое количество вопросов (счетчик вопросов) вы выбрали, и каждому вопросу присваивается 10 баллов, если вы правильно ответили. Когда вы нажимаете на вариант ответа, цвет (зеленый и красный) позволяет узнать, правильно вы ответили или нет.
В конце игры он позволяет вам узнать общий счет, и вы можете ввести свое имя пользователя, чтобы зарегистрироваться на высоких счетах. Ваш результат сохраняется в локальном хранилище и показывает только 5 лучших результатов на доске рекордов.
Ссылка на мою викторину следующая:
https://jessywlee.github.io/quiz-app-with-HTML-CSS-JS/
HTML и CSS
- Документация Emmet
Во-первых, я немного лучше познакомился с использованием некоторых фрагментов кода emmet на VSC. Это действительно экономит много времени, потому что вам не нужно вводить все теги, открывать и закрывать их. Я также узнал о шпаргалке по документации emmet, которая, похоже, мне очень поможет.
- Использование rem
Я впервые использовал rem на CSS. Инструктор (Джеймс Квик) на этом курсе познакомил с его использованием. Во-первых, вы устанавливаете размер шрифта 62,5% в корне. 62,5% означает 10 пикселей, поскольку по умолчанию установлено значение 16 пикселей. Затем 1 rem устанавливается на 10 пикселей и может использоваться относительно. Например, 1,8 rem будет 18 пикселей. Мне очень понравилось использовать эту меру, так как она проста и легка.
- Размер коробки
Я понял, что установка размера поля на border-box очень удобна, так как размер отступа будет включен в размер поля, чтобы вы не запутались при применении и изменении размеров.
- Эффект наведения кнопки
.btn:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
Я узнал красивый эффект наведения кнопки, который, как я ожидаю, потратит много времени на свой проект. Вышеупомянутый параметр позволяет, когда вы перемещаете курсор на кнопку, будет применяться тень, а translateY заставляет кнопку слегка перемещаться вверх, что может дать некоторый трехмерный эффект.
- Центрирующие элементы
Мне было не совсем понятно, как центрирующие элементы работают с CSS. Создавая страницу «Обо мне» на прошлой неделе, я думаю, что как-то разобрался, пробуя разные вещи, поэтому мне потребовались дополнительные пояснения. На этот раз я пояснил, что justify-content применяется к главной оси, а align-items применяется к поперечной оси. При выравнивании элементов в гибком контейнере justify-content перемещается по главной оси, которая является горизонтальной, и выравнивает элементы по поперечной оси, которая является вертикальной, поскольку по умолчанию для гибкого контейнера установлено значение row.
Это означает, что когда гибкий контейнер настроен на столбец, главная ось становится вертикальной, и наоборот.
JavaScript
- Получение API
Сначала я использовал жестко запрограммированные вопросы, которые нужно было создавать в приложении. Позже я научился использовать веб-API из базы данных открытых викторин. Ссылка находится здесь:
Open Trivia DB
Бесплатная база данных дополнительных вопросов, созданная пользователями. opentdb.com
fetch(“https://opentdb.com/…")
.then(res => {
return res.json();
})
Я узнал, что fetch () не работает для локального пути в целях безопасности, поэтому требуется схема URL https. Если вы используете локальный путь, вы можете использовать локальный сервер разработки (я загрузил живой сервер, который является расширением VSC).
fetch () вернет обещание. Я не мог полностью понять, почему мне нужно возвращать res.json () и что это значит. Согласно MDN, метод json () принимает ответ и считывает его до конца. Другими словами, когда выборка успешна, мы читаем и анализируем данные с помощью json (). Затем он возвращает обещание, которое преобразуется в объект JS. 🤯
- карта ()
.then( loadedQuestions => {
questions = loadedQuestions.results.map( loadedQuestion => {
const formattedQuestion = {
question: loadedQuestion.question};
Метод map () дает новый массив из вызывающего массива. Полученный API содержит массивы сгенерированных вопросов, правильных и неправильных ответов. map () принимает эти массивы и возвращает новый объект formattedQuestion, который имеет ключ question и значение.
- splice ()
const answerChoices = […loadedQuestion.incorrect_answers]; formattedQuestion.answer = Math.floor(Math.random() * 4) + 1; answerChoices.splice(formattedQuestion.answer-1, 0, loadedQuestion.correct_answer);
В полученном файле json правильные и неправильные ответы являются отдельными элементами. Чтобы они были в одном массиве, answerChoices присваивается массив неверных ответов.
ФорматированномуQuestion.answer присваивается случайное число от 1 до 4. Затем метод splice () используется для добавления правильного ответа в массив answerChoices. Первый параметр в splice () представляет начальный индекс. -1 применяется, потому что индекс массива начинается с 0. Второй параметр представляет deleteCount, который представляет собой количество элементов, которые нужно удалить из начального индекса. Третий параметр - это добавляемый элемент.
Допустим, ответ - 4. splice () находит индекс 3 в массиве answerChoices (который пуст). 0 удаляется, а правильный ответ добавляется в массив, поэтому в массиве четыре элемента, включая ответ.
- forEach ()
answerChoices.forEach((choice, index) => {
formattedQuestion[“choice” + (index + 1)] = choice;
});
forEach () выполняет функцию для каждого элемента массива. В качестве элементов для выполнения функции требуется функция обратного вызова и currentValue. Индекс - необязательный параметр. Каждый элемент массива answerChoices присваивается объекту formattedQuestion с именами ключей «choice1 ~ 4».
- Доступ к ресурсам - точка или квадратные скобки?
Я немного смутился, когда использовать точечную нотацию или нотацию с квадратными скобками для доступа к свойствам объекта. Я узнал, что при использовании точечной записи имя после записи должно быть действительным именем переменной и напрямую именовать свойство. Object.x получает значение ключа свойства «x». Когда используется запись в квадратных скобках, выражение в скобках оценивается и использует результат для получения имени свойства (ключа). Таким образом, обозначение квадратных скобок позволяет использовать символы, которые нельзя использовать с точечным обозначением.
Что дальше?
Я чувствую, что мне нужно больше времени, чтобы полностью понять и усвоить все функции, методы и синтаксисы, описанные в этом проекте. Хотя я мог следить за написанием кодов, наблюдая за курсом, мне было трудно перечитать и понять его после того, как я закончил проект. Как только я снова пересмотрю проект, я планирую добавить приложение на свою страницу «Обо мне». Я изменю CSS, чтобы он соответствовал моей странице, и обновлю вопросы, чтобы было веселее.
Лично я, наконец, уволился с работы в прошлую пятницу 😀 Мне очень понравился опыт работы учителем английского языка больше года. Было довольно горько покинуть класс. Я буду скучать по своим ученикам. С другой стороны, я чувствую себя прекрасно от того, что наконец-то у меня появилось гораздо больше времени, чтобы полностью сосредоточиться на учебе. В целом, очень рад тому, что нас ждет!
