How to Create an Array Navigation Form with JavaScript and HTML
In this Javascript Tutorial, we will see how to create an interactive form for navigating through an array of data.
Users can click navigation buttons to view the details of different people from the array, the form fields and image are updated accordingly.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Array Navigation Form</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
body{ font-family: Arial, sans-serif; background-color: #f2f2f2; }
.container{ background-color: #fff; padding: 20px; margin: 50px auto;
width: 50%; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}
form button{ padding: 10px 20px; background-color: #4caf50; color: #fff;
border: none; border-radius: 5px; margin: 10px; width: 21%;
cursor: pointer; text-transform: uppercase;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
form button:hover{ background-color: #3e8e41; }
div label{ display: inline-block; margin: 10px 0; font-weight: bold; color: #444;
text-align: right; width: 22%; font-size: 20px;
}
div input[type="text"]{ display: inline-block; margin: 10px; padding: 10px; border: none;
border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out; width: 70%; }
div input[type="text"]:focus{ outline: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}
#image{ display: flex; align-items: flex-start; }
#image label{margin-right: 10px;}
#image img{ margin: 10px; width: 30%; border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container">
<form>
<button id="first-btn">First</button>
<button id="next-btn">Next</button>
<button id="prev-btn">Previous</button>
<button id="last-btn">Last</button>
</form>
<div class="inputs">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<br>
<label for="dob">Date of Birth:</label>
<input type="text" id="dob" name="dob">
<br>
<div id="image">
<label for="pic">Image:</label>
<img id="pic" src="">
</div>
</div>
</div>
<script>
// Define an array of objects with properties name, age, dob and image
const peoples = [
{name:"Alice", age:25, dob:new Date("1997-03-15"), image:"images/avatar1.png"},
{name: "Bob", age: 32, dob: new Date("1990-09-02"), image: "images/avatar2.png"},
{name: "Charlie",age: 42,dob: new Date("1980-05-20"),image: "images/avatar3.png"},
{name: "David",age: 28,dob: new Date("1994-12-06"),image: "images/avatar4.png"},
{name: "Emma",age: 35,dob: new Date("1987-07-19"),image: "images/avatar5.png"},
{name: "Frank",age: 50,dob: new Date("1972-10-31"),image: "images/avatar6.png"},
{name: "Grace",age: 22,dob: new Date("2000-01-01"),image: "images/avatar7.png"}
];
// Initialize the currentIndex variable to 0
let currentIndex = 0;
// Define a function to navigate through the array
function navigateArray(event){
event.preventDefault();
// Check which button was clicked and update the currentIndex accordingly
switch(event.target.id){
case 'first-btn':
currentIndex = 0;
break;
case 'next-btn':
currentIndex = currentIndex <peoples.length-1 ? currentIndex + 1 : peoples.length - 1;
break;
case 'prev-btn':
currentIndex = currentIndex > 0 ? currentIndex - 1 : 0;
break;
case 'last-btn':
currentIndex = peoples.length - 1;
break;
}
// Update the UI with the current item by setting the value of input elements
// and image source to corresponding properties
document.getElementById('name').value = peoples[currentIndex].name;
document.getElementById('age').value = peoples[currentIndex].age;
// Display date in yyyy-mm-dd format
document.getElementById('dob').value = peoples[currentIndex].dob.toLocaleDateString();
document.getElementById('pic').src = peoples[currentIndex].image;
}
// Add click event listeners to navigation buttons
document.getElementById('first-btn').addEventListener('click', navigateArray);
document.getElementById('next-btn').addEventListener('click', navigateArray);
document.getElementById('prev-btn').addEventListener('click', navigateArray);
document.getElementById('last-btn').addEventListener('click', navigateArray);
// Initialize the UI with the values of the first object in the array
document.getElementById('name').value = peoples[currentIndex].name;
document.getElementById('age').value = peoples[currentIndex].age;
// Display date in yyyy-mm-dd format
document.getElementById('dob').value = peoples[currentIndex].dob.toLocaleDateString();
document.getElementById('pic').src = peoples[currentIndex].image;
</script>
</body>
</html>
Code Explanation:
this JavaScript code, allows users to navigate through an array of data and images by clicking on navigation buttons.
This JavaScript code performs the following actions:
1 - Create an array called 'peoples,' containing objects with properties such as name, age, date of birth (dob), and an image URL for each person.
2 - Create a function called navigateArray(event) that handles button clicks and updates the form based on the clicked button.
3 - Event listeners are added to each of the navigation buttons to trigger the navigateArray function when they are clicked.
4 - The initial values in the input fields and the image source are set to the properties of the first person in the peoples array.
OUTPUT:
