DEV Community: Satish Naikawadi

🔥 BUILD USER AVATAR GENERATOR IN JAVASCRIPT

Satish Naikawadi — Mon, 17 May 2021 10:57:15 +0000

In this post we will write a function in javascript to generate beautiful ❤️ user avatar.

First we will add img tag to our HTML in which we will render our avatar from javascript.

<img alt="Avatar" id="avatar">

Then after that we will write a function generateAvatar() in javascript which will return src for our img tag.This function will take 3 arguments.

text - The actual text to show in the avatar image.
backgroundColor - The background color of the avatar image.
textColor - The color of the text present in the avatar image

Now we will write the actual function to generate the avatar.

Now here firstly we will created new HTML canvas element which is used to draw graphics on a web page.Then we will call getContext() method on that instance and pass '2d' as argument to it,leading to the creation of a CanvasRenderingContext2D object representing a two-dimensional rendering context.

     const canvas = document.createElement("canvas");
     const context = canvas.getContext("2d");

After that with the help of instance of that canvas we will set the width and height of the canvas.

            canvas.width = 200;
            canvas.height = 200;

Then we will draw the background of the canvas. First by setting property fillStyle on context to backgroundColor we have set the background color of our canvas while by calling function fillRect() on context we will draw the actual rectangular shape on our HTML canvas.

            // Draw background
            context.fillStyle = backgroundColor;
            context.fillRect(0, 0, canvas.width, canvas.height);

here

 context.fillRect(x, y, width, height);

x - The x-axis coordinate of the rectangle's starting point.
y - The y-axis coordinate of the rectangle's starting point.
width - The rectangle's width. Positive values are to the right, and negative to the left.
height - The rectangle's height. Positive values are down, and negative are up.

Now after that we will draw text on the canvas

   // Draw text
    context.font = "bold 100px Assistant";
    context.fillStyle = textColor;
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText(text, canvas.width / 2, canvas.height / 2);

Now this will create the canvas with background and text in it.But we have to render this into img tag. So we will call toDataURL()method on canvas which will return a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG).

And the completed function will look like below

<script>
        function generateAvatar(
            text,
            foregroundColor = "white",
            backgroundColor = "black",
            size=250
        ) {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");

            canvas.width = 200;
            canvas.height = 200;

            // Draw background
            context.fillStyle = backgroundColor;
            context.fillRect(0, 0, canvas.width, canvas.height);

            // Draw text
            context.font = "bold 100px Assistant";
            context.fillStyle = foregroundColor;
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText(text, canvas.width / 2, canvas.height / 2);

            return canvas.toDataURL("image/png");
        }

    </script>

Now we will use this to render avatar in our img tag as below

document.getElementById("avatar").src = generateAvatar(
            "SN",
            "white",
            "#ff3399"
        );

This will create the following result in browser -

Now to make it circular we will add CSS border-radius property of the img to 50% as below

    <style>
        #avatar {
            border-radius: 50%;
        }
    </style>

Which will generate following result in browser. -

Hope this will help you 😇. Thanks for reading. You can visit my Personal Blog for more tutorials like this.

❤️Create CSS Gradient Buttons With Beautiful Hover Effect

Satish Naikawadi — Mon, 10 May 2021 06:04:32 +0000

In this article , we will look at how we can easily create a beautiful ❤️ gradient buttons with cool hover effect with HTML and CSS. For this tutorial ,
you must have basic knowledge of HTML and CSS properties.

✨ Writing HTML

Our HTML code will be only few lines for the markup.The code is

<div class="container">
        <button class="btn-gradient btn-gradient--color__1">BUTTON</button>
        <button class="btn-gradient btn-gradient--color__2">BUTTON</button>
        <button class="btn-gradient btn-gradient--color__3">BUTTON</button>
        <button class="btn-gradient btn-gradient--color__4">BUTTON</button>
        <button class="btn-gradient btn-gradient--color__5">BUTTON</button>
        <button class="btn-gradient btn-gradient--color__6">BUTTON</button>
        <button class="btn-gradient btn-gradient--color__7">BUTTON</button>
        <button class="btn-gradient btn-gradient--color__8">BUTTON</button>
        <button class="btn-gradient btn-gradient--color__9">BUTTON</button>
        <button class="btn-gradient btn-gradient--color__10">BUTTON</button>
        <button class="btn-gradient btn-gradient--color__11">BUTTON</button>
    </div>

Here div with class of container will be just simple container to laying all buttons in it. And then all the button elements have class of btn-gradient which will have all the styles common to all the buttons. While the class of say btn-gradient--color-1 all these classes are modifier classes which will provide particular specific styling to buttons like their background which is different for each button here.

🤩 Lets Style Our Buttons With CSS

Here , first we will apply some basic styling to all buttons with btn-gradient class and also to the container class.

.container {
    margin: 10%;
    text-align: center;
}

.btn-gradient {
    width: 200px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 55px;
    text-align: center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    transition: all .4s ease-in-out;
        outline: none;
}

Now lets add modifier classes to give specific background and box shadow to each button.
You can style them with whatever gradients you want. I will style them as below.


.btn-gradient--color__1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-gradient--color__2 {
    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-gradient--color__3 {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6b8dd6, #8e37d7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-gradient--color__4 {
    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-gradient--color__5 {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-gradient--color__6 {
    background-image: linear-gradient(to right, #009245, #fcee21, #00a8c5, #d9e021);
    box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.btn-gradient--color__7 {
    background-image: linear-gradient(to right, #6253e1, #852d91, #a3a1ff, #f24645);
    box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-gradient--color__8 {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-gradient--color__9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-gradient--color__10 {
    background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a, #fbb03b);
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-gradient--color__11 {
    background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
    box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4);
}

Now all buttons will get beautiful gradient backgrounds. But we also want to create little wave like effect on hovering these buttons. So for that we will use background-position property in CSS. To know more about background-position , Click Here .
So for creating little wave like effect from right to left , we will make background-position property of buttons to 100% in horizontal direction which is 0% by default. Lets see how can we write this is CSS

.btn-gradient:hover {
    background-position: 100% 0;
    transition: all .4s ease-in-out;
}

As simple as that. And we have created 10-11 beautiful CSS Gradient Buttons With Cool Hover Effects with such a little code. Hope this will help you 😇. Thanks for reading. You can visit my Personal Blog for more tutorials like this.

🔥 BUILD BEAUTIFUL PRICING PLAN TABLES WITH HTML AND CSS 💖

Satish Naikawadi — Mon, 03 May 2021 14:43:51 +0000

In this post , we will look at how we can easily create a beautiful ❤️ pricing plan tables with HTML and CSS. For this tutorial , you must have basic knowledge of HTML and CSS properties.

✨ Writing HTML

Our HTML code will be only few lines for the markup.The code is

<section class="pricing-plan">
            <div class="pricing-plan__header">
                <h1 class="pricing-plan__title">
                    starter plan
                </h1>
                <h2 class="pricing-plan__summary">
                    Serious learning, best for students and self learners
                </h2>
            </div>
            <div class="pricing-plan__description">
                <ul class="pricing-plan__list">
                    <li class="pricing-plan__feature">
                        Everything included in free
                    </li>
                    <li class="pricing-plan__feature">
                        Access to all interactive courses
                    </li>
                    <li class="pricing-plan__feature">
                        Access to all hands-on practice projects
                    </li>
                    <li class="pricing-plan__feature">
                        Unlimited practice lab time
                    </li>
                    <li class="pricing-plan__feature">
                        Full access to learning paths
                    </li>
                </ul>
            </div>
            <div class="pricing-plan__actions">
                <p class="pricing-plan__cost">$75</p>
                <p class="pricing-plan__text">
                    per month
                </p>
                <a href="#" class="pricing-plan__button">
                    Buy
                </a>
                <p class="pricing-plan__text">Minimum spend $750 over 12 months</p>
            </div>
        </section>

Here we have 3 main parts in this HTML markup
1.div with class of pricing-plan__header which contains main title and short summary of the pricing plan.
2.div with class of pricing-plan__description which contains the list of all the features of pricing plan.
3.div with class of pricing-plan__actions which contains cost and button to buy the pricing plan.

🤩 Lets Style Our Pricing Plan Table With CSS

Below is the CSS styling for the above HTML markup.

.pricing-plan {
    width: 300px;
    border-radius: 25px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #555555;
    margin: 15px;
}

.pricing-plan__header {
    padding: 25px;
    background: #666699;
    color: white;
}

.pricing-plan__title,
.pricing-plan__summary {
    margin: 0;
    text-align: center;
    text-transform: capitalize;
}

.pricing-plan__title {
    font-size: 1.5rem;
    font-weight: 400;
}

.pricing-plan__summary {
    font-size: 1rem;
    font-weight: 300;
}

.pricing-plan__description {
    padding: 25px;
}

.pricing-plan__list {
    padding: 0;
    margin: 0;
}

.pricing-plan__feature {
    list-style: none;
    margin: 0;
    padding-left: 25px;
    position: relative;
    font-size: 0.95rem;
}

.pricing-plan__feature:not(:last-child) {
    margin-bottom: 0.5rem;
}

.pricing-plan__feature::before {
    content: '\2714';
    position: absolute;
    left: 0;
    color: #666699;
}

.pricing-plan__actions {
    padding: 25px;
    border-top: 1px solid #eeeeee;
    display: flex;
    flex-direction: column;
}

.pricing-plan__button {
    display: inline-block;
    margin: 15px auto;
    padding: 8px 20px;
    text-decoration: none;
    color: #666699;
    background: white;
    border-radius: 5px;
    border: 1px solid #666699;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
    font-weight: bold;
    transition: all 300ms linear;
}

.pricing-plan__button:hover {
    background: #666699;
    color: white;
}

.pricing-plan__cost {
    margin: 0;
    text-align: center;
    font-size: 2rem;
    color: #000000;
}

.pricing-plan__text {
    font-size: 0.9rem;
    text-align: center;
    margin: 0 0 10px 0;
}

Now this will give us the following result.

We can also modify this pricing plan table by using some modifier classes. We will just add following simple classes to our CSS file and then add them to our div in HTML.

.pricing-plan__header--blue {
    background-color: #7f53ac;
    background: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
}

.pricing-plan__header--orange {
    background-color: #a40606;
    background: linear-gradient(315deg, #a40606 0%, #d98324 74%);
}

.pricing-plan--recommended {
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.2);
}
.pricing-plan__special-text {
    padding: 10px;
    text-align: center;
    font-weight: bolder;
    background: #ffc857;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2) inset;
}

.pricing-plan__header--special {
    background-color: #ffc857;
    background: linear-gradient(316deg, #ffc857 0%, #3e2f5b 74%);
}

And modify the HTML as below.

<section class="pricing-plan">
    <div class="pricing-plan__header pricing-plan__header--orange">
        ...........
    </div>
    <div class="pricing-plan__description">
        ...........
    </div>
    <div class="pricing-plan__actions">
        ...........
    </div>
</section>
<section class="pricing-plan pricing-plan--recommended">
    <div class="pricing-plan__special-text">
        Recommended
    </div>
    <div class="pricing-plan__header pricing-plan__header--special">
        ...........
    </div>
    <div class="pricing-plan__description">
        ...........
    </div>
    <div class="pricing-plan__actions">
        ...........
    </div>
</section>
<section class="pricing-plan">
    <div class="pricing-plan__header pricing-plan__header--blue">
        ...........
    </div>
    <div class="pricing-plan__description">
        ...........
    </div>
    <div class="pricing-plan__actions">
        ...........
    </div>
</section>

Then we will get the result like below.

That is it for this article. And we have created three cool CSS and HTML Pricing Plan Tables. Hope this will help you 😇. You can visit my Personal Blog for more articles related to programming. Thank you for reading.

📅 Master Javascript Dates In 2 Minutes

Satish Naikawadi — Tue, 27 Apr 2021 12:32:49 +0000

In this article , we will learn all the important topics related to dates in javascript with help of proper examples.
Date objects contain a Number that represents milliseconds since 1 January 1970 UTC.

Creating A Date Object

We can create a Date object using Date() constructor with the following syntaxes -

new Date() //current date and time as of the time of instantiation.
new Date(value) // value is an integer value representing the number of milliseconds since January 1, 1970, 00:00:00
new Date(dateString) // A string value representing a date
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]) //Give at least a year and month

Examples

let today = new Date();
console.log(today);
let myDay = new Date('January 16, 2001 05:39:00');
console.log(myDay);
myDay = new Date('2001-01-16T05:39:00');
console.log(myDay);
myDay = new Date(2001, 0, 16); // the month is 0-indexed
console.log(myDay);
myDay = new Date(1995, 0, 16, 5, 39, 0);
console.log(myDay);

Output

2021-04-12T19:46:14.180Z
2001-01-16T00:09:00.000Z
2001-01-16T00:09:00.000Z
2001-01-15T18:30:00.000Z
1995-01-16T00:09:00.000Z

Important Instance Methods

getDate()

Returns the day of the month (1–31) for the specified date according to local time.

console.log(myDay.getDate());

Output

16

getDay()

Returns the day of the week (0–6) for the specified date according to local time.

console.log(myDay.getDay());

Output

1

getFullYear()

Returns the year (4 digits for 4-digit years) of the specified date according to local time.

console.log(myDay.getFullYear());

Output

1995

getHours()

Returns the hour (0–23) in the specified date according to local time.

console.log(myDay.getHours());

Output

5

getMinutes()

Returns the minutes (0–59) in the specified date according to local time.

console.log(myDay.getMinutes());

Output

39

getSeconds()

Returns the seconds (0–59) in the specified date according to local time.

console.log(myDay.getSeconds());

Output

0

getMonth()

Returns the month (0–11) in the specified date according to local time.

console.log(myDay.getMonth());

Output

0

We also have similar methods with UTC as getUTCDate(),getUTCDay(),getUTCFullYear(),getUTCHours(),getUTCMilliseconds(),getUTCMinutes(),getUTCMonth() and getUTCSeconds() which will give similar results but according to universal time.

We also have similar setter methods with local time as well as with UTC which are setUTCDate(),setUTCDay(),setUTCFullYear(),setUTCHours(),setUTCMilliseconds(),setUTCMinutes(),setUTCMonth() and setUTCSeconds() which will set the particular parameters according to universal time. While setDate(),setDay(),setFullYear(),setHours(),setMilliseconds(),setMinutes(),setMonth() and setSeconds() will set the parameters according to lacale time.

Important Methods To Convert Date To String

toDateString()

Returns the "date" portion of the Date as a human-readable string like Tue Apr 13 2021.

toISOString()

Converts a date to a string following the ISO 8601 Extended Format like1995-01-16T00:09:00.000Z .

toUTCString()

Converts a date to a string using the UTC timezone like Mon, 16 Jan 1995 00:09:00 GMT.

toLocaleString()

Returns a string with a locality-sensitive representation of this date like 1/16/1995, 5:39:00 AM.

Calculating Elapsed Time

let start = new Date()
// The event to time goes here:
doSomethingForALongTime()
let end = new Date()
let elapsed = end.getTime() - start.getTime() // elapsed time in milliseconds

Get the number of seconds since the ECMAScript Epoch

let seconds = Math.floor(Date.now() / 1000)

So , that is it for this article 😀. I hope you understand how to manipulate dates in javascript. You can visit my Personal Blog for more articles related to programming. And lastly as always , Thank You for reading.

✨ 3D Card Hover Effect With Modern CSS Properties 😍

Satish Naikawadi — Wed, 21 Apr 2021 12:17:56 +0000

In this post , we are going to create very 💖 beautiful and unique 3D card hover effect with HTML and CSS. We will use some modern properties in CSS to achieve this effect. Below is the demo of what we will create in this post -

We will proceed as below:

Creating a HTML Markup.
Adding Basic Styling For All Elements.
Creating Actual Hover Effect.

So lets first add all the HTML code to build required structure.

🚧 Creating HTML Markup



<body>
        <h1 class="heading">3D Card Hover Effect</h1>
        <div class="container">
            <div class="item">
                <div class="card"><img class="card__img"
                        src="https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NXx8bmF0dXJlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        alt="Green Forests">
                    <div class="card__content">
                        <h1 class="card__header">Green Forests</h1>
                        <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id sem sit
                            amet massa aliquet aliquet. Phasellus at ipsum
                            congue urna commodo gravidas</p><button class="card__btn">Explore
                            <span>&rarr;</span></button>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="card"><img class="card__img"
                        src="https://images.unsplash.com/photo-1505245208761-ba872912fac0?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzd8fG5hdHVyZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        alt="Beutiful Oceans">
                    <div class="card__content">
                        <h1 class="card__header">Beautiful Oceans</h1>
                        <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id sem sit
                            amet massa aliquet aliquet. Phasellus at ipsum
                            congue urna commodo gravida</p><button class="card__btn">Explore
                            <span>&rarr;</span></button>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="card"><img class="card__img"
                        src="https://images.unsplash.com/photo-1431512284068-4c4002298068?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OTB8fG5hdHVyZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60s"
                        alt="Snowy Mountains">
                    <div class="card__content">
                        <h1 class="card__header">Snowy Mountains</h1>
                        <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id sem sit
                            amet massa aliquet aliquet. Phasellus at ipsum
                            congue urna commodo gravida</p><button class="card__btn">Explore
                            <span>&rarr;</span></button>
                    </div>
                </div>
            </div>
        </div>
    </body>

Here we have div with class 'container' which will be the parent of all the three cards. Then we are having each 'card' inside div with class
'item'. Each 'card' div has its image,its header and some text related to it. It also has one button inside it.
So that's the basic HTML markup of the webpage we are going to build.
Now lets see add some styling for all the elements like 'card',img,text inside card, button and also some styling for layouting of card.

🦋Basic Styling For All Elements

Below is the CSS code for styling of these elemets -



*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
    font-size: 62.5%;
}
body {
    padding: 6rem;
    background-color: #15202b;
    color: white;
    font-family: "Inter", sans-serif;
}

.heading {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 3rem;
    text-shadow: 3px 4px 5px pink;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.item {
    background-color: #192734;
    border-radius: 0.4rem;
    overflow: hidden;
    cursor: pointer;
    width: 30%;
    transition: .5s all ease;
    box-shadow: 0px 20px 50px #555;
}
.card__img {
    display: block;
    width: 100%;
    height: 18rem;
    object-fit: cover;
}
.card__content {
    padding: 3rem 3rem;
}
.card__header {
    font-size: 3rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 1.5rem;
}
.card__text {
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
    line-height: 1.7;
    color: #8899a6;
    margin-bottom: 2.5rem;
}
.card__btn {
    display: block;
    width: 100%;
    padding: 1.5rem;
    font-size: 2rem;
    text-align: center;
    color: #3363ff;
    background-color: #e6ecff;
    border: none;
    border-radius: 0.4rem;
    transition: 0.2s;
    cursor: pointer;
}
.card__btn span {
    margin-left: 1rem;
    transition: 0.2s;
}
.card__btn:hover,
.card__btn:active {
    background-color: #dce4ff;
}
.card__btn:hover span,
.card__btn:active span {
    margin-left: 1.5rem;
}

@media (max-width: 992px) {
    .item {
        width: 45%;
    }
}

@media (max-width: 768px) {
    .item {
        width: 80%;
    }
}

So this is the all basic styling needed to style our webpage. After this we will now see how we can create the actual 3D Card Hover Effect
with some interesting CSS properties.

😉 Creating Actual 3D Hover Effect

Firstly , for giving starting position to our cards , we will add transform property to it which will have value as rotateX(45deg) scale(0.7). Now here

rotateX() - The rotateX() method rotates an element around its X-axis at a given degree in 3 dimensions.
scale() - The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). these methods will make our item to be rotated along X-axis with 45 degrees with its size decreased to 0.7 of its original size. ```css

transform: rotateX(45deg) scale(0.7);

Now by adding this line we won't get our initial positions of our card , instead we will get it as below - 
![unwanted.jpg](https://res.cloudinary.com/dh1srz69c/image/upload/v1616006321/unwanted_ad9baa21cc.jpg)
 from which it looks like item is scaled down to 0.7 of its original size but it doesn't look like it has rotated through 45 degrees around X-axis. But it did. It doesn't look like rotated because while doing 3D transformation we have tell browser that how far is that item from the user's eyes. And to do that we can use `perspective` property in CSS.

### 🧐Perspective In CSS
1.The `perspective` property is used to give a 3D-positioned element some perspective.
2.The `perspective` property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.
3.When defining the `perspective` property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.
To learn more about `perspective` in CSS and other properties related to it like `perspective-origin` [Click Here](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)

So now to get desired positioning of our items , we will add `perspective` property to container which is a parent of item components and set its value to `900px`(While using perspective you should try and test values to get desired look). 
```css


.container {
    perspective: 900px;
}

So now we will get correct initial look for our cards which is as below -

So that's hard part done. Now we only have to add hover state to our item which will be its normal position for which we will set transform property as rotate(0deg) scale(1).



.item:hover {
    cursor: pointer;
    transform: rotate(0deg) scale(1);
    transition: .5s all ease;
    z-index: 400;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

And with that we have completed our beautiful and awesome 3D Hover Effect. I know perspective property is little difficult to understand. But with practicing more examples and reading docs you will get comfortable with it.
For more articles related to programming do visit my
Personal Blog.
I Hope this will help you guys. Thanks 😇 for reading as always.

😎Build Custom Toast Notification Component In React With Different Variants

Satish Naikawadi — Thu, 15 Apr 2021 05:15:31 +0000

In this post , we will create a Custom Toast/Snackbar Notification Component in React JS which will have different styling ❤️ depending upon variant. This is the third part of my Custom UI Components With React series 🥳. You can see the demo of what we are going to build in this tutorial here.

Here , in this tutorial , we are going take a different approach than other tutorials. In other tutorial we have created a React Functional components. But here we have to trigger the method to show toast notification which is part of this component from outside it . So instead of creating a component directly , we will create useToast() custom hook which will return two things

openToast - a method to trigger opening of toast notification.
ToastComponent - the actual Toast Notification component.

Now going forward we will proceed as below:

Creating a fresh react app.
Making and designing our useToast custom hook.
A button to trigger an event to show Toast Notification.

Creating a Fresh React App

Firstly , we will create a fresh react project with the help of create-react-app cli tool by using following command.

npx create-react-app modal

Let’s start the created app using npm start and open up your browser and go to http://localhost:3000. You’ll see react’s default app.
Now let's move on to the next step which is to designing and making of actual Modal component.

Making and designing our useToast custom hook

Now , inside src folder of our app , we will create components folder. Inside this component folder , we will create a toast.js file for having our useToast hook and toast.module.css file having css styling for our Toast Notification component.

Getting back to designing part, below is the code snippet for it.

/* toast.module.css */

.snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  color: #111;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

.content {
  display: flex;
  font-size: 1.2rem;
  font-weight: bold;
}

.icon {
  height: 25px;
  width: 25px;
  margin-right: 10px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
.snackbar.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

.snackbar is the class which will have the styling for Toast component whic will be hidden initially.
.content and .icon are the classes which will have the styling for message text of Toast Notification and icon present in it respectively.
.snackbar.show class makes the Toast Notification visible with fade in effect which after 3s disappears with fade out effect.

Now let’s create useToast hook.
Below is the code snippet for it.


//toast.js

import React, { useRef } from "react";
import ErrorIcon from "./icons/error";
import InfoIcon from "./icons/info";
import SuccessIcon from "./icons/success";
import WarningIcon from "./icons/warning";
import styles from "./toast.module.css";

const useToast = (message, variant = "success", style = {}) => {
  const toastRef = useRef(null);
  const openToast = () => {
    toastRef.current.classList.add(styles.show);
    setTimeout(function () {
      toastRef.current.classList.remove(styles.show);
    }, 3000);
  };
  let toastStyle, icon;
  switch (variant) {
    case "success":
      toastStyle = {
        backgroundColor: "#adebad",
        borderTop: "5px solid #2db92d"
      };
      icon = <SuccessIcon className={styles.icon} fill="#2db92d" />;
      break;
    case "error":
      toastStyle = {
        backgroundColor: "#ffcccc",
        borderTop: "5px solid #ff0000"
      };
      icon = <ErrorIcon className={styles.icon} fill="#ff0000" />;
      break;
    case "info":
      toastStyle = {
        backgroundColor: "#ccf2ff",
        borderTop: "5px solid #33ccff"
      };
      icon = <InfoIcon className={styles.icon} fill="#33ccff" />;
      break;
    case "warning":
      toastStyle = {
        backgroundColor: "#fff0b3",
        borderTop: "5px solid #ffcc00"
      };
      icon = <WarningIcon className={styles.icon} fill="#ffcc00" />;
      break;
    default:
      break;
  }
  const ToastComponent = () => (
    <React.Fragment>
      <div
        ref={toastRef}
        className={styles.snackbar}
        style={{ ...toastStyle, ...style }}
      >
        <div className={styles.content}>
          {icon}
          {message}
        </div>
      </div>
    </React.Fragment>
  );
  return { openToast, ToastComponent };
};

export default useToast;

This custom hook will take three parameters:
1.message - Which is a required parameter , which indicates message to show inside this toast notification.

variant - Which will have value one of 'success | warning | error | info.Depending upon this the styling of notification will be different.This is optional parameter with default value of success.
style - It will have any custom styles that user want to apply to Notification.This is optional parameter with default value of empty object.

Here , inside this hook we have used four more component InfoIcon,SuccessIcon,WarningIcon and Errorcon , all of which are just simply svg icons.

This component has two main functional parts

Correct Styling - Firstly , we will use javascript swicth statement to check what is the variant of the toast notification and according to that we will decide the which styling to apply and which icon to render inside this toast notification.
openToast() - After that we will implement the method inside this hook to open a toast notification. Inside this method , we will add the .show class to toast with the help of useRef() to make it visible and after 3 seconds we will remove that class from toast with help of setTimeout() so that notification will disappear after 3 seconds.

Now , we will create a ToastComponent inside this hook as shown in above code snippet. After that lastly , we will return the ToastComponent and openToast from this hook.
Now , we will see how we can trigger this toast notification with the help of button.

A button to trigger an event to show Modal

To make it simple, I added the Button in App.js file as below,


//App.js

import React from "react";
import useToast from "./components/toast";
import "./styles.css";

export default function App() {
  const { openToast, ToastComponent } = useToast(
    "This is my notification.",
    "success"
  );
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh"
      }}
    >
      <button onClick={() => openToast()}>Show Snackbar </button>
      <ToastComponent />
    </div>
  );
}

That’s it you did it. It’s as simple as that. Now you can use this component anywhere in your project.We have made a simple , customizable ,beautiful and most important reusable Toast Notification Component.
This is link to CodeSandbox of Toast component.
Let me know if this tutorial was helpful for you guys and for which case you used it.If you have any queries you can contact me through my email or other social media platforms.

And that is it for this article. You can visit satishnaikawadi.me for more articles related to programming.Thanks for reading 😇 .

FREE And Useful Resources for Web Development in 2021⚡

Satish Naikawadi — Fri, 09 Apr 2021 11:59:04 +0000

Fontjoy

Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.

FreeHTML5

FreeHTML5 is dedicated to provide extraordinary and premium-like free html5 bootstrap templates for web designers and developers.

Google Fonts

Google Fonts makes it easy to bring personality and performance to your websites and products. Our robust catalog of open-source fonts and icons, makes it easy to integrate expressive type and icons seamlessly—no matter where you are in the world.

Coolors

Coolors is the essential tool for creating and collecting color palettes. It allows you to generate perfect matching colors in seconds. Even if you are not so skilled in design!
All you have to do is pressing the spacebar to generate a random color palette, click on the color you like to lock it and repeat both actions until you get the results you need.

uiGradients

A handpicked collection of beautiful color gradients for designers and developers.

ShadeSwash

Never waste time trying to find the right shade of a color again. With ShadeSwash, every shade you'll ever need is just a click away.

FlatIcon

The largest database of free customizable icons in the world. Flaticon has millions of icons in all formats for all kinds of projects: presentations, apps, websites, catalogs, infographics, etc.

Favicon.io

If you already have an image or logo that you want to use for your favicon then use this tool to convert your image to the proper favicon format. If you don't have a logo or image for your website and want to generate a favicon from scratch then use this tool to generate your favicon.

Pixabay

Pixabay is a vibrant community of creatives, sharing copyright free images, videos and music.

Device Shots

Easily design device mockups for presentations or to share on social platforms. Choose between phones, tablets, computers, watches and displays.

And that is it for this article. You can visit satishnaikawadi.me for more articles related to programming.Thanks for reading 😇 .

😬15 Very Important Javascript String Methods Every Developer Should Know

Satish Naikawadi — Wed, 07 Apr 2021 04:45:54 +0000

Manipulation of javascript strings are very important in most of the web development projects. So , in this post we will take a look 😍 at some important and frequently used string methods in javascript. Below are the strings which we will used to learn this methods with.

var stringOne = "Let's learn important javascript string methods."
var stringTwo = "Also we will see their examples."

charAt()

The String object's charAt() method returns a new string consisting of the single UTF-16 code unit located at the specified offset into the string.If the index cannot be converted to the integer or no index is provided, the default is 0, so the first character of string is returned.

const index = 4;
console.log(`Character at index ${index} in stringOne is ${stringOne.charAt(index)}`);

Output

Character at index 4 in stringOne is s

concat()

The concat() method concatenates the string arguments to the calling string and returns a new string. If the arguments are not of the type string, they are converted to string values before concatenating.

console.log(stringOne.concat(stringTwo));
console.log(stringOne.concat('And ', stringTwo));

Output

Let's learn important javascript string methods.Also we will see their examples.
Let's learn important javascript string methods.And Also we will see their examples.

endsWith()

The endsWith() method determines whether a string ends with the characters of a specified string, returning true or false as appropriate. This method is case-sensitive. If second argument provided, it is used as the length of string. Defaults to string.length.

console.log(stringOne.endsWith('methods.'));
console.log(stringOne.endsWith('javascript'));
console.log(stringOne.endsWith('javascript', 32));

Output

true
false
true

includes()

The includes() method performs a case-sensitive search to determine whether one string may be found within another string, returning true or false as appropriate. The second argument is position within the string at which to begin searching for searchString. (Defaults to 0.)

console.log(stringOne.includes("Let's"));
console.log(stringOne.includes("Let's", 1)); //Start searching from first index
console.log(stringOne.includes("let's")); //Case sensitive

Output

true
false
false

indexOf()

The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found. fromIndex is the second argument which is an integer representing the index at which to start the search. Defaults to 0.

console.log(stringOne.indexOf('a'));
console.log(stringOne.indexOf('a', 15)); //Start searching from index 15

Output

8
18

lastIndexOf()

The lastIndexOf() method is same as indexOf() method only difference is instead of first occurence it search for last occurence of a given string. It returns the index of the last occurrence of searchValue; -1 if not found.

console.log(stringOne.lastIndexOf('a'));

Output

25

replace()

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced.
The original string is left unchanged.

console.log(stringOne.replace('methods', 'functions'));
console.log(stringOne.replace('important', 'must know'));
const regex = /Javascript/i;
console.log(stringOne.replace(regex, 'JS'));

Output

Let's learn important javascript string functions.
Let's learn must know javascript string methods.
Let's learn important JS string methods.

replaceAll() is also a similar method only difference is instead of replacing first match it will replace every match in the string.

startsWith()

The startsWith() method determines whether a string begins with the characters of a specified string, returning true or false as appropriate.The second argument is position in this string at which to begin searching for searchString. Defaults to 0.

console.log(stringOne.startsWith("Let's"));
console.log(stringOne.startsWith("Let's", 5)); // Start searching from position at index 5

Output

true\
false

slice()

The slice() method extracts a section of a string and returns it as a new string, without modifying the original string. Its first argument is beginIndex - the zero-based index at which to begin extraction. And second srgument is endIndex - the zero-based index before which to end extraction. The character at endIndex will not be included.\
If any or both of the two endIndex and beginIndex are negative, then they are treated as str.length + endIndex and str.length + beginIndex . (For example, if endIndex is -3, it is treated as str.length - 3.)

console.log(`Length of stringOne is ${stringOne.length}`);
console.log(stringOne.slice(6, 22)); // Start at index 6 and extract upto index 22 not including 22
console.log(stringOne.slice(6, -9)); // Start at index 6 and extract upto index 48 - 9 = 39 not including 39
console.log(stringOne.slice(6)); // Start at index 6 and extract whole string
console.log(stringOne.slice(50)); // As startIndex is greater than length return empty string

Output

Length of stringOne is 48
learn important
learn important javascript string
learn important javascript string methods.

split()

The split() method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array.

console.log(stringOne.split(' '));
console.log(stringOne.split('learn'));

Output

[ "Let's", 'learn', 'important', 'javascript', 'string', 'methods.' ]
[ "Let's ", ' important javascript string methods.' ]

substr()

The substr() method returns a portion of the string, starting at the specified index and extending for a given number of characters afterwards.

console.log(stringOne.substr(6)); // Start at index 6 and extract whole remaining string
console.log(stringOne.substr(6, 34)); // Start at index 6 and extract next 34 characters.

Output

learn important javascript string methods.
learn important javascript string

trim()

The trim() method removes whitespace from both ends of a string. Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.) and all the line terminator characters (LF, CR, etc.).

var stringThree = '       remove whitespaces       ';
console.log(stringThree.trim());

Output

remove whitespaces

The trimEnd() and trimStart() are similar methods which removes whitespace from the end and start of the string respectively.

match()

The match() method retrieves the result of matching a string against a regular expression. You can learn about regular expression here .

const regex = /[A-Z]/g; // regex for capital characters
console.log(stringOne.match(regex));

Output

[ 'L' ]

toLowerCase()

The toLowerCase() method returns the calling string value converted to lower case.

var stringThree = 'THIS IS DEMO STRING';
console.log(stringThree.toLowerCase());

Output

this is demo string

toUpperCase()

The toUpperCase() method returns the calling string value converted to upper case.

var stringThree = 'this is demo string';
console.log(stringThree.totoUpperCase()());

Output

THIS IS DEMO STRING

And that is it for this article. You can visit satishnaikawadi.me for more articles related to programming.Thanks for reading 😇 .

💪 Build Custom Modal/Popup Component In React JS

Satish Naikawadi — Fri, 26 Mar 2021 17:07:56 +0000

In this post , we will build custom modal component with react js. We will build this Modal component from scratch without using any css framework.Below is the demo 😍 of what we will build going towards the end of this tutorial - very beautiful and fully customizable Modal Component.

We will proceed as below:

Creating a fresh react app.
Making and designing our Modal component.
A button to trigger an event to show Modal.

Creating a Fresh React App

Firstly , we will create a fresh react project with the help of create-react-app cli tool by using following command.

npx create-react-app modal

Making and designing our Modal component

Now , inside src folder of our app , we will create components folder. Inside this component folder , we will create a modal folder which will have Modal.js file for having modal component and modal.module.css file having css styling for our Modal component.

Getting back to designing part, below is the code snippet for it.

/* modal.module.css */

.modal__wrap {
    position: fixed;
    display: block;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    overflow-x: hidden;
    background-color: rgba(31, 32, 41, .75);
    pointer-events: none;
    opacity: 0;
    transition: opacity 250ms 700ms ease;
}

.visible {
    pointer-events: auto;
    opacity: 1;
    transition: all 300ms ease-in-out;
}

.modal {
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    display: block;
    width: 60vw;
    height: 60%;
    min-height: 400px;
    min-width: 400px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    padding-bottom: 20px;
    background-color: #fff;
    align-self: center;
    box-shadow: 0 12px 25px 0 rgba(199, 175, 189, .25);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 250ms 250ms ease, transform 300ms 250ms ease;
    transform: scale(0);
}

.visible .modal {
    opacity: 1;
    transform: scale(1);
    transition: opacity 250ms 500ms ease, transform 350ms 500ms ease;
}

.modal__wrap is the class which will have the styling for wrapper and backdrop of the modal.
.modal is the class which will have the styling of actual Modal component which will be hidden initially.
.visible class makes the Modal visible with fade in and fade out effect.

Now let’s create Modal component.
Below is the code snippet for it.

//Modal.js

import React, { useEffect, useRef } from 'react';
import Button from '../button/Button';
import CloseIcon from '../CloseIcon';
import styles from './modal.module.css';

const Modal = ({ modalStyle, children, show, onClose, backdropStyle }) => {
    const modalRef = useRef(null);
    useEffect(
        () => {
            if (show) {
                modalRef.current.classList.add(styles.visible);
            }
            else {
                modalRef.current.classList.remove(styles.visible);
            }
        },
        [
            show
        ]
    );
    return (
        <React.Fragment>
            <div ref={modalRef} style={backdropStyle} className={`${styles.modal__wrap}`}>
                <Button
                    onClick={onClose}
                    style={{ width: 60, height: 40, position: 'absolute', top: 0, right: 0, margin: '1rem' }}
                    className={styles.close__btn}
                >
                    <CloseIcon height="20px" width="20px" className={styles.close__icon} />
                </Button>
                <div style={modalStyle} className={styles.modal}>
                    {children}
                </div>
            </div>
        </React.Fragment>
    );
};

export default Modal;

This component will take four props:
1.modalStyle - With which one can customize the styling of visible modal window.

backdropStyle - With which one can customize the styling of the backdrop of modal window.
onClose - Event handler with which one can write logic to close the modal.
show - Boolean property which will decide wheather the modal is open or not.

Here , inside this component we have used two more component Button and CloseIcon. Now Button component is a simple button with basic styling. CloseIcon is just simply a svg icon to close the modal.

This component has two main functional parts

Firstly , inside useEffect() hook we will check if the show prop is true or not. If show is true , then we will add the .visible class to the component or else we will remove the .visible class from the Modal component with the help of useRef() react hook.
We will add onClose() handler passed by props to the onClick event handler of CloseIcon , so that modal will close on clicking it.

A button to trigger an event to show Modal

To make it simple, I added the Button in App.js file as below,


//App.js

import React, { useState } from 'react';
import './App.css';
import Button from './components/button/Button';
import Modal from './components/modal/Modal';

function App() {
    const [
        show,
        setShow
    ] = useState(false);
    return (
        <React.Fragment>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
                <Button onClick={() => setShow(true)}>Open Modal</Button>
            </div>
            <Modal show={show} onClose={() => setShow(false)}>
                <div className="content">
                    <img src="https://cdn.pixabay.com/photo/2015/01/09/11/11/office-594132__340.jpg" alt="Developer" />
                    <div className="text">
                        <h2>John Doe</h2>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe aliquid placeat omnis
                            adipisci dolores quae amet mollitia sint, temporibus eum magnam facilis odio ex incidunt?
                            Deleniti quam et rem obcaecati. Laborum atque odit expedita nulla.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita labore laborum, assumenda
                            dolorum provident quod itaque earum, officia in placeat dignissimos nostrum? Totam corrupti
                            nihil repudiandae ducimus atque quod eos!
                        </p>
                    </div>
                </div>
            </Modal>
        </React.Fragment>
    );
}

export default App;

That’s it you did it. It’s as simple as that. Now you can use this component anywhere in your project. For more articles like this please checkout my personal blog here.
This is link to CodeSandbox of Modal component.
Let me know if this tutorial was helpful for you guys and for which case you used it. Thank you for reading as always !!!

😬 10 Must Know Javascript Array Methods

Satish Naikawadi — Tue, 23 Mar 2021 07:37:18 +0000

In this article , we will see 10 important javascript array methods which almost needed everywhere in javascript projects. We will quickly take a look at each method with example. Below is the data with which we will be working while taking examples of first 8 method.


const studentData = [
    { name: 'John', marks: 634, passed: true },
    { name: 'Mark', marks: 467, passed: true },
    { name: 'Randy', marks: 390, passed: true },
    { name: 'Leo', marks: 149, passed: false },
    { name: 'Chris', marks: 564, passed: true },
    { name: 'Apu', marks: 456, passed: true },
    { name: 'Naty', marks: 567, passed: true },
    { name: 'James', marks: 98, passed: false },
    { name: 'Andy', marks: 478, passed: true },
    { name: 'Frank', marks: 180, passed: false },
    { name: 'Don', marks: 123, passed: false }
];

filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.
Let us say we have to get only those students who have passed. So we will filter them as below

const passedStudents = studentData.filter((student) => {
    return student.passed;
});
console.log(passedStudents);

Output :

[
{ name: 'John', marks: 634, passed: true },
{ name: 'Mark', marks: 467, passed: true },
{ name: 'Randy', marks: 390, passed: true },
{ name: 'Chris', marks: 564, passed: true },
{ name: 'Apu', marks: 456, passed: true },
{ name: 'Naty', marks: 567, passed: true },
{ name: 'Andy', marks: 478, passed: true }
]

map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Say we want to get array of name of every student. So we can get it as follows

const studentNames = studentData.map((student) => {
    return student.name;
});
console.log(studentNames);

Output:

[
'John', 'Mark',
'Randy', 'Leo',
'Chris', 'Apu',
'Naty', 'James',
'Andy', 'Frank',
'Don'
]

find()

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned. Say we want to get data of student whose name is 'Leo' then

const dataOfLeo = studentData.find((student) => {
    return student.name === 'Leo';
});
console.log(dataOfLeo);

Output:

{ name: 'Leo', marks: 149, passed: false }

reduce()

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value. It takes first parameter as reducer function and second parameter is initial value
Say we want to calculate sum of marks of all students then

const totalMarksOfAll = studentData.reduce((currentTotal, student) => {
    return student.marks + currentTotal;
}, 0);
console.log(totalMarksOfAll);

Output:

4106

findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise , it returns -1, indicating that no element passed the test. Say we want to find the index of Leo's Data then

const indexOfLeo = studentData.findIndex((student) => student.name === 'Leo');
console.log(indexOfLeo);

Output:

3

forEach()

The forEach() method executes a provided function once for each array element. It works similar to for loop. Say we want to print result status for each student then

studentData.forEach((student) => {
    console.log(
        `${student.name} has ${
            student.passed ? 'passed' :
            'failed'} !`
    );
});

Output:

John has passed !
Mark has passed !
Randy has passed !
Leo has failed !
Chris has passed !
Apu has passed !
Naty has passed !
James has failed !
Andy has passed !
Frank has failed !
Don has failed !

some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array. Say we want to know if data have some failed students in it or not then

const hasFailedStudents = studentData.some((student) => {
    return !student.passed;
});
console.log(hasFailedStudents);

Output:

true

every()

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value. It is similar to some() method the only difference is that the some() method will return true if any predicate is true while every() method will return true if all predicate are true. Say we want to check if all the students are passed or not then

const hasAllPassed = studentData.every((student) => {
    return student.passed;
});
console.log(hasAllPassed);

Output:

false

New Data

Now , for remaining two methods lets use below data ,

const languages = [
    'java',
    'cpp',
    'python',
    'javascript'
];

includes()

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
Say we want to check if python and ruby are in above languages array or not then

const includesRuby = languages.includes('ruby');
console.log(includesRuby)
const includesPython = languages.includes('python');
console.log(includesPython);

Output:

false
true

indexOf()

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
Say we want to find index of python then

const indexOfPython = languages.indexOf('python');
console.log(indexOfPython);

Output:

2

And that is it for this article. You can visit satishnaikawadi.me for more articles related to programming.Thanks for reading.

🤩 Build Custom Button Component With React JS

Satish Naikawadi — Fri, 19 Mar 2021 09:52:20 +0000

This is the first part of many 🛎️ from the series Custom UI Components With React. In this post we will see how we can create custom Button component with different props and styles in React JS.

Below is the demo of what we are going to build in this tutorial.

✔️ Button Component Props

We are going to have several props for this component so that we can have control on it from outside to how we can customize or modify it.The props will be as follows -

btnColor - This props will decide the color of the button.
labelColor - This props will decide the color of text inside the button. By default it will be white, but depending on your btnColor you can change it to have right contrast.
onClick - This will be a onClick handler present on button.
type - This prop will decide the styling of the button. It will have the value either one of outline | block | rounded. If this prop is not passed button will have default styling.
style - This prop will have any custom styling you want to give Button component from outside.
disabled - This prop will decide if the button is in active state or not.

🃏Basic Styling Of Button

We will give button some basic styling. Here we will create button.module.css file and then we will add btn class to it for giving some basic styles to our button as follows.


/* button.module.css */

.btn {
    font-family: 'Ubuntu', sans-serif;
    position: relative;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 2;
    height: 50px;
    transition: all 200ms linear;
    border-radius: 4px;
    width: 240px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 12px 35px 0 rgba(16, 39, 112, .25);
    outline: 0;
    text-transform: capitalize;
}

💠 Creating Button Functional Component

Now we will create a Button.js files in which we will create out custom Button Component. In this file we will import styles from our button.module.css file . Here we will return a basic HTML button element and we will add btn class to it from styles.We will destructure the all props.

//Button.js

import React from 'react';
import styles from './button.module.css';

const Button = ({ children, onClick, btnColor = 'teal', labelColor, disabled, type, style, ...props }) => {
    return (
        <button
            className={styles.btn}
        >
            {children || 'label'}
        </button>
    );
};

export default Button;

Now in this Button.js file we will create some styles objects for different types of buttons.


//Button.js

    const commonStyles = {
        backgroundColor : btnColor,
        color           : labelColor || 'white'
    };
    const outlineStyles = {
        border          : `1px solid ${btnColor}`,
        color           : btnColor,
        backgroundColor : 'white'
    };
    const outlineHoverStyle = {
        color           : labelColor || 'white',
        backgroundColor : btnColor
    };

    const roundedStyle = {
        backgroundColor : btnColor,
        color           : labelColor || 'white',
        borderRadius    : '25px'
    };
    const disabledStyle = {
        cursor          : 'default',
        backgroundColor : btnColor,
        color           : labelColor || 'white',
        opacity         : 0.4
    };
    const blockStyles = {
        width  : '95%',
        margin : '0 auto'
    };

Here we have common styles depending on btnColor which will be added to every type of button . On the other hand all the other styles will be added conditionally depending on the type of button. Here note that for outline type we have two cases - first is default outlineStyles which will be added when type of button is outline and the other case is when we hover over the button.

So to track the hover state we will create state hover with useState() react hook with which we will add hover style conditionally. With Javascript Event Handlers onMouseEnter and onMouseLeave we will toggle our hover state.

Now we will add a simple switch statement in javascript to conditionally render the styles depending on the type of button.


//Button.js
    let btnStyle;
    switch (type) {
        case 'rounded':
            btnStyle = roundedStyle;
            break;
        case 'block':
            btnStyle = blockStyles;
            break;
        case 'outline':
            if (hover) {
                btnStyle = outlineHoverStyle;
            }
            else {
                btnStyle = outlineStyles;
            }
            break;
        default:
            btnStyle = {
                backgroundColor : btnColor,
                color           : labelColor || 'white'
            };
            break;
    }

And that's it , Now we will just add this btnStyle along with any style passed from props onto button and we will also add disabled style if button has disabled prop. So our final code will look like follows -


//Button.js

import React, { useState } from 'react';
import styles from './button.module.css';

const Button = ({ children, onClick, btnColor = 'teal', labelColor, disabled, type, style, ...props }) => {
    const [
        hover,
        setHover
    ] = useState(false);
    const toggleHover = () => {
        setHover(!hover);
    };
    const commonStyles = {
        backgroundColor : btnColor,
        color           : labelColor || 'white'
    };
    const outlineStyles = {
        border          : `1px solid ${btnColor}`,
        color           : btnColor,
        backgroundColor : 'white'
    };
    const outlineHoverStyle = {
        color           : labelColor || 'white',
        backgroundColor : btnColor
    };

    const roundedStyle = {
        backgroundColor : btnColor,
        color           : labelColor || 'white',
        borderRadius    : '25px'
    };
    const disabledStyle = {
        cursor          : 'default',
        backgroundColor : btnColor,
        color           : labelColor || 'white',
        opacity         : 0.4
    };
    const blockStyles = {
        width  : '95%',
        margin : '0 auto'
    };
    let btnStyle;
    switch (type) {
        case 'rounded':
            btnStyle = roundedStyle;
            break;
        case 'block':
            btnStyle = blockStyles;
            break;
        case 'outline':
            if (hover) {
                btnStyle = outlineHoverStyle;
            }
            else {
                btnStyle = outlineStyles;
            }
            break;
        default:
            btnStyle = {
                backgroundColor : btnColor,
                color           : labelColor || 'white'
            };
            break;
    }
    return (
        <button
            style={

                    disabled ? { ...commonStyles, ...btnStyle, ...disabledStyle, ...style } :
                    { ...commonStyles, ...btnStyle, ...style }
            }
            onMouseEnter={toggleHover}
            onMouseLeave={toggleHover}
            {...props}
            type="button"
            onClick={

                    !disabled ? onClick :
                    () => {}
            }
            className={styles.btn}
        >
            {children || 'button'}
        </button>
    );
};

export default Button;

Here you can see live demo and interact with this component.
Hope you inderstand this tutorial. For more tutorials like these plz visit my personal blog satishnaikawadi.me Thank You for reading 😇.

🔗Build A Linked List In Javascript With All Operations

Satish Naikawadi — Tue, 16 Mar 2021 15:45:34 +0000

In this post , I will be showing how we can build a singly linked list data structure using javascript language.We will also learn all operations on it.

🧐Overview

In a singly linked list each item points to its successor.Each item in a linked list is called as a node.There is a head node in each linked list which points to its first node.The last node of linked list points to null.

Node Class

First we will create a blue print for our node of linked list.We will create a Node Class in javascript which will have two properties-

data - which will store data of node
next - which will points to next node

class Node {
    constructor(data, next = null) {
        this.data = data;
        this.next = next;
    }
}

Linked List Class

Now we will create a actual linked list class which will have two properties -

head -which will points to the first node of linked list
size -which represents the number of nodes present in the list

class LinkedList {
    constructor() {
        this.head = null;
        this.size = 0;
    }
}

Operations

Now , we will create some member functions in LinkedList class to perform various operations on linked list.

(1) insertFirst()

To insert a node at first position of list.
Here we will simply point the head to new node and next of new node to previous head node . At the end , we will increment the size of list by 1.

    // Insert Node at first position
    insertFirst(data) {
        this.head = new Node(data, this.head);
        this.size++;
    }

(2) insertLast()

To insert a node at last position of list.
Here we will have 2 case
1.If list is empty - then we will simply point the head of node to new node.
2.if list is not empty - then we will traverse the whole list and then point the next of last node to new node.

    // Insert Node at last position
    insertLast(data) {
        const newLast = new Node(data);

        // Check if list is empty then last node is first node which will be head
        if (!this.head) {
            this.head = newLast;
        }
        else {
            // if list is not empty traverse to last node
            let last = this.head;
            while (last.next) {
                last = last.next;
            }
            last.next = newLast;
        }
        this.size++;
    }

(3) insertAt()

To insert a node at given index.
Here also we will have 2 case
1.If index is 0 - then we will simply point the head of node to new node.
2.if index is not 0 - then we will create two variables to track previous and current node and will traverse the list upto given index and and then point the next of previous node to new node and next of new node to current node.

// insert a node at a particular index
    insertAt(data, index) {
        // check if index is valid
        if (index >= 0 && index < this.size) {
            // if first index
            if (index === 0) {
                this.head = new Node(data, this.head);
                return;
            }

            const node = new Node(data);
            let current, previous;

            current = this.head;
            let count = 0;

            while (count < index) {
                previous = current;
                count++;
                current = current.next;
            }

            node.next = current;
            previous.next = node;

            this.size++;
        }
        else {
            console.log('You have entered an invalid index!!');
        }
    }

And that's it for this one. To see how we can write remaining four operations which are
4.removeAt() - To remove a node at given index.
5.getAt() - To get data of a node at given index.
6.clearList() - To clear (empty) a whole list.
7.printListData() - To print data of all nodes in list
visit satishnaikawadi.me

I hope 😇 all of you understand how to build linked list with javascript. Thank you for reading.For any queries , feel free to ask.