Skip to content

Commit

Permalink
Merge pull request #1 from melodoc/add-style
Browse files Browse the repository at this point in the history 
Edit style of calc
  • Loading branch information
@melodoc
melodoc authored Jul 22, 2020
2 parents 8ee5bb0 + 8be8299 commit 7973402
Show file tree
Hide file tree
Showing 9 changed files with 951 additions and 0 deletions.
434 changes: 434 additions & 0 deletions css/style.min.css
View file

Large diffs are not rendered by default.

Binary file added font/Roboto-Bold.woff
View file
Binary file not shown.
Binary file added font/Roboto-Bold.woff2
View file
Binary file not shown.
Binary file added font/roboto-v20-latin_cyrillic-regular.woff
View file
Binary file not shown.
Binary file added font/roboto-v20-latin_cyrillic-regular.woff2
View file
Binary file not shown.
1 change: 1 addition & 0 deletions img/arrow.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/holding-bank-card.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
115 changes: 115 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,123 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="preload" href="./font/Roboto-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="./css/style.min.css">
<title>Document</title>
</head>
<body>
<h1>Калькулятор личного бюджета</h1>
<section class="main">

<div class="calc">

<div class="data">
<div class="salary">
<div class="salary-title title">Месячный доход*</div>
<input type="text" class="salary-amount" placeholder="Сумма">
</div>

<div class="income">
<div class="income-title title">Дополнительный доход</div>
<div class="income-items">
<input type="text" class="income-title" placeholder="Наименование">
<input type="text" class="income-amount" placeholder="Сумма">
</div>

<button class="btn_plus income_add">+</button>
</div>

<div class="additional_income">
<div class="additional_income-title title">Возможный доход</div>
<input type="text" class="additional_income-item" placeholder="Наименование">
<input type="text" class="additional_income-item" placeholder="Наименование">
</div>

<div class="expenses">
<div class="expenses-title title">Обязательные расходы</div>
<div class="expenses-items">
<input type="text" class="expenses-title" placeholder="Наименование">
<input type="text" class="expenses-amount" placeholder="Сумма">
</div>

<button class="btn_plus expenses_add">+</button>
</div>
<div class="additional_expenses">
<div class="additional_expenses-title title">Возможные расходы <span>(перечислите через запятую)</span></div>
<input type="text" class="additional_expenses-item" placeholder="название">

</div>

<div class="deposit">
<label class="deposit-label title">Депозит
<input id="deposit-check" type="checkbox">
<span class="deposit-checkmark"></span>
</label>
<select class="deposit-bank">
<option value="0">Процент</option>
<option value="0.03">Сбербанк</option>
<option value="0.05">Альфабанк</option>
<option value="0.09">Тинькофф</option>
<option value="other">Другой</option>
</select>
<div class="deposit-calc">
<input type="text" class="deposit-amount" placeholder="Сумма">
<input type="text" class="deposit-percent" placeholder="Процент" disabled>
</div>
</div>

<div class="target">
<span class="target-title title">Цель</span>
<input type="text" class="target-amount" placeholder="Сумма">
</div>

<div class="period">
<div class="title period-title">Период расчета</div>
<input class="period-select" type="range" step="1" min="1" max="12" value="1">
<div class="title period-amount">1</div>
</div>

</div>

<div class="result">
<div class="result-budget_month">
<span class="title">Доход за месяц</span>
<input type="text" class="result-total budget_month-value" placeholder="0" disabled>
</div>
<div class="result-budget_day">
<span class="title">Дневной бюджет</span>
<input type="text" class="result-total budget_day-value" placeholder="0">
</div>

<div class="result-expenses_month">
<span class="title">Расход за месяц</span>
<input type="text" class="result-total expenses_month-value" placeholder="0" disabled>
</div>
<div class="result-additional_income">
<span class="title">Возможные доходы</span>
<input type="text" class="result-total additional_income-value" placeholder="Наименования" disabled>
</div>
<div class="result-additional_expenses">
<span class="title">Возможные расходы</span>
<input type="text" class="result-total additional_expenses-value" placeholder="Наименования" disabled>
</div>

<div class="result-income_period">
<span class="title">Накопления за период</span>
<input type="text" class="result-total income_period-value" placeholder="0" disabled>
</div>
<div class="result-target_month">
<span class="title">Срок достижения цели в месяцах</span>
<input type="text" class="result-total target_month-value" placeholder="Срок" disabled>
</div>
<div class="control">
<button id="start">Рассчитать</button>
<button id="cancel">Сбросить</button>
</div>
</div>
</div>
</section>
<!--<script src="./script/oop.js"></script>-->
<script src="./script/script.js"></script>
</body>
</html>
Loading

0 comments on commit 7973402

Please sign in to comment.