В этой статье я покажу вам, как я это сделал. 😃
В этом посте мы рассмотрим, как сделать простой процентный калькулятор, используя html css и javascript. Конечный результат, который мы создадим в этом уроке, выглядит так.
Ссылка на исходный файл здесь
Исходный файл этого небольшого проекта вы можете легко скачать по ссылке выше. В основном в этом проекте вы сможете узнать об этих концепциях, которые приведены ниже.
- Вы узнаете о том, как манипулировать dom .
- Вычисление формул через него.
- Принимать входное значение переменной и многое другое.
HTML
Сначала нам понадобится html-разметка. На основе которой будет создан скелет калькулятора. Поэтому здесь я привел некоторые html-коды. Также я приложил к нему ссылку на отдельную таблицу стилей.
⭐ Заметка Обязательно скачать ссылку на источник отсюда
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple interest calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Simple Interest</h2>
<input type="number" id="principal" placeholder="Principal">
<input type="number" id="rate" placeholder="Rate Of Interest">
<input type="number" id="time"placeholder="Time in years">
<div class="result">
<p>Interest: <span id="interest"></span><br></p>
<p>Total Interest: <span id="plus"></span></p>
</div>
<button id="btn" class="button-56" role="button">Submit</button>
</div>
</body>
</html>
Примечание: Вы можете настроить его по своему усмотрению, я просто добавил некоторые стили, чтобы он выглядел лучше.
CSS
Здесь вы можете стилизовать этот калькулятор по своему усмотрению, но в данном случае я применил или сделал обычную стилизацию. Создайте отдельный файл с именем style.css, где вы должны написать стилизацию для него.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #3E00AC;
font-family: 'Poppins', sans-serif;
}
.container{
width: 550px;
height: 750px;
display: grid;
place-items: center;
background: #edf1f4;
border-radius: 10px;
border: 3px solid rgb(0, 0, 0);
}
.container h2 {
padding-top: 15px;
font-family: 'Poppins', sans-serif;
font-weight: 800;
color: #464646;
}
.container span{
font-weight: 700;
}
.container .result{
color: #9E9E9E;
width: 440px;
}
.container input{
width: 440px;
height: 80px;
background: #edf1f4;
inset: -5px -5px 5px #fff;
border-radius: 5px;
border: 1px solid black;
outline: none;
font-size: 20px;
padding: 24px;
}
p {
color: #3E00AC;
font-size: 17px;
padding: 10px;
}
#interest {
font-size: 20px;
padding-left: 1rem;
}
#plus {
font-size: 20px;
padding-left: 1rem;
}
/* CSS */
.button-56 { width: 400px;
height: 200px;
align-items: center;
background-color: #adffc8;
border: 2px solid #111;
border-radius: 8px;
box-sizing: border-box;
color: rgb(26, 26, 26);
cursor: pointer;
display: flex;
font-family: Inter,sans-serif;
font-size: 16px;
height: 68px;
justify-content: center;
line-height: 24px;
max-width: 100%;
padding: 85rem 25rem;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
margin-bottom: 1rem;
}
.button-56:after {
background-color: #111;
border-radius: 8px;
content: "";
display: block;
height: 48px;
left: 0;
width: 100%;
position: absolute;
top: -2px;
transform: translate(8px, 8px);
transition: transform .2s ease-out;
z-index: -1;
}
.button-56:hover:after {
transform: translate(0, 0);
}
.button-56:active {
background-color: #ffdeda;
outline: 0;
}
.button-56:hover {
outline: 0;
}
@media (min-width: 768px) {
.button-56 {
padding: 0 40px;
}
}
Мы успешно выполнили наши css и html части, теперь давайте начнем нашу веселую часть, которая является javascript . Давайте поймем, как работает наша логика для этого простого процентного калькулятора.
Надеюсь, вы поняли вышеуказанную часть этого калькулятора. Теперь приступим к JavaScript.
Javascript
!--Script-->
<script>
/*Simple Interest Formula =
p*r*t/100*/
btn.addEventListener("click", () => {
/*Get input values to the variables */
let p = parseInt(document.getElementById('principal').value);
let r = document.getElementById('rate').value;
let t = document.getElementById('time').value;
let btn = document.getElementById('btn');
var interest = (p*r*t)/100;
document.getElementById('interest').innerHTML = interest;
var plusInterest = p + interest;
document.getElementById('plus').innerHTML = plusInterest;
})
</script>
Поздравляем! Вы создали полностью функциональное и стилизованное приложение. Надеюсь, вы узнали что-то новое во время всего процесса! Все пожелания и вопросы оставляйте в поле для комментариев.
Загрузка файлов