The HTML page doesn’t have any html nor Javascirpt which explains the functionalyti. Therefore all the changes is made by the CSS. The movement is made by the Transform function as you can see here: The transform property is: The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of
There is a toolbox in the middle of the screen, as a Paint emulator. Below the box you can see buttons related to the possibilities of change the color and the size of the draw up. The elements selected related with the size, color are similiar in each case. There is an event listener which
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.