Building a Lagos State Image Slider App with HTML, CSS, and JavaScript: A Step-by-Step Guide
· Introduction
· Project Overview
· Features of the Lagos State Image Slider Application
· Prerequisites
· Code Structure
∘ Step 1. HTML Structure:
∘ Step 2. CSS Styling:
∘ Step 3. JavaScript Logic:
· Testing and Debugging
· Lessons Learned
· Deployment
· Future Improvements
· Conclusion
Introduction
In this guide, I will explain the steps involved in building the Lagos State Image Slider app using HTML, CSS, and JavaScript. The app displays stunning images of Lagos State, Nigeria, along with accompanying information in a slideshow. I decided to undertake this project to enhance my skills in front-end development and also due to my passion for Lagos State.
Project Overview
The Lagos State image slider application is a web-based application that allows users to browse through a selection of images showcasing Lagos State. It is user-friendly, offering a smooth and effortless viewing experience with navigation buttons for easy browsing.
Features of the Lagos State Image Slider Application
For this project, you will create a Lagos State Image Slider app with the following functionalities:
- Slider Navigation: Users can navigate through the different images using the up and down buttons.
- Image Information: The right side of the slider contains information about a specific image, including the name and location.
- Responsive Design: The app is designed to be responsive, ensuring that it looks good and functions well on various devices and screen sizes.
Prerequisites
To build this application, you’ll need a basic understanding of HTML, CSS, and JavaScript. You should be familiar with HTML for structuring the application, CSS for styling it, and JavaScript for implementing the application logic.
A text editor or IDE (e.g., Visual Studio Code) is required for writing code, and a web browser is needed for testing. Optional prerequisites include a GitHub account for hosting the application.
Code Structure
Create a new folder for your project, name the folder as you wish, and inside it, create three files named index.html, style.css, and script.js. These files will serve as the foundation for your project. Now open the folder in a text editor or IDE (e.g., Visual Studio Code) and follow the steps below:
Step 1. HTML Structure:
Open theindex.html file and paste the following HTML code for the Lagos State Image Slider Application:
<!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="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
<title>Lagos Image Slider</title>
</head>
<body>
<div class="slider-container">
<div class="left-slide">
<div style="background-color: rgb(66, 66, 66);">
<h1>Lagos Lekki-Ikoyi Bridge</h1>
<p>Lagos State</p>
<p class="writeup">The Lekki-Ikoyi Link Bridge, is a 1.36 km (0.84 mile) cable-stayed bridge in Lagos State. It links the Phase 1 area of Lekki, with Ikoyi district of Lagos. The bridge was commissioned on 29 May 2013 by the Governor of Lagos State, Babatunde Raji Fashola</p>
</div>
<div style="background-color: #6b6161;">
<h1>Lagos Floating Clinic</h1>
<p>Lagos State</p>
<p class="writeup">The Lagos Floating Clinic is a medical facility that provides healthcare services to people living in the riverine communities of Lagos State, Nigeria. It is equipped with four medical observation beds, a medium sterilization unit, O2 bottle, a gauge, infusion stand, a foldable stretcher, and other necessary medical equipment</p>
</div>
<div style="background-color: #252E33;">
<h1>Lagos Ferry Terminal</h1>
<p>Lagos State</p>
<p class="writeup">Lagos Ferry Services Company (LFSC) (also known as LAGFERRY) is the major ferry services provider in Lagos State. Although Lagos ferry services commenced operations in 1925, passenger ferries gradually intensified until the 1970s which led to the establishment of Lagferry in 1983. The entity was responsible for both the regulatory and operational aspects of water transportation.</p>
</div>
<div style="background-color: rgb(5, 5, 175);">
<h1>National Theatre Station</h1>
<p>ikeja Lagos</p>
<p class="writeup">National Theatre is a railway stop in Apapa, Lagos City, Lagos State. National Theatre is situated nearby to the arts centre National Gallery of Modern Art and the marketplace Market.</p>
</div>
<div style="background-color: green;">
<h1>Lagos Peace Park</h1>
<p>Ojota Lagos</p>
<p class="writeup">The three gardens which make up the Peace Park, though separated by access roads are located on the verge of the Lagos-Ibadan Expressway inwards Tipper Garage, Ketu bordered on the East by the M.K.O Abiola Garden; on the North by the Apostolic Church/LAWNA; and the Tipper Garage, Ketu on the West. Gardens B (circular (loop) garden) and C (triangular-shaped garden) are separated by a road that connects the Lagos – Ibadan express road to Ikorodu road.</p>
</div>
<div style="background-color: rgb(3, 3, 119);">
<h1>Lagos Ferry Terminal</h1>
<p>Falomo Lagos</p>
<p class="writeup">The Lagos State Government (LASG) in 2008 enacted the Lagos State Waterways Authority Act, which established the Lagos Waterways Authority (LASWA). LASWA is charged with the responsibility of coordinating and managing the reforms necessary for the long-term growth and development of water transportation in Lagos State, including the granting of ferry licenses and concessions for the operation of terminals to the private sector.</p>
</div>
<div style="background-color: goldenrod;">
<h1>Isale Eko</h1>
<p>Lagos Island</p>
<p class="writeup">Lagos Island (Ìsàlẹ̀ Èkó) is the principal and central Local Government Area (LGA) in Lagos, Nigeria, it was the capital of Lagos State until 1957.[2] It is part of the Lagos Division.[3] As of the preliminary 2006 Nigerian census, the LGA had a population of 209,437 in an area of 8.7 km2. The LGA only covers the western half of Lagos Island; the eastern half is simply referred to as Lagos Island East LCDA.</p>
</div>
<div style="background-color: #444e0a;">
<h1>Lagos Danfo</h1>
<p>oshodi lagos</p>
<p class="writeup">Danfo like the Molue emerged in the 1970s. The origin of the word "danfo" is not certain, but some say it means "hurry" in Yoruba. The first Danfo buses were Volkswagen Kombi buses which had twelve passengers.</p>
</div>
<div style="background-color: rgb(165, 5, 5);">
<h1>Lagos State Fire Service</h1>
<p>Lagos State</p>
<p class="writeup">Lagos State Government in readiness towards protecting the lives and property of the people on its creation in 1967 established a state-owned fire station by an Edict of Lagos State Law Cap 42 of 1972. The then State Fire Service became operative on 31st August, 1972 under an Expatriate, Chief Fire Officer, Sir Allan Flemming as the Head, along with a 3-Man Crew.</p>
</div>
<div style="background-color: #252E33;">
<h1>CMS</h1>
<p>Marina Lagos</p>
<p class="writeup">The Cathedral Church of Christ Marina, Lagos is an Anglican cathedral on Lagos Island, Lagos, Nigeria. The foundation stone for the first cathedral building was laid on 29 March 1867 and the cathedral was established in 1869. The cathedral celebrated its 150th anniversary in 2017.</p>
</div>
</div>
<div class="right-slide">
<div style="background-image: url(./Images/CMS_Lagos.jpg);"></div>
<div style="background-image: url(./Images/Lagos_Fire_Service.jpg);"></div>
<div style="background-image: url(./Images/Danfo-Driver.jpg);"></div>
<div style="background-image: url(./Images/Isale-Eko.jpg);"></div>
<div style="background-image: url(./Images/Lagos_Waterwys.jpg);"></div>
<div style="background-image: url(./Images/Lagos_PeacePark.jpg);"></div>
<div style="background-image: url(./Images/Lagos_National_Station.jpg);"></div>
<div style="background-image: url(./Images/Falomo_Waterways.jpg);"></div>
<div style="background-image: url(./Images/Lagos_FloatingClinic.jpg);"></div>
<div style="background-image: url(./Images/Lekki-Ikoyi.jpg);"></div>
</div>
<div class="action-buttons">
<button class="down-button">
<i class="fas fa-arrow-down"></i>
</button>
<button class="up-button">
<i class="fas fa-arrow-up"></i>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html> The code above is an HTML document that creates a web page for the Lagos Image Slider. It includes metadata, links to external CSS and JavaScript files, and a structure for the image slider. The slider consists of left and right sections containing information and images related to various locations and landmarks in Lagos, Nigeria.
Additionally, there are action buttons for moving the slider up and down. The structure is styled using an external CSS file and has interactivity provided by a linked JavaScript file.
Step 2. CSS Styling:
Open thestyle.css file and paste the following CSS code to style the Lagos State Image Slider Application:
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Carter+One&family=Cookie&family=Island+Moments&family=PT+Serif+Caption&family=Playfair+Display+SC:wght@400;700;900&family=Red+Hat+Display:wght@700;900&family=Roboto+Mono&display=swap');
/* UNIVERSAL STYLING */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* BODY STYLING */
body {
font-family: 'Roboto Mono', monospace;
min-height: 100vh;
font-weight: bold;
text-transform: uppercase;
}
/* SLIDER CONTAINER STYLING */
.slider-container {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
/* LEFT SLIDER STYLING */
.left-slide {
height: 100%;
width: 35%;
position: absolute;
top: 0;
left: 0;
transition: transform .5s ease-in-out;
}
.left-slide > div {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.left-slide h1 {
font-size: 30px;
margin-bottom: 10px;
margin-top: -350px;
text-decoration: underline;
letter-spacing: 1px;
}
.left-slide p{
text-transform: uppercase;
letter-spacing: 1px;
font-size: 20px;
}
.left-slide p.writeup {
font-size: 14px;
margin-top: 20px;
text-align: justify;
padding: 15px;
text-transform: none;
font-family: cursive;
}
/* RIGHT SLIDER STYLING */
.right-slide {
height: 100%;
position: absolute;
top: 0;
left: 35%;
width: 75%;
transition: transform .5s ease-in-out;
}
.right-slide>div {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
overflow: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.right-slide>div>.writeup-container {
height: 200px;
overflow-y: auto;
padding: 15px;
margin-bottom: 20px;
}
h1 {
margin-top: -350px !important;
}
/* BUTTON STYLING */
button {
background-color: white;
border: none;
color: darkgray;
cursor: pointer;
font-size: 12px;
padding: 14px;
}
button:hover {
color: #222;
}
/* ACTION BUTTON STYLING */
.slider-container .action-buttons button {
position: absolute;
left: 35%;
top: 50%;
z-index: 100;
}
.slider-container .action-buttons .down-button {
transform: translateX(-100%);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.slider-container .action-buttons .up-button {
transform: translateY(-100%);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
@media screen and (max-width: 800px) {
.left-slide h1 {
font-size: 18px;
letter-spacing: 0;
margin-top: -300px;
}
.left-slide p {
letter-spacing: 0;
font-size: 16px;
}
}
@media screen and (max-width: 570px) {
.left-slide h1 {
font-size: 16px;
letter-spacing: 0;
margin-top: -200px;
}
.left-slide p {
letter-spacing: 0;
font-size: 16px;
}
}
@media screen and (max-width: 500px) {
.left-slide h1 {
font-size: 15px;
letter-spacing: 0;
margin-top: -110px;
}
.left-slide p {
letter-spacing: 0;
font-size: 12px;
}
}
@media screen and (max-width: 380px) {
.left-slide h1 {
font-size: 12px;
letter-spacing: 0;
margin-top: -70px;
}
.left-slide p {
letter-spacing: 0;
font-size: 10px;
}
}The code above is a CSS stylesheet that contains styling rules for the Lagos State Image Slider Application. It includes universal styling for all elements, specific styling for the body, slider container, left and right sliders, buttons, and media queries for responsiveness.
The stylesheet sets font families, sizes, positions, and transitions for various elements, and it adjusts the styling based on the screen width using media queries for different devices. The code also defines the styling for the left and right sections of the slider, including fonts, colors, and positioning.
Step 3. JavaScript Logic:
Open thescript.js file and add functionality to the Lagos State Image Slider Application using the following JavaScript code:
const sliderContainer = document.querySelector(".slider-container");
const slideRight = document.querySelector(".right-slide");
const slideLeft = document.querySelector(".left-slide");
const upButton = document.querySelector(".up-button");
const downButton = document.querySelector(".down-button");
const slideLength = slideRight.querySelectorAll('div').length;
let activeSlideIndex = 0;
slideLeft.style.top = `-${(slideLength - 1) * 100}vh`;
upButton.addEventListener("click", () => changeSlide("up"));
downButton.addEventListener("click", () => changeSlide("down"));
const changeSlide = (direction) => {
const sliderHeight = sliderContainer.clientHeight;
if(direction === "up") {
activeSlideIndex++;
if(activeSlideIndex > slideLength - 1) {
activeSlideIndex = 0;
}
} else if(direction === "down") {
activeSlideIndex--;
if(activeSlideIndex < 0) {
activeSlideIndex = slideLength - 1;
}
}
slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`;
slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`;
};The JavaScript code above controls the functionality of the Lagos State Image Slider application on the web page. It selects the necessary elements from the HTML, such as the slider container, left and right slides, and up and down buttons, and initializes some variables. It also sets the initial position of the left slide based on the number of slides.
The code then adds event listeners to the up and down buttons to trigger a function that changes the active slide based on the direction of the button clicked. The changeSlide() function calculates the new position of the slides and applies a transformation to achieve the sliding effect when the buttons are clicked.
Testing and Debugging
To test the application in your web browser, follow the steps below:
- Open the HTML File: Make sure you have saved all your HTML, CSS, and JavaScript files in the same folder as stated earlier. Then, open the HTML file in your web browser by double-clicking on it. This will open the file in your default web browser.
- Inspect Element: Once the app is loaded in the browser, right-click on the page and select “Inspect” or press “Ctrl+Shift+I” to open the developer tools. This will allow you to see any errors in the console and inspect elements on the page.
- Test Functionality: Interact with your app to test its functionality. This will help you identify any bugs or issues in your code.
- Debugging: If you encounter any errors or issues, use the console in the developer tools to debug your JavaScript code. Look for error messages and line numbers to pinpoint where the issue is occurring.
- Make Changes: If you need to make changes to your code, go back to your code editor, make the necessary adjustments, save the file, and then refresh the browser to see the changes reflected in your app.
Lessons Learned
This project taught me the importance of planning and designing the application logic before coding. I also improved my understanding of CSS stylings, JavaScript events, and DOM manipulation, which are crucial for creating interactive web applications.
Deployment
The project for the Lagos Image Slider application is available for viewing online on GitHub Pages. You can access it by clicking on the link provided below:
Test the Application: https://wasiu-akindoyin.github.io/Lagos-State-Images-Art-Gallery/
You can access the GitHub repository here to view or contribute to the source code.
Future Improvements
In the future, I plan to add more features, such as:
- Image Gallery: Expand the app to include an image gallery feature, allowing users to view all images in a grid layout and click on them to view them in the slider.
- Improved Image Quality: Use higher-quality images or optimize existing images for better visual quality on high-resolution screens.
- Responsive Design: Improve the application responsiveness to ensure it looks and functions well on a variety of devices, including mobile phones, tablets, and desktops.
Conclusion
The Lagos State image slider app demonstrates the effective use of HTML, CSS, and JavaScript to build engaging and visually attractive web applications. It presents the captivating beauty of Lagos State with a selection of breathtaking images, offering users an immersive experience. I trust that this article has motivated you to build your image slider applications using the mentioned technologies.
