Forem: tanzirulhuda

I built an AI-powered code explainer

tanzirulhuda — Tue, 18 Apr 2023 21:32:44 +0000

Hello everyone! 👋

I'm excited to share with you my latest project, Virtuo! It's an AI-powered Chrome extension that makes accessing ChatGPT a breeze - no more switching between different tabs! And for all you programmers out there, I've added a new feature that allows you to easily get explanations of any code in a friendly and easy-to-understand tone.

I recently tweeted about Virtuo, and you can check it out here: https://twitter.com/tanzirul_huda/status/1648401244074164224?s=20

I know, you could always just copy the code and ask ChatGPT, but I wanted to make it even easier for you. With Virtuo, you don't have to switch between tabs or ask with proper prompts. You can get the answers you need right from the tab you're browsing! ⚡

JavaScript Hack 1- Use of console.table()

tanzirulhuda — Sat, 22 Oct 2022 08:11:33 +0000

JavaScript is really a cool language. It has some awesome features that we should know. In this article, we are gonna see something really cool which is maybe you didn't see before.

console.table()

This awesome method will help you to CSV or dictionary format data in a table.
It takes one mandatory data which is must be an array.It will return you a table of this array. Every element of the array will be a row of table.

Let's have a look of it-

// Store data in an array
var data = ['Mercedes', 'Tesla', 'Rolls Royce', 'BMW'];

//Output
console.table(data);

Let's move forward. Now we're gonna display an object in this method.

// An array of object

function Car(brand, ceo){
    this.brand = brand;
    this.ceo = ceo;
}

const mercedes = new Car('Mercedes', 'Ola Källenius');
const tesla= new Car('Tesla', 'Elon Musk');
const rollsRoyce = new Car('Rolls Royce', 'Warren East');
const bmw= new Car('BMW', 'Harald Krüger');

//Output
console.table([mercedes, tesla, rollsRoyce, bmw])

Isn't it cool? I hope you enjoy this. Feel free to leave a comment and also share & ❤️ it.

You can follow me:)
Twitter

Happy coding🧑‍💻!

How to Use Filters with Arrays

tanzirulhuda — Wed, 19 Oct 2022 09:06:21 +0000

Filtering an array is useful when you’re working with multiple columns of corresponding data. In this case, you can include and exclude data based on any characteristic that describes a group in your array.
To filter an array, use the filter() function.
Example snippet:

const cars = [
  { make: 'Opel', class: 'Regular' },
  { make: 'Bugatti', class: 'Supercar' },
  { make: 'Ferrari', class: 'Supercar' },
  { make: 'Ford', class: 'Regular' },
  { make: 'Honda', class: 'Regular' },
]
const supercar = cars.filter(car => car.class === 'Supercar');
console.table(supercar); // returns the supercar class data in a table format

You can also use filter() together with Boolean to remove all null or undefined values from your array.

Example snippet:

const cars = [
  { make: 'Opel', class: 'Regular' },
  null,
  undefined
]

cars.filter(Boolean); // returns [{ make: 'Opel', class: 'Regular' }]

Okay! Thanks for reading. Happy coding!
You can follow me:
Twitter

Learn JS by building a stop watch

tanzirulhuda — Tue, 18 Oct 2022 08:13:41 +0000

In todays tutorial, we'll create a stop watch as the first project. The special thing about this stopwatch is that you can count hours, minutes, seconds and milliseconds here. However, we'll do this work in 2 steps. First of all we'll design a simple interface using HTML and CSS. Then we'll make it functional.

HTML & CSS

At first, let's create a basic container for our stop watch.

Then, let's add some basic style in it.

Okay, let's move to the next. Now, we'll create a display so that all the time can be seen.

Add a new div with the class name of display like below,

Then, let's add some style for it so that it can get a pretty look.

Have you done it? Great! Now we'll create 3 buttons in our HTML code and then we'll make it functional using JavaScript.

For now, let's create the buttons. And add some style in it.

Add some CSS in our stylesheet like below.

Have you done? Now, it's time to implement some functionality using JavaScript.

JavaScript

First we'll collect some information using let. Such asset is a constant of display id and holds 0 for hours, minutes, seconds, and milliseconds.

Then, we'll create three function for start, pause, and reset the timer.

Now, we'll create a function that is already I used in the function to start the timer, dispayTimer. Now we have to create this function so that when you click on start button to start the stop watch then it can be able to start the countdown.
Don't worry, I'll give you a explanation that what am I doing here.

*Explanations: *
You can see that I used three "if" functions here. In the first 'if' function, I added a condition that if milliseconds is equal to 1000 then milliseconds value is 0 and seconds is incremented by 1.

➤ We know that 1 second equals 1000 milliseconds. So when the milliseconds value reaches 1000 after the countdown, the milliseconds value is zero and the seconds value is incremented by 1.

➤ Similarly, we used the second "if" function for time in seconds. We know that 1 minute equals 60 seconds. So if the seconds value equals 60, the seconds time is 0 and the minutes cell is incremented by 1.

➤ We know that 1 hour equals 60 minutes. So when the hour in minutes reaches 60, the minute cell is 0 and the hour cell is incremented.

This is how the countdown timer continues.

Now, we'll add a zero before each single digit point. Displays a number if the time is less than 10. we'll add a zero to each of these single digit numbers using the following four line code: If the hour, minute, second, and millisecond values are less than 10, zeros are added before those hours.

We have to arrange all this information in the display using innerHTML. As above, the hours, minutes, seconds, and milliseconds are stored between h, m, s, and ms, respectively.

Have you done it! Congratulations, you just made a stop watch using basic JavaScript.

By the way, if you face any problem you can see the complete JavaScript code below-

let [milliseconds,seconds,minutes,hours] = [0,0,0,0];
let timerRef = document.querySelector('.display');
let int = null;

document.getElementById('startTimer').addEventListener('click', ()=>{
    if(int!==null){
        clearInterval(int);
    }
    int = setInterval(displayTimer,10);
});

document.getElementById('pauseTimer').addEventListener('click', ()=>{
    clearInterval(int);
});

document.getElementById('resetTimer').addEventListener('click', ()=>{
    clearInterval(int);
    [milliseconds,seconds,minutes,hours] = [0,0,0,0];
    timerRef.innerHTML = '00 : 00 : 00 : 000 ';
});

function displayTimer(){
    milliseconds+=10;
    if(milliseconds == 1000){
        milliseconds = 0;
        seconds++;
        if(seconds == 60){
            seconds = 0;
            minutes++;
            if(minutes == 60){
                minutes = 0;
                hours++;
            }
        }
    }

 let h = hours < 10 ? "0" + hours : hours;
 let m = minutes < 10 ? "0" + minutes : minutes;
 let s = seconds < 10 ? "0" + seconds : seconds;
 let ms = milliseconds < 10 ? "00" + milliseconds : milliseconds < 100 ? "0" + milliseconds : milliseconds;

 timerRef.innerHTML = ` ${h} : ${m} : ${s} : ${ms}`;
}

I hope this tutorial has taught you how to create a simple JavaScript stopwatch make sense about JavaScript too.

Connect with me

Twitter
Happy coding!