Embedded Files
🥦 9.tabs
25 JavaScript Projects: Prepare for Your 2024 Interview
In the competitive field of programming, having solid JavaScript skills is a key step towards success. To help you better prepare for the upcoming interview, we have carefully prepared 25 practical JavaScript project examples. These projects not only cover common needs in front-end development, but also help you deeply understand the core concepts of JavaScript and improve your practical ability.
Project Overview
The following is a list of 25 JavaScript projects we have prepared for you. Each project comes with HTML, CSS, and JavaScript files for you to download, learn, and modify.
1. Accordion Effect
Purpose: Implement a foldable accordion effect, which is often used in FAQ pages or scenarios where you need to save space to display content.
Files: index.html, main.js, style.css
2. Random Color Generator
Purpose: Generate and display random colors, which can be used in design tools or any scenario that requires random colors.
Files: index.html, main.js, style.css
3. Star rating system
Purpose: Implement a star rating system where users can give ratings by clicking on the stars.
Files: index.html, main.js, style.css
... (Detailed description of other projects omitted here, the following is a list of projects)
4. API call examples
5. Image carousel
6. Load more button
7. Light and dark mode switch
8. Random quote generator
9. Tab switch
10. Modal
11. Tic-Tac-Toe
12. Filter cards
13. QR code generator
14. Scroll to top/bottom button
15. Button ripple effect
16. Multi-step progress bar
17. Scroll indicator
18. Tip calculator
19. Sticky navigation bar
20. Random image generator
21. GitHub profile finder
22. Recipe app
23. Pagination function
24. Note app
Learning and practice
Each project is designed to help you master the core concepts of JavaScript, such as DOM manipulation, event handling, asynchronous programming (such as using Fetch API calls for external data), and CSS style and layout skills. By implementing these projects, you will be able to more confidently face technical challenges in interviews and demonstrate your practical ability.
How to get started
Browse the list of projects: First, browse the list of all projects and choose the projects that you are interested in or find challenging to start with.
Download code: Download the HTML, CSS, and JavaScript files for each project from the links provided.
<html><head><base href="https://webbox-ai.vercel.app/accordion/" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accordion</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #7cf9e5;
font-family: Arial, sans-serif;
}
.section {
min-height: 100vh;
padding-top: 100px;
}
.container {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
h1 {
font-size: 40px;
margin-bottom: 50px;
color: rgb(52, 63, 2);
text-align: center;
}
.accordion {
max-width: 700px;
margin: auto;
}
.accordion_item {
border: 1px solid rgb(255, 0, 85);
padding: 20px;
margin-bottom: 10px;
border-radius: 5px;
background-color: #ffffff;
transition: all 0.3s ease;
}
.accordion_title {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 10px;
cursor: pointer;
}
.accordion_title h3 {
flex: 1;
font-size: 25px;
color: rgb(52, 63, 2);
}
.accordion_title i {
font-size: 24px;
transition: transform 0.3s ease;
color: rgb(255, 0, 85);
}
.accordion_content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion_title.active + .accordion_content {
max-height: 300px;
padding-top: 20px;
}
.accordion_content p {
font-size: 18px;
color: rgb(117, 49, 0);
line-height: 1.6;
}
.accordion_title.active i {
transform: rotate(180deg);
}
.accordion_title.active {
border-bottom: 2px solid rgb(255, 0, 85);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.accordion_item {
animation: fadeIn 0.5s ease forwards;
}
</style>
</head>
<body>
<section class="section">
<div class="container">
<h1>Accordion</h1>
<div class="accordion"></div>
</div>
</section>
<script>
const data = [
{
id: "1",
question: "What are accordion components?",
answer:
"Accordion components are user interface elements used for organizing and presenting content in a collapsible manner. They typically consist of a header, content, and an expand/collapse action.",
},
{
id: "2",
question: "What are they used for?",
answer:
"They are commonly employed in various contexts, including FAQs, product descriptions, navigation menus, settings panels, and data tables, to save screen space and provide a structured and user-friendly interface for presenting information or options.",
},
{
id: "3",
question: "Accordion as a musical instrument",
answer:
"The accordion is a musical instrument with a keyboard and bellows. It produces sound by air passing over reeds when the player expands or compresses the bellows, used in various music genres.",
},
{
id: "4",
question: "Can I create an accordion component with a different framework?",
answer:
"Yes of course, it is very possible to create an accordion component with another framework. Many popular frameworks like React, Vue, Angular, and others have their own implementations or libraries for accordion components.",
},
];
const accordionWrapper = document.querySelector(".accordion");
function createAccordionData() {
accordionWrapper.innerHTML = data
.map(
(dataItem, index) => `
<div class="accordion_item" style="animation-delay: ${index * 0.1}s;">
<div class="accordion_title">
<h3>${dataItem.question}</h3>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="accordion_content">
<p>${dataItem.answer}</p>
</div>
</div>
`
)
.join("");
}
createAccordionData();
const getAccordionTitles = document.querySelectorAll(".accordion_title");
getAccordionTitles.forEach((currentItem) => {
currentItem.addEventListener("click", (event) => {
if (currentItem.classList.contains("active")) {
currentItem.classList.remove("active");
} else {
let getAlreadyAddedActiveClasses = document.querySelectorAll(".active");
getAlreadyAddedActiveClasses.forEach((currentActiveItem) => {
currentActiveItem.classList.remove("active");
});
currentItem.classList.add("active");
}
});
});
</script>
</body>
</html>
Page updated
Google Sites
Report abuse