Geek Logbook

Tech sea log book

50projectsIn50days – Day 31: Password Generator

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

50projectsIn50days – Day 30: Auto Text Effect

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

50projectsIn50days – Day 29: Double Heart Click

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

50projectsIn50days – Day 28: Git Hub profile

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

50projectsIn50days – Day 27: Toast Notification

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

50projectsIn50days – Day 26: Vertical Slider

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

50projectsIn50days – Day 25: Sticky Nav

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.

50projectsIn50days – Day 24: Content Placeholder

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

50projectsIn50days – Day 23: Kinectic Loader

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

50projectsIn50days – Day 22: Drawing App

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