Untitled
unknown
plain_text
3 years ago
4.3 kB
2
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!----- CSS Bootstrap ------>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-------- vanila CSS ----- -->
<link rel="stylesheet" href="css/style.css">
<!------ google font ------>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Baloo+2&family=Baloo+Bhai+2&family=Bebas+Neue&family=IBM+Plex+Sans:ital@1&family=Island+Moments&family=Luxurious+Roman&family=PT+Sans+Narrow&family=Poppins:wght@400;500&family=Varela+Round&display=swap"
rel="stylesheet">
</head>
<body>
<!------- heading part starts here ------ -->
<header>
<h1 class="fw-bolder text-center my-5">Money Distribution</h1>
</header>
<!-------- main part starts here ------ -->
<main>
<section class="container">
<div class="row">
<div class="col-lg-6 col-12 d-flex align-items-center">
<img class="w-100" src="image/image1.jpg" alt="">
</div>
<div class="col-lg-6 col-12 bg-light rounded">
<div class="my-5 d-flex align-items-center justify-content-center flex-column">
<h4 class="ms-5">Income</h4>
<p class="fw-bold">Income:<input id="inp-income" class=" ms-2 ps-3" type="text"
placeholder="Your Income"></p>
<h4 class="ms-5">Expenses</h4>
<div class="d-flex flex-column align-items-end">
<p class="fw-bold">Food:<input id="inp-food" class=" ms-2 ps-3" type="text"
placeholder="Monthly Food Cost"> </p>
<p class="fw-bold ">Rent:<input id="inp-rent" class=" ms-2 ps-3 " type="text"
placeholder="Monthly Rent Cost"> </p>
<p class="fw-bold">Cloths:<input id="inp-cloth" class=" ms-2 ps-3" type="text"
placeholder="Monthly Cloths Cost"> </p>
</div>
<!------ notify massege part-1 ------>
<p id="notify-msg" class="notify-validation">***Input a valid Amount in every section</p>
<!------- calculate button ---- -->
<button id="calculate-btn" class="btn bg-primary text-white px-4">Calculate</button>
<h5 class="ms-5 my-3 fw-bold">Total Expenses: <span id="total-expense">00</span></h5>
<h5 class="ms-5 fw-bold">Balance: <span id="balance">00</span></h5>
<!--------- notify massege part-2 -------- -->
<p id="savings-error" class="notify-validation">***Please give a valid savings percentage</p>
<p id="error-message" class="notify-validation">***you don't have sufficient money in your balance
</p>
<!--------- savings button added here ----- -->
<p>Save: <input class="w-25" type="text" name="" id="inp-save"> <span>%</span> <button
class="btn bg-primary text-white px-4" id="save-btn">Save</button></p>
<h5 class="ms-5 my-3 fw-bold">Saving Amount : <span id="savings">00</span></h5>
<h5 class="ms-5 fw-bold">Remaining Balance: <span id="remain-balance">00</span></h5>
</div>
</div>
</div>
</section>
</main>
<!------- javascript link ----- -->
<script src="js/script.js"></script>
</body>
</html>