Практикум №5

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



Введение

Итак, после того как вы создали все нужные папки и файлы, откройте файл style.css и пропишите в нём следующие базовые стили оформления интерфейса нашей программы:

Код

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family: 'Roboto', sans-serif;
  outline:0
}
a{
  text-decoration:none
}
a:visited{
  text-decoration:none
}
a:hover{
  text-decoration:none
}
a:focus{
  text-decoration:none
}
a:active{
  text-decoration:none
}
.app{
  background-color:#ebebeb;
  min-height:800px
}
.logo{
  width:100%;
  height:60px;
  line-height:60px;
  background-color:#fff;
  box-shadow:0 1.5px 10px 0 rgba(1,0,42,.05);
  text-align:center
}
.logo span{
  color:#ff6a30
}
.title{
  width:100%;
  margin-top:30px;
  font-weight:500;
  font-size:20px;
  color:#262626;
  text-align:center
}
.main{
  display:flex;
  margin:0 10%;
  padding-top:40px
}
.data .choose-expenses,.data .choose-income-label,.data .count-budget,.data .optionalexpenses{
  margin:13px 0;
  font-weight:500;
  font-size:14px;
  color:#262626;
  text-align:center
}
.data .choose-income,.data .choose-percent,.data .choose-sum,.data .expenses-item,.data .optionalexpenses-item{
  height:35px;
  width:calc((100%/2) - 4px);
  border-radius:2.5px;
  background-color:#fff;
  box-shadow:0 2.5px 10px 0 rgba(1,0,42,.1);
  border:none;
  padding-left:10px;
  margin-bottom:10px;
  font-size:14px;
  color:#a7a7a7
}
.data .choose-income::-webkit-input-placeholder,.data .choose-percent::-webkit-input-placeholder,.data .choose-sum::-webkit-input-placeholder,.data .expenses-item::-webkit-input-placeholder,.data .optionalexpenses-item::-webkit-input-placeholder{
  opacity:.3
}
.data .choose-income:-ms-input-placeholder,.data .choose-percent:-ms-input-placeholder,.data .choose-sum:-ms-input-placeholder,.data .expenses-item:-ms-input-placeholder,.data .optionalexpenses-item:-ms-input-placeholder{
  opacity:.3
}
.data .choose-income::-ms-input-placeholder,.data .choose-percent::-ms-input-placeholder,.data .choose-sum::-ms-input-placeholder,.data .expenses-item::-ms-input-placeholder,.data .optionalexpenses-item::-ms-input-placeholder{
  opacity:.3
}
.data .choose-income::placeholder,.data .choose-percent::placeholder,.data .choose-sum::placeholder,.data .expenses-item::placeholder,.data .optionalexpenses-item::placeholder{
  opacity:.3
}
.data .count-budget-btn,.data .expenses-item-btn,.data .optionalexpenses-btn{
  width:70px;
  height:30px;
  display:block;
  margin:0 auto;
  border:none;
  border-radius:2.5px;
  background-image:linear-gradient(336deg,#0f76f5,#124ea0),linear-gradient(#fff,#fff);
  box-shadow:0 2.5px 10px 0 rgba(1,0,42,.1);
  color:#fff;
  font-weight:100;
  font-size:12px;
  cursor:pointer
}
.data .optionalexpenses-item{
  width:calc((100%/3) - 4px)
}
.data .count-budget-btn{
  width:120px
}
.data .choose-income{
  display:block;
  width:80%;
  margin:0 auto
}
.data .checksavings{
  margin:0 auto;
  margin-top:20px;
  text-align:center
}
.data .checksavings input{
  width:30px
}
.data .choose-percent,.data .choose-sum{
  width:30%;
  margin:15px
}
.data .start{
  width:70px;
  height:30px;
  display:block;
  margin:0 auto;
  border:none;
  border-radius:2.5px;
  background-image:linear-gradient(336deg,#0f76f5,#124ea0),linear-gradient(#fff,#fff);
  box-shadow:0 2.5px 10px 0 rgba(1,0,42,.1);
  color:#fff;
  font-weight:100;
  font-size:12px;
  cursor:pointer;
  width:200px;
  height:45px;
  margin-top:30px;
  font-size:18px;
  font-weight:100
}
.result{
  width:50%
}
.result-table{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  width:90%;
  min-height:400px;
  margin:0 auto;
  margin-top:42px;
  padding:25px;
  background-color:#fff;
  box-shadow:0 1.5px 20px 0 rgba(1,0,42,.1)
}
.result-table .budget,.result-table .budget-value,.result-table .daybudget,.result-table .daybudget-value,.result-table .expenses,.result-table .expenses-value,.result-table .income,.result-table .income-value,.result-table .level,.result-table .level-value,.result-table .monthsavings,.result-table .monthsavings-value,.result-table .optionalexpenses,.result-table .optionalexpenses-value,.result-table .yearsavings,.result-table .yearsavings-value{
  width:48%;
  margin-top:10px;
  min-height:40px;
  padding:10px;
  font-weight:500
}
.result-table .budget-value,.result-table .daybudget-value,.result-table .expenses-value,.result-table .income-value,.result-table .level-value,.result-table .monthsavings-value,.result-table .optionalexpenses-value,.result-table .yearsavings-value{
  color:#61a654;
  word-break:break-word
}
.result .time-data{
  width:100%;
  margin:0 auto;
  display:flex;
  justify-content:space-around;
  margin-top:40px
}
.result .time-data .day,.result .time-data .month,.result .time-data .year{
  font-size:16px;
  font-weight:500
}
.result .time-data .day-value,.result .time-data .month-value,.result .time-data .year-value{
  height:35px;
  width:calc((100%/2) - 4px);
  border-radius:2.5px;
  background-color:#fff;
  box-shadow:0 2.5px 10px 0 rgba(1,0,42,.1);
  border:none;
  padding-left:10px;
  margin-bottom:10px;
  font-size:14px;
  color:#a7a7a7;
  width:80px;
  height:30px;
  margin-left:25px
}


Содержимое файла index.html будет такое:

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&subset=cyrillic" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&display=swap&subset=cyrillic" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app">
  <div class="logo">
  <span>money</span>
  keeper
  </div>
  <div class="title">
  Расчет дневного бюджета
  </div>
  <div class="main">
  <div class="data">
  <div class="choose-expenses">Введите обязательные расходы</div>
  <input class="expenses-item" type="text" id="expenses_1" placeholder="Наименование">
  <input class="expenses-item" type="text" id="expenses_2" placeholder="Цена">
  <input class="expenses-item" type="text" id="expenses_3" placeholder="Наименование">
  <input class="expenses-item" type="text" id="expenses_4" placeholder="Цена">
  <button class="expenses-item-btn">Утвердить</button>
   
  <div class="optionalexpenses">Введите необязательные расходы</div>
  <input class="optionalexpenses-item" type="text" id="optionalexpenses_1">
  <input class="optionalexpenses-item" type="text" id="optionalexpenses_2">
  <input class="optionalexpenses-item" type="text" id="optionalexpenses_3">
  <button class="optionalexpenses-btn">Утвердить</button>
   
  <div class="count-budget">Расчет дневного бюджета</div>
  <button class="count-budget-btn">Рассчитать</button>
   
  <div class="choose-income-label">Введите статьи возможного дохода через запятую</div>
  <input class="choose-income" type="text" id="income">
   
  <div class="checksavings">Есть ли накопления:  
  <input id="savings" type="checkbox" />
  </div>
  <label for="sum">Сумма</label>
  <input class="choose-sum" id="sum" type="text">
  <label for="percent">Процент</label>
  <input class="choose-percent" id="percent" type="text">
   
  <div class="open">
  <button class="start" id="start">Начать расчет</button>
  </div>
  </div>
  <div class="result">
  <div class="result-table">
  <div class="budget">Доход: </div>
  <div class="budget-value"></div>
   
  <div class="daybudget">Бюджет на 1 день: </div>
  <div class="daybudget-value"></div>
   
  <div class="level">Уровень дохода: </div>
  <div class="level-value"></div>
   
  <div class="expenses">Обязательные расходы: </div>
  <div class="expenses-value"></div>
   
  <div class="optionalexpenses">Возможные траты: </div>
  <div class="optionalexpenses-value"></div>
   
  <div class="income">Дополнительный доход: </div>
  <div class="income-value"></div>
   
  <div class="monthsavings">Накопления за 1 месяц:</div>
  <div class="monthsavings-value"></div>
   
  <div class="yearsavings">Накопления за 1 год:</div>
  <div class="yearsavings-value"></div>
  </div>
  <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>
  </div>
  </div>
</div>
  <script src="js/main.js"></script>
</body>
</html>


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



Программа сейчас не рабочая, это графическая оболочка. Не задумывайтесь сейчас над css-стилями и html-кодом, это всего лишь вариант оформления интерфейса.
А чтобы программа заработала, этим мы и будем далее заниматься.

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



находим в коде страницы в файле index.html нашу кнопку "Начать расчёт":

Код
<button class="start" id="start">Начать расчет</button>


и видим, что её идентификатор (id) называется start, соответственно, чтобы нам получить кнопку по её идентификатору, в файле main.js прописываем:

Код
let startBtn = document.getElementById('start');


мы нашли на странице элемент с id = 'start' и сохранили его содержимое в переменную, которую назвали startBtn.

чтобы в этом убедиться, я в консоли наберу команду:

Код
console.log(startBtn);


и вижу, что так оно и есть, в консоли полностью отобразился элемент button с id = 'start' вместе с его содержимым:



Получить все блоки в правой части программы через классы



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



Чтобы нам не объявлять каждый раз новые переменные с помощью ключевого слова let, мы после нашей первой строки кода:

Код
let startBtn = document.getElementById('start');


поставим запятую и продолжим, начнём с блока с классом budget-value:

Код

let startBtn = document.getElementById('start'),
  budgetValue = document.getElementsByClassName('budget-value')[0],


с помощью метода getElementsByClassName() мы ищем элемент с классом budget-value, и как вы заметили, в конце я поставил квадратные скобки, внутри которых указан 0.
Почему? потому что метод getElementsByClassName() возвращает коллекцию элементов, массивоподобный итерируемый объект, и мы выбираем первый элемент этого "массива".

Давайте посмотрим, что мы получим, если в конце не поставим 0 в квадартных скобках:

Код

let startBtn = document.getElementById('start'),
  budgetValue = document.getElementsByClassName('budget-value');


и в консоли браузера запустим код:

Код
console.log(budgetValue)




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

И как видно на скриншоте, у нашего блока div, который нам нужно получить, как у первого элемента массива, нулевой индекс, вот потому в конце строки кода мы дополнительно ставим индекс первого элемента нашей коллекции, цифру 0.

В этом случае, если запустить команду в консоли, выводящую содержимое переменной budgetValue, то мы увидим наш блок:



пропишем код для всех остальных нужных нам блоков, везде будем использовать один и тот же метод, getElementsByClassName():

Код

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],
  


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



Код

expensesItem = document.getElementsByClassName('expenses-item'),


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



Для получения всех кнопок "Утвердить" (их у нас 2шт) и "Рассчитать" (1шт) воспользуемся методом getElementsByTagName(), который опять же, возвращает массивоподобный итерируемый объект.

Так как выборка будет по тегу, в скобках указываем искомый тег button, полученные данные сохраняем в переменные:

Код

  expensesBtn = document.getElementsByTagName('button')[0],
  optionalExpensesBtn = document.getElementsByTagName('button')[1],
  countBtn = document.getElementsByTagName('button')[2],


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



Код
optionalExpensesItem = document.querySelectorAll('.optionalexpenses-item'),


данный метод делает выборку всех элементов по заданному селектору, в данном случае поиск по селектору класса, поэтому в круглых скобках не забываем указать, что это класс (поставить точку перед названием класса)

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



Все оставшиеся поля будем получать через метод querySelector(), в скобках при этом также не забываем указывать правильно селектор, по которому задаётся поиск.

Получаем поле ввода статей возможного дохода:

Код

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 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 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]);
  }


На страничку с программой

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