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>
Finding a professional expert in "partial differential equations" in the advanced level is difficult.
You can find this expert in "Assignmentexpert.com" with confidence.
Exceptional experts! I appreciate your help. God bless you!
#340153 on Dec 2023
#340153 on Dec 2023