weatherApp

weatherApp

HTML уже тут

Попробуй самостоятельно создать все HTML-элементы, которые ты видишь на экране.

Подсказки

Создай заголовок первого уровня и укажи туда название своего приложения.

Подсказки

Создай элемент, в который пользователь может записывать текст. Укажи у него атрибут «‎placeholder»‎ этому атрибуту укажи вот такое значение: «‎Write the city here:»

Подсказки

После этого создай кнопку. Укажи у нее какое-нибудь название.

В нашем примере мы используем «‎Get the weather»

Подсказки

После этого создай тег для переноса строчных элементов на новую строку.

Приукрасим

Уже умеем

Обратись к селектору «звездочка» и укажи свойство для смены шрифта.

Уже умеем

Обратись к элементу «h1» укажи у него свойство:

color

Уже умеем

Обратись к элементу «h2» укажи у него свойство:

display: inline-block;

Уже умеем

Обратись к элементу «body» укажи у него свойство:

background-color: #2c3e50;

text-align: center;

Уже умеем

Обратись к элементу «input» укажи у него свойство:

width: ;

border: none;

height: ;

background-color: ;

border-bottom: ;

outline: ;

color: ;

font-size: ;

Что-то новое

Мы можем использовать селектор «::placeholder»

Он помогает нам стилизовать атрибут «placeholder»

PS: этот атрибут можно хорошо увидеть в элементе «input» с типом «text»

Что-то новое

Воспользуйся селектором «::placeholder»

Укажи у него свойства:

color:

font-size:

Уже умеем

Сделай у кнопки смену заднего фона при наведении мышкой на нее.

Уже умеем

Обратись к элементу «button» и укажи у нее свойства:

margin-top: ;

width: ;

height: ;

background-color: ;

text-transform: uppercase;

border: none;

border-radius: ;

margin-left: ;

Уже умеем

Обратись к классу «card» и укажи у него свойства:

color: ;

margin-top: ;

margin-left: ;

width: ;

border-radius: 8px;

background-color: ;

text-align: left;

padding: ;

position: ;

display: inline-block;

box-shadow: 10px 20px 4px rgba(255, 255, 255, 0.3);

Уже умеем

Обратись к классу «temp» и укажи у него свойства:

font-size: 70px;

font-weight: bold;

margin: 0px;

display: block;

Уже умеем

Обратись к классу «tempSign» и укажи у него свойства:

position: absolute;

font-size: 40px;

top: 55px;

left: 45%;

Уже умеем

Обратись к элементу «img» и укажи у него свойства:

width: 110px;

display: block;

Уже умеем

Обратись к классу «imgDescription» и укажи у него свойства:

font-size: 20px;

text-transform: uppercase;

Уже умеем

Обратись к классу «contrySign» и укажи у него свойства:

text-align: center;

background-color: ;

color: ;

border-radius: ;

width: 20%;

display: inline-block;

margin-left: 10px;

Вот эта мощь

Уже умеем

Создай переменную «input» и присвой ей выбранный HTML-элемент «input»

Уже умеем

Создай переменную «btn» и присвой ей выбранный HTML-элемент «button»

Уже умеем

Создай переменную «apiKey» и присвой "a52fa4c1cfcfa2f4214881ec92b54c72"

Что это за номер?

Данный номер - это API ключ. Мы его получаем при регистрации на сайте, который будет предоставлять нам данные. В нашем проекте мы будем работать с сервисом «Openweathermap»

Уже умеем

Создай функцию «renderACard», передай туда параметры: temp, cityName, rigeon, img, imgDescription

Уже умеем

Внутри этой функции создай переменную «newCard» и присвой ей создание элемента «div»

Уже умеем

Внутри этой функции создай переменную «cityElem» и присвой ей создание элемента «h2»

Уже умеем

Внутри этой функции создай переменную «tempElem» и присвой ей создание элемента «p»

Уже умеем

Внутри этой функции создай переменную «tempSignElem» и присвой ей создание элемента «p»

Уже умеем

Внутри этой функции создай переменную «imgElem» и присвой ей создание элемента «img»

Уже умеем

Внутри этой функции создай переменную «imgDescriptionElem» и присвой ей создание элемента «p»

Уже умеем

Внутри этой функции создай переменную «countrySignElem» и присвой ей создание элемента «p»

Уже умеем

Добавь переменной «newCard» класс «card»

Уже умеем

Добавь переменной «imgDescriptionElem» класс «imgDescription»

Уже умеем

Добавь переменной «tempElem» класс «temp»

Уже умеем

Добавь переменной «tempSignElem» класс «tempSign»

Уже умеем

Добавь переменной «countrySignElem» класс «contrySign»

Уже умеем

Вызови у переменной «cityElem» конструкцию для смены текста и присвой ей переменную «cityName»

Уже умеем

Вызови у переменной «tempElem» конструкцию для смены текста и присвой ей команду для округления переменной «temp» в меньшую сторону.

Уже умеем

Вызови у переменной «tempSignElem» конструкцию для смены текста и присвой «"°C"»

Уже умеем

Вызови у переменной «countrySignElem» конструкцию для смены текста и присвой ей переменную «region»

Уже умеем

Вызови у переменной «imgElem» конструкцию для смены ссылки на фотографию и присвой ей переменную «img»

Уже умеем

Вызови у переменной «imgDescriptionElem» конструкцию для смены текста и присвой ей переменную «imgDescription»

Уже умеем

Создай список «elemArr» и добавь в него значения:

cityElem, countrySignElem, tempElem, tempSignElem, imgElem, imgDescriptionElem

Уже умеем

Создай цикл, который будет выполняться такое же количество раз, сколько элементов находиться в списке «elemArr»

Внутри цикла добавь конструкцию для добавления в элемент «newCard» каждого элемента из списка «elemArr»

Уже умеем

Добавь в элемент «body» элемент «newCard»

Немного теории

В интернете мы обычно общаемся с сервером. Именно он предоставляет нам различные веб страницы.

Если мы забиваем в браузер https://www.facebook.com/

то идет подключение к серверу, который выдаёт нам страничку facebook

Немного теории

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

Посмотрим на примеры:

Сначала мы задаем просто https://www.facebook.com/

Потом зададаем https://www.facebook.com/friends

Страницы, которые нам будет выдавать сервер будут разными.

https://www.facebook.com/

https://www.facebook.com/friends

Немного теории

Сервер может также давать нам не только странички, но и предоставлять данные.

Например мы можем получать рандомные шутки, погоду и многие другие данные.

Немного теории

Для этого нам нужно найти API сервис, который предоставит нам эти данные.

Попробуем набрать в браузере:

joke api

Немного теории

Посмотрим, что у нас интересненького храниться во второй ссылке :)

Немного теории

Сразу видим, что перед нами открывается большая страничка с документации. Но ее не надо боятся. В этом документе написано, как делать запрос на сервер и получать от него данные :)

Немного теории

Самое главное, что нам нужно отыскать в документации к API - это API end point.

Для нас это просто ссылка, при переходе на которую мы будем получать данные от сервера.

Вот она - заветная ссылка!

Немного теории

Попробуем вставить ее в браузер :)

И посмотрим, что же нам вернет сервер

Немного теории

Что за странный текст мы получили?

Данные формат представления данных называется JSON. По сути это обычный объект JS.

Что такое объект?

Объект - это тип данных, где они представлены в виде пары:

Ключ: "значение"

Пример:

const cat = {

name: "Myska",

age: 2,

color: "grey"

}

Ты можешь увидеть код этого примера на следующем слайде

object - Replit

You can open this webpage in a new tab.

Copy link

Open in new tab

Немного теории

В данном примере нас интересует получение шутки. Поэтому мы должны достать ее по ключу «joke»

Немного теории

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

Для этого мы воспользуемся ключевым словом «async» перед нашей функцией.

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

Попробуй сам

Создай асинхронную функцию с именем «getData», передай туда параметр «city»

Немного теории

На следующем слайде мы будем работать с командой «fetch()» . Она позволяет нам сделать запрос на сервер и получить от него информацию. Перед fetch() у нас обязательно должно быть слово «await», так как без него наша асинхронная функция не будет нормально работать. Внутри круглых скобок у конструкции «fetch» мы указываем ссылку, по которой мы будем получать информацию.

Попробуй сам

После этого создаем переменную «response» и присваиваем ей конструкцию:

await fetch('https://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=' + apiKey + '&units=metric')

Попробуй сам

После этого создаем переменную «data» и присваиваем ей конструкцию:

await response.json();

Данная конструкцию конвертирует нашу информацию в JSON.

Опять теория

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

Видим, что ключи main и temp помогут нам температуру в Лондоне.

Попробуй сам

После этого создаем переменную «temp» и обращаемся к переменной «data» потом к ключу «main», а потом к ключу «temp».

PS: вот такая конструкция у тебя должна быть:

data["main"]["temp"]

Получаем название города, в котором ищем погоду

Попробуй сам

После этого создаем переменную «cityName» и обращаемся к переменной «data» потом к ключу «name».

Получаем название страны, в которой ищем погоду

Попробуй сам

После этого создаем переменную «region» и обращаемся к переменной «data» потом к ключу «sys», а потом к ключу «country».

Получаем описание картинки с погодой

Попробуй сам

После этого создаем переменную «imgDescription» и обращаемся к переменной «data» потом к ключу «weather», потом к первом элементу списка, потом к ключу «description»

Получаем саму иконку погоды

Попробуй сам

После этого создаем переменную «img» и присваиваем ей ссылку "http://openweathermap.org/img/wn/". К этой ссылке прибавляем data["weather"][0]["icon"] + "@2x.png"

Откуда берется это ссылка

Данную ссылку мы взяли с сайта «OpenWeatherMap»

При помощи конкатенации этой ссылки, названия фотографии и вот этой строки "@2x.png" мы можем получить иконку погоды.

Уже знаешь

Вызови функцию «renderACard» и передай туда параметры:

temp, cityName, region, img, imgDescription

Уже знаешь

Вызови у кнопки слушатель событий. Действие у слушателя должно быть "clcik".

В его функции создай переменную «city» и присвой ей получение значения из элемента «input»

Уже знаешь

Внутри функции слушателя событий вызови функцию «getData» с параметром «city»