DEV Community: Codenv

Scaling Frontend Development with Single-Spa Micro-Frontends

Codenv — Sun, 22 Dec 2024 03:25:22 +0000

Hey there! Have you ever worked on a huge frontend project where things started getting a bit… chaotic? You know, when one small change on the homepage somehow breaks the entire checkout process? It happens. That’s where micro-frontends come to the rescue. And in this article, we’ll explore how you can use single-spa micro-frontend framework to build a micro-frontend architecture, with a step-by-step guide that you can totally try out!

Ready? Let’s dive in!

So, What’s a Micro-frontend Anyway?
Imagine splitting your huge app into smaller pieces, where each piece (or micro-frontend) can be built, deployed, and managed independently. Each team gets their own “mini-app” to work on, and all of these mini-apps magically come together to form your whole app.

Cool, right? It’s like microservices, but for the frontend!

Why Use Single-spa?
Now, you might be wondering, “How do I get all these mini-apps to work together smoothly?” That’s where Single-spa comes in. It’s like the glue that holds all these tiny apps together, making sure they mount and unmount at the right time. (FYI ; There are couple of alternatives exist that support for micro-frontend architecture but in this article let’s stick to single-spa)

Here’s what Single-spa helps you do:

Manage multiple frameworks (like React, Vue, Angular) on one page or application.
Load different mini-apps when users visit different parts of your site.
Let each micro-frontend live its own life but still play well with others.
Lazy load code for improved initial load time

Sounds neat? Let’s build something with it!

https://youtu.be/xvRCeGTEMr4

Hamburger Icon

Codenv — Sat, 05 Jun 2021 17:04:35 +0000

Demo
Hi guys, in this short tutorial, you're going to learn how to create a Hamburger Icon with HTML,CSS and JavaScript.

The hamburger menu icon can also be referred to as a Three-line menu, a Menu button, or a Hotdog menu. The hamburger icon is very useful for responsive designing or mobile views with smaller screen sizes. The icon which is consisting of three horizontal bars normally. Its function is to toggle a menu or navigation etc.

It is easy to create this hamburger menu icon with only HTML,CSS and JavaScript. OK let's start then.

At first create a index.html page. Today I am going to create a hamburger icon with two horizontal bars but when you've learned this, I hope you'll try making a three-bar hamburger icon.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="style.css" rel="stylesheet"/>
</head>
<body>

    <div class="hum_toggle"  id="hum-toggle" onclick="togglehum()">
       <span></span>
       <span></span>
    </div>

    <script src="main.js" type="text/javascript"></script>
</body>
</html>

In index.html ,I have created two spans tags within an outer div which class name is hum_toggle. The onclick event is used to trigger a function when an element is clicked on. When you click the .hum_toggle div element, togglehum() function will be triggered. The togglehum() function has declared in main.js.

style.css

.hum_toggle
   {
      position: relative;
      width: 50px;
      height: 50px;
      cursor: pointer;
      border: solid black 2px;
      border-radius: 50%;
   }


.hum_toggle span
   {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 60%;
      height: 4px;
      transition: all 300ms ease-in-out;
      border-radius: 5px;
      background: black;
   }


.hum_toggle span:nth-child(1)
   {
      top: 40%;
   }

.hum_toggle span:nth-child(2)
   {
      top: 60%;
   }


.hum_toggle.active span:nth-child(1)
   {
      top: 50%;
      transform: translate(-50%,-50%) rotate(45deg);
   }


.hum_toggle.active span:nth-child(2)
   {
      top: 50%;
      transform: translate(-50%,-50%) rotate(-45deg);
   }

So,let's see how span:nth-child(1) and span:nth-child(2) child selectors are working.

main.js

function togglehum(){
    var hum = document.getElementById('hum-toggle');
    hum.classList.toggle('active');
}

when the togglehum function is triggered, the active class adds to the hum_toggle class.You can check it by using developer tools.
right click on the browser window --> click inspect element --> click on Elements tab

Demo
Hope you will enjoy this article. See you in the next post and don't forget to subscribe my channel😊😊

Top 5 3D web design trends 2020 | 2021

Codenv — Mon, 12 Apr 2021 07:30:32 +0000

Top 5 3D web design trends 2020 | 2021
Hello guys, Welcome to Dezigner bay.🙂

Today I brought you to the 5 most amazing 3d interactive websites that Every web developer should visit.

Let's have a look.
https://youtu.be/L099UGgxUwQ

Responsive Navbar with Bootstrap4 & Jquery

Codenv — Wed, 20 Jan 2021 17:01:44 +0000

Demo
Hi, everyone,
In this tutorial, I'll show you how to build a simple and responsive navigation bar. Here I used bootstrap 4 and jquery to build this navigation bar.

Download Bootstrap
https://getbootstrap.com/docs/4.5/get...

Download Jquery
https://jquery.com/
Here, make sure to download the jquery.min.js.

Download font Awesome
https://fontawesome.com/start

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MY NAV</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="vendor/fontawesome/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />

  </head>
  <body>
    <div class="page-wrap">
      <div class="nav-style">
        <div class="mobile-view">
          <div class="mobile-view-header">
            <div class="mobile-view-close">
              <i class="fas fa-times js-toggle"></i>
            </div>
          </div>
          <div class="mobile-view-body"></div>
        </div>

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <div class="container py-2 px-2">
            <a class="navbar-brand" href="#">Navbar</a>

            <div class="d-inline-block d-lg-none ml-md-0 ml-auto py-3">
              <i class="fas fa-bars js-toggle" style="font-size: 25px; color: white"></i>
            </div>

            <div class="d-none d-lg-block">
              <ul class="navbar-nav ml-auto js-clone-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About us</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact us</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <script type="text/javascript" src="vendor/jquery/jquery-3.5.0.min.js"></script>
    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

style.css

.page-wrap:before{
    transition: .3s all ease-in-out;
    background: rgba(0, 0, 0, 0.6);
    content: "";
    position: absolute;
    z-index: 2000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
}

.off-view .page-wrap{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    overflow: hidden;
}

.off-view .page-wrap:before{
    opacity: 0.5;
    visibility: visible;
}

.mobile-view{
    width:300px;
    position: fixed;
    right: 0;
    z-index: 2000;
    padding-top: 20px;
    background: white;
    height: calc(100vh);
    transform: translateX(110%);
    box-shadow: -10px 0 20px -10px rgba(0,0,0,0.1);
    transition: .3s all ease-in-out;
}

.off-view .mobile-view{
    transform: translateX(0%);
}
.mobile-view .mobile-view-header{
    width: 100%;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
}

.mobile-view .mobile-view-header .mobile-view-close{
    float: right;
    margin-top: 8px;
    margin-right: 10px;
}


.mobile-view .mobile-view-header .mobile-view-close i{
    font-size: 30px;
    display: inline-block;
    padding-right: 10px;
    line-height: 1;
    cursor: pointer;
    transition: .3s all ease;
}

.mobile-view .mobile-view-body{
    overflow: scroll;
    position: relative;
    padding: 20px;
    height: calc(100vh - 52px);
    padding-bottom: 150px;
    padding-top: 50px;
}

.mobile-view .clone-view{
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

.mobile-view .clone-view a{
    padding: 10px 20px;
    display: block;
    position: relative;
    color: black;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
}

main.js

jQuery(document).ready(function ($) {
  "use strict";

  var navclone = function () {
    $(".js-clone-nav").each(function () {
      var $this = $(this);
      $this.clone().attr("class", "clone-view").appendTo(".mobile-view-body");
    });

    $("body").on("click", ".js-toggle", function (e) {
      var $this = $(this);
      e.preventDefault();

      if ($("body").hasClass("off-view")) {
        $("body").removeClass("off-view");
      } else {
        $("body").addClass("off-view");
      }
    });

    $(document).mouseup(function (e) {
      var container = $(".mobile-view");
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($("body").hasClass("off-view")) {
          $("body").removeClass("off-view");
        }
      }
    });

    $(window).resize(function () {
      var $this = $(this),
        w = $this.width();
      if (w > 768) {
        if ($("body").hasClass("off-view")) {
          $("body").removeClass("off-view");
        }
      }
    });
  };
  navclone();
});

Full tutorial
https://youtu.be/wOrKQ3Plojs

Creating an Event Scheduler with Bootstrap & CSS

Codenv — Sat, 26 Dec 2020 14:11:40 +0000

Hi guys!!!
In this tutorial, I'm going to show you how to build an easy, creative, and responsive event scheduler with bootstrap and CSS. Hope this will be helpful to you.Demo

Ok.let's start the coding then.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <!-- Google fonts(Open sans and poppins) -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Poppins:wght@200;300;400;500;600&display=swap" rel="stylesheet">

    <!-- Bootstrap css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <!-- external css -->
    <link href="style.css" rel="stylesheet">
</head>
<body>

    <div class="container event-shedule my-5 pt-4">
        <div class="row">
            <div class="col-lg-4">
                <div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active" data-toggle="pill" href="#v-pills-1" role="tab" aria-controls="v-pills-1" aria-selected="true">
                        Day 01
                        <div>18 November 2020</div>
                    </a>
                    <a class="nav-link" data-toggle="pill" href="#v-pills-2" role="tab" aria-controls="v-pills-2" aria-selected="false">
                        Day 02
                        <div>19 November 2020</div>
                    </a>
                    <a class="nav-link" data-toggle="pill" href="#v-pills-3" role="tab" aria-controls="v-pills-3" aria-selected="false">
                        Day 03
                        <div>20 November 2020</div>
                    </a>
                    <a class="nav-link" data-toggle="pill" href="#v-pills-4" role="tab" aria-controls="v-pills-4" aria-selected="false">
                        Day 04
                        <div>21 November 2020</div>
                    </a>
                </div>
            </div>
            <div class="col-lg-8">

                    <div class="tab-content">
                        <div class="tab-pane fade active show" id="v-pills-1" role="tabpanel" aria-describedby="day-1-tab">
                            <div class="speaker-wrap">
                                <div class="text pl-md-5">
                                    <span class="time">08:00AM - 10:00AM</span>
                                    <h2>Introduction to Git and Github</h2>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        Cras tempus facilisis nunc, vitae commodo nisi. Nunc sagittis
                                        nisl tempor mi lacinia efficitur. Proin convallis a nunc at 
                                        facilisis.
                                    </p>
                                    <h5 class="speaker-name">
                                        --<a href="#">Daniel Nord</a>
                                        <span class="position">(Founder of DezignerBay )</span>
                                    </h5>
                                </div>
                            </div>

                            <div class="speaker-wrap">
                                <div class="text pl-md-5">
                                    <span class="time">08:00AM - 10:00AM</span>
                                    <h2>Introduction to Git and Github</h2>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        Cras tempus facilisis nunc, vitae commodo nisi. Nunc sagittis
                                        nisl tempor mi lacinia efficitur. Proin convallis a nunc at 
                                        facilisis.
                                    </p>
                                    <h5 class="speaker-name">
                                        --<a href="#">Daniel Nord</a>
                                        <span class="position">(Founder of DezignerBay )</span>
                                    </h5>
                                </div>
                            </div>
                        </div>



                        <div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-describedby="day-2-tab">
                            <div class="speaker-wrap">
                                <div class="text pl-md-5">
                                    <span class="time">08:00AM - 10:00AM</span>
                                    <h2>Introduction to Git and Github</h2>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        Cras tempus facilisis nunc, vitae commodo nisi. Nunc sagittis
                                        nisl tempor mi lacinia efficitur. Proin convallis a nunc at 
                                        facilisis.
                                    </p>
                                    <h5 class="speaker-name">
                                        --<a href="#">Daniel Nord</a>
                                        <span class="position">(Founder of DezignerBay )</span>
                                    </h5>
                                </div>
                            </div>

                            <div class="speaker-wrap">
                                <div class="text pl-md-5">
                                    <span class="time">08:00AM - 10:00AM</span>
                                    <h2>Introduction to Git and Github</h2>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        Cras tempus facilisis nunc, vitae commodo nisi. Nunc sagittis
                                        nisl tempor mi lacinia efficitur. Proin convallis a nunc at 
                                        facilisis.
                                    </p>
                                    <h5 class="speaker-name">
                                        --<a href="#">Daniel Nord</a>
                                        <span class="position">(Founder of DezignerBay )</span>
                                    </h5>
                                </div>
                            </div>
                        </div>






                    <div class="tab-pane fade" id="v-pills-3" role="tabpanel" aria-describedby="day-3-tab">
                        <div class="speaker-wrap">
                            <div class="text pl-md-5">
                                <span class="time">08:00AM - 10:00AM</span>
                                <h2>Introduction to Git and Github</h2>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Cras tempus facilisis nunc, vitae commodo nisi. Nunc sagittis
                                    nisl tempor mi lacinia efficitur. Proin convallis a nunc at 
                                    facilisis.
                                </p>
                                <h5 class="speaker-name">
                                    --<a href="#">Daniel Nord</a>
                                    <span class="position">(Founder of DezignerBay )</span>
                                </h5>
                            </div>
                        </div>

                        <div class="speaker-wrap">
                            <div class="text pl-md-5">
                                <span class="time">08:00AM - 10:00AM</span>
                                <h2>Introduction to Git and Github</h2>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Cras tempus facilisis nunc, vitae commodo nisi. Nunc sagittis
                                    nisl tempor mi lacinia efficitur. Proin convallis a nunc at 
                                    facilisis.
                                </p>
                                <h5 class="speaker-name">
                                    --<a href="#">Daniel Nord</a>
                                    <span class="position">(Founder of DezignerBay )</span>
                                </h5>
                            </div>
                        </div>
                    </div>






                    <div class="tab-pane fade" id="v-pills-4" role="tabpanel" aria-describedby="day-4-tab">
                        <div class="speaker-wrap">
                            <div class="text pl-md-5">
                                <span class="time">08:00AM - 10:00AM</span>
                                <h2>Introduction to Git and Github</h2>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Cras tempus facilisis nunc, vitae commodo nisi. Nunc sagittis
                                    nisl tempor mi lacinia efficitur. Proin convallis a nunc at 
                                    facilisis.
                                </p>
                                <h5 class="speaker-name">
                                    --<a href="#">Daniel Nord</a>
                                    <span class="position">(Founder of DezignerBay )</span>
                                </h5>
                            </div>
                        </div>

                        <div class="speaker-wrap">
                            <div class="text pl-md-5">
                                <span class="time">08:00AM - 10:00AM</span>
                                <h2>Introduction to Git and Github</h2>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Cras tempus facilisis nunc, vitae commodo nisi. Nunc sagittis
                                    nisl tempor mi lacinia efficitur. Proin convallis a nunc at 
                                    facilisis.
                                </p>
                                <h5 class="speaker-name">
                                    --<a href="#">Daniel Nord</a>
                                    <span class="position">(Founder of DezignerBay )</span>
                                </h5>
                            </div>
                        </div>
                    </div>





            </div>

        </div>
    </div>






    <!-- jQuery and JS bundle w/ Popper.js --> 
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

style.css


.event-shedule .nav-pills .nav-link{
    padding: 35px 30px !important;
    margin-bottom: 10px;
    color: #1b3a57;
    font-size: 22px;
    font-weight: 700;
    position: relative;
    display: inline-block;
    border: 1px solid transparent;
    background: #fff;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),0 1px 3px 1px rgba(60, 64, 67, 0.15);
    border-radius: 12px;
    font-family: 'Open-sans',sans-serif;
}

.event-shedule .nav-pills .nav-link:hover{
    background: rgb(0 0 0 / 69%);
    color: #fff;
}

.event-shedule .nav-pills .nav-link.active{
    color: #fff;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    background: #FF5722;
}


a{
    transition: 0.3s all ease;
    color: #FF5722;
}

.event-shedule .nav-pills .nav-link:after{
    position: absolute;
    top: 50%;
    bottom: 10px;
    right: -11px;
    width: 0;
    height: 0;
    margin-top: -10px;
    content: "";
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #FF5722;
    opacity: 0;
}

.event-shedule .nav-pills .nav-link.active:after{
    opacity: 1;
}

.speaker-wrap{
    width: 100%;
    background: #fff;
    padding: 40px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    border: 1px solid black;
    border-radius: 22px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),0 1px 3px 1px rgba(60, 64, 67, 0.15);
    color: #1b3a57;
    font-weight: 400;
    font-family: 'Poppins',sans-serif;
}

So, hope you all like this tutorial, and don't forget to check out and subscribe my YouTube channel. There are very useful videos on my channel and that will be really helpful to your career in web development.

https://www.youtube.com/channel/UCEZ2SM-qyXzwskpmRrCAvxQ

Custom cursor with Greensock

Codenv — Sat, 07 Nov 2020 16:56:58 +0000

Demo
Hi guys, in this short tutorial, you're going to learn how to create an animated custom cursor with GSAP and basic HTML and CSS. Ok, then, what's this GSAP called?

What is GSAP ?

Greensock Animation Platform(GSAP) is a JavaScript library for creating high-performance animations. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch!.GSAP has been tested across all major web browsers – including legacy fares such as Internet Explorer. All browser-related tweaks and fallbacks have already been integrated into the platform.

Why GSAP ?

Crazy fast
Freakishly robust
Compatible
Animate anything
Lightweight and expandable
No dependencies
Advanced sequencing

Detailed information

Ok.let's start the coding then.

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Custom Cursor</title>
  <link href="style.css" rel="stylesheet">
</head>
<body>

<div class="cursor"></div>
<div class="follower"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="main.js"></script>
</body>
</html>

The first thing you need to do is, add gsap.min.js to your index.html.To Install GSAP, you can use the following methods.

after that, import style.css and main.js to your index.html.

style.css


*{cursor: none;}

body{
  background-color:black;
  overflow: hidden;
}

.cursor{
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 2000;
    user-select: none;
    pointer-events: none;
}

.follower{
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: #6eff00;
    border-radius: 50%;
    opacity: 0.7;
    user-select: none;
    pointer-events: none;
}

main.js

gsap.set('.follower',{xPercent:-50,yPercent:-50});
gsap.set('.cursor',{xPercent:-50,yPercent:-50});

var follow = document.querySelector('.follower');
var cur = document.querySelector('.cursor');

window.addEventListener('mousemove',e => {
    gsap.to(cur,0.2,{x:e.clientX,y:e.clientY});
    gsap.to(follow,0.9,{x:e.clientX,y:e.clientY});
});

gsap.set('.follower',{xPercent:-50,yPercent:-50});
gsap.set('.cursor',{xPercent:-50,yPercent:-50});

Here, the gsap.set() methods always set the follower and the cursor centered on each other when we move the cursor.
Watch the Demo, then you can understand it clearly.

 gsap.to(cur,0.2,{x:e.clientX,y:e.clientY});

gsap.to() specifies the values to which the object is to be animated. Here,0.2 is the duration time of the cursor moves.

The 'clientX' property returns the horizontal mouse pointer coordinate when the mouse event is triggered.

The 'clientY' property returns the vertical mouse pointer coordinate when the mouse event is triggered.

Demo

https://www.youtube.com/channel/UCEZ2SM-qyXzwskpmRrCAvxQ

Change Background-color Dynamically

Codenv — Wed, 21 Oct 2020 04:42:30 +0000

Hello Everyone,
This is a Quick Tutorial that describes how to dynamically adjust background color when you choose a color from your custom color picker.CSS-variables are the key concept for this tutorial.Demo

index.html

<!DOCTYPE html>
<html>
<head>

<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">

<!--import style sheet-->
<link href="style.css" rel="stylesheet">

</head>

Here, you can see that I've already added two google fonts and my external stylesheet within my <head> tags.
To use google fonts - https://fonts.google.com/

<body>
<div class="color-picker">
    <div class="picktxt">PICK<br>A<br>COLOR</div>
        <div class="picker">
          <input type="color" id="favcolor" class="inputcolor" value="#243441">
        </div>
        <div class="color-code" id="c-code">#243441</div>
    </div>
</div>

<script src="main.js"></script>
</body>

Within the body tags, you can see four divs.They are

color-picker - outer most div(Main container)
pictxt - Sample text
picker - contains the color-picker(input)
color-code - Display color-code

 <input type="color" id="favcolor" class="inputcolor" value="#243441">

Be sure to set the type(attribute) of input as the color and if you need to override the default color of the color picker, you can set your own color value for the value attribute.I set the value as #243441.

style.css

:root{
    --backcol:#243441; 
}
body{
    background-color: var(--backcol);
}

The :root CSS pseudo-class selector allows you to target the highest-level parent element in the DOM or document tree. If both the: root and HTML selectors target the same HTML elements, you should know that: root actually has a higher specificity.

:root can be useful for declaring global CSS variables(--backcol). Previously, we set the color picker value to #243441.So we have to set the initial or default background color as #243441 as well. Then if we open the index.html, you will see the color picker color and the background color of the page is the same. To achieve this, you must set the --backcol within the var function as the value of the body background-color.

.color-picker{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 50px 50px;
    border-radius: 25px;

}

.picktext{
    font-size: 25px;
    color: black;
    font-weight: 700;
    padding: 0px 10px;
    text-align: center;
    font-family: 'Fredoka One', cursive;

}

.picker{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;

}

.inputcolor{
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}

.color-code{
    width: 100px;
    padding: 10px;
    font-family: 'Montserrat' ,sans-serif;
}

main.js


var inputcolor = document.getElementById("favcolor");
var root = document.documentElement;

inputcolor.addEventListener("input",(e) => {
    document.getElementById("c-code").innerHTML = e.target.value;
    root.style.setProperty("--backcol",e.target.value);
});

The color-picker input value set to the inputcolor(variable).
documentElement returns an element which is the root element of the document.
addEventListener() method attaches an event handler to the inputcolor(variable).
As a result, color-code and background-color changes.

Demo