JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

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&amp;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" disabled>Утвердить</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...

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Ubuntu;
  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: #faf8f5;
  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...

JavaScript

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'),

  expenses_1 = document.getElementById("expenses_1"),
  expenses_2 = document.getElementById("expenses_2"),
  expenses_3 = document.getElementById("expenses_3"),
  expenses_4 = document.getElementById("expenses_4")

  optionalexpenses_1 = document.getElementById("optionalexpenses_1"),
  optionalexpenses_2 = document.getElementById("optionalexpenses_2"),
  optionalexpenses_3 = document.getElementById("optionalexpenses_3");

let money, time;

expenses_1.addEventListener("keyup", disableMandatoryExp);
expenses_2.addEventListener("keyup", disableMandatoryExp);
expenses_3.addEventListener("keyup",...