diff --git a/src/data/projects/accordion.md b/src/data/projects/accordion.md new file mode 100644 index 000000000..279631837 --- /dev/null +++ b/src/data/projects/accordion.md @@ -0,0 +1,32 @@ +--- +title: 'Accordion' +description: 'Create an accordion component using HTML, CSS, and JavaScript.' +isNew: false +sort: 18 +difficulty: 'beginner' +nature: 'JavaScript' +skills: + - 'HTML' + - 'CSS' + - 'JavaScript' + - 'DOM Manipulation' +seo: + title: 'Build an Accordion Component with JavaScript' + description: 'Learn how to create a responsive accordion component that allows users to toggle between different sections of content.' + keywords: + - 'accordion' + - 'javascript accordion' + - 'html and css' +roadmapIds: + - 'frontend' +--- + +You are required to create an accordion component that displays a list of questions or headings. When a user clicks on a question, its corresponding answer or content section will expand while collapsing any previously opened section. This allows only one section to be open at a time, keeping the UI clean and organized. + +Given below is the mockup showing the accordion in its default and expanded states: + +[![Accordion](https://assets.roadmap.sh/guest/accordion-rbvpo.png)](https://assets.roadmap.sh/guest/accordion-rbvpo.png) + +This project will help you practice DOM manipulation, event handling, and implementing responsive design patterns using JavaScript. + +--- \ No newline at end of file diff --git a/src/data/projects/dropdown.md b/src/data/projects/custom-dropdown.md similarity index 96% rename from src/data/projects/dropdown.md rename to src/data/projects/custom-dropdown.md index fbdde309e..20efdf933 100644 --- a/src/data/projects/dropdown.md +++ b/src/data/projects/custom-dropdown.md @@ -2,8 +2,8 @@ title: 'Custom Dropdown' description: 'Create a custom dropdown using HTML, CSS, and JavaScript.' isNew: false -sort: 18 -difficulty: 'beginner' +sort: 19 +difficulty: 'intermediate' nature: 'JavaScript' skills: - 'HTML'