Answer to Question #238103 in HTML/JavaScript Web Application for Owen

Question

Answer to Question #238103 in HTML/JavaScript Web Application for Owen

Question #238103

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:

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 #238103 in HTML/JavaScript Web Application for Owen

Comments

Leave a comment

Related Questions