Making a review section on a web page without AJAX

Published on 02 Jul 2021. Written by Vaibhav Kumar

Have you visited sites where you see the fancy review section, which is astonishing and attractive. This section adds a charm to the frontend development and creates a mark on the visitor of the page. So sites host both dynamic reviews and static. We will be learning a static way. 

OUTLINE:

You can have this section with many reviews in your own project websites too and since it is a local requirement, we need not have the knowledge of ajax work or HTTP requesting. Just the javascript file is enough. Since it is a beginner project for web development, three types of files is enough for this.

• HTML ( skeleton / framework )
• CSS ( decoration / styling )
• JavaScript ( Brain / Backend / Logic )

Read more..

SLNOTE
PREREQUISITE :

1. From this site https://fontawesome.com/download, you need to download the freely available file containing icons, fonts, CSS files, etc.

It will be downloaded as zipped file extract whole file to project folder 

(named as “ fontawesome-free-5.14.0-web ” )

2. collection of images, job profile, reviews to be shown of people you want in this project in your project file. Well you can upload the pics on google drive or other cloud platform and just use them from the sharing links instead of local address so hosting becomes easy

REQUIREMENTS:

Hardware:

One Laptop or Desktop with any OS (Linux/Windows/iOS)

SLLATEST
Software/Technology:

• A Browser ( Chrome/Firefox/Opera/Safari/IE) to run the program. I prefer chrome or firefox as it provides a console to see behind the work of program like like the IDE of python ( to use just right-click on mouse and select ‘Inspect’ or Ctrl+Shift+I to open it and switch to console tag in this window)
• A text editor ( Visual Studio(VS) Code/Atom/Sublime/Notepad ) to code. I prefer VS code as it completes the code from its libraries and themes are attractive.
• Internet Connection

IMPLEMENTATION:

We will divide the work into three Files to ease down the work:

1.The HTML file

2. The JavaScript file

3. The CSS file

1.HTML File (named index.html or anything you prefer)

• if using vs code just type html5 and you get basic setup for your HTML framework
• otherwise, just add <! DOCTYPE HTML > tag then basic tags of HTML head and body, in head add a title tag to give the title and link tag to add CSS files
• here we will we be using two CSS files one we will create and other already downloaded from “fontawesome” site
• the location of the required CSS file will be ( rename the file as per the latest version used )

 “./fontawesome-free-5.14.0-web/css/all.min.css”

• the second one is “style.css” (or whatever you provide the name )
• Inside body tag, we add the main tag for whole review section as it is a unique part and then we add article tag for the write-up part
• just before article tag we give a division with class title naming reviews and just below the name add a div with class underline
• now inside article tag, we add a div with class “img-container” for adding an image. Inside this add img tag and add a temporary image now by src
• now add three things one h4 tag, two-paragraph tags with ids namely author, job, info respectively
• now we add a division for the previous and next button with class “button-container”. Inside it, we add two button tags with classes namely “prev-btn” and “next-btn”
• inside the two-button, we add I tag with classes “fas fa-chevron-left” and “fas fa-chevron-right”
• now we close each tag till main and last add the js file using a script tag

2. CSS File (style.css or any name)

• we will import fonts from google using the media option

@import

• url("https://fonts.googleapis.com/css?family=Open+Sans|400,700&display=swap");
• now we create a set of variable for colors and fonts in following way ( inside :root ) 

--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.25rem;

• give global classes and global styles
• now separately create styling for review part so as to distinguish it
• modify image id the size ( #person-img) , padding , positioning, etc.
• Modify all ids, classes used separately like

.underline {

height: 0.25rem;

width: 5rem;

background: var(--clr-primary-5);

margin-left: auto;

margin-right: auto;

}

• even set the hover effect for buttons

NOTE: the second CSS file is already created so no worry

3. Java Script File ( app.js or any name you want)

• Create a constant array variable named reviews to store data of individual reviews as items/objects for specific person containing all the data required for our review section namely: id, job, name, img, text

Note: since we have not covered ajax and not setting up HTTP request we are directly using the pre-provided reviews here

• now will connect/select our required parts from their ids using document select by Id like

const author = document.getElementById("author");

• similarly, we select each button individually by query selector like

const nextBtn = document.querySelector(".next-btn");

• take a starting variable and since array so with value 0 ( zero ) like

 const curentItem = 0;

• we create a window add listner to show our data

window.addEventListener("DOMContentLoaded", function () {

showPerson(currentItem);

});

Note: here for listening we used “DOMContentLoaded” which is for loading of page each time

• the inside function used is to provide different reviews as starting variable value
• now we add function for previous and next button
• each btn is connected event listener using “click as the event
• we increment or decrement value of the current item
• then we make check value with if statement
• for next button, we check if the value is greater than the length of reviews array -1

 if yes then currentItem = 0 

• for the previous button, we check if the value is less than zero

if yes then currentItem =3

And now we are done, our review section is completed. If you want to see the prebuilt codes you can visit following

https://github.com/vaibhavkumar-779/webpage-review

SLDYK
Kit required to develop Making a review section on a web page without AJAX:

• HTML
• CSS
• JavaScript

Technologies you will learn by working on Making a review section on a web page without AJAX:

• Web Development

Any Questions?