Звездный рейтинг. Все варианты! От простого без JavaScript к сложному с AJAX.
HTML-код
- Опубликовано: 13 июн 2024
- Все варианты звездного рейтинга! Как сугубо на HTML CSS так и с использованием JavaScript, в том числе с технологией AJAX.
🤟 Качай материалы урока на патреоне: / 45788899
🤟 Символ звезды: ★
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
00:00 - В выпуске
01:35 - Простой рейтинг без JavaScript
10:45 - Точный рейтинг с JavaScript
24:58 - Точный рейтинг с JavaScript + AJAX
31:24 - Заключение
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
🤩🤩🤩🤩 Жду ваших комментариев!
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
Пожалуйста подпишись на канал всего помогите добить 10
Привет, а вы в своей работе используете чистый JavaScript без jQuery? Если да то хотелось бы узнать почему, если это было в видео то подскажите в каком, я посмотрю.
@@user-eo6hg3lx6v потому что зачем использовать jquery если нативный js лучше!)
@@user-tw5hj3gq7q меня слово лучше ни чем не впечатляет. Jquery на много проще как по мне для восприятия. Но вот конечно по скорости работы и ТД не могу ничего сказать, вот и спросил у человека который как по мне это понимает на очень очень крутом уровне.
@@user-eo6hg3lx6v ну посмотри статистику по популярности библиотек и фреймворков и пойми что jquery уже потеряла свою популярность после es6 так как много функций которые делали с jquery теперь можно легко на нативном js делать) сейчас vue и react в топе)
Лучше этого русскоязычного канала по верстке и не только Вам не найти. Однозначно лайк. Емко, кратко, все варианты в одном видео, а не как все плодят хулион видосов. За это мы и любим Женю)
И вновь топовый контент, от любимого автора!
Спасибо!
@@vana__f7570 они уже есть, новые уже готовятся!
Спасибо! Невероятное качество материала и крайне интересная подача
Спасибо!
Начало нового года началось с мега годноты!!!
Zheka! You're the best !!!
Спасибо!
Вот это совпадение , только сидел думал как это реализовать правильно , и тут бац тебе видос . Спасибо 😉
Пожалуйста!
Воу, интересный выпуск, продолжай в том же духе! С меня как всегда лайк, приятно быть одним из первых на канале, у которого есть будущее. Надеюсь когда нибудь будет подобный выпуск с AJAX, только загрузкой изображения на сервер и вывод её на веб-сайт.
Как вовремя!
Женя, тебе большущий лайк!
Спасибо!
Крутяк 🤩🤩🤩
Рейтинг контенту - ⭐⭐⭐⭐⭐ 5.0
Спасибо!
Не ожидал такого скорого выпуска! Тема супер! 👍
Спасибо за видео, долго думал как реализовать такую задачу в заказе, а тут наткнулся на ваше видео. Очень круто!!!!
Добрый день, Женя! Благодарю за классный урок, разноплановый подход к исполнению рейтинга, доступное объяснение и твой опыт! Успехов, интересных проектов, новых подписчиков, мира и благополучия!🙂👍🤝
С Новым годом, господа Айтишники!!! Настоящие и будущие!!!
Взаимно!
Простое, огромное человеческое спасибо!
Пожалуйста!
привет, Жека, рад что ты вернулся из отпуска, надеюсь, что ты хорошо отдохнул! Сделай пожалуйста видос про гугл карты. Расскажи как их правильно прикреплять на сайт, как навешивать на них всякие штучки и тому подобнее. Думаю, что будет очень интересно!
Сделаю
Спасибо за такой подарок. Прекрасное решение для рейтингов.
Пожалуйста!
Очень хотелось бы увидеть ролик по работе с SVG обьектами, как лучше и как правильнее, и когда вообще стоит использовать. Спасибо за твой труд)
Это колдовство какое-то , тебя другие верстальщики сожгут за использование магии за пределами Хогвартса:)
Ахахах)
огромное спасибо за ваши уроки!
Пожалуйста!
Не по уведомлению, а по зову сердца ✊
Спасибо!
Очень качественный ролик, спасибо вам
Пожалуйста!
Круто, что сам учишься и начал использовать const, где это нужно, вместо let, ещё и в веб-доступности прибавил.
Единственный канал на чей патреон я подписан)
Топ!
Спасибо!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье
Круто! Благодарю!
Пожалуйста!
Воспользовался, всё отлично!)
ТОп Женя!!!Как всегда!!так держать!!уважуха
Офигеть, думал как это сделать и тут такая годнота! Спасибо
Пожалуйста!
Просто более "вовремя" придумать невозможно, завтра планировал звёзды делать :))) 👋👋👋
Я рад!
Спасибооооо! 🤩🤩🤩🤩🤩
⭐⭐⭐⭐⭐ Теперь знаю как сделается такие плюшки.
Пожалуйста!
Жень сразу лайк,как всегда топ.
Спасибо!
Очень полезненько)) Спасибо)
Я рад! Пожалуйста!
щас пересматривал старые видео, чтобы освежить память, вы очень сильно изменились - подача, монтаж, уверенность в голосе! растёте 🤩 желаю в новом году становиться ещё лучше 🤟
Спасибо!
Как всегда супер! Спасибо!!! А когда будет марафон?
Спасибо за урок! Сделай еще по оптимизации google page speed. Очень нужно
Всегда хотел узнать как это делается), спасибо!
Спасибо, давно ждал об этом урок!) Очень пригодится в будущих проектах!
Привет,очень круто👍
Спасибо!
круто! Спасибо
Спасибо за урок! Ждём калькулятор стоимости)
Спасибо круто 👌👌👌
Женя привет, можешь ли посоветовать книжку для изучения HTML и CSS или что-нибудь посоветовать для хорошего закрепления материала?
Твой бесплатный курс по верстке лучше, чем многие платные курсы)
Супер! Оце так дякую! 👍👍👍
Будь ласка
Второй раз смотрю, очень круто!) Когда рейтингов несколько, как получить для каждого рейтинга свой рейтинг из json?
Люблю такие "извращенные" способы)
Отличный урок, спасибо! (Еще лучше он смотрелся бы в рамках серии уроков по JS, как какое-нибудь практическое задание)
Серия уроков по JS есть. Новые уроки готовяться
100500 пальцев вверх!!! Спасибо огромное! Я вами восхищаюсь!
Спасибо! Рад что полезно!
Шикарно
Спасибо!
Круто!
Спасибо!
Привет!! Смотрю с большим удовольствием твои видосы особенно уроке по вёрстке, решил обучится на IT. У меня к тебе огромная просьба если конечно сможешь мне подсказать какой ноут купить для начинающего ITишника, бюджет до 80000₽
Лайк не глядя!
Спасибо!
Як завжди, на висоті.
дякую!
Лайк, коммент - смотреть!
Спасибо!
Недавно смотрел видео, думал "че за фигня в работе и без радио обходился" и дизлайкнул.
А тут на работе задача прилетела и имено рейтинг на радио ))
Карма. Лайк поставил 😂
Неплохо, я тоже недавно пытался сделать такую же штуку но без ajax запросов.
круть
Меняю коментарии на лайки от автора канала!! Спасибо за видео))
Пожалуйста!
Очень круто, спасибо) Как быть, если по дизайну, нужна другая иконка, вместо звезды?Как поставить любую иконку?
Жень, привет.
Скажи пожалуйста, что потом делаешь с версткой, отдаёшь на посадку CMS? И интересно на какую CMS сажается вёрстка, Wordpress или другая
Спасибо)
Я просто отдаю. Обычно сажают на одну из цмс, реже это некий самописный движок
Зайшов поставити лайк! А подивлюсь пізніше, знадобиться!!!:) Дякую, Жека!)
Будь ласка
Нифига себе! Жека, а ты случайно мысли читать не умеешь? Сижу, думаю как сделать звездочки... Прям в эту же секунду твой видос😂😂
Спасибо огромное за твой труд)
Пожалуйста!
спасибо за урок)
Получается, если рейтинг в карточках товаров то для каждого рейтинга у инпутов должны быть разные имена?
спасибо тебе, добрый человек! не могла въехать, почему не работает ))))
здравствуйте, могли бы вы подсказать, как реалтзовать заполнение звездочки снизу вверх, рейтинг от 1 до 5. У меня звездочка заполняется сверху вниз, а мне надо наоборот
Ты топ и это не обсуждается, но можно вопрос а будут ли макеты где js просто по потолку на твоëм канале? И хотел сказать ты всегда выпускаешь ролики тогда когда я что-то не понимаю а потом смотрю а у жени вышел подробный видос на эту тему
я рад
Привет, с наступившим!!! Подскажи пожалуйста такой вопрос: Как обыграть display:none - display:block, что бы плавность какую-нить добавить? Может у тебя уже есть видео, а я пропустил?
Он говорил, что с Дисплеем плавность не работает. Используй Opacity: 0 и opacity:1
черговий геніальний урок від маестро
если я правильно понял то data-ajax="true" - заставляет работать fetch запрос? а то для такого я раньше запускал локальний сервер
Спасибо за видео)). Реализация класс. Ребят у меня у одного на строку кода "let response = await fetch('rating.json', консоль ругается на fetch и выдает ошибку??
Путь к файлу верный? Нужно все проверить
Хэлоу пипол ! а есть у Вас урок по разработке блока комментариев к статье или товару ?
Хотел спросить, сейчас больше на CMS перешли,я новичок,хотелось узнать можно ли только фронтендом обойтись или можно CMS заниматса?
Нужно быть спецом, в чем именно не столь важно
нериально круто
Спасибо!
Привет, подскажи пожалуйста, есть ли у тебя курсы? Я на твоём канале учил html и css. Но в голове кавардак, нужна рука мастера и конечно же js выучить. Если есть, то где и как узнать что да как? Спасибо
Мне даже не для работы, просто очень понравилось, хочу для себя изучить
Привет, есть edu.fls.guru/
👍👍👍🔥
Спасибо!
Это круто, но нужно сказать, что сейчас существует различных сторонних скриптов позволяющих делать это куда проще, об этом тоже стоит сказать (я сам не сторонник билдеров), но к примеру 1 человек может отправлять много таких запросов это -
про множественную отправку и как это контролировать я говорил в видео. поскольку тут нет ничего сложного я не вижу смысла использовать сторонние решения.
Жека, видео про тултипы очень не хватает!!!)))))
А обязательно ли использовать именно radio button? Можно же сделать изначально звезды и отлавливать события нажатия на них. Или я упускаю тайный смысл использования именно радиокнопок?
данные (value) из выбранной кнопки отправляются на сервер.
@@FreelancerLifeStyle любые данные и так можно отправить на сервер без особых проблем вроде. Отслеживай себе событие клика по звездам, а дальше делай, что хочешь - отправляй данные, перерисовывай рейтинг и т.д.
@@phat80 да, но зачем лишнее писать)
Ваааауу
🤩🤩🤩
а как сделать чтобы этот рейтинг работал например на трех блоках?
Привет, а ты собираешься делать выпуск о pagespeed от гугла? в рунете ты главный кандидат знающий как оптимизировать это дело ) очень хотелось бы от тебя увидеть видео
Кстати, да, очень хотелось бы ролик об оптимизации страницы)
Спасибки, но у меня почему-то на последнем этапе в простой версии звезд они не выделяются по клику. Уже на 100 раз код проверил. Походу я конечно дурак, но может реально лыжи не едут)
Дуже гарно й зрозуміло подана інформація, дякую
Будь ласка
Сделай "живую" 3D модель на сайте , было бы круто!
Какой плагин он юзает для того, чтобы верстка в риалтайме менялась?
Это расширение Live Server для редактора кода VS Code
Жень, я правильно понимаю, что в чистом JS какой-то встроенной функции-аналога $(document).ready(function() { }); нет, которая есть в jQuery? Я гуглю, но там предлагают очень длинным кодом заменять. В этом видео ты тоже ничего такого не используешь. Насколько это актуальная функция в 2021 и стоит ли заморачиваться и писать какие-то аналоги на чистом JS?
Вот почитай, скоро будет видос по этому learn.javascript.ru/onload-ondomcontentloaded
@@FreelancerLifeStyle Евгений, вы просто восхитительный человек!)
Блин, нормально, что я не с первого раза запомнил как это делать? Как вы советуете со своим материалом работать, учить его?
Присоединяюсь..
Конечно нормально. Это готовое решение, для учебы есть отдельный плейлист с курсом.
Ставим лайки и коменты плиз!!!!!¡!!!!!!!!!!!!!
Да!
Спасибо за подачу! А как сделать расстояние между звездочками?) Всё перепробовал..
letter-spacing у меня меняет расстояние между звездочками. Звездочка в видео - это текст.
Привет Жека! Можешь сделать новое видео о созданий многостраничного сайта с помощью javascript. С помощью php нашел, а с помощью javascript не нашел. Буду благодарен!
Как сделать так, чтобы когда поставишь например 3 звезды, появлялся блок для оставить отзыв??
Надо в топ, чтоб жека увидел
@@timurarazmedov8416 ага
это совсем другая история..
@@FreelancerLifeStyle вы сможете написать пост, как это сделать, или отдельное видео сделать?)
У меня JS рейтинг(что в форме) изменяется и реагирует при нажатии ajax рейтинга
так же ругается setRatingValue(ratingItem.value, rating) без async находит
Нужно внимательно все проверить)
@@FreelancerLifeStyle, да к document обращался, все работает но почему синтаксис подчеркивает newRating и setRatingValue dropmefiles.com/YraRK
Такой вопрос повторил полностью за тобой но вот такая беда, не показывает дробрый результат, допустим когда я хочу выбрать 3.5 выбирается только 4, как это исправить?
Думаю что следует все еще раз проверить
то же самое, получилось решить?
@@dimakazantsev9240 уверен, что просто не внимательно слушали.
@@FreelancerLifeStyle по сути там же нельзя вручную задать не целое значение
Диз поставил тот кто начал верстку и не осилил. ТОП контент.
Спасибо!
Такой ролик и в кинотеатрах ставить не жалко
Спасибо!
Дуже круто, тільки я мало що розумію, тільки почав проходити ваш курс по HTML.
Нічого, пізніше буде зрозуміло))
Це кращі курси на ютюбі які я знаю. Починай з перших уроків і тупо все переписуй. Людина реально вчить а не їздить по вухах заголовками "html за час".
@@vasil-vasil Я вже почав.
А так справді вже задовбало дивитися ролики як вивчити js за 1 год., чи курси як багато заробляти і стати прогером за 3 міс.
@@yevhenivanovsky 😁😁😁
Такие вещи лучше делать на Svelte. Будет удобно синхронизировать состояние с отображением...
Как кому удобно. Мне лучше понимать как все работает изнутри
скажите есть смысл подписываться на патреон?
Открой, посмотри заголовки постов и решай)
Скажите, это Джун должен уметь? Я в шоке просто от кол-ва функций!
Всім привіт, дякую за урок, все ніби вийшло і працює але є одне але, на мобільному пристрої зірочки не докінця закрашуються і видно що вони іншого кольору, хтось знає в чому проблема та як вирішити?
Лайки лайки)
Спасибо!
а как сделать отступы между звёздами?
letter-spacing попробуйте.
а как на счет рейтинга с помощью свг?
Не вижу преимуществ
@@FreelancerLifeStyle а в этом варианте можно применить свг? будет так же работать?
Как убрать папку/файл с рабочей области в vs code но не удалить?
Правой кнопкой мыши по пустому месту и Remove from Workspace, при этом папки должны быть закрыты в VS Code
@@miraigrafit7865 спасибо