скринкаст web4

articles/web_04.md

@@ -21,30 +21,355 @@
 
 > 39 минут 
 
+Ниже приведен вольный пересказ этого скринкаста с переписыванием под `Vue3 + script setup`. Т.е. сначала просмотрите видео, чтобы понять о чём идет речь, а потом по пересказу попробуйте реализовать пример.
+
 * [YouTube](https://www.youtube.com/watch?v=0MEpPU3rWCk)
 * [RuTube](https://rutube.ru/video/5a7fa691b1fae3c7fa0d0dbf47dbfbdd/)
 
-**Содержание**
+### Материалы к заданию
 
-* описание проекта
-* создание нового проекта
-* удаление лишего
-* добавление вёрстки и стилей
-* data, methods
-* привязка (v-model), интерполяция
-* подписывание на события (v-on)
-* структурные директивы (v-for, v-if)
-* добавление/удаление тикеров
+1. [Исходный HTML/CSS для самостоятельного повторения](https://gitlab.com/vuejs-club/youtube-course/cryptonomicon-html)
+1. Материалы к изучению: под роликом на ютубе куча ссылок, но в принципе там раздел "Основы" от [Синтаксиса шаблонов](https://v3.ru.vuejs.org/ru/guide/template-syntax.html) до "Работы с формами"
+1. [Исходный код урока](https://gitlab.com/vuejs-club/youtube-course/cryptonomicon/-/tree/lesson1)
+1. [API для получения ключа:](https://www.cryptocompare.com/)
 
-**Материалы**
+**Расшифровка скринкаста** (вольный пересказ своими словами)
 
-1. [Исходный HTML/CSS для самостоятельного повторения](https://gitlab.com/vuejs-club/youtube-course/cryptonomicon-html)
+>**Внимание**, сегодня мы с вами напишем очень и очень плохой код почему так и зачем мы это
+сделаем мы это сделаем потому что когда вас учат писать сразу хороший код вас учат решать задачу одним способом рано или поздно вы сталкиваетесь задач и решения которые вы не знаете и оказываетесь ситуации когда не понимаете хорошие ваше решение или плохое мы с вами вначале напишем плохой но к сожалению распространенный код и шаг за шагом в рамках этой серии видео будем его улучшать у нас как и в реальной жизни будут появляться новые требования заказчика мы будем находить какие-то баги сами уже у себя и сами героический фиксить и так далее таким образом на выходе вы не только получите хороший код для решения этой задачи но и понимание как глядя на код понять что он действительно плохой 
 
-1. Материалы к изучению: под роликом на ютубе куча ссылок, но в принципе там раздел "Основы" от [Синтаксиса шаблонов](https://v3.ru.vuejs.org/ru/guide/template-syntax.html) до "Работы с формами"
+>В рамках расшифровки скринкаста я сразу буду переписывать его на Vue3, используя `vite` + `script setup`
 
-1. [Исходный код урока](https://gitlab.com/vuejs-club/youtube-course/cryptonomicon/-/tree/lesson1)
+### Описание проекта
 
-1. [API для получения ключа:](https://www.cryptocompare.com/)
+Чем же мы с вами займемся? Мы с вами напишем небольшое приложение, которое позволяет добавлять в список отслеживания криптовалюты, используя **api** `cryptocompare.com`.
+
+Соответственно мы будем иметь возможность добавить криптовалютные пары "имя валюты - USD" в наблюдение и, когда мы выбираем конкретную валюту, у нас внизу появляется график отслеживания. Мы можем убрать выбрать другую пару и вот сейчас постепенно шаг обновления 1 5 секунд у нас будут появляться собственно данные
+о изменение вот соответственно график автоматически адаптируется под минимальные и максимальные значения поэтому в начале он может выглядеть странно но со временем он нормализуется. 
+
+График нам не очень интересно всем мы можем что-то удалить мы можем добавить криптовалюту мы можем так далее ну и когда мы обновляем страницу у нас очевидно встречает пустой экран вот мы добавляем в начале черточка когда нету данных и потом когда данные приезжают кто у нас там еще есть bitcoin кэш допустим у нас будут вот обновляться что у нас есть на входе на входе дизайнер
+нам выдал вот такой вот завершены html с него мы и будем начинать и он и ставит станет нашей отправной точкой 
+
+### Создание нового проекта, удаление лишего
+
+В домашнем задании [первой лекции](./web_01.md) вы должны были научится создавать приложене **Vue**. Откроем его и удаляем "рыбу": 
+
+* нам не нужны директории `src/assets` и `src/components` (весь код пока будем писать в `App.vue`)
+* в `App.vue` удаляем всё из скрипта и шаблона (стили вообще удаляем)
+
+    ```vue
+    <script setup>
+    </script>
+
+    <template>
+    empty
+    </template>
+    ```
+
+* в `main.js` комментируем строчку с импортом `./main.css`
+
+Можем запустить проект командой `npm run dev` и посмотреть на пустое окно, убедившись заодно, что нет ошибок
+
+### Добавление вёрстки и стилей
+
+В [материалах](#материалы-к-заданию) есть ссылка на файлы с вёрсткой. 
+
+1. Скопируйте содержимое `<body>` из файла `index.htm` в ваш шаблон (внутрь тега `<template>` вместо слова **empty**)
+
+    Все сработало. Как видите все подключилось но выглядит как-то криво 
+    
+    ![](../img/web_008.png)
+    
+    Очевидно нам нужны стили. Как можно подключить `css`? В рамках скринкаста стили добавлены прямо в файл `App.vue`, но мы сделаем более правильно: скопируйте файл `app.css` в каталог `src/assets` и в файле `main.js` раскомментируйте и поправьте строчку с импортом файла стилей
+
+    ```js
+    import './assets/app.css'
+    ```
+
+    Почему-то в проекте на `vite` показывает крутилку на весь экран, удалите из вёрстки первый `<div>` с этим спиннером (у меня он закомментирован)
+
+    ![](../img/web_010.png)    
+
+    Теперь всё выглядит "красиво"
+
+    ![](../img/web_009.png)
+
+### Начинаем работу с App.vue
+
+Сегодня все наше внимание будет приковано к файлику `App.vue`. 
+
+Итак, что нам надо? Будем двигаться сверху вниз,     оживляя эту страницу. Первое что нам надо это научиться заполнять поле "Тикер" и, когда нажимается кнопка "добавить", реагировать на нажатие.
+
+Как мы помним, сильной стороной **Vue** является так называемое **двухстороннее связывание**, когда мы можем определить что-то в данных java-скрипта и вывести это что-то на экран. И когда что-то на экране поменяется оно автоматически изменится в приложении. 
+
+Ну что же давайте учиться это делать. Как вы помните **vue** декларативен. Что это означает? Это означает, что нам надо будет выучить по сути язык описания компонентов, благо он не сложный. То есть у нас есть несколько заранее зарезервированных слов, с помощью которых мы будем объявлять те или иные не побоюсь этого слова особенности компонент.
+
+>Дальше в скринкасте расписывается функция `data()`, которая возвращает реактивные данные, доступные в шаблоне. Но это устаревший синтаксис `Option API` из **Vue2**, во **Vue3** стандартом является `Setup API`, причем имеющий два варианта написания: функция `setup()` и `script setup`. Мы будем использовать `<script setup>`.
+
+Просто определим [реактивную](https://ru.vuejs.org/guide/essentials/reactivity-fundamentals.html) переменную:
+
+```vue
+const ticker = ref('default')
+```
+
+Задав ей значение по умолчанию (`'default'`) просто чтобы мы увидели как же осуществляется "двухстороннее связывание". Как вы помните, **vue** это **html-first** фреймворк, это означает что мы пишем html, а дальше с помощью специальных атрибутов и интерполяций подсказываем как связать наш html с данными и первый атрибут (все атрибуты которые используют **vue** начинаются c `v-`) это `v-model`.
+
+`v-model` как раз говорит "свяжи мне в две стороны вот этот вот input с данными (переменной _ticker_)"
+
+![](../img/web_011.png)
+
+![](../img/web_012.png)
+
+И вот у нас в поле ввода появилось значение `default`, но перед тем как что то делать я бы хотел убедиться что связь работает в обе стороны, т.е. когда правим поле ввода меняется и значение переменной.
+
+#### [Интерполяция](https://ru.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)
+
+Мы используем так называемый синтаксис интерполяции...  это вот такие две фигурные скобки. Обратите внимание их можно использовать только в тех местах где вы вводите текст просто на странице. То есть я не могу его использовать где-то внутри атрибута, только там где просто обычный текст. И я пишу точно также `ticker` и смотрите видите вот она магически обновляется мы научились с вами связывать переменные в две стороны это работает c инпутами, чекбоксами, с радио батонами. Потом мы научимся писать наши собственные компоненты которые умеют работать с `v-model` 
+
+```vue
+<label 
+    for="wallet" 
+    class="block 
+        text-sm 
+        font-medium 
+        text-gray-700"
+>
+    Тикер {{ ticker }}
+</label>    
+```
+
+Давайте что-нибудь с этим сделаем а что мы можем с этим сделать? мы теперь знаем как выводить как же вот я нажимаю "добавить" я хочу чтобы что-то произошло.
+
+Как бы мы это делали в обычном java-скрипте? Мы нашли бы элемент на страничке через query-селектор, добавили слушатель на события клик и после этого сказали бы
+какую функцию вызывать.
+
+Во вью все работает похожим образом. Мы пишем `v-on:click="..."` (мы говорили что все атрибуты **vue** начинаются с `v-`), дальше имя события клик. Мы здесь можем
+написать к примеру обычный java-скрипт код (`"ticker = 123"`) и смотрите нажимаю кнопку "добавить", видите в переменную `ticker` записалась значение `123` и она автоматически изменилась.
+
+Но согласитесь писать код прямо в верстке как то супер странно, поэтому мы хотим чтобы код можно было писать рядом с вёрсткой (вспоминаем про **SFC**)
+
+>В оригинальном видео рассказывается про ключевое слово `method`, но это тоже устаревший синтаксис.
+
+Мы просто в `<script setup>` пишем функцию (напомню, что в шаблоне видны все имена, описанные в скрипте, а название функции это тоже имя)
+
+```js
+<script setup>
+import { ref } from "vue";
+
+const ticker = ref('default')
+
+function add () {
+  alert('Я работаю!')
+}
+</script>
+```
+
+Обратите внимание здесь можно будет потом передавать аргументы, то есть в 99% случаях надпись `add` и `add()` абсолютно одинаковы, то есть если **vue** видит надпись, что при событий клик вызов функции `add`, он понимает что
+это функцию надо вызвать а если он видит вот так `add()` "о, это же выражение я вот беру и вызываю функцию add".
+
+Итак пробуем: выводится алерт
+
+Хорошо, но нам же хочется в скрипте дотянуться до значения, введенного в input. Как же нам это делать?
+
+>...`this` используется только во **Vue2**, во **Vue3** используется ЗНАЧЕНИЕ реактивной переменной
+
+```js
+function add () {
+  alert(ticker.value)
+}
+```
+
+Проверяем, действительно вывелось ровно то значение которое введено в `input`.
+
+Подождите, я хочу ещё, чтобы это событие срабатывало, когда я нажимаю кнопку `Enter` (дальше я пропустил полет мысли и привожу финальный результат: `v-on:keydown.enter` - при возникновении события нажатия клавиши `Enter` выполнить функцию `add`)
+
+```js
+<input
+    v-model="ticker"
+    v-on:keydown.enter="add"
+    ...
+```
+
+Дальше реализуем список тикеров. Очевидно что нам надо как-то научиться повторять какие-то вещи.
+Очевидно что повторять нам надо что то, что то это скорее всего будет массивом.
+
+Создадим в скрипте массив тикеров: просто объявляем переменную
+
+```js
+const tickers = ref([1, 2, 3, 4])
+```
+
+#### [Отрисовка списков](https://ru.vuejs.org/guide/essentials/list.html)
+
+Как сказать **vue** "повтори какую-то вещь несколько раз"?
+
+Во-первых, что за вещь мне надо повторять? Нужно в верстке найтие место, которое повторяется, удалить лишние повторы и использовать так называемую структурную директиву (директивами называются атрибуты которые обрабатываются **vue** опять же существенное упрощение но пока сойдет и
+так) `v-for`. У нас есть две ключевые структурные
+директивы мы потом поговорим почему они являются структурными но пока запомнить `v-for` и `v-if` они настолько суровы что даже друг с другом не дружат.
+
+`v-for` работает точно также как цикл `for of` (или `for in`)...
+
+```vue
+<div
+    v-for="t in tickers"
+    v-bind:key="t"
+    ...
+```
+
+>Я много раз повторял, что название переменных должно быть самоочевидным и, по идее, переменная цикла должна называться `ticker`, но в этом случае она будет "перекрывать" одноименную переменную из скрипта. Нужно либо переименовать в скрипте переменную `tiker` в `tickerName` (мы не будем этого делать, чтобы не рассинхронизироваться со скринкастом), либо использовать переменную цикла `t` (для циклов и лямбда функций допускается использование однобуквенных переменных цикла)
+
+Этот код говорит "для всех tickers повтори пожалуйста вот этот блок". Дальше нам выдаст ошибку про `key`.
+
+Для циклов нужно использовать констукцию `v-bind:key="уникальное значение"`. В нашем случае мы можем использовать просто значение `t`, но есть синтаксис `v-for` c индексом:
+
+```vue
+<div
+    v-for="(t, index) in tickers"
+    v-bind:key="index"
+    ...
+>
+    <div 
+        class="px-4 py-5 sm:p-6 text-center">
+        <dt 
+            class="text-sm font-medium text-gray-500 truncate"
+        >
+            {{ t }}
+        </dt>
+```
+
+Давайте чуть-чуть доведем до ума, но перед этим сделаем маленький шаг назад дело в том что в мире **vue** огромное количество раз вы будете писать в `v-bind` и `v-on`.
+
+Писать вот так очень многословно поэтому придумали так называемую короткую запись отдельные люди называют
+их ярлыками, когда вместо `v-on` мы пишем собаку `@`, а вместо `v-bind` просто ничего не пишут, оставляют только  `:`.
+
+Хорошо уже похоже на правду давайте мы сделаем еще что-то а что ещё нам же надо выводить у нас тут какой-то глупый массив только со строками. 
+
+Нам надо выводить будет явное имя валюты и значение соответственно наш массив будет выглядеть как то так:
+
+```vue
+const tickers = ref([
+    { name: 'DEMO', price: '-' },
+    { name: 'DEMO', price: '-' },
+    { name: 'DEMO', price: '-' }
+])  
+```
+
+![](../img/web_013.png)
+
+Видите, теперь он начал выводить переменную `t` которая содержит весь объект и радостно нарисовал строковое представление объекта. Нам надо вывести поля `name` и `price`:
+
+```vue
+<dt class="text-sm font-medium text-gray-500 truncate">
+    {{ t.name }}
+</dt>
+<dd class="mt-1 text-3xl font-semibold text-gray-900">
+    {{ t.price }}
+</dd>
+```
+
+#### Добавление элементов
+
+Давайте научимся для начала добавлять такие элементы плюс давайте приведем это всё в тот дизайн который
+был а именно добавим USD в пару:
+
+```vue
+<dt class="text-sm font-medium text-gray-500 truncate">
+    {{ t.name }} - USD  
+</dt>
+```    
+
+Берём "рыбу" объекта и реализуем добавление её в массив `tickers` в функции `add`
+
+```js
+function add () {
+  const newTicker = { 
+    name: 'DEMO', 
+    price: '-' 
+  }
+  tickers.value.push(newTicker)
+}
+```
+
+>Не забываем, что обращение к значению реактивной переменной происходит через свойство `.value`
+
+Хорошо теперь только нам осталось вместо имени
+подставить название нового тикера:
+
+```js
+function add () {
+  const newTicker = { 
+    name: ticker.value,
+          ^^^^^^^^^^^^^ 
+    price: '-' 
+  }
+  tickers.value.push(newTicker)
+}
+```
+
+Теперь хочется очищать тикер когда он добавился в массив. Вспомним что у нас связь и двухсторонняя
+и просто запишем в тикер пустую строку нажимаем добавить и вот все испарилось
+
+```js
+function add () { 
+    const newTicker = { 
+      name: ticker.value, 
+      price: '-' 
+    }
+    tickers.value.push(newTicker)
+    ticker.value = ''
+}
+```
+
+Обратите внимание это фундаментальный акцент на том как вообще работает **vue** мы хотим и умеем работать с данными html декларативно мы же теперь с вами знаем это слово описываем как к этим данным привязываемся мы никогда не меняем html напрямую 
+
+#### Удаление пар
+
+Хорошо давайте двигаться дальше мы берем и хотим удалять прекрасно давайте найдем эту кнопочку удалить вот она мы с вами уже знаем что мы вешаем события клик и назовем `handleDelete` а теперь смотрите если мы вот так напишем как мы поймем какой элемент надо удалять да черт его знает она же просто клонируется и все эти кнопочки будут вызывать один и тот же метод. очевидно нам надо как-то передать туда параметры помните рассказал что там скобочки и без скобочек это одно и то же. а почему да потому что мы здесь можем писать java-script поэтому мы можем написать `@click="handleDelete(t)"
+
+```vue
+<button
+    @click="handleDelete(t)"
+    ^^^^^^^^^^^^^^^^^^^^^^^^
+```
+
+"Пожалуйста удали наш тикер, который лежит в массиве tickers". Звучит круто ну что давайте напишем этот `handleDelete`  
+
+```js
+function handleDelete (tickerToRemove) {
+  tickers.value = tickers.value.filter(
+    t => t != tickerToRemove
+  )
+}
+```
+
+#### v-if
+
+Удаление работает, только вот видите некрасивый вот эти две полосочки 
+
+![](../img/web_014.png)
+
+Мы бы хотели, чтобы их не было, чтобы этот кусок вообще не отображался, когда у меня нет данных.
+
+1. Находим (с помощью инспектора) тег, который хотим скрыть.
+1. Добавляем структурный атрибут `v-if`
+1. Если хотим скрыть несколько не вложенных тегов, то можем завернуть их в тег `template`
+
+```vue
+<template
+    v-if="tickers.length > 0">   
+```
+
+## Итоги
+
+Сегодня мы с вами:
+* познакомились со структурой vue файла
+* научились добавлять в скрипт функции и реактивные переменные
+* научились двухстороннему связыванию с помощью директивы `v-model`
+* научились подписываться на события через `v-on` или краткую запись `@`
+* научились выводить данные в шаблон через скобочки то что называется интерполяцией
+* научились двум ключевым структурным директивам `v-for` и `v-if`
+* научились добавлять элементики, удалять, передавать в
+обработчике события аргументы
 
 ---
 

articles/web_05.md

@@ -1,21 +1,443 @@
 [К содержанию](../readme.md#введение-в-web-разработку)
 
-# Как во Vue.js использовать Х - Vue.js: нюансы
+# Vue.js
 
-<!-- 8 минут -->
+## #11 Криптономикон-2
 
-1. [#4 Как во Vue.js использовать Х - Vue.js: нюансы](https://www.youtube.com/watch?v=orWKmX4xO1g)
+* [YouTube](https://www.youtube.com/watch?v=Xzx8SCzrfXU)
+* [RuTube](https://rutube.ru/video/416aafd2b46e27b5abfe7afb542393f1/)
 
-https://rutube.ru/video/6f51b9dcda036a5b6903b4c745bac322/
+**Материалы к скринкасту:**
 
-1. Продолжаем изучать [JavaScript](https://learn.javascript.ru/symbol)
+* [Исходный HTML/CSS для самостоятельного повторения](https://gitlab.com/vuejs-club/youtube-course/cryptonomicon-html)
+* [реактивность во Vue3:](https://ru.vuejs.org/guide/essentials/reactivity-fundamentals.html)
+* [Исходный код урока](https://gitlab.com/vuejs-club/youtube-course/cryptonomicon/-/tree/lesson2)
+* [API для получения ключа:](https://www.cryptocompare.com/)
+
+**Расшифровка скринкаста:**
+
+>**Дисклеймер** Код который мы пишем в рамках этого урока все еще является недостаточно хорошим для продакшена. Прежде чем пытаться нести эту практику в реальные проекты пожалуйста посмотрите серию видео с разработкой этого приложения до конца
+
+Мы с вами освоили _добавление_ и _удаление_ элементов. Давайте добавим еще и выбор потому что
+при выбранном элементе должен отображаться вот этот график
+
+
+
+ с этим
+достаточно просто мы берем и говорим так
+выбор выбранный элемент изменяется с
+течением времени когда мы слышим что
+что-то меняется с течением времени мы
+говорим это состояние назову его sale
+первоначально ничего не выбрано поэтому
+ну хорошо и очевидно что при клике по
+элементу я хочу выбирать записывать в
+сел то что было выбрано да' поэтому игры
+вот мой before en-tee-ter си при клике
+записывать и заодно демонстрируя что вот
+здесь можно писать
+напоминают шрифтовые выражения не только
+вызовы функций как мы проверим что у
+меня что-то выбралось давайте для теста
+выведем сау вот так обновлю страничку и
+вот видите действительно меняется и
+теперь я могу дописать логику чтобы вот
+этот блок отображался только когда у
+меня есть сау вот это section
+если сел и точно также
+извините давайте писать правильно и он
+говорит так вы их пожалуйста давайте мы
+разместим дом и говорю что при клике на
+кнопочку устанавливаем
+сел вынул проверяем выбралась закрылась
+работает круто правда
+убираю вывод нашего сел
+хорошо двигаемся дальше в нашем случае
+мы хотим чтобы у нас выделялись цветом
+как происходит выделение цветом у нас
+тут написано что видите border иметь
+цвет карпова 700 он solid единственное
+чего нам не хватает css класса который
+указывает толщину борта ран
+как же мы это делаем мы уже знаем что
+для того чтобы прицепить
+атрибут к классу мы можем написать :
+глаз и здесь мы можем написать если села
+равен т то пустая the border 4 в
+противном случае пустая строка мы не
+можем здесь написать их почты их ничего
+не возвращает
+а так у нас будет жива скриптовые
+выражение до тернарный оператор
+смотрите 1 работает здесь я хочу
+обратить ваше внимание на то что это
+абсолютно нормально совмещать в одном
+определении
+просто допустим класс через равно и
+через двоеточие
+это означает что вот эта статическая
+часть это динамическое текст но
+согласитесь выглядит дико уродливо
+поэтому для классов view предлагает
+несколько синтаксиса синтаксис массивов
+с ним можете ознакомиться сами он менее
+распространен
+а часто же используют так называемый
+объектный синтаксис когда мы здесь пишем
+объект в котором ключами являются имена
+классов в моем случае the border 4 а
+значением логическое выражение который
+отвечает надо ли добавлять этот класс
+или нет то есть я пишу вот так и это
+читается добавь класс border 4 если сел
+равен то обратите внимание здесь точно
+также может быть вызов метод
+а вот мы добились желаемого так и
+давайте оживим чтобы здесь было не везде
+раз мы теперь знаем а мы можем написать
+сел на эбу
+обновляем и 50 м от вадима 3 так жмем
+dima 2
+удалить ой а как так получилось что
+нажал кнопку удалить а выбралась
+происходит это потому что так работает
+жира скрипт
+да вы кликаете на кнопочку которая
+находится здесь
+генерируется события и это событие как
+вы прекрасно знаете начинает всплывать
+что означает всплытия события для нас
+оно означает что все элементы в которые
+вложены это а это в том числе и наш
+элемент тоже получат события клик и
+соответственно будет нехорошо что мы
+можем сделать мы можем вспомнить что в
+удалить приходит ивенты сделать ему что
+мы делаем java скрипте стоп про погибшим
+до прекратить всплыть и новью и здесь
+нам помогает и поэтому у нас для клика
+где наша кнопочка удалить вот она точно
+также для всех событий есть модификатор
+стоп прекратить всплытие давайте
+проверим на всякий случай обновлю
+страничку ветер дома 2 больше не
+выбралась это не единственный
+модификатор со списком модификаторов
+рекомендую ознакомиться самостоятельно
+хорошо теперь давайте пора начинать
+ходить за реальными данными для того
+чтобы ходить за реальными данными мне
+понадобится здесь кнопочка api до
+напоминаю что надо зарегистрироваться на
+крипто кампер чтоб получить бесплатный
+ключ
+очевидно что мне нужен price tag спасибо
+здесь у меня есть документация и вот
+здесь есть синглу символ прайс она
+передается f сам test the sims хорошо
+давайте сделаем так
+я беру и говорю цепь интервал
+буду каждые три секунды ходить на сервер
+дальше я говорю значит konce эфрона away
+ага ей мне пальца вы значит а sing
+сходив в чём на https mina pi крип так
+compair коп до the price tag дальше
+конечно же не помню совсем ивсем это из
+какого киккера получать это очевидно бти
+кир у нас лежит в переменной ньюте
+черный ему да вот который мы добавляли
+обратите внимание здесь нельзя
+использовать за стикер подумайте почему
+и the sims куда меня интересует везде и
+api ключ мы должны обязательно передать
+до переходим назад
+переходим в наши api ключ и и копирую
+его сюда чтобы прям его сюда и вставить
+так
+так дальше как мы знаем после
+результатов и чак надо дождаться f
+джейсон и давайте ради теста сделаем
+консоль log data посмотрим что нам там
+приходит открываем наше творение
+удаляем эти добавляем тикер убить icy
+ждём 3 секундочки и вот смотрите нам
+приходит
+витязь и везде хорошо
+берем и пишем new kicker .
+прайс равно дата .
+везде только давайте ну хотя давайте вот
+пробуем давайте вообще приведем наше
+приложение приличный вид то есть здесь
+делаем пусто
+удалим дефолтное значение и добавляем 5
+7 ничего нет подождите как же так вот у
+меня все выводилось берите действительно
+цена приходит как так то юпитер . прайс
+я туда записываю что получается не
+реактивно как же так рассказывали что
+view весь такой реактивный
+давайте попробуем чуть по другому
+зыс я беру в киккера ххх раз так найду
+пожалуй среди них тикер у которого имя
+такое же как у тизерные хотя странно и
+живот его просто пушил сюда iv прайс
+пишу дата везде ведь попробуем добавляем
+хитер ждём 3 секунды о заработало как
+так то получается тут мой реактивный тут
+нет придется разбираться
+но этим мы займемся в следующем видео
+давайте то пайку
+да какой который хайпанул согласитесь
+выглядит ужасно давайте сделаем красиво
+для того чтобы было красиво я напишу
+следующую логику что если да то и
+изгибаешь и единицы то есть цена больше
+одного доллара то выводе пожалуйста с
+точностью до двух знаков в противном
+случае выводе если оно меньше выводе с
+точностью два знака после запятой
+по два значащих знака the prestige едва
+означает что там может быть много много
+нулей некоторые монетки стоят достаточно
+дешево но там всегда будет ровно два
+значащих знака возьмите 0069
+это вот три знака по что первый нолик
+попроси шин витязь и круто работает
+хорошо самое время добавить график
+торговли сейчас видимо не идет потому
+что они ну медицина идет не так активно
+похоже потому что цена медленно
+изменяется давайте добавим график
+напоминаю что мы вот выделяем и вот
+здесь должен быть график соответственно
+говорим график для графика нужны данные
+эти данные изменяются с течением времени
+значит это что правильно состояния
+назову его угров это данные состояния
+хорошо теперь что я я такой смотрю ум
+когда у меня данные вот здесь обновились
+это рю если текущий выбранный элемент
+равен на моему секиру который обновлялся
+давайте может
+new new мне не очень нравится
+переименуем is new
+два первых давайте сделаем из граф push
+дата ее здесь сохранив график данные так
+хорошо и мне не очень не очень нравится
+эта операция при factory недоступна
+интересно почему я тогда не горды руками
+переименую назову его карен тикер здесь
+просто ради того чтобы было чуть-чуть
+более понятно что это такое карен ticker
+карен тикер коран ticker хорошо и
+давайте
+выводить график но график как мы будем
+выводить
+смотрите у нас же есть конкретная высота
+ячеек нас есть максимальная высота
+нам надо как то сделать так чтобы они не
+уходили ну то есть как то добить до этой
+высоты поэтому мы будем из управлять
+высотой с помощью тега style
+мы такие давайте возьмем как нам
+выводить историю очевидно с помощью
+тегов и for где один ген этот рисуется
+покажись мне вот она вот эти полосочки
+до удаляю оставляю одну удаляю тега h20
+класс аж 24 который отвечает за высоту
+этой в 1 пока оставлю его просто увидели
+и говорю что выводе
+эти девы с помощь для каждой бар полоска
+in граф сохраняю
+и он не жалуется что барни использован
+что в общем-то логично
+и мы два первых добавляем kay
+мы же помним что нам нужен
+когда у нас нету ничего отличительного
+уникального элемента мы можем взять
+индекс это не самая лучшая практика мы
+будем детально говорить о том что зачем
+и почему и будем пробовать
+сохраняем перезагружаем чтобы убрать вот
+эти вот старые наши творения
+добавляем 5 7 кликаем и ждем через три
+он смотрите пока эти полосочки не имеют
+правильной высоты но они уже появляются
+хотя бы
+теперь что касается правильной высоты я
+хочу воспользоваться точно так же как и
+биржу класс я могу сделать ставил и
+точно так же могу здесь передать объекте
+и сказать что хоть и высота очевидно что
+я буду управлять процентов при них не
+известны ни какие пиксели ничего не хочу
+хардкоре что высота будет допустим бар
+процент до
+так там не справедливо сказал а чего это
+ты тут поставил и горит человек этой
+кавычки забыл мы даже атрибут так но в
+графья что сохраняем настоящую цену
+сейчас скорее всего что-то пойдет не по
+плану ухухуху 447 тысяч триста девять
+процентов так нам нужно привести граф в
+божеский вид
+я задам нормала из граф создам функцию в
+которой что я сделаю я найду
+максимальное значение в моем графике
+масс макс из граф найду минимальное
+значение в моем графике и дальше сделаю
+следующее для каждого элемента графика
+поэтому map я возьму вычту из него
+минимальное минимальное значение
+иначе понимаете если я буду просто
+приводить в процентах то разницу в сотых
+долях вы не увидите на такой огромной
+цифры 47 1327
+вычту минимальное значение и разделю на
+разницу между максимальным значением и
+минимальным и что получить проценты
+умножу это на 100 только не 3 конечно a
+price
+так и теперь я буду рисовать график
+своим we forom где-то у меня вот он не
+от графа out нормала из графы тоже метод
+его надо вызвать давайте пробовать бить
+эссе добавляем так факир был пьяный
+фокус не удался давайте посмотрим что у
+нас за стиле здесь повешай уселись это
+ошибки повесь посыпались кино 3 тб
+рапорте name if we sell скажите мне
+не понятно давайте посмотрим кино 3 тб
+рапорте name of нал логично поэтому
+здесь может не быть текущего выделенного
+значения все конечно странно что это
+сейчас происходит но поставим ? да чтобы
+говорить что если у нас засел ну а это
+нормально чтобы он не пытался брать
+уныло поле name
+да заодно воспользовались современным
+чего скриптовом синтаксисом смотрим
+давайте обновим страницу кем всегда
+держите консоль открытое и отведите мы
+сейчас не держали пропустили что-то
+интересное так пока работает ну что ж со
+стилями посмотрите хайд 0 хоть 102
+отведите он начал двигаться вот только
+согласитесь вот этот хит 0 ведь их
+bitcoin растет поэтому вот здесь
+оказалась минимальной зачем выглядит
+достаточно уродливо давайте мы чуть-чуть
+с че че рим и добавим следующее что 5
+процентов высоты будет всегда
+поэтому мы говорим что прайс это 5 + и
+умножаем не на 101 95 ну то есть нижняя
+часть полосочки будет всегда ноги
+попробуем дети 7 давайте снова вернем в
+мир
+выбрать
+давайте все-таки уберем там на высоту по
+умолчанию
+вот а наш 24 она была в целях и ведь и
+сразу она правильно выставил а так
+давайте добавим следующую монетку
+должен так ой а график то не очистился
+ну можешь есть
+а где у нас здесь у нас выбор нам при
+выборе надо этого салата нам надо еще
+очищать историю мы конечно можем
+написать здесь через запятую опять же
+бонусом узнать как это работает но
+давайте все-таки сделаем вменяемо я
+здесь сделали select key
+и допишу метод ссылок ну чтобы не писать
+логику в шаблоне
+много кода в шаблоне это плохо ссылок
+trekker я говорю из равно тики и диск 1
+равно пустой массив и не забываю
+поставить запятую обновляю страницу
+5 7 до кто у нас есть биткойн кэш
+допустим эфир
+так смотрим график эфира ждем
+так интересно
+на что мы опять жалуемся мы себе вы
+видели она странно себя очень ведет
+давайте смотреть
+файлы тусич
+ум возможно мы часто прошиваем давайте
+поднимем с трех секунд до 5 но это же
+будет проблемой
+пробуем еще раз здесь итоге ты и заодно
+смотрим на консольку было ли что-то у
+нас
+хотя не очень понятно пока что это за
+файл и кто fitch на вы посмотреть так на
+чьей
+как я вечно забываю убрать этот тайм
+лайн
+чтобы он мне не мешал что я запросы ведь
+вижу вот они на той май на таймлайне
+рисуются
+так
+хром периодически обновляют dev tool и
+за это вам
+так свет мой зеркальце с тузами скажем я
+вот вижу вот над осилить он каждый раз
+выполняет запрос и так это overview
+что-то случай с тузами что ты не хочешь
+мне показывать соседи но лишь 8 0 из
+девяти request of a а галочка стоит блок
+это request
+все вот все у нас хорошо пошло да вот у
+нас идут много-много опроса
+давайте в этом графика 5 и посмотрим он
+должен
+через три секунды появится обновиться
+вот действительно эти появился первый
+элемент теперь 2 и теперь он постепенно
+будет улучшаться и вот видите работает
+наши вот эти минимальные пять процентов
+дает понять что сейчас вот на тех
+двенадцати секундах который мы смотрели
+на биткойн он вот падает вниз сильно
+и вот только что скакнул вверх ведь все
+поменялось соответственно в принципе в
+принципе первая итерация нашего подхода
+закончена
+что мы узнали сегодня сегодня мы узнали
+что с реактивностью все не так очевидны
+и почему-то вот здесь я прям оставлю
+здесь это комментариям очевидная запись
+карен тикер . прайс равно наше выражение
+вот это не заработала почему нам еще
+предстоит разобраться мы разобрали что в
+принципе тогда реактивность работает она
+работает хорошо опять же нам не пришлось
+ничего думать не шаблонах ни о чем мы
+вспомнили что витория
+когда нам не нужен когда нам нету кея за
+которого прицепиться в данных то есть
+нету уникальной составляя
+мы можем использовать яндекс мы
+вспомнили что в хоре как и везде можно
+вот здесь писать не просто переменные
+которые описаны в дата а выражение в
+данном случае у нас это вызов нашего
+метода ну и чуть чуть поигрались с
+реальным и api сходили на сервер начали
+отправлять реальные запрос и теперь нам
+предстоит
+двигаться дальше наш злобный
+тысячник ну то есть виртуальный человек
+который ставит наш этих не технические
+задания перед нами будет требовать все
+новых и новых фич и мы с вами будем их
+добавлять и смотреть во что превращается
+наш код и разговаривать что такое хорошо
+и что такое плохо
 
 ---
 
 **Задание**
 
-1. Пересмотреть видео [#4 Как во Vue.js использовать Х - Vue.js: нюансы](https://www.youtube.com/watch?v=orWKmX4xO1g), записать все непонятные слова.
-
-1. Перечитать и осмыслить первую часть [Учебника](https://learn.javascript.ru/symbol) до раздела "Массивы"
 
 [Назад](./web_04.md) | [Дальше](./web_06.md)