Untitled
unknown
plain_text
3 years ago
4.3 kB
4
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>
Editor is loading...