Модальное окно на JavaScript
Категория: JavaScript
Модальные окна - очень удобное и эффектное средство для предоставления какой-либо информации или формы по запросу пользователя (например, при клике на ссылку, кнопку и т.д.) Изначально на странице сайта подобное окно скрыто (что позволяет экономить место на сайте, а также положительно сказывается на восприятии страницы сайта в целом), при клике же на элемент-триггер, окно появляется. Сегодня мы будем учиться создавать модальные окна, а главное разберём логику и алгоритм создания таких окон.
15.07.2020
Таймер обратного отсчёта на JavaScript
Категория: JavaScript
Спешите! Акция ограничена по времени! До конца акции осталось....Вы часто можете увидеть подобную информацию на сайтах интернет-магазинов, на продающих лендинг-страницах. И одним из побуждающих к действию факторов служит таймер оставшегося времени, который видит посетитель сайта. Сегодня мы будем делать такой таймер обратного отсчёта, используя JavaScript.
10.05.2020
Делаем табы на странице сайта на чистом JavaScript
Категория: JavaScript
Табы(или вкладки) на страницах сайта порой дают неоспоримые преимущества в плане организации и размещения контента. Согласитесь, длинный объёмный блок текста выглядит громоздко, совсем другое дело, если он структурирован и разбит на отдельные части, каждая из которых располагается в своей вкладке. Табы позволяют сэкономить место на сайте, а также логически выделить отдельные блоки информации друг от друга, при этом повышается читаемость информации и её доступность.
В этом уроке мы создадим табы на чистом JavaScript, без использования каких-либо библиотек. Для оформления мы позовём на помощь CSS.
06.05.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
Практикум №4
Категория: JavaScript
В данном уроке мы добавим наши функции в объект appData, превратив их, таким образом, в методы этого объекта.
Задачи:
1. Перенести все ранее созданные нами функции в объект appData.
2. Добавить в объект appData новый метод chooseIncome, отражающий дополнительный доход пользователя. Для получения информации от пользователя будем использовать prompt() с вопросом: "Что принесёт дополнительный доход? (Перечислите через запятую)" И второй вопрос, уточняющий, который будет задаваться после первого: "Может быть что-то еще?"
С помощью метода split() передать полученную информацию от пользователя в свойство income: [] объекта appData.
Отсортировать в свойстве income с помощью метода sort() полученную от пользователя информацию.
3. Написать проверку того, что пользователь в диалоге с вопросом "Что принесёт дополнительный доход? (Перечислите через запятую)" может ввести только строку, не оставит строку пустой, а также не сможет отменить вопрос.
4. Данная задача должна быть реализована внутри метода chooseIncome объекта appData.
Вывести на экран сообщение о способах дополнительного заработка, используя метод перебора массива forEach. Сообщение должно содержать заголовок "Способы доп. заработка: " и полученные от пользователя данные о способах дополнительного заработка, которые должны иметь нумерацию, начиная с 1 (не с нуля!)
5. Используя цикл for in, вывести в консоль "Наша программа включает в себя данные: " (содержимое объекта appData).
14.03.2020
Практикум №3
Категория: JavaScript
В этом уроке мы продолжим дорабатывать программу, которую начали писать в предыдущих двух уроках, но теперь мы задействуем функции!
Задачи:
1. Оформить блок кода с вопросами "Ваш бюджет на месяц" и "Введите дату в формате YYYY-MM-DD" в виде функции start(), предусмотреть варианты, при которых пользователь вводит некорректные данные в поля модальных окон.
2. Оформить в виде функции chooseExpenses() блок выбора обязательных расходов.
3. Полученную цифру ежедневного бюджета (moneyPerDay) округлить до двух знаков после запятой с помощью метода toFixed()
4. Написать функцию checkSavings() расчёта ежемесячного дохода с накоплений пользователя (если таковые у него имеются), при этом необходимо задать пользователю следующие вопросы: "Какова сумма накоплений?" и "Под какой процент?"
5. Расчёт дневного дохода и его вывод на экран оформить как функцию detectDayBudget()
6. Блок кода с расчётом уровня доходов пользователя оформить как функцию detectLevel()
7. Создать функцию chooseOptExpenses(), определяющую необязательные расходы, при этом вопрос пользователю "Статья необязательных расходов?" необходимо задать 3 раза. Ответы должны быть записаны в объект optionalExpenses в формате Номер: Ответ, например:
Код optionalExpenses = { 1: "Ответ на вопрос" }
11.03.2020
Практикум №2
Категория: JavaScript
Продолжение предыдущего урока. В этой части мы займёмся оптимизацией кода, полученного нами в практикум №1.
Задачи:
1. Написать цикл if/else, который будет задавать вопросы пользователю.
2. Учесть в цикле условия:
- пользователь вводит в ответ не числовое значение - пользователь при открытии диалогового окна диалога prompt() нажал "Отмена" - пользователь, ничего не введя в диалоговом окне, нажал "Ок" - запретить ввод пользователем количества символов, большего 50 - Предусмотреть вариант, что ни одно из условий не сработало 3. Добавить в объект appData новое свойство (ежедневный бюджет) moneyPerDay
4. Вывести в консоль, в зависимости от ежедневного дохода (moneyPerDay), определение дохода пользователя:
- если ежедневный бюджет менее 500, считать низким уровнем доходов пользователя - если более 500, но менее 1000 - средним уровнем доходов - если более 1000, то высоким
07.03.2020
|