Tag: #50projectsIn50days

The purpose of the project is to understand the event “key”. It is supossed you press a key and see in the browser the key you’ve alredy pressed the key code, and the name ol the event. The html is straightforward. Inside a div named “insert” we have the “key” class This code is taken

A simple container shows us a Dad Joke. If you click the button, another card will appear. The HTML and CSS are simple and don’t have anything special to point out. What is different is in JavaScript because the script loads the Jokes which come from icanhazdadjoke. Firs of all you need to send in

A sound board that has buttons with different sounds. If you click, you’ll hear a sound. The projects uses the <audio> element. The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also

Email and Email are into the label element as we can see here: This label will be added in a node list as consequence of the following line of code in the Javascript Script: After that the inline style add a transition delay as we can see there: You can see the code in this

A simple html with a button and two images. Which changes the behavior if the class adds a left or right depends on the mouse. In fact, the CSS code is the following: Interactivity is added by the event listener in the left and right classes. using the event listener if the mouse enters or

The Scroll Animation is a scroll that has a fixed number of contents inside the html. So, it’s not generated dynamically. In the case of this project there are 12 Boxes. Each h2 box has a class “Box” that gives the square aspect as you can see in this CSS: Talking about animation, which is

A really simple HTML and CSS which involves some tricky JavaScript archive the blur effect. Because, besides the blur effect, the project consists in showing an increasing percentage of how much the blur effect decreases so we can see the image more clearly. the class .bg and .loading-text make the visual display of the information

A search bar that has an interesting animation inside it. The changes happen when the “active” selector is used. There are two, one for the input, and other for the button: Is a simple project that helps to understand how the transform property works. As you can read in the Mozilla Docs The transform CSS property lets you

A simple article written in plain HTML with has the flip change. If you click on the hamburger menu, the article will rotate 45 degrees. It’s a nice transformation that is created thanks to adding to a nav the “show-nav” CSS style. But that CSS selector “snow-nav” is not alone it’s added to a different

The projects related to the progress step it is generated by an another script in JavaScript that change the class in the DOM. There are two event listeners in the script and there is a function that update the CSS. So, the new style is following: The project has a an average difficulty and it’s