Are you looking to enhance your JavaScript skills while indulging in a fun and interactive project? Look no further! Our latest project revolves around the world of finance and JavaScript wizardry, where you get to play with a list of the top 10 richest persons, arranging them in order using the power of drag-and-drop functionality. Whether you're a seasoned developer or just starting your journey into the world of programming, this project offers a perfect blend of challenge and excitement to sharpen your skills.
In today's digital landscape, JavaScript has emerged as one of the most popular programming languages, powering dynamic and interactive web experiences across the globe. With its versatility and wide range of applications, mastering JavaScript opens doors to endless possibilities in web development. And what better way to hone your skills than by diving into a hands-on project that not only educates but also entertains?
Our project centres around a list of the top 10 richest individuals, providing users with the opportunity to rearrange them according to their net worth. Through the intuitive drag-and-drop feature, users can easily manipulate the order of the list, gaining valuable insights into the mechanics of JavaScript event handling and DOM manipulation along the way.By dissecting the project code, you'll unravel the mysteries of event listeners and learn how to harness their power to create seamless user interactions. Through experimentation and exploration, you'll discover the art of dynamically updating the DOM to reflect changes made by the user, breathing life into static web pages.
But this project isn't just about mastering JavaScript; it's also about fostering creativity and problem-solving skills. As you tackle the challenge of implementing drag-and-drop functionality, you'll encounter obstacles that will test your ingenuity and perseverance. But fear not, for with each hurdle overcome, you'll emerge stronger and more confident in your abilities as a developer.
Create a file named index.html and paste the below code there.
The below code is .Html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Top 10 Richest People</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/3da1a747b2.js"
crossorigin="anonymous"
></script>
</head>
<body>
<h1>10 Richest People</h1>
<p>Drag and drop the items into their corresponding spots</p>
<ul class="draggable-list" id="draggable-list"></ul>
<button class="check-btn" id="check">
Check Order
<i class="fas fa-paper-plane"></i>
</button>
<script src="script.js"></script>
</body>
</html>Create a file named script.js and paste the below code there.
The below code is .Js file.
const draggable_list = document.getElementById('draggable-list');
const check = document.getElementById('check');
const richestPeople = [
'Jeff Bezos',
'Bill Gates',
'Warren Buffett',
'Bernard Arnault',
'Carlos Slim Helu',
'Amancio Ortega',
'Larry Ellison',
'Mark Zuckerberg',
'Michael Bloomberg',
'Larry Page'
];
// Store listitems
const listItems = [];
let dragStartIndex;
createList();
// Insert list items into DOM
function createList() {
[...richestPeople]
.map(a => ({ value: a, sort: Math.random() }))
.sort((a, b) => a.sort - b.sort)
.map(a => a.value)
.forEach((person, index) => {
const listItem = document.createElement('li');
listItem.setAttribute('data-index', index);
listItem.innerHTML = `
<span class="number">${index + 1}</span>
<div class="draggable" draggable="true">
<p class="person-name">${person}</p>
<i class="fas fa-grip-lines"></i>
</div>
`;
listItems.push(listItem);
draggable_list.appendChild(listItem);
});
addEventListeners();
}
function dragStart() {
// console.log('Event: ', 'dragstart');
dragStartIndex = +this.closest('li').getAttribute('data-index');
}
function dragEnter() {
// console.log('Event: ', 'dragenter');
this.classList.add('over');
}
function dragLeave() {
// console.log('Event: ', 'dragleave');
this.classList.remove('over');
}
function dragOver(e) {
// console.log('Event: ', 'dragover');
e.preventDefault();
}
function dragDrop() {
// console.log('Event: ', 'drop');
const dragEndIndex = +this.getAttribute('data-index');
swapItems(dragStartIndex, dragEndIndex);
this.classList.remove('over');
}
// Swap list items that are drag and drop
function swapItems(fromIndex, toIndex) {
const itemOne = listItems[fromIndex].querySelector('.draggable');
const itemTwo = listItems[toIndex].querySelector('.draggable');
listItems[fromIndex].appendChild(itemTwo);
listItems[toIndex].appendChild(itemOne);
}
// Check the order of list items
function checkOrder() {
listItems.forEach((listItem, index) => {
const personName = listItem.querySelector('.draggable').innerText.trim();
if (personName !== richestPeople[index]) {
listItem.classList.add('wrong');
} else {
listItem.classList.remove('wrong');
listItem.classList.add('right');
}
});
}
function addEventListeners() {
const draggables = document.querySelectorAll('.draggable');
const dragListItems = document.querySelectorAll('.draggable-list li');
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', dragStart);
});
dragListItems.forEach(item => {
item.addEventListener('dragover', dragOver);
item.addEventListener('drop', dragDrop);
item.addEventListener('dragenter', dragEnter);
item.addEventListener('dragleave', dragLeave);
});
}
check.addEventListener('click', checkOrder);Create a file named style.css and paste the below code there.
The below code is .Css file.
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
:root {
--border-color: #e3e5e4;
--background-color: #c3c7ca;
--text-color: #34444f;
}
* {
box-sizing: border-box;
}
body {
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100vh;
margin: 0;
font-family: 'Lato', sans-serif;
}
.draggable-list {
border: 1px solid var(--border-color);
color: var(--text-color);
padding: 0;
list-style-type: none;
}
.draggable-list li {
background-color: #fff;
display: flex;
flex: 1;
}
.draggable-list li:not(:last-of-type) {
border-bottom: 1px solid var(--border-color);
}
.draggable-list .number {
background-color: var(--background-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
height: 60px;
width: 60px;
}
.draggable-list li.over .draggable {
background-color: #eaeaea;
}
.draggable-list .person-name {
margin: 0 20px 0 0;
}
.draggable-list li.right .person-name {
color: #3ae374;
}
.draggable-list li.wrong .person-name {
color: #ff3838;
}
.draggable {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
flex: 1;
}
.check-btn {
background-color: var(--background-color);
border: none;
color: var(--text-color);
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
}
.check-btn:active {
transform: scale(0.98);
}
.check-btn:focus {
outline: none;
}Conclusion
In conclusion, our top 10 richest persons drag-and-drop project offers a unique and engaging opportunity to elevate your JavaScript skills while having fun along the way. Whether you're a seasoned developer looking to expand your horizons or a newcomer eager to learn the ropes, this project has something to offer for everyone. So why wait? Dive in today and embark on a journey of discovery and growth in the exciting world of JavaScript development.
"Keep your eyes peeled for upcoming projects that will supercharge your development journey and propel your skills to new heights!"
Download Code
