Review Section Page | Review Slider Using Html Css Javascript







Review Section Page | Review Slider Using Html Css Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Review Section Page. We use HTML, Css, and javascript for the Review Section Page. I hope you enjoy our blog so let’s start with a basic HTML structure for the Review Section Page.

HTML Code

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Review Section Page</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- stylesheet -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="slider">
<div class="reviews">
<h2><span>/</span>reviews</h2>
</div>
<div class="slide-container">
</div>
<!-- buttons -->
<!-- prev btn -->
<button class="btn prev-btn">
<i class="fas fa-chevron-left"></i>
</button>
<!-- next button -->
<button class="btn next-btn">
<i class="fas fa-chevron-right"></i>
</button>
</section>
<script type="module" src="app.js"></script>
</body>
</html>

There is all the HTML code for the Review Section Page. Now, you can see an output with Review Section Page then we write javascript for the Review Section Page.

output

Review Section Page | Review Slider Using Html Css Javascript

CSS code

 /*  
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(205, 86%, 17%);
--clr-primary-2: hsl(205, 77%, 27%);
--clr-primary-3: hsl(205, 72%, 37%);
--clr-primary-4: hsl(205, 63%, 48%);
/* primary/main color */
--clr-primary-5: hsl(205, 78%, 60%);
/* lighter shades of primary color */
--clr-primary-6: hsl(205, 89%, 70%);
--clr-primary-7: hsl(205, 90%, 76%);
--clr-primary-8: hsl(205, 86%, 81%);
--clr-primary-9: hsl(205, 90%, 88%);
--clr-primary-10: hsl(205, 100%, 96%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-black: #222;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--transition: all 0.3s linear;
--spacing: 0.1rem;
--radius: 0.25rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
font-family: var(--ff-primary);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
.section-center {
width: 90vw;
margin: 0 auto;
max-width: 1170px;
}
@media screen and (min-width: 992px) {
.section-center {
width: 95vw;
}
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
/*
===============
Slider Styles
===============
*/
section {
width: 85vw;
max-width: var(--fixed-width);
margin: 0 auto;
margin-top: 5rem;
text-align: center;
padding: 1rem 0;
/* set relative for buttons */
position: relative;
}
.reviews {
margin-bottom: 4rem;
}
.reviews h2 {
display: flex;
align-items: center;
justify-content: center;
}
.reviews span {
font-size: 0.85em;
color: var(--clr-primary-5);
margin-right: 1rem;
}
.img {
width: 150px;
height: 150px;
object-fit: cover;
border: 1px solid var(--clr-grey-7);
background: var(--clr-white);
padding: 0.25rem;
border-radius: 50%;
box-shadow: var(--dark-shadow);
}
h4 {
text-transform: uppercase;
font-weight: 500;
color: var(--clr-primary-5);
letter-spacing: var(--spacing);
margin: 0.5rem 0;
}
.title {
margin-bottom: 1.25rem;
letter-spacing: 2px;
text-transform: capitalize;
}
.text {
color: var(--clr-grey-5);
line-height: 1.8;
max-width: 35em;
margin: 0 auto;
letter-spacing: 1px;
}
.icon:hover {
transform: scale(1.1);
opacity: 0.8;
}
.quote-icon {
font-size: 3rem;
margin-top: 2rem;
color: var(--clr-primary-5);
}
/* set buttons */
.btn {
position: absolute;
top: 175px;
background: var(--clr-grey-5);
color: var(--clr-white);
padding: 0.25rem 0.35rem;
border-radius: 0.25rem;
border: transparent;
cursor: pointer;
}
.next-btn {
right: -0.5rem;
}
.prev-btn {
left: -0.5rem;
}
@media screen and (min-width: 768px) {
.next-btn {
right: -5rem;
}
.prev-btn {
left: -5rem;
}
.btn {
font-size: 1.3rem;
padding: 0.35rem 0.5rem;
}
.quote-icon {
font-size: 4rem;
}
}
/* MORE CSS FOR JS */
.slide-container {
display: flex;
position: relative;
height: 450px;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out;
opacity: 0;
}
.slide.active {
opacity: 1;
transform: translateX(0);
}
.slide.next {
transform: translateX(100%);
}
.slide.last {
transform: translateX(-100%);
}

Css Updated output


Review Section Page | Review Slider Using Html Css Javascript

Javascript Code(App.js)

 import data from "./data.js";  
const container = document.querySelector(".slide-container");
const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
// if length is 1 hide buttons
if (data.length === 1) {
nextBtn.style.display = "none";
prevBtn.style.display = "none";
}
// if length is 2, add copies of slides
let people = [...data];
if (data.length === 2) {
people = [...data, ...data];
}
container.innerHTML = people
.map((person, slideIndex) => {
const { img, name, job, text } = person;
let position = "next";
if (slideIndex === 0) {
position = "active";
}
if (slideIndex === people.length - 1) {
position = "last";
}
if (data.length <= 1) {
position = "active";
}
return `<article class="slide ${position}">
<img src=${img} class="img" alt="${name}"/>
<h4>${name}</h4>
<p class="title">${job}</p>
<p class="text">
${text}
</p>
<div class="quote-icon">
<i class="fas fa-quote-right"></i>
</div>
</article>`;
})
.join("");
const startSlider = (type) => {
// get all three slides active,last next
const active = document.querySelector(".active");
const last = document.querySelector(".last");
let next = active.nextElementSibling;
if (!next) {
next = container.firstElementChild;
}
active.classList.remove(["active"]);
last.classList.remove(["last"]);
next.classList.remove(["next"]);
if (type === "prev") {
active.classList.add("next");
last.classList.add("active");
next = last.previousElementSibling;
if (!next) {
next = container.lastElementChild;
}
next.classList.remove(["next"]);
next.classList.add("last");
return;
}
active.classList.add("last");
last.classList.add("next");
next.classList.add("active");
};
nextBtn.addEventListener("click", () => {
startSlider();
});
prevBtn.addEventListener("click", () => {
startSlider("prev");
});

Javascript Code(data.js)

 const people = [  
{
img:
"https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959121/person-1_aufeoq.jpg",
name: "peter doe",
job: "product manager",
text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis? `,
},
{
img:
"https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-2_ipcjws.jpg",
name: "susan doe",
job: "developer",
text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
},
{
img:
"https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-3_rxtqvi.jpg",
name: "emma doe",
job: "designer",
text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
},
];
export default people;

Final output

Review Section Page | Review Slider Using Html Css Javascript

Review Section Page | Review Slider Using Html Css Javascript

Review Section Page | Review Slider Using Html Css Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Review Section Page. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

This post teaches us how to create a Review Section Page using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Check out more…..

Share on:

Leave a Comment