Build a Real Estate Listing Component
Create a real estate listing component for a website using HTML, CSS, and JavaScript.
Introduction
In today’s fast-paced world, digital platforms have dominated every aspect of our lives including the real estate industry. Web applications have improved how users search for rental properties, making them more efficient and convenient.
In light of this digital transformation is the integration of rental listing components within web applications. Real estate listing components provide users with faster access to rental property details allowing users to find listings based on their preferences such as location, price range, and property type. This accessibility and convenience enable users to find suitable rental accommodations quickly.
This article will look into building a Rental listing component with HTML, CSS, and JavaScript.
Getting Started
We will start by creating a folder called real-state listing and cd into it.
mkdir real-estate-listing
cd real-estate-listingWe will create a CSS subfolder, a JS subfolder assets folder, and a html file which will be the root entry of our application.
Try Kodaschool for free
Click below to sign up and get access to free web, android and iOs challenges.
HTML
The next step is to set up the backbone structure of our website and basic configuration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real Estate listing component</title>
<link rel="icon" href="./assets/icons/logo.png" type="image/png"/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css" />
<link rel="stylesheet" href="./css/index.css"></link>
</head>
<body>
<!-- Real estate listing component structure -->
</body>
</html><!DOCTYPE html>: This declaration specifies the HTML version used in the document, which is HTML5 in this case.<html lang="en">: This tag specifies the language of the content as English(en) and it defines the root element of the HTML document.<head>: This section contains meta information about the document, such as links to external sources, viewport settings, character encoding, viewport settings, and the webpage title.<meta charset="UTF-8">: This meta tag specifies the character encoding of the document as UTF-8, which supports a wide range of characters.<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties for responsive web design, ensuring that the page renders properly on different screen sizes.<title>Real Estate listing component</title>: This tag sets the title of the HTML document, which appears in the browser's title bar or tab.<link rel="icon" href="./assets/icons/logo.png" type="image/png"/>: This link tag specifies the favicon (shortcut icon) for the webpage.<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">: This link tag imports the Roboto font family from Google Fonts, making it available for use on the webpage.<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css" />: This link tag imports the Font Awesome CSS file, providing access to the Font Awesome icon library.<link rel="stylesheet" href="./css/index.css"></link>: This link tag imports an external CSS file (index.css) located in thecssdirectory, which contains styles for the webpage's layout<body>: This opening tag marks the beginning of the document's body content, where the visible content of the webpage is placed.
The initial structure of the body tag. According to the Real estate listing component design, there is an image stacked on top of a card that has the real estate listing details. This is what we will first define in the body tag.
<body>
<section class="container">
<div class="image_container"></div>
<div class="listing_details_card"></div>
</section>
<script src="./js/index.js"></script>
</body><div class="image_container"></div>: This div element has a class attribute set to "image_container". It contains an image for the listing component.<div class="listing_details_card"></div>: This div element has a class attribute set to "listing_details_card". It contains the details of the property such as the price, location, and reviews.
The code snippet for the 1st div element encompassing the image display.
<div class="image_container">
<div class="image_box">
<img src="./assets/Rectangle 64.png" alt="main" class="image" />
<div class="image_card">
<button class="image_btn">Read more</button>
<div class="total_leads">
<p class="image_text">3 leads</p>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>The code snippet for the 2nd div contains the details of the property listing.
<div class="listing_details_card">
<div class="property_details">
<div class="profile_card">
<img src="./assets/profile-img.png" alt="profile" class="profile_card_img"/>
<div class="rental_owner_details roboto-regular">
<p class="name ">Eric Smart</p>
<div class="review_icons_container"></div>
<p class="review_statistics">4.9<span>/5 </span>(3878 reviews)</p>
</div>
</div>
<button class="rental_cost_btn">
<p>$1000 <span>/month</span></p>
</button>
</div>
<p class="roboto-bold rental_type">Cottage in New York</p>
<p class="roboto-regular rental_location">2821 lake Sevilla, Palm Harbor, TX New York, US</p>
<p class="like_icon">
<i class="fa fa-heart" aria-hidden="true"></i>
</p>
<hr/>
<div class="rental_assets roboto-regular">
<div>
<img src="./assets/icons/bed.png" alt=""/>
<span>4</span>
</div>
<div>
<img src="./assets/icons/bath.png" alt=""/>
<span>2</span>
</div>
<div>
<img src="./assets/icons/box.png" alt=""/>
<span>6x7.5m</span>
</div>
<p>2 years lease Required</p>
</div>
</div>CSS
The CSS rules have been defined in the index.css file in the css directory. In our case, we have used the classes selector though IDs can also be used based on preference. Check out the CSS styles within the GitHub code provided for this solution challenge.
JavaScript
Javascript is used to add interactivity and dynamic functionalities to web pages. The script tag's src attribute refers to the path of the Javascript file.
<script src="./js/index.js"></script>: The script tag includes an external JavaScript file located at "js/index.js"
We have used Javascript to iterate over a list of Font Awesome star icons and append them to an HTML container element.
This allows the creation of a rating review system on the web page.
const iconClasses = ["fa-star", "fa-star", "fa-star", "fa-star", "fa-star"];
const iconContainer = document.querySelector(".review_icons_container");
iconClasses.forEach((iconClass) => {
const iconElement = document.createElement("i");
iconElement.classList.add("fa", iconClass);
iconElement.setAttribute("aria-hidden", "true");
iconContainer.appendChild(iconElement);
});
- document.querySelector('.review_icons_container') is used to select the HTML element where the star icons will be appended.
Looping through the array of icons
The next step is to iterate over each item in the array. For each icon class, it creates a new <i> element and adds the "fa" class to the newly created element.
Additionally, it sets the aria-hidden attribute to "true" for accessibility purposes. Finally, the newly created element is appended to the iconContainer element.
The Like icon feature
This feature allows users to add properties to a list of favorites for future reference. The functionality involves toggling an icon to indicate whether a property has been added to the favorites list.
const likeIcon = document.querySelector(".fa-heart");
likeIcon.addEventListener("click", () => {
likeIcon.classList.toggle("active");
});
Add an active class to the icon
/* add active class */
.fa-heart.active{
color:var(--red);
}When the icon is clicked, it toggles the presence of the "active" class on the icon element.
The Real Estate Listing component when the icon is toggled.
