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

Publicado em: 19 Julho 2021
no canal de: 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/


Nesta página do site você pode assistir ao vídeo on-line Simple Dropdown with Js, HTML and CSS | Javascript for Beginners duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Red Eye Media 19 Julho 2021, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 57 vezes e gostou 5 espectadores. Boa visualização!