JSFiddle - React, Tailwind, and code Playground

by Mariya_Korotkova

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

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

let money, time;

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

    while (isNaN(money) || money == '' || money == null) {
        money = +prompt('Ваш бюджет на месяц?', '');
    }
    appData.budget = money;
    appData.timeData = time;
    budgetValue.textContent = money.toFixed();
    yearValue.value = new Date(Date.parse(time)).getFullYear();
    monthValue.value = new Date(Date.parse(time)).getMonth() + 1;
    dayValue.value = new...