Answer in Web Application for mani #168237
October 24th, 2022
Flats Page
In this assignment, let’s build the Sunrise Avenue page by applying the concepts we learned till now. You can use the Bootstrap concepts and CCBP UI Kit as well.
Refer to the below images.
Flats List Page
https://assets.ccbp.in/frontend/content/static-website/flats-output.gif
Note
- When clicked on the Book Flat button on the Sunrise Avenue Home Page, it must display the Flats List Page.
- When clicked on each flat in Flats List Page, it must display the respective Flat Details Page.
- When clicked on Confirm button in Flat Details Page, it must display Sunrise Avenue Home Page
- When clicked on Back button in Flat Details Page, it must display Flats List Page
- Try to achieve the design as close as possible.
Resources
Use the image URLs given below.
Home Page Background Image
- https://assets.ccbp.in/frontend/static-website/flats-list-bg.png
Flats List Card Images
- https://assets.ccbp.in/frontend/static-website/flats-list-card1-img.png
- https://assets.ccbp.in/frontend/static-website/flats-list-card2-img.png
- https://assets.ccbp.in/frontend/static-website/flats-list-card3-img.png
Location Icon
- https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png
Flats Description Images
- https://assets.ccbp.in/frontend/static-website/flats-list-d1-img.png
- https://assets.ccbp.in/frontend/static-website/flats-list-d2-img.png
- https://assets.ccbp.in/frontend/static-website/flats-list-d3-img.png
CSS Colors used:
Background color Hex Code values:
#f19116
#222222
#ffffff
Text color Hex Code values:
#f19116
#7b8794
#ffffff
#0f0e46
#6c6b70
CSS Font families used:
- Bree Serif
<!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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="main">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-bg.png" alt="home">
<div class="text">
<div class="title">Sunrise Avenue</div>
<div class="desc">Move to what moves you.</div>
<button class="btn flat">Book Flat</button>
</div>
</div>
<div class="list hidden">
<div class="title">Sunrise Avenue</div>
<div class="lists">
<div class="item" data-item="1">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-card1-img.png" alt="1">
<div class="desc">
<div class="title">3BHK Flat</div>
<div class="text">This is a fully furnished house ith handmade furniture including a luxary en-suite facilities pack. Its buit-up area is about 1600sq.ft. A spacious home for you to live in</div>
</div>
</div>
<div class="item" data-item="2">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-card2-img.png" alt="2">
<div class="desc">
<div class="title">2BHK Flat</div>
<div class="text">A minimalist house made for modern-day families. It is fully furnished with trending furniture. Its built-up area is about 1200sq.ft.</div>
</div>
</div>
<div class="item" data-item="3">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-card3-img.png" alt="3">
<div class="desc">
<div class="title">4BHK Flat</div>
<div class="text">A contemporary home with more color and vibrancy. it is fully furnished with elegant furniture. Its built-up area is about 3600sq.ft.</div>
</div>
</div>
</div>
<button class="btn backToMain">Back</button>
</div>
<div class="description hidden">
<div class="item hidden" data-item="1">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-d1-img.png" alt="one">
<div class="content">
<div class="price">Rs 3000/-</div>
<div class="location">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png" alt="location">
<span>D/N 6-2, Food Street, Indore</span>
</div>
<div class="line"></div>
<div class="desc">
<div class="title">Description</div>
<div class="text">This is a fully furnished house ith handmade furniture including a luxary en-suite facilities pack. Its buit-up area is about 1600sq.ft. A spacious home for you to live in.</div>
</div>
<div class="action">
<button class="btn btnConfirm">Confirm</button>
<button class="btn btnBackToList">Back</button>
</div>
</div>
</div>
<div class="item hidden" data-item="2">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-d2-img.png" alt="one">
<div class="content">
<div class="price">Rs 2000/-</div>
<div class="location">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png" alt="location">
<span>D/N 6-2, Food Street, Indore</span>
</div>
<div class="line"></div>
<div class="desc">
<div class="title">Description</div>
<div class="text">A minimalist house made for modern-day families. It is fully furnished with trending furniture. Its built-up area is about 1200sq.ft.</div>
</div>
<div class="action">
<button class="btn btnConfirm">Confirm</button>
<button class="btn btnBackToList">Back</button>
</div>
</div>
</div>
<div class="item hidden" data-item="3">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-d3-img.png" alt="one">
<div class="content">
<div class="price">Rs 4000/-</div>
<div class="location">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png" alt="location">
<span>D/N 6-2, Food Street, Indore</span>
</div>
<div class="line"></div>
<div class="desc">
<div class="title">Description</div>
<div class="text">A contemporary home with more color and vibrancy. it is fully furnished with elegant furniture. Its built-up area is about 3600sq.ft.</div>
</div>
<div class="action">
<button class="btn btnConfirm">Confirm</button>
<button class="btn btnBackToList">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
.wrapper {
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #000;
font-family: 'Bree Serif', serif;
}
.container {
max-width: 360px;
width: 100%;
height: 100%;
margin: 0 auto;
}
.btn {
background-color: #f19116;
color: #fff;
border-radius: 4px;
padding: 10px 24px;
outline: none;
border: none;
cursor: pointer;
}
.hidden {
display: none!important;;
}
.main {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
position: relative;
}
.main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main .text {
background-color: #ffffff;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 24px;
height: 30%;
}
.main .text .title {
color: #f19116;
font-size: 24px;
}
.main .text .desc {
color: #7b8794;
padding: 12px 0 32px;
}
.list {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: #222222;
padding: 16px;
}
.list .title {
color: #f19116;
font-size: 26px;
}
.list .lists {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: 8px 0 48px;
}
.list .lists .item {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
background-color: #ffffff;
border-radius: 8px;
cursor: pointer;
}
.list .lists .item + .item {
margin-top: 16px;
}
.list .lists .item img {
max-width: 30%;
}
.list .lists .item .desc {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 18px 12px;
}
.list .lists .item .desc .title {
padding-bottom: 8px;
color: #0f0e46;
font-weight: bold;
}
.list .lists .item .desc .text {
font-size: 11px;
color: #6c6b70;
}
.description {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: #222222;
color: #ffffff;
}
.description .item {
display: flex;
flex-direction: column;
}
.description .item .content {
display: flex;
flex-direction: column;
padding: 16px;
}
.description .item .content .price {
color: #f19116;
font-size: 24px;
}
.description .item .content .location {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 18px 0 24px;
}
.description .item .content .location img {
width: 24px;
height: 24px;
margin-right: 8px;
}
.description .item .content .line {
width: 100%;
height: 2px;
background-color: #ffffff;
margin-bottom: 16px;
}
.description .item .content .desc .title {
color: #f19116;
font-size: 24px;
padding-bottom: 8px;
}
.description .item .content .action {
margin-top: 48px;
text-align: center;
}
.description .item .content .action .btn + .btn {
margin-left: 16px;
}
</style>
<script>
const main = document.querySelector('.main');
const list = document.querySelector('.list');
const description = document.querySelector('.description');
const mainBlock = [main, list, description];
const btnBackToMain = document.querySelector('.backToMain');
const btnFlat = document.querySelector('.flat');
const btnBackToList = document.querySelectorAll('.btnBackToList');
const btnConfirm = document.querySelectorAll('.btnConfirm');
const listItem = document.querySelectorAll('.list .item');
const descriptionItem = document.querySelectorAll('.description .item');
btnFlat.addEventListener('click', () => toggleShow(list))
btnBackToMain.addEventListener('click', () => toggleShow(main))
btnBackToList.forEach(item => item.addEventListener('click', () => toggleShow(list)))
btnConfirm.forEach(item => item.addEventListener('click', () => toggleShow(main)))
listItem.forEach(item => {
item.addEventListener('click', function() {
toggleShow(description);
showItem(item);
});
})
function toggleShow(el) {
mainBlock.forEach(item => item.classList.add('hidden'));
el.classList.remove('hidden');
}
function showItem(el) {
descriptionItem.forEach(item => {
if (item.getAttribute('data-item') != el.getAttribute('data-item')) {
item.classList.add('hidden')
} else {
item.classList.remove('hidden')
}
});
}
</script>
</body>
</html>
