Vertical Slider is a project were you can flip the images vertically instead horizontally. For that reason the name. The html has a fixed number of images which are loaded from Unsplash. There are two buttons. They are inside a div. Besides that, each one has its own div as you can see below: In
A Sticky menu navigation is popular in webs. It keeps a menu bar at the top of the page visible on the screen while the user scrolls down. Most of the wev development frameworks uses it, or has a solution to achieve this objective. Make an sticky navigation bar in plain javascript is not difficult.
A Card placeholder is a common element in a lot of web pages. Nowadays we can use it with differents frameworks. It is possible that x is the most famous of them. In the official documentation you can see it: Bootstrap Placeholders documentation For educative purpose I’ve avoided the usage of this framework and, following
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