Практикум №6

Описание задания вы всегда можете посмотреть под спойлером.


В прошлом занятии финальный код нашего скрипта был следующий:

Код

let startBtn = document.getElementById('start'),
  budgetValue = document.getElementsByClassName('budget-value')[0],
  dayBudgetValue = document.getElementsByClassName('daybudget-value')[0],
  levelValue = document.getElementsByClassName('level-value')[0],
  expensesValue = document.getElementsByClassName('expenses-value')[0],
  optionalExpensesValue = document.getElementsByClassName('optionalexpenses-value')[0],
  incomeValue = document.getElementsByClassName('income-value')[0],
  monthSavingsValue = document.getElementsByClassName('monthsavings-value')[0],
  yearSavingsValue = document.getElementsByClassName('yearsavings-value')[0],

  expensesItem = document.getElementsByClassName('expenses-item'),
  expensesBtn = document.getElementsByTagName('button')[0],
  optionalExpensesBtn = document.getElementsByTagName('button')[1],
  countBtn = document.getElementsByTagName('button')[2],
  optionalExpensesItem = document.querySelectorAll('.optionalexpenses-item');

  incomeItem = document.querySelector('.choose-income'),
  checkSavings = document.querySelector('#savings'),
  sumValue = document.querySelector('.choose-sum'),
  percentValue = document.querySelector('.choose-percent'),
  yearValue = document.querySelector('.year-value'),
  monthValue = document.querySelector('.month-value'),
  dayValue = document.querySelector('.day-value');
   
  let money, time;

  function start() {
  money = +prompt('Ваш бюджет на месяц?', '');
  time = prompt('Введите дату в формате YYYY-MM-DD', '');

  while (isNaN(money) || money == null || money == '') {
  money = +prompt('Введите ваш бюджет на месяц', '');
  }
  }
  start();

  let appData = {
  budget: money,
  timeData: time,
  expenses: {},
  optionalExpenses: {},
  income: [],
  savings: false,
  chooseExpenses: function () {
  for (let i = 0; i < 2; i++) {
  let a = prompt('Введите обязательную статью расходов в этом месяце', ''),
  b = prompt('Во сколько обойдётся?', '');

  if (typeof (a) != null && typeof (b) != null && a != '' && b != '' && a.length < 50) {

  appData.expenses[a] = b;
  } else {
  i--;
  }

  }
  },
  detectDayBudget: function () {
  appData.moneyPerDay = (appData.budget / 30).toFixed(2);
  alert(appData.moneyPerDay);
  },
  checkSavings: function () {
  if (appData.savings == true) {
  let save = +prompt('Какова сумма накоплений?', ''),
  percent = +prompt('Под какой процент?', '');

  appData.monthIncome = save / 100 / 12 * percent;
  alert('Доход в месяц с вашего депозита: ' + appData.monthIncome);
  }
  },
  detectLevel: function () {
  if (appData.moneyPerDay < 500) {
  console.log('Низкий уровень дохода');
  } else if (appData.moneyPerDay > 500 && appData.moneyPerDay < 1000) {
  console.log('Средний уровень дохода');
  } else if (appData.moneyPerDay > 1000) {
  console.log('Высокий уровень дохода');
  } else {
  console.log('Что-то пошло не так');
  }
  },
  chooseOptExpenses: function () {
  for (let i = 1; i <= 3; i++) {
  let questionOptExpenses = prompt('Статья необязательных расходов?', '');

  appData.optionalExpenses[i] = questionOptExpenses;
  console.log(appData.optionalExpenses);
  }
  },
  chooseIncome: function () {
  let items = prompt('Что принесёт дополнительный доход? (Перечислите через запятую)', '');
  while (typeof (items) != 'string' || typeof (items) == null || items == '') {
  items = prompt('Что принесёт дополнительный доход? (Перечислите через запятую)', '');
  }
  appData.income = items.split(', ');
  appData.income.push(prompt('Может быть что-то еще?', ''));
  appData.income.sort();

  appData.income.forEach(function (itemmassive, i) {
  alert('Способы дополнительного заработка: ' + (i + 1) + ' - ' + itemmassive);
  });
  }

  };

  for (let key in appData) {
  console.log('Наша программа включает в себя данные: ' + key + ' - ' + appData[key]);
  }


Задание 1



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

Но, хочу обратить ваше внимание, что кнопку мы с вами уже выбрали ранее, вот здесь, в самой первой строке нашей программы:

Код

let startBtn = document.getElementById('start');


мы воспользовались тем, что у кнопки "Начать расчёт" задан изначально какой-то идентификатор (id = 'start') и по нему выбрали эту кнопку.

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

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

Выбранная нами кнопка сохранена в переменной startBtn, поэтому мы с полным правом можем оперировать именно переменной, и к ней привязывать функцию:

Код

startBtn.addEventListener('click', function() {
  time = prompt('Введите дату в формате YYYY-MM-DD', '');
  money = +prompt('Ваш бюджет на месяц?', '');
   
  while (isNaN(money) || money == null || money == '') {
  money = +prompt('Введите ваш бюджет на месяц', '');
  }
});


В данном коде вы, возможно, увидели что-то новое, а именно, метод addEventListener(), с помощью него назначается обработчик события (или обработчики, если их несколько).

Общий синтаксис его таков:

Код

element.addEventListener(event, handler[, options]);


где event - событие, например, 'click'

handler - ссылка на функцию-обработчик

options - дополнительный объект со свойствами

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

Оставшийся от функции код её объявления и вызова удалите за ненадобностью:

Код

function start() {

}
start();


Теперь нам остаётся полученные от пользователя данные о бюджете и дате передать в наш объект appData:

Код

startBtn.addEventListener('click', function() {
  time = prompt('Введите дату в формате YYYY-MM-DD', '');
  money = +prompt('Ваш бюджет на месяц?', '');

  while (isNaN(money) || money == null || money == '') {
  money = +prompt('Введите ваш бюджет на месяц', '');
  }

  appData.budget = money;
  appData.timeData = time;
});


В самом объекте appData удалите вот этот код:

Код

  budget: money,
  timeData: time,


он нам в объекте не нужен, поскольку будет добавляться туда автоматически в результате работы функции (см. код выше)

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



ок, алгоритм тот же, сначала находим в коде нужный элемент, а в данном случае это будет пустой блок div с классом budget-value:

Код

  <div class="budget">Доход: </div>
  <div class="budget-value"></div>


этот блок у нас тоже выбран ранее и сохранён в переменной budgetValue:

Код
let budgetValue = document.getElementsByClassName('budget-value')[0];


И далее уже мы используем непосредственно переменную budgetValue, чтобы с помощью свойства textContent поместить в наш блок div полученное от пользователя значение бюджета (см. последнюю строку кода), которое мы к тому же сразу округлим до ближайшего целого числа с помощью метода toFixed():

Код

startBtn.addEventListener('click', function() {
  time = prompt('Введите дату в формате YYYY-MM-DD', '');
  money = +prompt('Ваш бюджет на месяц?', '');

  while (isNaN(money) || money == null || money == '') {
  money = +prompt('Введите ваш бюджет на месяц', '');
  }

  appData.budget = money;
  appData.timeData = time;
  budgetValue.textContent = money.toFixed();
});


Хорошо,с бюджетом мы разобрались. Теперь нам необходимо, чтобы те данные о дате, которые ввел пользователь, отобразились в соответствующих полях "Год", "Месяц" и "День":



Если мы проанализируем html-код страницы, то увидим, что эти поля не что иное как инпуты:

Код

  <div class="time-data">
  <div class="year">
  Год:
  <input class="year-value" type="text" readonly>
  </div>
  <div class="month">
  Месяц:
  <input class="month-value" type="text" readonly>
  </div>
  <div class="day">
  День:
  <input class="day-value" type="text" readonly>
  </div>
  </div>


Атрибут readonly у этих инпутов означает, что пользователь сам в эти инпуты не может ввести никаких данных. Для вывода же нужных нам данных в эти инпуты мы можем воспользоваться атрибутом value, который для текстовых полей указывает предварительно введённую строку.
Проще говоря, то что вы ввели в атрибуте value, отразится в инпуте, например:

Код

<input value = 'test' class="year-value" type="text" readonly>


в инпуте выведется: "test" и т.п

Как мы можем это использовать? Для начала давайте найдём наш элемент (инпут), в котором должен выводиться год, он у нас уже найден и сохранён в переменной yearValue:

Код

yearValue = document.querySelector('.year-value');


и теперь мы работаем уже с value, а не с textContent, и это более правильный подход при работе с элементом, имеющим данный атрибут:

Код

yearValue.value = new Date( Date.parse(time) ).getFullYear();


Как в данном случае мы получаем год, который указал пользователь в диалоговом окне? Данные, полученные от пользователя и сохранённые затем в переменной time, подвергаются обработке с помощью метода Date.parse()

Метод Date.parse() разбирает строковое представление даты и возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC.

Затем, результаты работы данного метода(полученные миллисекунды) формируют новую дату, а чтобы получить из этой даты конкретно год, используется метод getFullYear().
Именно так это и работает.

Теперь нам нужно получить значение месяца. Нужный нам инпут был ранее найден и сохранён в переменной monthValue

Код

monthValue = document.querySelector('.month-value');


аналогично, как в случае с предыдущим инпутом, записываем:

Код

monthValue.value = new Date( Date.parse(time) ).getMonth() + 1;


эта строка кода отличается от предыдущей тем,что в конце используется метод getMonth(), чтобы получить значение месяца.

Единицу в конце мы прибавляем ввиду того, что при работе данного метода первый месяц выдается с индексом 0, а последний 11. Поэтому, чтобы получить корректное значение месяца, мы делаем корректировку в виде прибавления единицы.

И осталось получить значение дня, нужный нам инпут был нами сохранён в переменной dayValue :

Код

dayValue = document.querySelector('.day-value');


пользуемся тем же принципом, что мы использовали для года и месяца:

Код

dayValue.value = new Date( Date.parse(time) ).getDate();


в данном случае для получения именно дня месяца из сформированной ранее даты, используется метод getDate().

Если мы сейчас протестируем нашу программу, а именно, запустим в браузере файл index.html, нажмём кнопку "Начать расчёт", в диалоговых окнах введём дату в нужном формате и бюджет, то увидим наши значения в соответствующих полях:



Для успешного завершения блока Задача №1 осталось реализовать только одно:

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

Данную задачу возможно реализовать с помощью свойства disabled для элемента. При этом используется булево значение.
Чтобы, к примеру, отключить элемент, устанавливается значение true, чтобы сделать элемент активным, устанавливается false

Применительно к нашей задаче:

Код

  expensesBtn.disabled = true;
  optionalExpensesBtn.disabled = true;
  countBtn.disabled = true;


Что мы сделали? Мы выбрали переменные, в которых у нас были сохранены ранее найденные нами в коде кнопки,и с помощью свойства disabled с присвоенным значением true сделали их неактивными.

Этот код нужно разместить сразу после объявления переменных money и time в коде нашей программы:



а в коде функции меняем булево значение на противоположное:

Код

  expensesBtn.disabled = false;
  optionalExpensesBtn.disabled = false;
  countBtn.disabled = false;




и теперь, пока мы не нажмём на кнопку "Начать расчёт" все остальные кнопки будут неактивны. Задача решена.

Задание 2



По логике нашей программы, при клике на кнопку "Утвердить" в блоке "Обязательные расходы", программа должна сложить все значения, которые мы ввели в поля и уже сумму всех этих значений вывести в правой части рядом с текстом "Обязательные расходы:"



В данном случае в нашей программе под обязательные расходы отведено лишь два поля, но, согласитесь, что их может быть гораздо больше.
Это также необходимо учесть в нашей программе.

Для начала найдём нашу кнопку "Утвердить" для данного блока в нашем коде, мы уже сделали это ранее и сохранили её в переменной expensesBtn:

Код

expensesBtn = document.getElementsByTagName('button')[0];


Также, как мы делали ранее, мы прикрепляем к ней обработчик события, событие в данном случае будет также click:

Код

expensesBtn.addEventListener('click', function() {

});


так как нам нужно узнать сумму всех обязательных расходов, объявим переменную sum, и зададим ей начальное значение равное нулю:

Код

expensesBtn.addEventListener('click', function() {
  let sum = 0;
});


Теперь вернёмся к нашему объекту appData и найдём в нём написанный нами ранее цикл for:

Код

  chooseExpenses: function () {
  for (let i = 0; i < 2; i++) {
  let a = prompt('Введите обязательную статью расходов в этом месяце', ''),
  b = prompt('Во сколько обойдётся?', '');

  if (typeof (a) != null && typeof (b) != null && a != '' && b != '' && a.length < 50) {

  appData.expenses[a] = b;
  } else {
  i--;
  }

  }
  },


берём этот цикл и вставляем внутрь нашей функции:

Код

expensesBtn.addEventListener('click', function() {
  let sum = 0;

  for (let i = 0; i < 2; i++) {
  let a = prompt('Введите обязательную статью расходов в этом месяце', ''),
  b = prompt('Во сколько обойдётся?', '');

  if (typeof (a) != null && typeof (b) != null && a != '' && b != '' && a.length < 50) {

  appData.expenses[a] = b;
  } else {
  i--;
  }

  }
});


оставшийся в объекте appData ненужный код

Код

  chooseExpenses: function () {

  },


удаляем.

В условии нашего цикла for сейчас прописано i < 2, но в данном случае i будет у нас определять количество инпутов, поэтому вместо цифры 2 нам нужно указать длину псевдомассива (ведь мы получаем псевдомассив), который у нас сохранён в переменной expensesItem

Код
expensesItem = document.getElementsByClassName('expenses-item')


поэтому нам нужно обратиться к элементу, содержащему все элементы этого псевдомассива и указать для него свойство length в условии цикла:

Код

expensesBtn.addEventListener('click', function() {
  let sum = 0;
  for (let i = 0; i < expensesItem.length; i++) {
  let a = prompt('Введите обязательную статью расходов в этом месяце', ''),
  b = prompt('Во сколько обойдётся?', '');

  if (typeof (a) != null && typeof (b) != null && a != '' && b != '' && a.length < 50) {

  appData.expenses[a] = b;
  } else {
  i--;
  }

  }
});


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



мы можем это использовать, чтобы сохранять значения из чётных инпутов в переменную a, а нечётных - в переменную b (prompt из переменных мы удалим, он нам не нужен больше):

Код

expensesBtn.addEventListener('click', function() {

  let sum = 0;
  for (let i = 0; i < expensesItem.length; i++) {
  let a = expensesItem[i].value,
  b = expensesItem[++i].value;

  if (typeof (a) != null && typeof (b) != null && a != '' && b != '' && a.length < 50) {

  appData.expenses[a] = b;
  } else {
  i--;
  }

  }
});


и теперь данные будут сохраняться в объект appData и в этом можно убедиться, вызвав в консоли содержимое объекта после введения данных в поля обязательных расходов:



Мы изначально, создав переменную sum, присвоили ей значение 0, для того, чтобы каждый раз при прибавлении значения переменной b она изменялась, допишем строку кода:

Код
sum += +b;


плюс перед b нужен для того, чтобы каждый раз в переменную sum передавалось именно число, а не строка, потому что value из инпута возвращает строку.

Теперь нам остаётся записать нашу сумму в графу "Обязательные расходы" в правой части программы. Нужный нам блок div с классом expenses-value уже нами был сохранён в переменной expensesValue:

Код

expensesValue = document.getElementsByClassName('expenses-value')[0]


берём эту переменную и с помощью textContent добавляем значение переменной sum в графу обязательные расходы:

Код

expensesBtn.addEventListener('click', function() {
  let sum = 0;
  for (let i = 0; i < expensesItem.length; i++) {
  let a = expensesItem[i].value,
  b = expensesItem[++i].value;

  if (typeof (a) != null && typeof (b) != null && a != '' && b != '' && a.length < 50) {

  appData.expenses[a] = b;
  sum += +b;
  } else {
  i--;
  }

  }
  expensesValue.textContent = sum;
});


если теперь протестировать нашу программу, то в графе "Обязательные расходы" в правой части программы мы увидим суммарное значение расходов из полей слева:



Задание 3



В этом задании нам предлагается реализовать следующее: в блоке ввода данных с левой стороны интерфейса программы есть блок "Необязательные расходы", состоящий из трёх полей для ввода и кнопки "Утвердить".
Суть задания: после того, как все поля этого блока будут заполнены, при нажатии на кнопку "Утвердить" данные из этих трех полей должны отобразиться(через пробел) в блоке вывода с правой стороны в графе "Возможные траты"

Определяем нашу кнопку "Утвердить", она уже ранее была нами сохранена в переменной optionalExpensesBtn:

Код

optionalExpensesBtn = document.getElementsByTagName('button')[1]


и привязываем к ней также обработчик события, событие будет также click:

Код

optionalExpensesBtn.addEventListener('click', function() {

});


теперь опять идём в наш объект appData и находим в нём ранее написанный нами цикл для необязательных расходов:

Код

  chooseOptExpenses: function () {
  for (let i = 1; i <= 3; i++) {
  let questionOptExpenses = prompt('Статья необязательных расходов?', '');

  appData.optionalExpenses[i] = questionOptExpenses;
  console.log(appData.optionalExpenses);
  }
  },


мы берём только сам цикл (всё остальное удаляем) и вставляем его в наш обработчик событий:

Код

optionalExpensesBtn.addEventListener('click', function() {

  for (let i = 1; i <= 3; i++) {
  let questionOptExpenses = prompt('Статья необязательных расходов?', '');

  appData.optionalExpenses[i] = questionOptExpenses;
  console.log(appData.optionalExpenses);
  }
});


конечно же, первым делом скорректируем условия цикла, начальное значение i сделаем равным нулю, а условием прекращения работы цикла будет i < optionalExpensesItem.length, то есть меньше длины псевдомассива, содержащего все поля инпут в блоке с необязательными расходами(у нас их три, но ведь их может быть и больше, помните?):

Код

optionalExpensesBtn.addEventListener('click', function() {

  for (let i = 0; i < optionalExpensesItem.length; i++) {
  let questionOptExpenses = prompt('Статья необязательных расходов?', '');

  appData.optionalExpenses[i] = questionOptExpenses;
  console.log(appData.optionalExpenses);
  }
});


в переменной questionOptExpenses вместо prompt() прописываем наш код с value:

Код
let questionOptExpenses = optionalExpensesItem[i].value;


у вас сейчас должен быть такой код для обработчика(console.log я удалил за ненужностью):

Код

optionalExpensesBtn.addEventListener('click', function() {

  for (let i = 0; i < optionalExpensesItem.length; i++) {
  let questionOptExpenses = optionalExpensesItem[i].value;

  appData.optionalExpenses[i] = questionOptExpenses;
  }
});


теперь все полученные в блоке ввода данные необязательных расходов нужно вывести в блоке вывода в графу "Возможные траты", а если точнее, вывести их нужно в блок div с классом optionalexpenses-value

Код

  <div class="optionalexpenses">Возможные траты: </div>
  <div class="optionalexpenses-value"></div>


он у нас ранее уже был сохранён в переменной optionalExpensesValue

Код
optionalExpensesValue = document.getElementsByClassName('optionalexpenses-value')[0]


пользуясь всё тем же textContent, реализуем нашу задачу:

Код

optionalExpensesValue.textContent += appData.optionalExpenses[i] + ' ';


полный код обработчика, соответственно, теперь такой:

Код

optionalExpensesBtn.addEventListener('click', function() {
  for (let i = 0; i < optionalExpensesItem.length; i++) {
  let questionOptExpenses = optionalExpensesItem[i].value;

  appData.optionalExpenses[i] = questionOptExpenses;
  optionalExpensesValue.textContent += appData.optionalExpenses[i] + ' ';
  }
});


проверим в браузере работоспособность нашего кода на данном этапе:



Задание 4



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

Начинаем с кнопки "Рассчитать", эту кнопку ранее мы сохраняли в переменную countBtn :

Код

countBtn = document.getElementsByTagName('button')[2]


привязываем к кнопке обработчик события 'click':

Код

countBtn.addEventListener('click', function() {

});


внутри этой каллбэк-функции нам нужно совместить две функции, которые у нас уже есть в объекте appData.
Первая у нас находится здесь, и она рассчитывает бюджет на день:

Код

  detectDayBudget: function () {
  appData.moneyPerDay = (appData.budget / 30).toFixed(2);
  alert(appData.moneyPerDay);
  },


А вторая здесь, и она оценивает уровень дохода на основе бюджета на день:

Код

  detectLevel: function () {
  if (appData.moneyPerDay < 500) {
  console.log('Низкий уровень дохода');
  } else if (appData.moneyPerDay > 500 && appData.moneyPerDay < 1000) {
  console.log('Средний уровень дохода');
  } else if (appData.moneyPerDay > 1000) {
  console.log('Высокий уровень дохода');
  } else {
  console.log('Что-то пошло не так');
  }
  },


Берём из первой функции вот эту строку кода:

Код

appData.moneyPerDay = (appData.budget / 30).toFixed(2);


и переносим её в тело нашей каллбэк-функции:

Код

countBtn.addEventListener('click', function() {
  appData.moneyPerDay = (appData.budget / 30).toFixed(2);
});


это позволит нам при клике на кнопку "Рассчитать" вычислить дневной бюджет пользователя, нам остаётся лишь вывести его в блоке вывода данных справа в графе "Бюджет на один день" (а точнее, в блоке div с классом daybudget-value)

Код

  <div class="daybudget">Бюджет на 1 день: </div>
  <div class="daybudget-value"></div>


данный блок был сохранён у нас в переменной dayBudgetValue:

Код

dayBudgetValue = document.getElementsByClassName('daybudget-value')[0]


Опять же, с помощью textContent, реализуем вывод необходимой информации в этот блок:

Код

dayBudgetValue.textContent = appData.moneyPerDay;


Теперь берём внутренности функции detectLevel из объекта appData:

Код

  if (appData.moneyPerDay < 500) {
  console.log('Низкий уровень дохода');
  } else if (appData.moneyPerDay > 500 && appData.moneyPerDay < 1000) {
  console.log('Средний уровень дохода');
  } else if (appData.moneyPerDay > 1000) {
  console.log('Высокий уровень дохода');
  } else {
  console.log('Что-то пошло не так');
  }


и также вставляем их в нашу каллбэк-функцию:

Код

countBtn.addEventListener('click', function() {

  appData.moneyPerDay = (appData.budget / 30).toFixed(2);
  dayBudgetValue.textContent = appData.moneyPerDay;

  if (appData.moneyPerDay < 500) {
  console.log('Низкий уровень дохода');
  } else if (appData.moneyPerDay > 500 && appData.moneyPerDay < 1000) {
  console.log('Средний уровень дохода');
  } else if (appData.moneyPerDay > 1000) {
  console.log('Высокий уровень дохода');
  } else {
  console.log('Что-то пошло не так');
  }
});


оставшийся ненужный код от функций detectDayBudget и detectLevel в объекте appData можно теперь удалить.

Как видите, у нас результат оценки дохода выводится в консоль через console.log, нам же нужно результаты выводить в блок вывода программного интерфейса, в графу "Уровень дохода", поэтому вместо console.log нам нужно везде подставить переменную, в которую сохранён нужный нам блок div (блок div, в который будет выводится текст с оценкой уровня дохода).

Этот блок div сохранён у нас в переменной levelValue, и поэтому мы, используя всё тот же textContent, заменяем console.log:

Код

countBtn.addEventListener('click', function() {

  appData.moneyPerDay = (appData.budget / 30).toFixed(2);
  dayBudgetValue.textContent = appData.moneyPerDay;

  if (appData.moneyPerDay < 500) {
  levelValue.textContent = 'Низкий уровень дохода';
  } else if (appData.moneyPerDay > 500 && appData.moneyPerDay < 1000) {
  levelValue.textContent = 'Средний уровень дохода';
  } else if (appData.moneyPerDay > 1000) {
  levelValue.textContent = 'Высокий уровень дохода';
  } else {
  levelValue.textContent = 'Что-то пошло не так';
  }
});


мы можем протестировать сейчас как работает наша программа:



всё функционирует, нам осталось лишь при расчёте дневного бюджета учесть все обязательные расходы месяца, для этого мы строку кода:

Код

appData.moneyPerDay = (appData.budget / 30).toFixed(2);


перепишем таким образом:

Код

appData.moneyPerDay = ( (appData.budget - +expensesValue.textContent) / 30).toFixed(2);


полный код этого блока программы:

Код

countBtn.addEventListener('click', function() {

  appData.moneyPerDay = ( (appData.budget - +expensesValue.textContent) / 30).toFixed(2);
  dayBudgetValue.textContent = appData.moneyPerDay;

  if (appData.moneyPerDay < 500) {
  levelValue.textContent = 'Низкий уровень дохода';
  } else if (appData.moneyPerDay > 500 && appData.moneyPerDay < 1000) {
  levelValue.textContent = 'Средний уровень дохода';
  } else if (appData.moneyPerDay > 1000) {
  levelValue.textContent = 'Высокий уровень дохода';
  } else {
  levelValue.textContent = 'Что-то пошло не так';
  }
});

Комментарии к материалу: