Untitled

avatar
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...