Alat hitung diskon
<!DOCTYPE html>
<html>
<head>
<title>Latihan Koding Informatika MAN Kapuas</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #7F1530;
}
.wrapper{
width: 500px;
background-color: #fff;
border: 2px solid #555;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.35);
}
.title{
width: 100%;
background: #555;
color: #fff;
padding: 20px;
text-align: center;
border-radius: 10px 10px 0px 0px;
letter-spacing: 1.2px;
}
form{
padding: 10px;
margin-top: 20px;
}
.form-group{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
position: relative;
}
label{
flex: 1;
border: 2px solid #555;
border-right-width: 0px;
padding: 10px;
font-size: 17px;
}
input{
flex: 1;
outline: none;
border: 2px solid #555;
font-size: 17px;
padding: 10px;
text-align: center;
width: 150px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none;
}
input{
-moz-appearance: textfield;
}
#saveAmount, #finalPrice{
color: blue;
font-weight: 600;
}
#symbol{
position: absolute;
top: 12px;
right: 0;
font-size: 17px;
font-weight: 600;
display: none;
}
#resetBtn{
text-align: center;
}
#resetBtn button{
font-size: 17px;
font-weight: 600;
border: 2px solid #555;
padding: 7px 15px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 class="title">Alat Hitung Diskon</h1>
<form action="">
<div class="form-group">
<label for="originalPrice">Original Price</label>
<input type="number" name="" placeholder="Enter Value" id="originalPrice">
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="number" name="" placeholder="Enter Value" id="discount">
<div id="symbol">%</div>
</div>
<div class="form-group">
<label >Amount Saved</label>
<input type="text" name="" id="saveAmount" value="0" disabled>
</div>
<div class="form-group">
<label >Final Price</label>
<input type="text" name="" id="finalPrice" value="0" disabled>
</div>
<div id="resetBtn">
<button type="reset" id="reset">Reset</button>
</div>
</form>
</div>
<script>var originalPrice = document.getElementById('originalPrice')
var discount = document.getElementById('discount')
var saveAmount = document.getElementById('saveAmount')
var finalPrice = document.getElementById('finalPrice')
var symbol = document.getElementById('symbol')
var resetBtn = document.getElementById('reset')
originalPrice.addEventListener('input', calculate)
discount.addEventListener('input', calculate)
discount.addEventListener('input', percentSymbol)
function calculate(){
let originalVal = originalPrice.value
let discountValue = discount.value
let savedVal = originalVal*discountValue/100
let finalVal = originalVal - savedVal
saveAmount.value = savedVal.toLocaleString("en-US")
finalPrice.value = finalVal.toLocaleString("en-US")
}
function percentSymbol(e){
if(e.target.value.trim() != 0){
symbol.style.display = "block"
}
else{
symbol.style.display = "none"
}
if(e.target.value < 10){
symbol.style.right = "99.5px"
}
if(e.target.value > 9){
symbol.style.right = "95.5px"
}
if(e.target.value == 100){
symbol.style.right = "91px"
}
if(parseInt(e.target.value) > 100){
e.target.value = 100
calculate()
symbol.style.right = "91px"
}
if(parseInt(e.target.value) < 1){
e.target.value = 1
calculate()
symbol.style.right = "95.5px"
}
}
resetBtn.addEventListener('click', ()=>{
symbol.style.display = "none"
})</scrip>
</body>
</html>
0 komentar: