Используем классы в JS на реальном примере (выводим карточки товара на странице сайта)

Категория: JavaScript



Мы уже познакомились с понятием классов в JavaScript и теперь настала пора применить эти знания на реальном примере: в данной статье мы разберём как с помощью классов можно вывести на страницу сайта карточки различных товаров, используя один заранее написанный шаблон-конструктор.

10.08.2020

Модальное окно на JavaScript

Категория: JavaScript



Модальные окна - очень удобное и эффектное средство для предоставления какой-либо информации или формы по запросу пользователя (например, при клике на ссылку, кнопку и т.д.)
Изначально на странице сайта подобное окно скрыто (что позволяет экономить место на сайте, а также положительно сказывается на восприятии страницы сайта в целом), при клике же на элемент-триггер, окно появляется.
Сегодня мы будем учиться создавать модальные окна, а главное разберём логику и алгоритм создания таких окон.

15.07.2020

Планировщик задач Gulp - мощный инструмент автоматизации для фронтенд-разработчика.

Категория: Разное



Сегодня я расскажу о Gulp - инструменте фронтендера, который призван намного облегчить ему жизнь при работе над своими проектами.
Если вкратце: это ваш помощник, который будет автоматически выполнять те задачи (таски), которые вы ему поручите.
Именно поэтому Gulp ещё называют таск-менеджером.

10.06.2020

SASS : первое знакомство с препроцессорами. Начало работы.

Категория: Разное



К привычной аббревиатуре CSS все давно уже привыкли, а что же такое SASS? Если коротко - это инструмент, позволяющий вам более комфортно и продуктивно работать с вашими CSS-стилями (особенно когда файл стилей имеет уже немалый размер).

Удобство выражается в том, что в SASS используются функции, недоступные в CSS, например: использование переменных, миксинов (многократно используемые определения для стилей оформления), вложенность и наследование и прочее.

Всё просто: вы пишите стили в SASS-файле, а препроцессор после их обработки сохраняет их в обычный CSS-файл.

02.06.2020

Делаем FAQ - часто задаваемые вопросы на сайте

Категория: jQuery



Так или иначе, при посещении какого-либо сайта, сервиса, интернет-магазина у пользователя возникают вопросы. Они могут быть связаны как с функционалом самого сайта, так и с его тематикой.
Часто, особенно на сайтах с большой посещаемостью, реализуется страница, где уже выложены ответы на наиболее часто задаваемые пользователями вопросы (FAQ, англ. frequently asked questions)
Попробуем сделать FAQ для страницы сайта на JavaScript.

21.05.2020

Таймер обратного отсчёта на JavaScript

Категория: JavaScript



Спешите! Акция ограничена по времени! До конца акции осталось....Вы часто можете увидеть подобную информацию на сайтах интернет-магазинов, на продающих лендинг-страницах. И одним из побуждающих к действию факторов служит таймер оставшегося времени, который видит посетитель сайта.
Сегодня мы будем делать такой таймер обратного отсчёта, используя JavaScript.

10.05.2020

Делаем табы на странице сайта на чистом JavaScript

Категория: JavaScript



Табы(или вкладки) на страницах сайта порой дают неоспоримые преимущества в плане организации и размещения контента. Согласитесь, длинный объёмный блок текста выглядит громоздко, совсем другое дело, если он структурирован и разбит на отдельные части, каждая из которых располагается в своей вкладке.
Табы позволяют сэкономить место на сайте, а также логически выделить отдельные блоки информации друг от друга, при этом повышается читаемость информации и её доступность.

В этом уроке мы создадим табы на чистом JavaScript, без использования каких-либо библиотек. Для оформления мы позовём на помощь CSS.

06.05.2020

Практикум №6 (продолжение)

Категория: JavaScript



Завершение практикума, начатого нами ранее. Первая часть здесь.

03.04.2020

Практикум №6

Категория: JavaScript



Сегодня будет итоговый практикум по нашей программе, которую мы составляли все предыдущие уроки. Полностью доработаем функционал.

Задачи:

1. Реализовать по клику на кнопке "Начать расчёт" появление диалоговых окон с запросом информации у пользователя.
Данные, полученные от пользователя, должны автоматически выводиться в полях "Доход", "Год", "Месяц" и "День" в правой части интерфейса программы.

До клика по кнопке "Начать расчёт" все остальные кнопки должны быть неактивны.

2. Реализовать следующий функционал: при вводе статей и сумм расхода в блоке "Обязательные расходы", при клике на кнопке "Утвердить" , сумма этих расходов должна выводиться в правой части интерфейса программы.

3. При вводе в блоке "Необязательные расходы" значений в отведённых для этого пустых полях, данные в должны продублироваться в правой части интерфейса программы после того, как будет нажата кнопка "Утвердить".
Данные должны выводиться в строку с пробелами между значениями.

4. При клике на кнопке "Рассчитать" программа должна вывести бюджет на один день в правой части программного интерфейса, и тамже вывести сообщение об уровне дохода пользователя.

При расчёте дневного бюджета должна быть учтена сумма обязательных расходов месяца.

5. При вводе наименований статей возможного дохода в левой части программы, они должны в реальном времени выводиться через запятую в правой части программы в поле "Дополнительный доход".

6. Программа должна рассчитывать накопления пользователя за месяц и за год на основе введённых им данных в полях "Сумма" и "Процент" и выводить итоговые цифры в правой части программного интерфейса.
Расчёт данных должен быть возможен только при активном чекбоксе рядом с фразой "Есть ли накопления?"

22.03.2020

Практикум №5

Категория: JavaScript



В сегодняшнем уроке мы начнём собирать нашу программу воедино: пропишем базовый интерфейс и поучимся получать доступ к элементам нашей страницы через JavaScript.

Задачи:

1. Создать папку task5, а в ней подпапки: css и js. В папке css создать файл стилей с именем style.css, в папке js создать файл скрипта main.js

В корневой директории папки task5 создать файл index.html с базовой html-структурой интерфейса нашей будущей программы.
Подключить файлы стилей и скрипта.

2. Получить кнопку "Начать расчёт" через id

3. Получить все блоки в правой части программы через классы (которые имеют класс название-value, начиная с

Код
<div class="budget-value"></div>
и заканчивая
Код
<div class="yearsavings-value"></div>
)

4. Получить поля(input) c обязательными расходами через класс. (class=”expenses-item”)

5. Получить кнопки “Утвердить” и “Рассчитать” через Tag, каждую в своей переменной.

6. Получить поля для ввода необязательных расходов (optionalexpenses-item) при помощи querySelectorAll

7. Получить оставшиеся поля через querySelector (статьи возможного дохода, чекбокс, сумма, процент, год, месяц, день)

15.03.2020

1 2 »