Answer to Question #248050 in HTML/JavaScript Web Application for NovaCodings

Question

Answer to Question #248050 in HTML/JavaScript Web Application for NovaCodings

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #248050

QUESTION THREE

25 MARKS

3.1 When a student login successfully, the student's home page appears first. It will display his

username as well as three buttons showing the user's fees, attendance, and results. When he/she

selects the fees, attendance, and result buttons, the fees, attendance, and results will be displayed.

3.2 When the student “prominentm” clicks the fees button, the fees for that student will appear, along

with the deadline for fee submission. The output should match the one below:

3.3 Create another table called student_info in database rgi_student that stores below information:



STD_BALANCE (INTERGER)



DUE_DATE (DATE)



ATTENDANCE (INTERGER)

NB. Use student_reg table to retrieve studentID, firstname and display as in the table above then

also use student_fees table to retrieve balance and its due. Return button takes the student back

to the home page.5

Expert's answer

<!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>
    <style>
        html {
            box-sizing: border-box;
        }
        *,
        *::after,
        *::before {
            box-sizing: inherit;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        .container {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .main {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 160px;
            justify-content: space-evenly;
        }
        .main h1 {
            font-size: 30px;
            font-family: cursive;
        }
        .main img {
            width: 50px;
            height: 50px;
            cursor: pointer;
            display: block;
        }
        .main p {
            font-size: 25px;
            font-weight: bold;
        }
        .modal {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.3);
        }
        .modal.hide {
            display: none;
        }
        .modal-box {
            width: 80%;
            height: 90%;
            border-radius: 10px;
            box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
            background-color: #fff;
            padding: 20px;
        }
        .modal-title {
            display: flex;
            justify-content: space-between;
        }
        .close-button {
            font-size: 28px;
            display: block;
            font-family: cursive;
            cursor: pointer;
        }
        .items-wrapper {
            margin-top: 15px;
            overflow-y: scroll;
            max-height: 90%;
        }
        .items-wrapper {
            list-style-type: none;
            display: flex;
            flex-wrap: wrap;
        }
        .items {
            width: 30%;
            margin-bottom: 20px;
            text-align: center;
            position: relative;
        }
        .items:not(:nth-child(3n)) {
            margin-right: 5%;
        }
        .items img {
            width: 100%;
        }
        .box-icon {
            position: absolute;
            width: 18px;
            height: 18px;
            border: 1px solid #000;
            border-radius: 2px;
            right: 10px;
            top: 10px;
        }
        .box-icon.active {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">
            <h1 class="main-title"></h1>
            <img class="buy-icon" src="https://www.freeiconspng.com/thumbs/buy-icon-png/buy-icon-32.png" alt="">
            <p>Buy anything</p>
        </div>
        <div class="modal hide">
            <div class="modal-box">
                <h2 class="modal-title">
                    <p><span>Items selected: </span><span class="items-amount"></span></p>
                    <p><span>Selected items price: </span><span class="items-price"></span></p>
                    <span class="close-button">X</span>
                </h2>
                <ul class="items-wrapper">
                    <li class="items">
                        <span class="box-icon"></span>
                        <img class="item-img" src="https://agatosmedia.hu/wp-content/uploads/2021/02/webaruhaz-keszites-szolgaltatas.jpg" alt="">
                        <h3 class="item-title">Noutbuk</h3>
                        <p class="item-price">800 $</p>
                    </li>
                    <li class="items">
                        <span class="box-icon"></span>
                        <img class="item-img" src="https://im0-tub-com.yandex.net/i?id=3e1fc6f0f1204e8c7793da7de5d3b5c1&n=13" alt="">
                        <h3 class="item-title">SmartWatch</h3>
                        <p class="item-price">90 $</p>
                    </li>
                    <li class="items">
                        <span class="box-icon"></span>
                        <img class="item-img" src="https://www.raldaos.es/includes/layerslider/images/callus.jpg" alt="">
                        <h3 class="item-title">Smartphone</h3>
                        <p class="item-price">350 $</p>
                    </li>
                    <li class="items">
                        <span class="box-icon"></span>
                        <img class="item-img" src="https://agatosmedia.hu/wp-content/uploads/2021/02/webaruhaz-keszites-szolgaltatas.jpg" alt="">
                        <h3 class="item-title">Noutbuk</h3>
                        <p class="item-price">800 $</p>
                    </li>
                    <li class="items">
                        <span class="box-icon"></span>
                        <img class="item-img" src="https://im0-tub-com.yandex.net/i?id=3e1fc6f0f1204e8c7793da7de5d3b5c1&n=13" alt="">
                        <h3 class="item-title">SmartWatch</h3>
                        <p class="item-price">90 $</p>
                    </li>
                    <li class="items">
                        <span class="box-icon"></span>
                        <img class="item-img" src="https://www.raldaos.es/includes/layerslider/images/callus.jpg" alt="">
                        <h3 class="item-title">Smartphone</h3>
                        <p class="item-price">350 $</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        const buyIcon     = document.querySelector('.buy-icon')
        const modal       = document.querySelector('.modal')
        const closeBtn    = document.querySelector('.close-button')
        const items       = document.querySelectorAll('.items')
        const boxIcon     = document.querySelector('.box-icon')
        const itemsAmount = document.querySelector('.items-amount')
        const itemsPrice  = document.querySelector('.items-price')
        const mainTitle   = document.querySelector('.main-title')
        
        let amount = 0
        let price = 0
        
        buyIcon.onclick = () => {
            modal.classList.remove('hide')
        }
        
        closeBtn.addEventListener('click', () => {
            console.log(modal);
            modal.classList.add('hide')
        })
        
        items.forEach(item => {
            item.onclick = () => {
                if (item.childNodes[1].classList.contains('active')) {
                    item.childNodes[1].classList.remove('active')
                    amount--
                    price = price - Number(item.childNodes[7].textContent.split(' ')[0])
                } else {
                    item.childNodes[1].classList.add('active')
                    amount++
                    price = price + Number(item.childNodes[7].textContent.split(' ')[0])     
                }
                itemsAmount.textContent = amount
                itemsPrice.textContent = price + ' $'
                mainTitle.textContent = `${amount} items selected, and its price ${price} $`
            }
        })
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #248050 in HTML/JavaScript Web Application for NovaCodings

Comments

Leave a comment

Related Questions