Делаем 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

Практикум №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

Практикум №1

Категория: JavaScript



Задачи:

1. Создать HTML-страницу и в её коде подключить файл скрипта с именем script.js

2. Создать файл скрипта script.js и внутри него объявить две переменные: money и time.
Переменная money будет получать ответ пользователя на вопрос: "Ваш бюджет на месяц?"
Переменная time будет также получать ответ пользователя, но уже на другой вопрос: "Введите дату в формате YYYY-MM-DD".

3. Создать объект appData с данными:
- бюджет (передаём сюда значение из переменной money)
- данные времени (передаём сюда значение переменной time)
- объект expenses в котором будут храниться данные об обязательных расходах
- объект optionalExpenses в котором будут храниться данные о необязательных расходах
- массив income для хранения данных о дополнительных доходах
- свойство savings с первоначальным значением false

4. Задать (по 2 раза) следующие вопросы пользователю:
- "Введите обязательную статью расходов в этом месяце"
- "Во сколько обойдется?"
Ответы необходимо записать в объект expenses в виде:

Код
expenses: {
'Ответ на первый вопрос': 'Ответ на второй вопрос'
}


5. Вывести на экран (с помощью alert) ежедневный бюджет пользователя (с учетом месяца в 30 дней).

05.03.2020