DEV Community: Leonardo Schmitt

Write a test function while learning javascript

Leonardo Schmitt — Sat, 27 Jul 2024 02:28:39 +0000

Objects everywhere

Well, you've probably heard before about objects in JavaScript and how they are important in order to understand the language.
Objects make JS extremely readable and useful because of its model "key":"value". But the thing I want to stand out is that the "value" section accepts not only a simple string, rather another object, that in turn, may be another object and so on. For instance:

const character = {
      name:"Arthur Morgan",
      age:24,
      face: {
      hairSize:5,
      eyesColor: "blue",
      }
}

This snippet shows that face is an object as well as character. It's perfectly fine to do so, and lots of complex APIs deals with data like that, grouping over and over when it matters.

But the real power of objects relies on functions, and this Leet Code problem deals with it, as well as give us the gist of how test libraries work under the hood. Basically you need a function that validates wether a value is equal as the expected or is not: toBe() and notToBe(). To do so, we can return an object with those functions. By the way, using arrow functions makes it prettier and direct.

Here is the answer.

function expect(val) {
  function toBe(anotherValue) {
    if (val === anotherValue) {
      return true;
    }

    throw Error("Not Equal");
  }

  function notToBe(anotherValue) {
    if (val !== anotherValue) {
      return true;
    }

    throw Error("Equal");
  }

  return {
    toBe: (anotherValue) => toBe(anotherValue),
    notToBe: (anotherValue) => notToBe(anotherValue),
  };
}

We can quickly see it running using another object: the famous console and its function log.

console.log(expect(5).toBe(null)); // give us an error "Not Equal", because 5 is not null

Note that the fact of returning an object give us the freedom to use expect() and then, right after, .toBe(). That is because we return an object and imediatelly access the property toBe, which is a function.

This Leet code problem is an excellent way to see how objects and functions can work together and build awesome stuff in JavaScript. I hope you liked :)

How to enter full-screen mode in browser using JS

Leonardo Schmitt — Fri, 01 Oct 2021 03:09:49 +0000

Hi there!

📌 Today, I'll show a straightforward way to enter and exit fullscreen mode on main browsers. I'll try to explain as much as I can, so introducing a subtle pace. You can open the pen below on Codepen and check by yourself.

There is also the fullscreen related to the video HTML element, which will be properly covered.

Step 1

To get started, we'll just need to create a HTML file and add the following code:


 <button onclick="fsManager.checkForFullscreen()">
         Enter fullscreen
 </button>

That is, a simple button element that will execute the checkForFullscreen() function wherever the user clicks on it.

Step 2

To do the magic wanted we need JavaScript. The whole script is down below.

 class fullScreenManager {
            #isFullscreen = false;
            #docEl = document.documentElement;

            checkForFullscreen() {
               this.isFullscreen = !this.isFullscreen;

               if (this.isFullscreen) {
                  this.enterFullscreen();
               } else {
                  this.exitFullscreen();
               }
            }

            enterFullscreen() {
               this.#docEl.requestFullscreen() ||
                  this.#docEl.webkitRequestFullscreen() ||
                  this.#docEl.msRequestFullscreen();
            }
            exitFullscreen() {
               document.exitFullscreen() ||
                  document.webkitExitFullscreen() ||
                  document.msExitFullscreen();
            }
         }
         const fsManager = new fullScreenManager();

Here what's going on:

we create a class called fullscreenManager. Within it there are two private variables: isFullscreen and docEl
The first carries a false value because initially the fullscreen isn't enabled.
The second is just a streamline name to refer to document.documentElement, that is, the HTML element in itself.
There is the checkForFullscreen method that is used to check wheter the fullscreen is enabled or not. If it is, execute enterFullscreen(). If not, execute exitFullscreen(). Moreover, the variable that's responsible for carry the state (false or true) of the screen has to change to the opposite value. If it's not opened yet (if it's false) then turn it to true, and vice-versa, logic shown in this.isFullscreen = !this.isFullscreen
To be able to open the fullscreen, we can call three methods that do the same, all of them associated with the docEl variable. Depending on the user's browser, certain methods don't work out due to its browser engine. To solve that, the logic is basically checking if the given browser "accepts" requestFullscreen, or webkitRequestFullscreen or even msRequestFullscreen. To do that I'm using the || logic operator. One of them has to work in almost every browser, something that you can easily check over here.
On the other hand, if the user presses again the button, isFullscreen turns to false and the exitFullscreen is executed pretty much the same way as the enterFullscreen by using the methods to exit the fullscreen. In fact, to exit we're using the document instead of document.documentElement
To wrap it up, we declare a global varible called fsManager and attach to it a new instance of the fullscreenManager class, allowing us to call its methods, like we did in the HTML button.

Video element

If you want to make the same functionality but for associating it with videos, the methods used are the same, but since you're dealing with the video element, don't use document or document.documentElement. Rather, there should be something like document.querySelector('.video-class-example').requestFullscreen() and so on.

Wrap up

But that's all, anyway. I hope you enjoyed as much I did writing this out.

If you happen to have any suggestion, I'll be pleased to modify the code for the better.

Farewell 👋 👋 👋 👋

How to boost your code speed with Emmet in VSCODE

Leonardo Schmitt — Tue, 27 Apr 2021 00:12:26 +0000

🔥 If you code in Visual Studio Code, you may have already encountered something called Emmet. It is a powerful standard tool that you can easily increase the speed of your code, especially CSS and HTML. Here, I show you the essence of it so you can start using right away.

Snippets - HTML

Emmet can translate header+.container+footer to

 <!-- header+.container+footer -->
 <header></header>
 <div class="container"></div>
 <footer></footer>

Or this header>h1.title{this is a title}>footer

<!-- header>h1.title{this is a title}>footer -->
 <header>
         <h1 class="title">
            this is a title
            <footer></footer>
         </h1>
</header>

Or this .container>.item-$*5

<!--  .container>.item-$*5  -->
<div class="container">
         <div class="item-1"></div>
         <div class="item-2"></div>
         <div class="item-3"></div>
         <div class="item-4"></div>
         <div class="item-5"></div>
</div>

Or this header+ul+li^^main>footer


<!--  header+ul+li^^main>footer  -->
 <header>
       <ul>
          <li></li>
       </ul>
</header>
<main></main>
<footer></footer>

If you create a p element and write lorem plus a certain number, it will result in lorem paragraphs, rapidly.

<p>lorem20</p>

<!--  <p>lorem20</p>  -->
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos ipsum quibusdam nisi similique ex in quidem harum aut ea labore!</p>

Also, brackets are used to group elements as follows div+(div>h1>span)+footer

<!--  div+(div>h1>span)+footer -->
  <div></div>
  <div>
     <h1><span></span></h1>
  </div>
  <footer></footer>

You can create forms by using a snippet like this form:get>input:number.age+input:s[value='submit']

<!--  form:get>input:number.age+input:s[value='submit'] -->
   <form action="" method="get">
         <input type="number" name="" id="" class="age" />
         <input type="submit" value="submit" />
   </form>

+ means adding an element after another one, e.g header+main+footer
> means adding an element inside another one, e.g header>ul>li
^ means adding an element outside, lifting it up, e.g header>ul>li^^main
* means multiplying element, eg div.container*3
$ means numbering elements, eg div.container$*3
. adds a class to the element, eg div.container
# adds an ID to the element, eg div#container
[attr] adds an attribute to the element, eg h1[contenteditable=true class='heading']{edit me}
{} adds a text to the element, eg h2{subtitle}

Snippets CSS

It's easy to apply using CSS, as most cases you have to write the first letter of the property followed by the value:


.box {
   /* w:a */
   width:auto;
   /* w100px */
   height:100px; 
   /* df */
   display:flex;
   /* aic*/
   align-items:center;
   /*jcc*/
   justify-content:center;
   /* p50 */
   padding:50px;
   /* c#f */
   color:#fff;
   /* bg */
   background: #000;
   /* ffa */
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   /* t100 */
  top:100px;
  /*bxz*/
  box-sizing: border-box;
  /*ovh*/
  overflow:hidden;
}

That's the base of Emmet, you can find the comprehensive cheatcheet here: https://docs.emmet.io/cheat-sheet/ and the site here: https://emmet.io/

I hope you find it interesting... bye bye! 👋

How to make a scroll indicator bar with JS, HTML and CSS easily and explained 🖱️

Leonardo Schmitt — Tue, 23 Mar 2021 02:39:30 +0000

Chances are you have already ran into sites where there is a bar, usually located in the header, that increase or decrease according to the page scroll. So, that's what this post is about.

🔍 Overview

Basically, what we want to do is to check where is the scroll compared to page content size, so if the user have scrolled until the middle of the content, the bar is supposed to fulfill 50%, and so on, always tracking and applying the math to do so.

HTML

After fitting the bar in the HTML body, just like the codepen example above, add some content to be able to see some effect when scrolls happen.

<div class='scroll-bar-wrapper'> 
  <div class='scroll-bar'> </div>
</div>

JavaScript

window.addEventListener('scroll',()=> indicateScrollBar())

function indicateScrollBar() {
const distanceFromPageTop = document.body.scrollTop || document.documentElement.scrollTop;

const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

const scrolled = (distanceFromPageTop / height) * 100;

document.querySelector(".scroll-bar").style.width =  `${scrolled}%`;

}

In .js file, window.addEventListener('scroll',()=> indicateScrollBar()) tells that whenever the user happens to scroll down or up in the window, indicateScrollBar() is called.
In this function, we first encounter distanceFromPageTop, a variable that will receive either document.body.scrollTop or document.documentElement.scrollTop. If the first does not exist or the browser doesn't recognize, or it's falsy, the second is reserved to that variable, so explained by the || (Logical OR) in the middle of them. Almost all browsers consider the first one, a property that give us a number meaning how far in pixels we are from the top. document.body.scrollTop differs from document.documentElement.scrollTop just because the latter deals with the whole HTML document, and the first deals with the body itself. In this case, it doesn't affect which is used.
Another variable, so, is declared: height. This one will receive the result of document.documentElement.scrollHeight - document.documentElement.clientHeight. But what does exactly this expression mean?

document.documentElement.scrollHeight gives us a number referring to the height of HTML document, the max number that we can get until the scroll stuck in the bottom, the whole content.

document.documentElement.clientHeight gives us a number referring to the height of HTML document that we can see, that's viewable.

scrolled is another variable that received the expression (distanceFromPageTop / height) * 100 which will give us the final number.
Lastly, we get the bar via DOM, and applies this final number as the width of the bar, not forgetting to add the % signal.

Illustration of the difference between clientHeight and scrollHeight

CSS

.scroll-bar-wrapper {
  width: 100%;
  height:10px;
  position:fixed;
  top:0;
  left:0;
  background:#CCCCCC;
}

.scroll-bar { 
  width:0;
  height: inherit;
  background: #8D7ECA;
}

Now in .css file, we style the bar. The bar wrapper covers 100% of the screen, also fixed at the top, so even in the scrolls it appears. Moreover, the .scroll-bar, the visual bar in itself, receive initially width:0, as it will change with the user scrolls. As well, the same height as the wrapper, its father, and the color to make it all visual.

You can make lots of different styles. This is just a sample with the essence. For instance, you could make the bar as a pseudo-element of main, so avoiding HTML directly, just like so:

✔️ Windup

I wish you found it interesting or learn sth. Goodbye! 👋

How to make a mouse ripple click effect with CSS, JS and HTML in 2 steps🖱️⚪

Leonardo Schmitt — Sat, 13 Mar 2021 23:44:38 +0000

🔍 OVERVIEW

So today you will build this cool ripple effect of the mouse cursor, using HTML5, CSS3 and JavaScript.

🎯 Let's think for a moment: what's it all about? Indeed, wherever the user clicks on the page, a sort of wave pops up and out (the effect).

So, we are using JS to check if the user has clicked and, if so, create the wave;
The position of this sort of wave has to be in the point clicked by the cursor;
Next, the CSS has the role of making the animation and style it , so we can see the effect;
Also, when the animation finishes, the wave is vanished from the viewport;

It's pretty much using a simple logic, so let's jump in, I will explain as much as I can.

1st: JAVASCRIPT

document.onclick = () => applyCursorRippleEffect(event); 

function applyCursorRippleEffect(e) {
   const ripple = document.createElement("div");

   ripple.className = "ripple";
   document.body.appendChild(ripple);

  ripple.style.left = `${e.clientX}px`;
  ripple.style.top = `${e.clientY}px`; 

   ripple.style.animation = "ripple-effect .4s  linear";
   ripple.onanimationend = () => document.body.removeChild(ripple);

}

If the user has clicked anywhere in viewport, call the callback function applyCursorRippleEffect(event), as event an object carrying the onclick info;
We declare applyCursorRippleEffect(event), wherein ripple is created as a div element, receiving ripple as its class to CSS access it better, and, finally, putting it into the screen;
Now, we have something, but no effect yet. The ripple effect has to be in the same local of the mouse cursor. To do so, e.clientX and e.clientY gives us a number that locates the cursor. They are properties of the event. With this info, we can say correctly the left and top of the ripple element. Remember to add px right after such numbers;
Next, let's apply the ripple-effect to give magic to the ripple element, as an animation we are soon building with CSS;
Lastly, onanimationend tells what ripple element will do after its animation finishes, in this case, disappears from the screen by document.body.removeChild(ripple);;

2nd: CSS


.ripple {
   width: 10px;
   height: 10px;
   background-color: transparent;
   position: fixed;
   border-radius: 50%;
   border: 1px solid $ffffff59;
}

@keyframes ripple-effect {
   to {
      transform:scale(15);
      opacity: 0.01;
   }
}

Now in the .css file the element with class ripple is styled. The width and height are initially set to 15px because the ripple starts little and ends big as we are adding this feature pretty soon. position: fixed; is necessary to fix the element in the position demanded in our script. Despite that, creativity is all opened.
Wrapping up, we create the ripple-effect keyframe to say what's about with the animation. transform: scale(15) indicates that ripple will increase as it has to be. You could also increase directly the width and height, but this is not a good practice to animations performance, so here I use transform. Finally opacity accompanied with the increased size makes the ripple effect.
Keep in mind that you can make A LOT of really cool combinations, change the ripple shape, color, etc...

✔️ Windup

I appreciate your visit, and hope you found it interesting or learned something new. Goodbye 👋

How to make a star rating with JS ⭐ ⭐ ⭐ ⭐ ⭐

Leonardo Schmitt — Sat, 27 Feb 2021 15:09:43 +0000

🎯 Today you will learn how to make a rating using HTML5, CSS3 and JavaScript.

💡 It's easy to understand if you follow me.

📌 The stars icons are from Font Awesome. Just copy and paste the CDN on your HTML head.

1. Add the HTML

   <div class="rating">
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
   </div>

This is the skeleton of our app. It has the rating father that has 5 non-completed stars. Let's make it completable.

2. Add the script

   const ratingStars = [...document.getElementsByClassName("rating__star")];

First off, we put every single star in the array ratingStars

  function executeRating(stars) {
   const starClassActive = "rating__star fas fa-star";
   const starClassInactive = "rating__star far fa-star";
   const starsLength = stars.length;
   let i;
   }

Then we declare the function executeRating that will receive the array of stars as argument. Declare as well starClassActive and starClassUnactive that keep the classes that differ the star fulfilled from the not fulfilled. Also, soon there is a loop that will use starsLength and i, declared outside the loop in itself. Being outside means that the loop are not going to check every time the length of stars.

 stars.map((star) => {
      star.onclick = () => {
         i = stars.indexOf(star);

         if (star.className===starClassInactive) {        
            for (i; i >= 0; --i) stars[i].className = starClassActive;
         } else {
            for (i; i < starsLength; ++i) stars[i].className = starClassInactive;
         }
      };
   });

Then it comes the magic.

We map the array of stars and check for clicks on each one. If occur an click on the star we call an anonymous functions to fulfill stars.
i receives the index of the star clicked.
The first if statement will check if the star clicked has the class that means it is unfulfilled.
If so, a loop is executed. We have the i of the star clicked and the loop will fulfill all the stars before it.
The else statement stands for check if the star clicked is fulfilled, cause if so all the stars above the clicked star will receive an class for inactive (unfulfilled).

If we click on the fourth star i receives 4 and these 4 stars will receive, in turn, the class of active (fulfilled). Then we decide to click on the second star, that is, decrease the rating, and the else is used unfulfilling the stars from 2 until 5, the max rating.

Finally, of course, you invoke the function to really make it works. The whole script is the following:

const ratingStars = [...document.getElementsByClassName("rating__star")];

function executeRating(stars) {
  const starClassActive = "rating__star fas fa-star";
  const starClassInactive = "rating__star far fa-star";
  const starsLength = stars.length;
  let i;
  stars.map((star) => {
    star.onclick = () => {
      i = stars.indexOf(star);

      if (star.className===starClassInactive) {
        for (i; i >= 0; --i) stars[i].className = starClassActive;
      } else {
        for (i; i < starsLength; ++i) stars[i].className = starClassInactive;
      }
    };
  });
}
executeRating(ratingStars);

3. Add some style


.rating {
   width: 180px;
}

.rating__star {
   cursor: pointer;
   color: #dabd18b2;
}

A pitch of CSS makes the stars yellow as it has to be.

Windup

🔗 You can check the result of the code above on code pen by clicking: link

Also, there is another pen that I made with the same rating but adding the label, the amount of stars fulfilled:

✔️ And that's it. I hope you liked or learn something. Farewell 👍

The simplest CSS toggle in 3 steps.

Leonardo Schmitt — Wed, 24 Feb 2021 00:41:13 +0000

Here I will show a simple way to make a toggle using only HTML5 and CSS3 files. It's beginner friendly, so there are a bunch of explanations. Chances are if you just see the code snippets you will understand. Let's go...

1. Add the HTML

<div class="toggle">
   <div class="toggle__cell"></div>
</div>

2. Add the toggle event

To do so we are using an inline script right away in the toggle__cell element.

<div class="toggle">
   <div class="toggle__cell" onclick='this.classList.toggle("toggle--active")'></div>
</div>

The this refers to the toggle__cell and whenever occur a click on it, a specific class to differ the non-toggled and toggled is added. Now let's jump into the CSS.

3. Windup with the CSS

Actually it is already working, the element now 'know' when it's toggled. Though, there's no visual signal for it, and with CSS we are making it done.

First, the style of toggle is the following

 .toggle {
            width: 50px;
            height: 23px;
            display: flex;
            align-items: center;
            background: #ffffff;
            box-shadow: inset 0 0 10px #e4e4e4;
            border-radius: 20px;
         }

We are putting the toggle__cell in the center using flex-box and adding a slight effect of shadow.

.toggle__cell {
            width: 15px;
            height: 15px;
            cursor: pointer;
            background: radial-gradient(#2d8ef5 30%, #a889fff1);
            border-radius: 50%;
            transition: transform ease-in-out 0.4s;
            transform: translateX(5px);
         }

Here we just make the cell combine with its father, a slight gradient, circle form and an initial placement with translateX to not touch the border-left of the father, but it could be made by tons of others approaches, such as padding or left positioning. Moreover there's the transition to turn the toggle sorta "pleasant", as well as adding the mouse cursor as it was a button.

Finally we make the visual difference between non-toggled and toggled:

.toggle--active {
            transform: translateX(30px);
         }