Типология сетевых СМИ. 3 курс. Лабораторное занятие №3. Валютный парсер

апреля 24, 2020

Типология сетевых СМИ. 3 курс. Лабораторное занятие №3. Валютный парсер

Вам нужно создать валютный парсер, который в режиме реального времени будет отображать кросс-курсы валют.
Для этого потребуется:
I) Параметры стилей в CSS
II) Библиотека Font Awesome с валютными иконками
III) Библиотека JavaScript с минимальными параметрами
IV) Источник данных о валютных курсах
V) Сценарий JavaScript отображения валютных данных
VI) HTML, где будет отображаться валютный парсер

I) Параметры стилей в CSS

1) Указываем шрифт из набора Google. Выберите свой: https://fonts.google.com/

@import url(https://fonts.googleapis.com/css?family=Roboto);

2) Открываем селектор основного блока и задаем в нем размеры (в зависимости от темы, у меня - 50%).
Обратите внимание, что для отображения каждого валютного блока используется параметр гибкого контейнера - display: flex.
Его нужно указать в классе виджета (widget), иконки (icon) и информации (info).
Он позволяет в том числе расположить элементы горизонтально. В основном блоке вы указываете тот же шрифт, что и в предыдущем пункте:

body {
height: 50%;
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
font-family: "Roboto", sans-serif;
letter-spacing: 1px;
font-size: 17px;
}

3) Для того чтобы оформить парсер, нужно создать внешний контейнер. Это можно сделать указав класс box с высотой и шириной в процентах.
Размеры также зависят от темы. Я использовал высоту и ширину в 80%.

4) Открываем класс виджета, задаем размеры, отступ и добавляем вариант отображения:

.widget {
height: 50%;
width: 50%;
flex-direction: row;
margin-top: 50px;
}

5) Теперь класс первого элемента:

.widget:first-child {
margin-top: 0;
}

6) Классы производных с полями иконок валют. Фоновые цвета замените на свои:

.widget:first-child .icon {
background: blue;
border-bottom: 1px solid #2b506e;
}

.widget:nth-child(2) .icon {
background: lightcoral;
border-bottom: 1px solid #784040;
}

.widget:nth-child(3) .icon {
background: darkseagreen;
border-bottom: 1px solid #396039;
}

7) Класс иконки:

.icon {
height: 75px;
width: 75px;
color: #FFF;
justify-content: center;
align-items: center;
border-top-left-radius: 5px;
}

8) Класс основного информационного поля виджета:

.info {
height: 75px;
width: 250px;
background: #FFF;
color: #333;
align-items: center;
justify-content: space-around;
flex-direction: row;
border-top-right-radius: 5px;
border-bottom: 3px solid #777;
}

9) Класс значений валют и их названия. Здесь добавьте свой цвет шрифта:

.info div:nth-child(2) {
font-size: 29px;
}

10) Селектор названия валюты - при необходимости можете изменить размер шрифта,
если текстовое поле у вас не будет помещаться в виджет:

span {
margin: 0;
padding: 0;
font-size: 14px;
}

II) Библиотека Font Awesome с валютными иконками

11) Просто встройте стандарты Font Awesome далее в HTML, используя ссылки:

https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

III) Библиотека JavaScript с минимальными параметрами

12) Загрузите библиотеку в google sites и затем встройте перед закрывающим тегом </body>
Взять ее можно здесь: https://sites.google.com/site/konoplevmedia/23jquery.js

IV) Источник данных о валютных курсах

13) Чтобы на странице отображались актуальные курсы валют, их нужно загрузить из любого сервиса, предоставляющего актуальные данные в режиме реального времени. Вам нужно выбрать три валюты и решить в чем будет показан их курс (классический вариант - конвертация выбранной вами валюты в рубль). Все необходимые идентификаторы валют можно взять здесь: https://currencylayer.com/currencies

V) Сценарий JavaScript отображения валютных данных

14) Чтобы запустить парсинг курсов, нужно создать сценарий запроса данных. Для этого в переменной вы указываете название выбранных исходных валют. В моем примере это евро, доллар и британский фунт:

$(document).ready(function(){
var eur = document.getElementById("eur");
var usd = document.getElementById("usd");
var gbp = document.getElementById("gbp");

15) Теперь нужно прописать условия в логическом операторе JavaScript. Для этого в URL каждого блока указывается источник конвертации валют.
Вам нужно указать в ссылке исходную валюту и валюту конвертации, после чего проверить открывается ли скрипт по ссылке, если да, то вставить соответствующую ссылку в каждое из полей адресации (их три).
Формат ссылки: https://currency-api.appspot.com/api/EUR/RUB.jsonp

Обратите внимание, что исходная валюта дана в парсинге, а конечная валюта отображения указана внутри тега span - у меня везде рубли.

$.when(
$.ajax({
url: 'поле адресации',
dataType: "jsonp",
data: {amount: '1.00'},
success: function(res) {
eur.innerHTML = parseFloat(res.rate).toFixed(2) + " <span>руб</span>";
},
error: function(res) {
console.log('Error: ' + res);
}
}),
$.ajax({
url: 'поле адресации',
dataType: "jsonp",
data: {amount: '1.00'},
success: function(res) {
usd.innerHTML = parseFloat(res.rate).toFixed(2) + " <span>руб</span>";
},
error: function(res) {
console.log('Error: ' + res);
}
}),
$.ajax({
url: 'поле адресации',
dataType: "jsonp",
data: {amount: '1.00'},
success: function(res) {
gbp.innerHTML = parseFloat(res.rate).toFixed(4) + " <span>руб</span>";
},
error: function(res) {
console.log('Error: ' + res);
}
})
).then(function() {
console.log('All complete!');
});
});

VI) HTML, где будет отображаться валютный парсер

16) Вы создаете новое сообщение в блоге и сначала указываете традиционные параметры - доктайп, язык, кодировку, заголовок.

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Валюта</title>

17) Встраиваете библиотеки Font Awesome и ваш CSS, закрываете тег <head>

18) Открываете тег <body> и внутри него создаете через тег div класс box, после этого пустое поле заголовка в теге h1

19) Открываем класс виджета и класс иконки. Внутри класса иконки встраиваете нужный вам валютный символ Font Awesome - в случае со стандартными валютами название совпадает с аббревиатурой валюты, которую вы использовали выше, когда создавали JavaScript сценарий. Найти код Font Awesome можно по запросу currencies или названию валюты на сайте библиотеки: https://fontawesome.com/

Например, блок для евро:

<div class="widget">
<div class="icon"><i class="fa fa-eur fa-2x"></i></div>

20) Теперь в классе информации указываем валюту - в том числе с id и закрываем все открытые параметры:

<div class="info">
<div>1 EUR</div>
<div><div id="eur"></div>
</div>
</div>
</div>

21) Аналогичным образом добавляете вторую и третью валюту.
22) Встраиваете библиотеку JavaScript и сам скрипт, после чего закрываете теги <body> и <html>. Если все верно, то парсер валют будет отображаться с реальными данными как в примере ниже.

!) Дополнительное задание на внимательность: сделайте так, чтобы валютные курсы отображались не столбиком, а по-горизонтали (как в моем примере).

Валюта