From 05d414adf416f0e94980f695cfeea2a443d0cb1a Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Wed, 4 Sep 2024 00:07:31 +0100 Subject: [PATCH] Add dropdown project idea --- src/data/projects/dropdown.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/data/projects/dropdown.md diff --git a/src/data/projects/dropdown.md b/src/data/projects/dropdown.md new file mode 100644 index 000000000..fbdde309e --- /dev/null +++ b/src/data/projects/dropdown.md @@ -0,0 +1,30 @@ +--- +title: 'Custom Dropdown' +description: 'Create a custom dropdown using HTML, CSS, and JavaScript.' +isNew: false +sort: 18 +difficulty: 'beginner' +nature: 'JavaScript' +skills: + - 'HTML' + - 'CSS' + - 'JavaScript' + - 'DOM Manipulation' +seo: + title: 'Build a Custom Dropdown Menu with JavaScript' + description: 'Learn how to create a fully customizable dropdown menu that allows users to select an item and see the selection reflected in the dropdown.' + keywords: + - 'custom dropdown' + - 'javascript dropdown' + - 'html and css' +roadmapIds: + - 'frontend' +--- + +You will create a custom dropdown menu that lets users select an item from a list. The dropdown should have a default state showing a placeholder text, an open state revealing all options, and a selected state where the chosen item is displayed. When an item is selected, the dropdown closes, and the selected item is highlighted. + +Given below is the mockup showing the dropdown in its default, open, and selected states: + +[![Custom Dropdown](https://assets.roadmap.sh/guest/dropdown-1f4b3.png)](https://assets.roadmap.sh/guest/dropdown-1f4b3.png) + +This project will help you practice DOM manipulation, event handling, and creating responsive and interactive elements with JavaScript. \ No newline at end of file