Прогноз погоды на JS. От дизайна до работы с API

Sdílet
Vložit
  • čas přidán 31. 05. 2024
  • Напишем скрипт для отображения погоды. Дизайн в Figma, верстка, JS и работа с API.
    Код с урока в Telegram канале: t.me/+friZxyBulgNmYjE6
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
    От установки редактора, до публикации в сети.
    👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
    Обучение с наставником, 3 месяца, результат, гарантия.
    Научим создавать веб-сайты и зарабатывать на этом.
    Старт обучения: 27-го Мая 2024 года.
    💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
    Обучение с наставником, 3 месяца, результат, гарантия.
    Старт обучения: 3-го Июня 2024 года.
    💻 Курс "Разработка сайтов на PHP + MySQL":
    webcademy.ru/phpcourse/
    Создание сайтов с системой управления.
    Присоединиться к курсу можно прямо сейчас.
    🏁 Обучение с нуля
    💁‍♂️ Обучение с наставником
    🎯 Доведение с нуля до результата
    🏢 Помощь с трудоустройством
    💵 Поможем взять первый заказ на фрилансе
    💳 возможна рассрочка
    💳 если курс не понравится, вернём деньги в первую неделю
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    💈 Сайт школы ВебКадеми: webcademy.ru/
    💈 Вступайте в группу Вконтакте: webcademy
    💈 Подписывайтесь на Telegram: t.me/webcademynews
    ТАЙМ КОДЫ:
    0:00:00 Общение
    0:09:32 Дизайн в Figma
    0:50:10 Верстка шапки
    1:18:55 Верстка карточки
    1:50:40 Загрузка на GitHub
    1:54:00 API weatherapi
    2:04:00 JS и работа с API
    2:13:30 Отображение данных в карточке
    2:29:00 Удаление старой карточки
    2:42:25 Создание функций removeCard, showError, showCard
    2:48:10 Функция getWeather
    2:58:00 Сохранение на GitHub
    3:02:00 Изучаю API по иконкам
    3:03:20 Работа с русским языком
    3:25:40 Общение
    3:28:00 Работа с иконками
    3:46:20 Общение

Komentáře • 38

  • @AlekseiGolovanev
    @AlekseiGolovanev Před rokem +4

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

  • @albertrockalfredo8250
    @albertrockalfredo8250 Před rokem +5

    Респект и уважение за очередной урок!!!

  • @user-pj8lq9ws7x
    @user-pj8lq9ws7x Před rokem +4

    Спасибо за стрим. Это то видео, где полностью виднен ход мыслей программиста.

  • @ekaterinadobrzhanskaya3422

    Спасибо за урок🤩! Раз от раза убеждаюсь, что вы - Юрий😎, кто действительно объясняет и не торопясь, медленными шагами, уверенно, но верно преподносите материал 👩‍🎓. Не знаю как для других, но для меня это лучший темп. Мне есть с чем сравнивать.

    • @WebCademy
      @WebCademy  Před rokem +2

      Екатерина, спасибо!) Стараюсь, рад что было полезно и интересно.

  • @user-hj9nt5ne2r
    @user-hj9nt5ne2r Před rokem +2

    Редко что-то комментирую, но спасибо за полезный стрим и приятный формат общения.

  • @user-vg6eb6xu9w
    @user-vg6eb6xu9w Před rokem +2

    Спасибо за ваши видео😊

  • @user-lh6uv9oz3u
    @user-lh6uv9oz3u Před rokem

    Спасибо большое за старания. У меня хоть что-то получилось.

  • @user-pm8dv5bw6g
    @user-pm8dv5bw6g Před rokem

    Спасибо Вам большое!

  • @Daniel_P1
    @Daniel_P1 Před rokem +6

    Спасибо Вам огромное. Ваш труд достроен миллионов просмотров

  • @HappyTown1BoDi
    @HappyTown1BoDi Před rokem

    Спасибо, крутой стрим!

  • @nur111k
    @nur111k Před rokem +2

    добрый вечер! соизволите ли вы скинуть ссылку на дизайн в Figma

  • @sidelev.s
    @sidelev.s Před rokem

    отлично стрим сразу после завершения просмотра почти 7ми часового видео по JS

  • @user-jq4fl3pg8r
    @user-jq4fl3pg8r Před rokem +1

    Добрый день. Сделал небольшую мобильную адаптацию и залил сайт на GitHub, и после, при открытии сайта через GitHub, карточка с погодой перестала отображаться, хотя путь не менял, в чём может быть причина?
    P.S.
    Кстати, Юрий, ваш проект на GitHub тоже почему то не отображает карточку с погодой..
    Или это только у меня так?

  • @user-eu2pw9so5p
    @user-eu2pw9so5p Před 4 měsíci

    При попытке найти город через сайт по ссылке на github ловлю ошибку NetworkError when attempting to fetch resource. С чем это может быть связано?

  • @XTREME79339
    @XTREME79339 Před rokem

    А можно ссылку на иконки отправить?

  • @vsmkoff
    @vsmkoff Před rokem

    По поводу разницы цвета в фигме и браузере, скорее всего в настройках фигмы не стоит color space - sRGB

    • @WebCademy
      @WebCademy  Před rokem +1

      Да, после стрима погуглил. Есть такая настройка, стояло unmanaged. Ранее на Windows не сталкивался. Хотя там тоже такое может быть.

  • @denistankoff8181
    @denistankoff8181 Před rokem

    Юрий, а как в данном приложении устроить работу с local storage и рендерингом, чтобы при перезагрузке страницы оставался город и подтягивались данные из апи?

    • @WebCademy
      @WebCademy  Před rokem

      Денис, приветствую. Записать данные по запрошенным городам в localStorage. И при открытии страницы проверить localStorage и если там есть города - то запросить для них погоду и отобразить.

  • @natalikamenkova5383
    @natalikamenkova5383 Před rokem

    Подскажите пожалуйста где можно найти ссылку на макет в фигме? что- то я не могу найти. хотелось бы все повторить за Вами. И еще хочу сказать Вам огромное Спасибо за Ваш труд, это один из лучших каналов, успехов Вам во всех начинаниях и процветания.

    • @WebCademy
      @WebCademy  Před rokem

      Пост в ТГ канале: t.me/+friZxyBulgNmYjE6

  • @user-bv7jz1ve2s
    @user-bv7jz1ve2s Před rokem +1

    Здравствуйте, Напишите пожалуйста а в какой программе вы пишите КОД???присоединяюсь ко всем добрым словам, видеу 💯%👍

    • @WebCademy
      @WebCademy  Před rokem +1

      VS Code - czcams.com/video/942oq0_v95E/video.html

  • @user-po1ez6ke6m
    @user-po1ez6ke6m Před rokem

    Ух ты..

  • @WebCademy
    @WebCademy  Před rokem +1

    Разные цвета в Figma и браузере на Mac OS и Windows webcademy.ru/blog/964/

  • @user-lh6uv9oz3u
    @user-lh6uv9oz3u Před rokem

    Здравствуйте, Юрий. У меня к вам просьба. Сделайте пожалуйста урок по js, на примере портфолио html и css. То есть такой же формат видео! Надеюсь вы услышите мою просьбу!!!!

    • @WebCademy
      @WebCademy  Před rokem +1

      Приветствую!) Не совсем понял, о какой например проект вы имеете ввиду, сделать сайт портфолио на JS или ... ?

    • @user-lh6uv9oz3u
      @user-lh6uv9oz3u Před rokem +1

      @@WebCademy Вы когда-то делали серию роликов, где создавали портфолио с помощью html и css. Я хотел бы, чтобы вы сделали похожую серию роликов, используя js.

  • @sartjhon3300
    @sartjhon3300 Před rokem

    что то ты сильно заморочился с иконками, ты же получаешь вместе с остальными данными и icon:113(например) 113 - это имя картинки. то есть отправил город, получил is_day получил icon. а дальше по накатанной если is_day = 1, то папка day и картинка с названием 113. все иконки имеют одинаковые названия в папках день и ночь. то есть можно было не давать иконкам названия типа sunny.

    • @WebCademy
      @WebCademy  Před rokem

      Хм... видимо не разглядел систему в именовании иконок. Уже под конец стрима было дело. Можно было вообще использовать готовые и так проще. Но хотелось сделать свои.

  • @MelkoR4111
    @MelkoR4111 Před rokem +1

    если сделать Санкт-Петербург, то он будет показывать питер, который находится в штатах, а не российский

  • @sony1939
    @sony1939 Před rokem

    Длинно запущено непонятно

  • @alekseyr8372
    @alekseyr8372 Před 7 měsíci

    3:41:00 так со строками давно никто не работает

    • @WebCademy
      @WebCademy  Před 7 měsíci

      Как так? Тернарный оператор deprecated?

  • @alekseyr8372
    @alekseyr8372 Před 7 měsíci

    Код конечно оставляет желать лучшего

  • @WebCademy
    @WebCademy  Před rokem

    Вся информация к проекту. Код, макет, API, демо: t.me/+friZxyBulgNmYjE6