An HTML with 6 boxes. In the first one you have an image which you can drag and drop using the mouse. The HTLM and CSS are simple. The only topic you may notice is that there are a number of functions which are used to show the user when they take the image. On
When you click the button a ripple effect apeared on the button and its expands up to the end. The construction starts with a event listener which is listening the click inside the buttont. When the button is clicked two constants are created. The x and y that works as the point where is clicked.
The clock container has several classes that referes to the clock elements: needles, hours, minutes and seconds: We even can find a button wich produce a Dark mode in the clock: But let focus in the clock. Because the interesting part of this idea is that the remarkable difficulty to think how to do it
A Image carrousell changes the background image deppending where you clikc. It’s an easy and well known task to perform in your mind but, when you have to use Vainilla Javascript it should be something different. The first thing you’ll notices is that there is an event listener in the two buttons: right and left.
The movie app needs you create an account in the movie db beacuse you need this access to get the data The new part in this path is the oner related to take information from another services, in this case a movie information provider. This information is obtained using the function getMovies(url) Using the fetch
A chanllenging project which shows how a cup is filled by a water. The HTML looks quite simple becase we have 8 cups of 250ml. But, we can select one cup or a range which is cool. In fact, the HTML is as we can see here: So, we have a big cup and 8
A page which load three values that are hardcoded in the HTML tag: Each one with a class “counter” will be selected and for each one an inner text will be added as Zero and will be aded an increment up to the target (which is located in the data-target) is reached: The functions call
A navigation bar inside the html is the responsible of hosting the menu li. But, for the example is not necesarry to use explain more about that. This nav has an event listener which listen for a click. When it happens it will be added elelment active which is the responsible of change the style.
A text area where you add a number of elements divided by comma. Then, when you press enter the you’ll see a simple animation and a, in yellow, the chosen one. The text area in index.html is where you’ll add the text And the relevant Style are related with the elements: tag and tag.higlight Let’s
One of the most typical features we can find in a web page is the Frequently asqued questions. There are in many ways: Fixed, floating and, as we can see in this case, collapsed In a big faq container we have each container as you can see in the following bunch of code: The sinfle