Створення віджету "Погода". Робота з API, FETCH, JSON. Обробка та вивід даних. HTML CSS JavaScript

Створення віджету "Погода". Робота з API FETCH JSON. Обробка та вивід даних. У цьому відео попрацюємо з API та за допомогою JavaScript FETCH отримаємо данні з сервісу openweathermap.org у форматі JSON та зробимо вивід у верстку. HTML CSS JavaScript.
🟢 Понад 5 000 пропозицій роботи для програмістів з України на Just Join IT! Перевір на bit.ly/3y3PVd6.
👉 Канал Just Join IT на Телеграмі - bit.ly/3F9YBQQ
👉 Група Just Join IT на Facebook - bit.ly/3kuVg55
🤟 Матеріали уроку (патреон): / 65938834
❤️ Стати спонсором каналу: / @freelancerlifestyle
🔴 Платний курс по верстці: edu.fls.guru
🤟 БЕЗКОШТОВНИЙ курс по верстці сайтів (HTML, CSS, JavaScript): • БЕСПЛАТНЫЙ курс по вер...
🔴 Карта каналу: miro.com/app/board/o9J_lZB3YKI=/
🔴 Отримати доступ до екстра контенту + підтримати канал: / freelancerlifestyle
🔴 Платний курс по верстці: edu.fls.guru
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстці: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - У відео
00:22 - Реклама
01:38 - HTML CSS
02:07 - Реєстрація у OpenWeatherMap
03:36 - Пишемо код на JavaScript
10:22 - Результат роботи
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
👉 @СЛУШАЙ! Канал с интересными историями из жизни.
👋 Мене звати Женя Андріканич, я IT - спеціаліст. Більше 10ти років займаюсь розробкою сайтів. Перейняти досвід: / freelancerlifestyle
#навчання #верстка #фрілансерпожиттю
🤟 Живи, а працюй у вільний час! ©

[@FreelancerLifeStyle]

🤷‍♂Друзі, будь ласка, усі свої скарги щодо мови несіть у кремль. Не заважайте людям вчитись та розвиватись! 🔴 Карта каналу: miro.com/app/board/o9J_lZB3YKI=/ 🔴 Отримати доступ до екстра контенту + підтримати канал: www.patreon.com/freelancerlifestyle 🔴 Платний курс по верстці: edu.fls.guru 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстці: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@VolodymyrSirenko]

не реагуй, тримайся!

[@user-ek7vf7iu4v]

Я хоть украинский не ПОНИМАЮ, но в вашем видеоуроке даже украинский становится ПОНЯТНЕЙ! Ассалам алейкум из Узбекистана!!! 👋

[@FACEBAKER]

Есть десяток каналов с русским языком

[@user-ri8cw7fq2c]

@@FACEBAKER так что ты тут сидишь?

[@FACEBAKER]

@@user-ri8cw7fq2c я раньше сидел, до мракобесии автора, ютуб предложил посмотреть ролик.

[@user-ri8cw7fq2c]

@@FACEBAKER какая мракобесия автора,чё ты несёшь?

[@FACEBAKER]

@@user-ri8cw7fq2c ну он создал и развил канал на русском языке, где го смотрели со всего СНГ, теперь он решил не говорить на этом языки, по итогу только Украинцы могут смотреть его, чего он хотел доказать, не понятно.

[@athillas460]

Як приємно чути рідну українську мову у мого улюбленного айті ютубера. Дякую, Женя! Відос, як завжди, топ

[@mandyyy5394]

Згоден та не дуже звучить назва каналу, може написати українською?)

[@athillas460]

@@mandyyy5394 або англійською

[@user-tk6bs8jb9v]

Нет бы на нормальном языке в видео разговаривать

[@athillas460]

@@user-tk6bs8jb9v а чому Українська мова- це не нормальна мова?

[@user-tk6bs8jb9v]

@@athillas460 Она нормальная и красивая, просто не понимаю ее

[@El-Mariachi]

Євгене, повага!! Ти справжній українець і справжня людина!! Я рідко пишу комменти, але тепер буду писати коменти під КОЖНИМ твоїм відео, без виключення! Поважаю тебе!

[@user-sy3pu6se8r]

Доброго дня а не залишився у вас код до цього відео?

[@sherlockholmes5395]

Вялікі дзякуй за вашу дзейнасць дужа дапамогае ў вучобе на будучую прафесію. Слава Украіне і Жыве Беларусь.

[@athillas460]

Героям слава, жыве вечна!

[@andreiribac6284]

Привет из Молдовы! Спасибо за Вашу работу! Все доступно и понятно! Даже не смотрят на то что, украинский я не совсем знаю, но вижу код + отличная подача Жени делают все понятным! Всем добра! Женя огромное спасибо и удачи тебе!

[@user-mq7nd5pq9q]

Привет землякам, откуда будешь?)

[@andreiribac6284]

@@user-mq7nd5pq9q привет! Как бы это банально не звучало - я из Кишинева)))

[@user-mq7nd5pq9q]

@@andreiribac6284 Почти соседи- Тирасполь))

[@andreiribac6284]

@@user-mq7nd5pq9q Мы все хотели семьёй туда поехать, погулять в парке, прикупить постельного белья ну и пару юбилейных монет. Но ситуация такая сейчас, что особо не поездишь

[@user-mq7nd5pq9q]

@@andreiribac6284 Приезжайте по возможности на выходных отдохнуть! В парке есть интересные развлечения для деток и взрослых. А Тиротекс в этом году не анонсировал весеннюю коллекцию постельного белья. Но на свой вкус обязательно сможете что-то себе подобрать)))

[@user-mt5ew6xf1i]

Той момент, коли ніфіга не шариш в ІТ, але вмикаєш відео, щоб додати хоч один перегляд і підтримати цю прекрасну українізацію. Женю, дякую! Я можу тільки уявляти, наскільки рідкісний і важливий такий контент українською в Ютубі. Ти крутий!

[@user-ri8cw7fq2c]

@@Anton-ni8un поскули больше

[@Anton-ni8un]

@@user-ri8cw7fq2c, хз при чем здесь SQL'и...

[@user-ri8cw7fq2c]

@@Anton-ni8un при том что плачешь что на украинском видео,отпишись и всё

[@rev2nge453]

Очень рад что ты продолжаешь своё творчество

[@sweetknitt4259]

Спасибо за видео. Поддержу комментарием. Лучший уроки, лучший учитель ♥️

[@marko6476]

Женя привет, спасибо за видосы! Скажи пожалуйста, а почему не испольешь section и main?

[@user-zx6hh8jj7l]

Величезне дякую за те, що ти робиш!

[@taraskravchuk9139]

Чудово, Євген! Дякую! дуже корисно! Коротко і зрозуміло! Мабуть краще для початківців працювати саме з маленькими проектиками, ніж відразу хапатися за великі, після яких може перегоріти все натхнення.

[@JavaScriptcher]

Жека и на украинском понятно говорит! Делает годноту и полезность

[@tyyhyiopanazzz]

Навчаючись, бачив що більшість джерел з яких можна отримати інформацію щодо html i css, js були російськомовні - так потроху всі русифіковувалися, бо коли доходить до пояснень по техніці, якщо ти не знаєш як воно ще називається окрім як російською то так і говориш. Так що Євген, люто обома руками підтримую Вашу позицію!

[@lexluthor9826]

Отлично. Спасибо. Будем тренироваться и пользоваться.

[@wellemangrey3645]

Приветствую из не резиновой! Хотел поинтересоваться, теперь так правильно производить поиск id селектора (раньше вроде был getElementById)? И используя промисы вроде бы раньше можно было использовать цепочки then и отлов ошибок catch ? Хотя я наверно уже устарел - на пенсию пора...

[@sadivnytsia]

Перший раз з початку війни сіла за програмування. Отримала задоволення. Дякую! З вами все легко та зрозуміло.

[@mch1420]

Дуже приємно вас чути українською і дуже рада, що ви виявились українцем та людиною з твердою позицією

[@panjects]

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

[@romanlesko6420]

Все як завжди на найвищому рівні! Дякую Жека!

[@whatif9345]

Як завжди супер, чекаємо ще більше корисної інформації у твоєму виконанні)

[@irinasname]

Величезне дякую, все чітко, зрозуміло, без води, ще й українською, просто ідеально ♥️

[@dimon0213dh]

Дякую за новий урок. Особливо коли це відео не тільки про верстку.

[@ybpvin]

Коментар для підтримки каналу! Чудовий урок! Лайк!

[@Husan203]

Блин я думал что ничего не пойму, но даже для меня узбека все понятно. Классный ролик жду следующий с нетерпением.

[@anikihref]

Я теж приблизно 10 днів назад почав розробляти сайт з погодою :) Дякую за українськомовний конент!

[@kadiheaven4855]

Я по нации - Узбек. И так обучался не на родном языке. А теперь, ещё сложнее🤣

[@vovakhotiv]

Вчи українську

[@kadiheaven4855]

@@vovakhotiv :) Xop

[@user-fs3yr9yk6n]

Музончик кста прикольный в конце))

[@user-pt7oi3qp6g]

Безмежно дякую за такий чудовий урок! До речі реклама дуже корисна і цікава)

[@user-rk6fz8nm9e]

Тут 100% реклама зайшла. Я точно там буду шукати роботу

[@user-pt7oi3qp6g]

@@user-rk6fz8nm9e Тому і написав про це, я зайшов по посиланню і виявився дійсно годний ресурс. Мені подобається все, від зовнішнього вигляду до алгоритмів пошуку, та і самі пропозиції дуже смачні там

[@user-rk6fz8nm9e]

@@user-pt7oi3qp6g я ще поки початківець- вивчила html , css, js . Зараз хочу поверстати макети. І йти на цей сайт шукати роботу

[@andreykrav3274]

Як завжди, доступність і зрозумілість на вищому рівні!

[@marcusfenix5985]

Жека, ти як завжди супер! Величезна подяка за українську!

[@user-wl7de3rr2v]

Дякую друже! Передивився майже всі твою уроки! Твоя робота дуже допомогає! Привіт з нескореного Харкова!

[@user-pe7rw9zm3y]

Підтримка та повага! Все краще українським шукачам розвитку. Творіть в радість!!!

[@johnsmiler9254]

Рахмет сiзге де!

[@tihonrubyshev]

Після твого відео я усвідомив настільки важлива мова для кращого сприйняття інформації... Раніше я постійно відволікався та губив суть сказаного, а тепер можу все переказати від і до... Дякую тобі велике за український контент! Не всі герої повинні тримати зброю чи носити плащі! 👏👏👏👏👍👍👍👍

[@andriikapynos4875]

Дякую. Цікавий і наглядний урок з роботи з API. У мене мало досвіду в фронт-енді, тому виникло питання чи можна шаблон винести в тег "template", отримати до нього доступ із JS, клонувати його, заповнити даними а потім заасертити результат в контейнер де він повинен бути? І іще, а при повільному інтернеті віджет не буде стрибати по висоті коли лоадер підмінюватиметься розміткою з даним?

[@nikolaysynelnykov4381]

Женя, спасибо огромное за видео, выпал на два месяца из IT, твои видео помогают немного освежить голову, а то много что за это время забыл! Продолжай в том же духе👍

[@qqwplayer]

Навіть недивлячи ставлю дайте, підтримка україномовного понад усе! Красава, я дивився і навчався і раніше і буду це робити й зараз!

[@katerynat691]

Женя, дякую. Півроку тому починала вивчати верстку по твоїм відео, потім js, а цей віджет якраз те що мені було потрібно для учбового проекту.

[@yurapekach7550]

дуже доступний і зрозумілий урок, дякую )

[@kristopop2116]

Жень, пусть все хорошо у тебя будет. Урок и так понятен)))

[@proud_sin]

Дуже дуже круто, все зрозуміло, дуже приємно чути українську мову))) дякую) потрібно більше контенту українською мовою))

[@denys.u]

Класній контент, що розкриває базаве розуміння з API. Таких API є безліч, наприклад можна виводити курс валют, статистику по цінах, covid-19 та інше. Рекомендую для перегляду початківцям.

[@mezkoo]

Жека молодець, дякую за якісний україномовний контент 🇺🇦 Я ще до JS не берусь, але подивився, поставив лайк і підписався всюди за посиланнями в описі, щоб підтримати автора)

[@loophup7055]

Спасибо за урок, Жека. Всегда, когда я слышал про API, то появлялся некоторый страх, а оказывается механизм работы с API довольно прост.

[@user-ul9pn6fi8w]

Для мене самий "жах" було отримати дані з серверу, потім вже json розібрати на складові здавалось не складно))) аж поки не потрапив на дууууже погано структурований масив даних і на вивчення що там до чого, було витрачено набагато більше часу, ніж на все інше)

[@loophup7055]

@@user-ul9pn6fi8w бывает и такое))

[@ValidWay]

Величезне ДЯКУЮ! Якраз шукав інфу і тут вчасно свіженький урок)

[@user-ys6rs2zz5j]

Очень интересно)) Такая домашняя атмосфера в видео!)) Надеюсь, будет много похожего контента!!) Спасибо!)

[@wraithking3406]

Спасибо за то что выкладываешь уроки в такое время! Очень интересно

[@GinessisOrig]

Як незвично слухати IT-матеріал на українській мові. Дуже вам дякую!

[@harpeter9752]

Перший відомий мені IT-блогер, як знімає відео українською. Дуже радий мати такий контент рідною мовою. Я був би радий, якби украномовних ІТ-каналів ставало все більше. Все ж надіюсь, що згодом ситуація або твій підхід стане менш категоричним і з'являться субтитри російською. Дивитись подібні відео з субтитрами далеко не так зручно, як слухати зрозумілою мовою, то ж певний дискомфорт для людей, які не володіють українською все одно буде, але при цьому вони не залишаться за бортом всі оптом без розподілу на винних та невинних. Бажаю мирного неба, Божих благословень та успіху у доброму ділі!

[@sergeychistyakov8149]

Урок, як завжди на висоті. Чітко і лаконічно. Лайк

[@den2144]

Спасибо за работу, Женя! Привет из Харькова!)

[@slagrach]

Жень ти найкращий! Дякую тобі за все! Ви мені дуже допомогли в житті ... дуже сумно, що все так ... Удачі!

[@iventeye]

Жека, как всегда на высшем уровне! Спасибо!

[@webco9230]

Топ! Дякую, більше таких відео з обробкою та візуалізацією даних

[@vitaliimurmylo2358]

Величезне тобі дякую! Перехід на українську - це просто топ, я в захваті. Я починав своє навчання з твоїми відео і з нетерпінням чекаю на Реакт, саме починаю його вчити, а уявити щось крутіше, ніж твої відео по реакту українською просто неможливо

[@Big_Wins_reactions]

Євген , у Вас дуже гарна українська ! Велике дякую за урок , продовжуйте в тому ж дусі) Все буде Україна!

[@mooi4076]

Доброго дня, як називається плагін для відображення фотографій в ВС коді

[@user-mt5mr4mc4g]

Клас, дякую за контент) Питання одне: чи плануєте назву каналу змінювати?

[@FreelancerLifeStyle]

Так, звичайно

[@Amberstargazerofearth]

Все предельно ясно! Спасибо за урок!

[@olegbilas]

Прекрасна подача матеріалу українською мовою, браво, Женя (враховуючи, що до цього ти розмовляв, певно, російською)! Але в підписі до відео побачив слово "ссилка", заміни, будь ласка, на українське слово "посилання". По тексту чулося не раз слово "вот". Розумію, що на повний перехід на рідну мову потрібен певний час, але завваж, що аналог російського "вот" - "ось". Ще раз дякую за патріотичну позицію та з нетерпінням чекаю на нові відоси!

[@Pastuh93]

Просто, швидко та зрозуміло. Дякую за Вашу роботу.

[@arranger222]

Женя, дякую за твою працю та можливість розвиватись у даній сфері. Виникло питання - зараз вивчаю JS і нам розповідали, що підключаючи скрипт з атрибутом type = 'module', там вже під капотом є use strict і що це наразі більш просунутий синтаксис. Водночас бачу, що у тебе строгий режим прямо у коді. Що правильніше та у чому відмінність. дякую)

[@olegbilas]

Правильно і так, і так. Але більш поширеним є підхід через атрибут type = 'module'

[@den4ik7840]

Євген...ти робиш не просто новий урок, а МЕГА крутий та головне корисний урок! Ще й крутий ресурс з вакансіями...ну ти просто "монстр" крутості))) Дякуємо тобі! До перемоги ще й Реакт треба вивчити)

[@user-np9mq5xc7j]

Чудовий урок! Дякую!

[@insertmoscow]

Женя, спасибо за видео! Все понятно и доступно! Так, глядишь, и язык выучу:)

[@user-rg7id1ry1x]

Я думав отримувати актуальні дані з якихось сайтів це дуже важко а виявилось й не так важко дуже дякую за таку корисну інформацію

[@user-kg6fz5tz2b]

Жека, спасибо за видос!)

[@user-vk8dg3ul7z]

Добрий вечір, Жень дуже дякую за мега, якісний контент. Українською, доречі, ще краще, я зараз фултайм присвятив розвитку в фронтенді, і маю таке питання до вас, як з вами можна було б звязатись?(маю декілька запитань) месенджер, або поштою, як вам буде зручніше. Доречі, коли дізнався, що ми землеки, був трохи здивований, де ж ваш закарпатський акцент)

[@user-zp3li5hz8w]

а ви вже архіви з кодом не робите щоб скачати?

[@alexandercoderunner5685]

Дуже цікаве відео) дякую за твою працю!)

[@bogdan1734]

Те відчуття, коли рік тому захоплювався словами "Живи, а працюй у вільний час!", а сьогодні це була б буденність, якби не обставини...

[@gritsienkooleg3447]

Эх, спасибо за годнейший контент! Счастья тебе, Жека)

[@mariapiankova7177]

вааааау) супер)) давно навчаюсь, але ваші відео завжди допомогають дорозуміти те що не зрозуміло!!) ще і українською))

[@jume811]

Підписалась на канал для малого, щоб вчився, сиджу дивлюсь) може це собі почати))

[@rostyslavkinash5232]

Дякую за відео. Як завжди цікаво та інформативно.

[@romanishchenko8201]

Жека, огромна подяка і повага. Дуже круті відео.

[@kirillgorbatko8809]

Как всегда супер!

[@asmusicLabel]

これ長い間を知りたいでした。ありがとうございます、ジェニーア。

[@FreelancerLifeStyle]

Будь ласка!

[@nadiinitil]

Доброго дня Женю, безмежно дякую за Ваш навчально - виховний процес. Надзичайно цікава Ваша робота. Вам реалізації ваших планів, здоров'я Вам і вашій родині, мирного неба. Дякую.

[@alexsandrglebov991]

Привет Женя, рад видеть тебя в хорошем настроении продолжай в том же духе ✊как всегда заряжаешь эмоционально! Аж дышать легче стало!

[@viktoriyahappy8217]

Спасибі! Тепер не тільки корисно але й милозвучно )

[@user-vy3jp3eq9j]

Ничо не понимаю,был же последний урок на канале,почему видосы продолжают выходить? :D

[@nazariikarpa7569]

Роблю портфоліо, побачив відос, тепер в портфоліо буде погода в моєму місті😂😂😂

[@ArtyKrg]

Дякую! Дуже корисно! Якісний контент рідною мовою)

[@DmSychov]

Часто смотрю ваши видео. Очень полезно. Хочу написать расширение для Chrome для Amazon Вопрос как получить доступ к API Amazonia ?

[@Cherniy_Stalker]

Ооо нове від Жені, дякую тобі)) За Українську окремий респект)

[@user-rj9mn3in9g]

Дуже крутий і вчасний урок! Дяка за мову та позицію! Зараз вкрай важливо підтримувати свідомих людей, тому Вам моя повага та підписка!

[@user-mt5vs4lw7g]

Яка у вас чудова вимова )))❤️❤️❤️❤️

[@user-yy9ov2jc2n]

Радий, що знайшов ваш україномовний канал) Дякую Вам за вашу працю за ваші цікаві та корисні україномовні випуски. Підписався

[@whoisleshalight8514]

Жека, ціни тобі не має!!! Завдяки тобі я вже верстаю 2ймісяць, знайшов постійного замовника)) кайф)

[@user-vl4gi9fe6v]

Красавчик! Прожовжуй в тому ж дусі!

[@user-eh1nj8el9l]

Дякую! Чудово наданий матеріали!

[@artemmarchenko1]

Супер!

[@user-mg7ey5td5w]

Спасибо большое за твою работу!

[@yaroslav8717]

Дякую за урок! Скажи будь ласка, як ти зробив що гiфка завантаження вiдображається у VS CODE?

[@user-no4sg7lu3o]

аааааа, Ви неймовірний! Вам дуже личить українська мова!!

[@user-lx4ox4vk1m]

Пару днів тому був в Ужгороді, думав тебе побачу, але побачив тільки прикольне місто з сакурами

[@D1O_]

цікавий урок дякую за корисну інформацію)

[@nataliavardazaryan3981]

дякую за укр. мову! знаю, що так Ви втрачаєте частину глядачів, але найвідданіші з Вами!

[@ViacheslavM3192]

дуже круто! коли у планах React?)

[@user-ij5vu4jn5w]

Якая мілагучная мова! Дзякуй вялікі