Geek Logbook

Tech sea log book

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

50projectsIn50days – Day 19: Theme clock

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