Tag: #50projectsIn50days

A password generator is composed by a text file and some other characteristics. Besides the style and the html tags the central thing is the functions we find in script.js. First of all the simplest one the event listener in the clipboard element. The main objective of this elements is to copy the password in

In the HTML, there are simple tags that show an h1 element and an input for adjusting the text speed. The text will appear based on the function defined in the script. The function is called writeText() and it adds the text from textContent to the textElement. You can see the code in this GitHub

In the HTML, you’ll find a title, h3, and small text, which resemble a cell phone layout. The entire page listens for click events. When a click event occurs, the createHeart function is triggered, adding the ‘fas’ and ‘fa-heart’ styles to an element. This creates a heart icon on the page, similar to the action

Fetching GitHub user information is the core task of this project. This involves interacting with the GitHub API, which is facilitated using the Axios library. The script is embedded in the HTML as follows: The HTML itself is initially empty. The creation of the user card and error card is handled by JavaScript functions. The

Toastify is a well-known library that helps create Toast Notification on your website. You can find the npm project here: toastify-js However, in this projects, we replicate the same behaviour but using the native functions provided by the browser. The HTML includes a simple button class btn In the JavaScript you will find the messages

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