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

Publié le: 19 juillet 2021
sur la chaîne: Red Eye Media
57
5

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/


Sur cette page du site, vous pouvez voir la vidéo en ligne Simple Dropdown with Js, HTML and CSS | Javascript for Beginners durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Red Eye Media 19 juillet 2021, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 57 fois et il a aimé 5 téléspectateurs. Bon visionnage!