Simple Dropdown with Js, HTML and CSS | Javascript for Beginners

Veröffentlicht am: 19 Juli 2021
auf dem Kanal: Red Eye Media

In this tutorial we will look at how to make a dropdown using just Javascript, HTML and CSS in just about 15 minutes without any complicated code or frameworks. This is a simple, but useful little project that you will most likely see again in some form as you develop your apps.

We will use our Javascript to toggle between two different classes when we click an element on the page. In this way we can have one style for when the dropdown is visible and one for when its hidden.
To do this we create a click event listener and make use of classList.toggle() which makes it easy to change between our two different styles.

Timecodes
0:00 - Intro
0:24 - making files
0:045 - html
04:50 - css
12:19 - javascript

Complete code on Github:
https://github.com/Polkagris/dropdown...

How to get the code without using the terminal:
1. Go to the Github link
2. Click on the green Code-button
3. Click Download ZIP
4. Extract and open the folder in your preferred code editor (I'm using visual studio code, download link below)
5. To see the game in action, just open the index.html file in you browser

Code editor download link:
https://code.visualstudio.com/

Auf dieser Seite können Sie das Online-Video Simple Dropdown with Js, HTML and CSS | Javascript for Beginners mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Red Eye Media 19 Juli 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 57 Mal angesehen und es wurde von 5 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!