DEV Community: adwait12345

How fetch(keepalive) Broke in High-Latency Regions

adwait12345 — Thu, 19 Feb 2026 06:47:24 +0000

So recently I built a so-called analytics service for fun. If you don’t know, make sure you check out here once. Alright, so I put the base MVP version for testing with my last article randomly.

I thought, okay, let’s test how much data it can collect. I shared that article on Hacker News, Dev.to, WhatsApp, etc., around 10:30 AM. Everything was normal — the analytics dashboard started showing views, sessions, unique visitors, etc. I went for lunch in the afternoon, and when I came back, I saw a very big spike — almost 800 new sessions recorded. It looked like it was working crazy solid.

It was a nice serotonin hit until I saw the Activity Logs.

There were some scroll_depth requests from certain unique visitors, but the page_view request logs were completely missing for that visitor_id.

Something f**ked up.

If you haven’t realised yet what’s happening 😂, let me explain the logic first.

In the analytics service, when a new visitor lands on a webpage, a page_view event is called first, and then eventually scroll_depth happens (only if you love to scroll 🙂).

I found this bug because you always love scrolling, right 😉

Practically, the order should be:

(page_view → scroll_depth → and so on…)

This was happening majorly for some requests from the Europe/US region.

Even if it were a race condition, it would appear after the scroll event, but there was complete silence.

Continue Here

Building My Own Google Analytics for $0

adwait12345 — Wed, 11 Feb 2026 06:53:13 +0000

Prerequisite: You must at least have heard about GA or its use case.

If you are a developer then you would have already encountered GA or equivalent.
So without wasting anymore time im gonna waste your time by forcing you to understand how Analytics services (like Google Analytics, Posthog, Cloudflare Web Analytics, etc) actually work.

It's very simple and interesting at same time. Let's say you have a webpage which is hosted on some domain. Now if you want to track views coming on webpage, then
If I ask you how would you track (without using analytics services)?

The most common answer would be:
Add a viewCounter to page and as soon as someone lands do viewCounter++
OR
Built an endpoint to increment counter
And that's how simple it is!!
Then I thought why not build one for myself.

Reverse Engineering Google Analytics

Before writing code, I like to reverse engineer.
Let's hop some website which use GA

Ex: https://solocreators.app

As soon as we land on the page, collect request triggers.
So there is some client side Script which is being executed after we land on the page and send a request to googleAnalytics server with some payload data.

If I try to scroll down the page more collect requests happen, with payload, if i click on any button then again collect request happens.

Do you notice the pattern?

If you play around you will realize collect requests are being done on almost every event.

The Basic Architecture

So we need following components:

User's Browser
    ↓
Tracking Script (track.js)
    ↓
Backend API
    ↓
Database
    ↓
Dashboard

If you are interested I documented the full build and architecture here:
https://www.adwait.me/writings/building-my-own-google-analytics

API integration like Enterprise scale React based applications.

adwait12345 — Mon, 18 Aug 2025 12:37:26 +0000

Integrating API (Application interface protocol) with frontend applications which makes the software industry run today. And integrating API is by far the easiest job on this planet until you realize that the code you are writing is not for you. Lets start very simple, as such no prerequisite needed if you understand JavaScript that will be more than enough.

So let's dive deep, we will be using Axios for handling all HTTP requests. If you don’t know what Axios is ? It's almost the same with fetch which is natively provided in browsers. Being a 3rd party, Axios provides advanced request handling, parsing, request interception, etc.

This is how a normal api request looks like using Axios.

import axios from "axios";
async function getUserList() {
  try {
    const response = await axios.get("https://example.com/v1/users");
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

You can set custom headers according to your need

import axios from "axios";
const options = {
  method: "POST",
  headers: { Authorization: `Bearer ${data.token}` },
};
async function getUserList() {
  try {
    const response = await axios.get("https://example.com/v1/users", options);
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

If your frontend application handles 2-4 API endpoint connections then the above method is the best in case you want to save your time. What if your application is going to handle more than a couple hundred requests in that case Axios Interceptor comes into picture, it's gonna save you a lot of time and you’re gonna thank me later. It’s almost used everywhere in industry in enterprise scale applications.

Key Highlights:

Consistent error handling throughout all the api requests.
Attaching an auth token to every request without repeating code for every request.
Global response formatting.
Cancelling initiated request.

Let’s see how the basic implementation of interceptor will look like

Create one file lets say interceptor.ts

import axios from "axios";

Create an instance from axios

const api = axios.create({
 baseURL: "https://example.com/", // replace with your API
 timeout: 5000,
});

After an instance is initiated, we are ready to intercept the requests going through this instance. Now we want to send authorization headers with Bearer token with every request from the frontend. Axios has internal methods built in to intercept ongoing requests before it happens and send custom headers. This is how it will look like

api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token"); // get token from storage
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // Do something before request is sent
    return Promise.reject(error);
  }
);

Now we have successfully intercepted ongoing requests using Axios. Lets use it for unwrap response structure globally rather than doing it on every single request. This is how it will look like, We are getting response from server and response.data is the useful part so we will return response.data

api.interceptors.response.use(
  (response) => {
    // You can modify response globally
    return response.data; // now you get res.data directly
  },
  (error) => {
    if (error.response?.status === 401) {
      console.error("Unauthorized! Redirecting to login...");
      window.location.href = "/login"; // redirect user
    }
    return Promise.reject(error);
  }
);

Now export the instance

export default api;

This is how actually usage will look like

import api from "./interceptor";
async function getUserList() {
  try {
    const response = await api.get("/users");
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

Now lets look into how to cancel an ongoing request using Axios interceptor. To cancel an ongoing request Axios provides AbortController terminates ongoing request instantly, and this is how it will look like

api.interceptors.request.use((config) => {
  if (config.cancel === true) {
    const controller = new AbortController();
    controller.abort(); // cancel immediately
    config.signal = controller.signal;
  }
  return config;
});

Usage

import api from "./axios";

// Normal request (works fine)
api
  .get("/users")
  .then((res) => console.log("✅ Success:", res.data))
  .catch((err) => console.error(err));
// Cancelled request
api
  .get("/users", { cancel: true })
  .then((res) => console.log(res))
  .catch((err) => console.error("❌ Cancelled:", err.message));

How JavaScript code is Executed under the hood !!

adwait12345 — Fri, 19 Jan 2024 13:59:36 +0000

JavaScript is one of the most simultaneously hated and loved programming languages on this planet

Today JavaScript is used almost everywhere like in mobiles, televisions, even in light bulbs🤯

In this article, we will try to understand how JavaScript works under the hood. Despite its widespread use, around 98% of developers still don't fully grasp how JavaScript works. By the end of this article, I assure you that you'll in top 2% 😉

JavaScript is a synchronous and single-threaded language

Synchronous means that when JavaScript code runs, it goes through line by line and executes each line without waiting for anyone! (Don't worry; we'll get to the asynchronous part later. If you're not familiar with asynchronous JS, mark my words, you're going to love it!)

A thread refers to a call stack, a data structure that keeps track of the code currently being executed.

Now, here comes the main part !!

How JavaScript code is compiled ?

JavaScript is a high-level programming language, remember it cannot be ran on any terminal/system, it need js runtime environment to work.

What is JavaScript Runtime Environment?
It is just an environment where JavaScript's high level code is converted to low machine level code. That's all you need to know about JS Runtime.
Examples of Runtime are :- Chrome uses V8 Engine, NodeJS also use V8, Firefox uses SpiderMonkey, Edge uses Chakra, etc.

*How JavaScript is Executed ?
*
A brand new Execution context is created and after that

JavaScript Code is executed in two phase:

Memory allocation
Code Execution

As you can see in above illustration there are two phases

Let's try to understand with the help of code sample

var a = 1
var b = "Luffy"
function Random () {
console.log("Favorite no of " + b + " is " + a);
}
Random();

When we try to execute above code it will go through two phases
Memory Allocation & Code Execution.

Memory Allocation:
In this phase JS runtime goes through every line of code one by one from top to bottom and allocate memory to every variables, functions and constants.
As this part is mainly allocation phase so no computation is required.

You can refer the below illustration for visualization.

Now you might wonder what is undefined I see in this figure.
So, undefined is special keyword in JavaScript which is given to variables before assigning values to them.
(Note: let & const works differently in that case we will discuss later).

Code Execution:
In this phase JS runtime again goes through line by line code from top to bottom, and now allocates the values to var if in case of variable declared, calls and executes the function and after going through complete code it pops itself from main call stack.

As you can see in above reference image how code is being executed. And in case of any function call a brand new execution context is created and after its execution it just gets popped off.

That's all how code is executed in JavaScript 🎉

Please add comment if you find any mistake

If you like such content let's connect !!
Twitter

📢Announcing Synergia Hackfest

adwait12345 — Sun, 18 Jun 2023 06:22:35 +0000

Hola Folks!

🚀 Calling all aspiring developers and tech enthusiasts! 🖥️

We are thrilled to announce our first upcoming Hackathon event, where innovation, collaboration, and problem-solving skills will take center stage. 🌟 Whether you're a coding prodigy or a novice looking to explore the world of technology, this event is the perfect platform to showcase your talent, learn new skills, and network with like-minded individuals.

📅 Date: 23 June 2023
📍 Venue: Online
🔗 Registration Link: http://bit.ly/3NAwXCn

🔥 Event Highlights:

1️⃣ Round 1: Registration and Idea Submission
2️⃣ Round 2: Competition and Development
3️⃣ Round 3: Result

✨ The top projects will be shortlisted as finalists.

🔥 Perks :

1️⃣ Networking Opportunities
2️⃣ Job Interview Opportunities
3️⃣ Certificate of Achievement

🤙 Contact Us/Join :

Discord: https://discord.gg/wBXEeHEwMr
Email Us: team@synergialabs.tech
Website: https://synergialabs.tech/

⚠️ Important Note: Every participant MUST join discord server of Synergia for the Hackathon

We look forward to seeing you at the Hackathon!

Summer Internship at Synergia Labs

adwait12345 — Fri, 07 Apr 2023 12:30:41 +0000

Fellow Developers & students,

At Synergia Labs, we are committed to providing valuable learning experiences for students like you. As part of this mission, we will be offering exciting projects and internships in the near future.

To help us tailor these opportunities to your interests and goals, we kindly request that you fill out the survey form linked below. Your feedback will be crucial in shaping the types of projects and internships we offer, as well as ensuring that we provide the best possible learning experience for you.

Thank you for taking the time to fill out this survey. We look forward to working with you soon!

Survey Form

docs.google.com

Best regards,
The Synergia Labs team

How to built a Instagram Navbar Clone | HTML CSS & Js

adwait12345 — Sat, 27 Nov 2021 06:17:15 +0000

Learn how to create an Instagram Navbar clone with pure HTML CSS and JavaScript!
This project is good for beginners to start with , and after completing this project you will be confident enough to built like Instagram's components.
Below is the reference video for proper execution

How to Subscribe Bocadmium: https://www.youtube.com/channel/UC-AjAUV5Q42VV1Yv8oh6apg

Source Code:

1)index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Linking Css file  -->
    <link rel="stylesheet" href="style.css">
    <!-- Linking Js file  -->
    <script src="main.js"></script>
    <!-- Title  -->
    <title>Instagram</title>
</head>

<body>
    <!-- Created Nav  -->
    <nav class="nav">
         <!-- Created a container  -->
         <div class="wrapper">
         <!-- Made a logo container  -->
            <div class="logo" style="padding-top: 8px;padding-right: 110px;">
                <img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="">
             </div>
             <!-- Logo container ends here -->

             <!-- Created search container  -->
            <div class="search">
                <input
                    style="border: 1px solid #dbdbdb; background-color: #fafafa; height: 27.5px;width: 12.5rem ;border-radius: 3.5px;padding-left: 25px;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;"
                    type="text" placeholder="Search">
            </div>
            <!-- search Container ends here  -->

            <!-- Created icons container  -->
            <div class="icons">
                <!-- Home starts  -->
                <div class="home">
                    <svg aria-label="Home" class="_8-yf5 " color="#262626" fill="#262626" height="22" role="img"
                        viewBox="0 0 48 48" width="22">
                        <path id="home1"
                            d="M45.5 48H30.1c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2.1-4.6-4.6-4.6s-4.6 2.1-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.6-.6 2.1 0l21.5 21.5c.3.3.4.7.4 1.1v23.5c.1.8-.6 1.5-1.4 1.5z">
                        </path>
                    </svg>
                </div>
                     <!-- Home ends  -->

                     <!-- explore starts  -->
                <div class="explore">
                    <svg aria-label="Direct" class="_8-yf5 " color="#262626" fill="#262626" height="22" role="img"
                        viewBox="0 0 48 48" width="22">
                        <path
                            d="M47.8 3.8c-.3-.5-.8-.8-1.3-.8h-45C.9 3.1.3 3.5.1 4S0 5.2.4 5.7l15.9 15.6 5.5 22.6c.1.6.6 1 1.2 1.1h.2c.5 0 1-.3 1.3-.7l23.2-39c.4-.4.4-1 .1-1.5zM5.2 6.1h35.5L18 18.7 5.2 6.1zm18.7 33.6l-4.4-18.4L42.4 8.6 23.9 39.7z">
                        </path>
                    </svg>
                </div>
                      <!-- explore ends  -->

                      <!-- create starts  -->
                <div class="create">
                    <svg aria-label="New Post" class="_8-yf5 " color="#262626" fill="#262626" height="22" role="img"
                        viewBox="0 0 48 48" width="22">
                        <path
                            d="M31.8 48H16.2c-6.6 0-9.6-1.6-12.1-4C1.6 41.4 0 38.4 0 31.8V16.2C0 9.6 1.6 6.6 4 4.1 6.6 1.6 9.6 0 16.2 0h15.6c6.6 0 9.6 1.6 12.1 4C46.4 6.6 48 9.6 48 16.2v15.6c0 6.6-1.6 9.6-4 12.1-2.6 2.5-5.6 4.1-12.2 4.1zM16.2 3C10 3 7.8 4.6 6.1 6.2 4.6 7.8 3 10 3 16.2v15.6c0 6.2 1.6 8.4 3.2 10.1 1.6 1.6 3.8 3.1 10 3.1h15.6c6.2 0 8.4-1.6 10.1-3.2 1.6-1.6 3.1-3.8 3.1-10V16.2c0-6.2-1.6-8.4-3.2-10.1C40.2 4.6 38 3 31.8 3H16.2z">
                        </path>
                        <path
                            d="M36.3 25.5H11.7c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5h24.6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5z">
                        </path>
                        <path
                            d="M24 37.8c-.8 0-1.5-.7-1.5-1.5V11.7c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5v24.6c0 .8-.7 1.5-1.5 1.5z">
                        </path>
                    </svg>
                </div>
                       <!-- create ends  -->

                       <!-- compass starts  -->
                <div class="compass">
                    <svg aria-label="Find People" class="_8-yf5 " color="#262626" fill="#262626" height="22" role="img"
                        viewBox="0 0 48 48" width="22">
                        <path clip-rule="evenodd"
                            d="M24 0C10.8 0 0 10.8 0 24s10.8 24 24 24 24-10.8 24-24S37.2 0 24 0zm0 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm10.2-33.2l-14.8 7c-.3.1-.6.4-.7.7l-7 14.8c-.3.6-.2 1.3.3 1.7.3.3.7.4 1.1.4.2 0 .4 0 .6-.1l14.8-7c.3-.1.6-.4.7-.7l7-14.8c.3-.6.2-1.3-.3-1.7-.4-.5-1.1-.6-1.7-.3zm-7.4 15l-5.5-5.5 10.5-5-5 10.5z"
                            fill-rule="evenodd"></path>
                    </svg>
                </div>
                         <!-- compass ends  -->

                         <!-- Heart starts   -->
                <div class="heart">
                    <svg aria-label="Activity Feed" class="_8-yf5 " color="#262626" fill="#262626" height="22"
                        role="img" viewBox="0 0 48 48" width="22">
                        <path
                            d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z">
                        </path>
                    </svg>
                </div>
                           <!-- Heart ends  -->

                           <!-- Profile image starts  -->
                <div class="profile-img">
                     <!-- Profile icon start  -->
                    <div> <span style="width:22px;height:22px; border: 1px solid #fafafa;">
                            <img style="width:22px;height:22px;border-radius: 100%;" src="./images/profile.png" alt="">
                        </span>
                    </div>
                    <!-- Profile icons ends  -->

                    <!-- Drop down menu starts  -->
                    <div class="drop-down">
                        <!-- pointer for drop down  -->
                        <div class="square" style="
                            width: 15px;
                            height: 15px;
                            background-color: #ffffff;
                            position: absolute;
                            top: -8px;
                            right: 18px;
                            z-index: 0;
                            transform: rotateZ(45deg);
                            box-shadow:-5px -5px 5px 0px rgb(0 0 0 / 10%);">
                            </div>
                            <!-- pointer ends  -->

                        <ul>
                            <!-- 1 item start  -->
                            <li>
                                <svg aria-label="Profile" class="_8-yf5 " color="#262626" fill="#262626" height="16"
                                    role="img" viewBox="0 0 32 32" width="16">
                                    <path
                                        d="M16 0C7.2 0 0 7.1 0 16c0 4.8 2.1 9.1 5.5 12l.3.3C8.5 30.6 12.1 32 16 32s7.5-1.4 10.2-3.7l.3-.3c3.4-3 5.5-7.2 5.5-12 0-8.9-7.2-16-16-16zm0 29c-2.8 0-5.3-.9-7.5-2.4.5-.9.9-1.3 1.4-1.8.7-.5 1.5-.8 2.4-.8h7.2c.9 0 1.7.3 2.4.8.5.4.9.8 1.4 1.8-2 1.5-4.5 2.4-7.3 2.4zm9.7-4.4c-.5-.9-1.1-1.5-1.9-2.1-1.2-.9-2.7-1.4-4.2-1.4h-7.2c-1.5 0-3 .5-4.2 1.4-.8.6-1.4 1.2-1.9 2.1C4.2 22.3 3 19.3 3 16 3 8.8 8.8 3 16 3s13 5.8 13 13c0 3.3-1.2 6.3-3.3 8.6zM16 5.7c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 11c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z">
                                    </path>
                                </svg>
                                <a href="#">Profile</a>
                            </li>
                            <!-- 1 ends  -->

                            <!-- 2 item starts  -->
                            <li>
                                <svg aria-label="Saved" class="_8-yf5 " color="#262626" fill="#262626" height="16"
                                    role="img" viewBox="0 0 32 32" width="16">
                                    <path
                                        d="M28.7 32c-.4 0-.8-.2-1.1-.4L16 19.9 4.4 31.6c-.4.4-1.1.6-1.6.3-.6-.2-.9-.8-.9-1.4v-29C1.8.7 2.5 0 3.3 0h25.4c.8 0 1.5.7 1.5 1.5v29c0 .6-.4 1.2-.9 1.4-.2.1-.4.1-.6.1zM4.8 3v23.9l9.4-9.4c.9-.9 2.6-.9 3.5 0l9.4 9.4V3H4.8z">
                                    </path>
                                </svg>
                                <a href="#">Saved</a>
                            </li>
                            <!-- 2 ends  -->

                            <!-- 3 item starts  -->
                            <li>
                                <svg aria-label="Settings" class="_8-yf5 " color="#262626" fill="#262626" height="16"
                                    role="img" viewBox="0 0 32 32" width="16">
                                    <path
                                        d="M31.2 13.4l-1.4-.7c-.1 0-.2-.1-.2-.2v-.2c-.3-1.1-.7-2.1-1.3-3.1v-.1l-.2-.1v-.3l.5-1.5c.2-.5 0-1.1-.4-1.5l-1.9-1.9c-.4-.4-1-.5-1.5-.4l-1.5.5H23l-.1-.1h-.1c-1-.5-2-1-3.1-1.3h-.2c-.1 0-.1-.1-.2-.2L18.6.9c-.2-.5-.7-.9-1.2-.9h-2.7c-.5 0-1 .3-1.3.8l-.7 1.4c0 .1-.1.2-.2.2h-.2c-1.1.3-2.1.7-3.1 1.3h-.1l-.1.2h-.3l-1.5-.5c-.5-.2-1.1 0-1.5.4L3.8 5.7c-.4.4-.5 1-.4 1.5l.5 1.5v.5c-.5 1-1 2-1.3 3.1v.2c0 .1-.1.1-.2.2l-1.4.7c-.6.2-1 .7-1 1.2v2.7c0 .5.3 1 .8 1.3l1.4.7c.1 0 .2.1.2.2v.2c.3 1.1.7 2.1 1.3 3.1v.1l.2.1v.3l-.5 1.5c-.2.5 0 1.1.4 1.5l1.9 1.9c.3.3.6.4 1 .4.2 0 .3 0 .5-.1l1.5-.5H9l.1.1h.1c1 .5 2 1 3.1 1.3h.2c.1 0 .1.1.2.2l.7 1.4c.2.5.7.8 1.3.8h2.7c.5 0 1-.3 1.3-.8l.7-1.4c0-.1.1-.2.2-.2h.2c1.1-.3 2.1-.7 3.1-1.3h.1l.1-.1h.3l1.5.5c.1 0 .3.1.5.1.4 0 .7-.1 1-.4l1.9-1.9c.4-.4.5-1 .4-1.5l-.5-1.5V23l.1-.1v-.1c.5-1 1-2 1.3-3.1v-.2c0-.1.1-.1.2-.2l1.4-.7c.5-.2.8-.7.8-1.3v-2.7c0-.5-.4-1-.8-1.2zM16 27.1c-6.1 0-11.1-5-11.1-11.1S9.9 4.9 16 4.9s11.1 5 11.1 11.1-5 11.1-11.1 11.1z">
                                    </path>
                                </svg>
                                <a href="#">Settings</a>
                            </li>
                            <!-- 3 ends  -->

                            <!-- 4 item starts  -->
                            <li>
                                <svg aria-label="Switch Accounts" class="_8-yf5 " color="#262626" fill="#262626"
                                    height="16" role="img" viewBox="0 0 32 32" width="16">
                                    <path
                                        d="M10.3 10.7c0-.8-.7-1.5-1.5-1.5H4.9C7.2 5.4 11.4 3 16 3c3.6 0 7 1.5 9.5 4.1.5.6 1.5.6 2.1.1.6-.6.6-1.5.1-2.1-3-3.2-7.3-5-11.7-5C10.7 0 6 2.5 3 6.7V3.5C3 2.7 2.3 2 1.5 2S0 2.7 0 3.5v7.2c0 .8.7 1.5 1.5 1.5h7.3c.8 0 1.5-.6 1.5-1.5zm20.2 9.1h-7.2c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h3.8C24.8 26.6 20.6 29 16 29c-3.6 0-7-1.5-9.5-4.1-.5-.6-1.5-.6-2.1-.1-.6.6-.6 1.5-.1 2.1 3 3.2 7.3 5 11.7 5 5.3 0 10-2.5 13-6.7v3.2c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-7.2c0-.8-.7-1.4-1.5-1.4z">
                                    </path>
                                </svg>
                                <a href="#">Switch Accounts</a>
                            </li>
                            <!-- 5 item starts  -->
                            <li style="border-top:2px solid #dbdbdb;"><a href="#">Log Out</a>
                            </li>
                            <!-- 5 ends  -->
                        </ul>
                    </div><!-- Drop down menu ends  -->  

                </div> <!-- Profile image ends  -->

            </div><!-- Icons container ends here  -->

           </div><!-- Container ends here  -->

    </nav><!-- Nav ends here -->

</body>


</html>

2) style.css

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #fafafa;
}
.nav {
  position: absolute;
  width: 100%;
  height: 54px;
  top: 0;
  background-color: #ffffff;
  border-bottom: 1px solid #dbdbdb;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.wrapper {
  position: relative;
  width: 975px;
  height: 54px;
  top: 0;
  background-color: #ffffff;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0px 0px 18px;
}
.icons {
  width: 300px;
  display: flex;
  justify-content: space-evenly;
}
.logo,
.home,
.explore,
.create,
.compass,
.heart,
.profile-img {
  cursor: pointer;
}
/* drop-down */
.drop-down {
  position: absolute;
  top: 53px;
  width: 201px;
  height: 200px;
  box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%);
  background-color: #ffffff;
  border-radius: 5px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  z-index: 1;
  right: 1%;
  visibility: hidden;
}
.drop-down ul {
  display: flex;
  flex-direction: column;
}
.drop-down ul li {
  padding: 8px 16px;
  list-style: none;
}
.drop-down ul li:hover {
  background-color: #fafafa;
}
.drop-down ul li a {
  text-decoration: none;

  color: #2b2b2b;
}

3) main.js

let togglestatus = true;
document.addEventListener("DOMContentLoaded", (event) => {
  console.log("hi");
  const p = document.querySelector(".profile-img");
  p.addEventListener("click", () => {
    if (togglestatus === false) {
      document.querySelector(".drop-down").style.visibility = "hidden";
      document
        .querySelector("#home1")
        .setAttribute(
          "d",
          "M45.5 48H30.1c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2.1-4.6-4.6-4.6s-4.6 2.1-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.6-.6 2.1 0l21.5 21.5c.3.3.4.7.4 1.1v23.5c.1.8-.6 1.5-1.4 1.5z"
        );

      togglestatus = true;
    } else if (togglestatus === true) {
      document.querySelector(".drop-down").style.visibility = "visible";
      document
        .querySelector("#home1")
        .setAttribute(
          "d",
          "M45.3 48H30c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2-4.6-4.6-4.6s-4.6 2-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.5-.6 2.1 0l21.5 21.5c.4.4.6 1.1.3 1.6 0 .1-.1.1-.1.2v22.8c.1.8-.6 1.5-1.4 1.5zm-13.8-3h12.3V23.4L24 3.6l-20 20V45h12.3V34.2c0-4.3 3.3-7.6 7.6-7.6s7.6 3.3 7.6 7.6V45z"
        );
      togglestatus = false;
    }
  });
});

Thank you 😊

TypeWriter Effect with Javascript | HTML, CSS & JS

adwait12345 — Sat, 06 Nov 2021 18:05:13 +0000

Hello Everyone ,
Today we are going to learn how to do the type write effect in vanilla JavaScript. You would be surprised how simple it is and we can build it in only in few lines of JavaScript code.

Tools used in this video: VS Code, HTML , CSS , JavaScript

Follow my video tutorial :-

Friends if you like it then also follow my youtube channel Bocadmium

How to Subscribe Bocadmium: https://www.youtube.com/channel/UC-AjAUV5Q42VV1Yv8oh6apg

Source Code :
1)index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Type writer</title>
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box-main">
        <p class="text-big">
            <span class="text-change" data-wait="3000" data-words='["Premium Education for all!","Suscribe to Bocadmium"]'></span>
        </p>
    </div>
</body>
</html>

2)style.css

.box-main{
    display: flex;
    justify-content: center;
    align-items: center;
    color: grey;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 100%;
    font-size: 30px;
}

/* cursor */
.text-change > .txt{
    border-right: 0.2rem solid #777;
    animation: blink 575ms infinite;
}
@keyframes blink {
    to{
        border-right: 0.2rem solid transparent;
    }
}

3)main.js

const TypeWriter = function(txtElement, words, wait = 3000){
    this.txtElement = txtElement;
    this.words = words;
    this.txt = '';
    this.wordIndex=0;
    this.wait = parseInt(wait,10);
    this.type();
    this.isDeleting = false;
}
// Type Method
TypeWriter.prototype.type = function(){
   // current index of word
   const current = this.wordIndex % this.words.length;
// Get full text of curent word 
const fulltxt = this.words[current];
// check if deleting
if(this.isDeleting){
//Remove a character
this.txt = fulltxt.substring(0, this.txt.length - 1);
}else{
// Add a character
this.txt = fulltxt.substring(0, this.txt.length + 1);

}

// Insert txt into Element
this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

// type speed
let typespeed = 50;

if(this.isDeleting){
    typespeed = typespeed / 2;
}

//if word is complete
if(!this.isDeleting && this.txt === fulltxt)
{
    //Make a pause at end
   typespeed = this.wait;
    // set delete is true
    this.isDeleting = true;

}else if(this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    //move to next word
this.wordIndex++;
//Pause before start typing
typespeed = 500;

}
setTimeout(() =>this.type(), typespeed)

}
// init on dom load
document.addEventListener('DOMContentLoaded', init);

//init app
function init(){
  const txtElement = document.querySelector('.text-change');
  const words = JSON.parse(txtElement.getAttribute('data-words'));
  const wait = txtElement.getAttribute('data-wait');
  //init type writer
new TypeWriter(txtElement, words, wait);
}

How to built your own Map | HTML , CSS , JavaScript & Leaflet.js in just 10 min

adwait12345 — Sat, 30 Oct 2021 12:22:59 +0000

Hi folks ,
In this todays video you will get to learn how to built your own
Dynamic map with HTML , CSS , JavaScript & Leaflet.js . It is going to be to to much interesting with only little amount of code . In this video you will also come across through usage of API and its implementation.
This is going to be completely responsive design and map is going to be completely dynamic & you can search anything by search indexing used in map and this is one of best project for junior developers !

Map will appear like blank but it not ,you have to zoom it in demo
Git hub link for demo: https://adwait12345.github.io/Responsive-maps/

Please watch this video it will be really helpful to you and try to watch complete because 1/2 is dangerous sometimes 😅

If you like it really, please do subscribe my youtube channel -🤘
https://youtube.com/channel/UC-AjAUV5Q42VV1Yv8oh6apg

Source code :
1)index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Menu</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" media="screen and (max-width:1080px)" href="phone.css" >

    <link rel="stylesheet" media="screen and (max-width:875px)" href="small.css" >
 <!--map  -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

 <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> 

</head>
<body id="buddy">
    <section>
    <nav class="nav-main">
        <div class="logo"><img src="./Bocadmium-logos_black2.png" alt=""></div>
        <ul>
           <li> <a href="#">Home</a></li>
           <li> <a href="#">Portfolio</a></li>
           <li> <a href="#">About Us</a></li>
           <li> <a href="#">Gallery</a></li>
           <li> <a href="#">Contact</a></li>
        </ul>
    </nav>

<div class="toggle">
    <button id="hit">
        <svg  viewBox="0 -2 100 80" width="40" height="30"style="
        overflow: visible; 
    "> >
            <rect id="change0"width="75" height="10" fill="#2666C1"></rect>
            <rect id="change" y="30" width="75" height="10"fill="#2666C1"></rect>
            <rect id="change1" y="60" width="75" height="10"fill="#2666C1"></rect>
</svg>  
    </button>
</div></section>
<section>
    <div id="mapid"></div>

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

2)style.css

body{
    background-color: #f1f1f1;
}

.nav-main{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:14vh;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    justify-content: center;
    align-items: center;
}
.logo img {
    width: 349px;
    height: 110px;
    position: relative;
    left: -1px;
    top: -5px;
}


.nav-main ul{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    top: -5px;
}
.nav-main ul li{
list-style: none;
line-height: 0px;
padding: 10px 55px 0 0;
}

.nav-main ul li a{
    display: block;
    height: 200%;
    padding: 0 10px;
    text-transform: uppercase;
    text-decoration: none;
    color: #111;
    font-family: arial;
    font-size: 16px;
}

/* map */

#mapid{
    position: fixed;
    height:650px;
    width: 100%;
    border-radius: 10px;
    top: 105px;
    left: 0;
}

3)phone.css

body{
    background-color: #f1f1f1;
}

.logo img {
    width: 289px;
    height: 96px;
    position: relative;
    top: -16px;
    left: -129px;



 }.logo  {
    width: 100px;
    height: 100px;
    position: absolute;


 }
 .nav-main ul {
    display: flex;
    position: absolute;
    flex-wrap: wrap;
    padding: 15px;
   justify-content: center;
   align-items: baseline;
   top: 62px;
}
.nav-main{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:20vh;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    justify-content: center;
    align-items: center;
}
/* map */
#mapid{
    position: fixed;
    height:600px;
    width: 100%;
    border-radius: 10px;
    top: 150px;
    left: 0;
}

4)small.css

.logo  {
    width: 100%;
    height: 70px;
    position: absolute;

    display: flex;
    justify-content: start;
    align-self: center;

 }

 .logo img {
    display: block;
    width: 223px;
    height: 65px;
    position: absolute;
    left: -9px;
    top: 2px;

 }

 .nav-main ul {
     height: 40vh;
     width: 200px;
     position: fixed;
     top: -1px;
   right: 10px;
     background-color: whitesmoke;
     border-radius: 10px;
     visibility: hidden;

     box-shadow: none;
 }
 .nav-main ul li {

     position: relative;
     left: 30px;
     top: 10px;

 }
 .nav-main{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:8vh;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    justify-content: center;
    align-items: center;

}
.toggle button {
    position: absolute;
    right: 10px;
    z-index: 1;
   top: 17px;
    background: transparent;
    border: none;
}
#mapid{
    position: fixed;
    height:90vh;
    width: 100%;
    /* border-radius: 0px; */
    top: 8vh;
    left: 0px;
    z-index: -1;
}

5)main.js

console.log("hi there");
let togglestatus = false;
let toggle = document.getElementById('hit');
let element =  document.querySelector('.nav-main ul')
toggle.addEventListener('click',()=>{

 if(togglestatus === false) { document.getElementById('change').setAttribute('transform','rotate(45),translate(0)')
   document.getElementById('change').setAttribute('y','0')
    document.getElementById('change1').setAttribute('transform','rotate(-45),translate(-45)')
   document.getElementById('change1').setAttribute('y','30')
     document.getElementById('change0').setAttribute('transform','rotate(-45),translate(-40)')
   document.getElementById('change0').setAttribute('y','30')
    }
    else if (togglestatus === true){
        document.getElementById('change').setAttribute('transform','rotate(0),translate(0)')
   document.getElementById('change').setAttribute('y','30')
    document.getElementById('change1').setAttribute('transform','rotate(0),translate(0)')
   document.getElementById('change1').setAttribute('y','60')
     document.getElementById('change0').setAttribute('transform','rotate(0),translate(0)')
   document.getElementById('change0').setAttribute('y','0')
    }
   if(togglestatus === false)
{ 
    element.style.visibility="visible";
    element.style.boxShadow= "0 10px 25px rgba(92, 99, 105, .2)";
    togglestatus = true;
    }
  else if(togglestatus === true){

    element.style.visibility="hidden";
    togglestatus = false;
  }
});


// API

var mymap = L.map('mapid').fitWorld();



L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=add your own key', {
    attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
    maxZoom: 20,

    tileSize: 512,
    zoomOffset: -1,

}).addTo(mymap);
  // search
L.Control.geocoder().addTo(mymap);

Simple Music Player With JavaScript in just 10 min.

adwait12345 — Wed, 27 Oct 2021 20:33:35 +0000

Hi folks in this tutorial you will learn basic DOM elements of
JavaScript like eventlistner and will provide you a very good essence of JavaScript if you watch carefully you will definitely
understand and with the use of basic functions you will learn to integrate.

If you like plz subscribe to my channel it will be great help to me.
Code cheat-is not available only for this tutorial because I don't
saved files after making tutorial 😅. Don't mind plz enjoy above video tutorial.

Thankyou😊

How to Create a Login Form with HTML and CSS in very less time

adwait12345 — Wed, 27 Oct 2021 12:17:05 +0000

Hi folks in this tutorial you will be learning about how to create
a beautiful login form with the help of HTML & CSS with snappy animations in it. You will learn basics of html & css as well and this is the best project for beginners. I recommend you to do this project if you are aspiring web developer. All the best do it !!
And feel free to ask doubts !!
Thankyou 😊
Resource Code:
1)index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form class="form">
            <h2 class="form_title">Log in</h2>
            <div class="form_div">
                <input type="text" class="form_input" placeholder=" ">
                <label class="form_label">Username/Email</label>
            </div> 
            <div class="form_div">
                <input type="password" class="form_input" placeholder=" ">
                <label class="form_label">Password</label>
            </div>
             <button class="btn">Next</button>
             <div class="already1">

                    <div> <a href="#">Forgot password</a></div><br>

                     <p>New User?<a href="#">Create accunt</a></p>

             </div>
        </form>
    </div>
</body>
</html>

2)style.css

*{
    margin: 0;
    padding: 0;
}


.container{
    display: flex;
    position: relative;
    top: 50vh;
    justify-content: center;

    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.form {
    position: absolute;
    width: 360px;
    padding: 4rem 2rem;
    border-radius: 1em;
    box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
    height: 40vh;
}

.form_title{
    font-weight: 400;
    margin-bottom: 3rem;
    color: #076086;
}
.form_div{
    position: relative;
    height: 48px;
    margin-bottom: 1.5rem;
}
.form_input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 18px;
    border: 1px solid #DADCE0;
    border-radius: 0.5rem;
    outline: none;
    padding-left: 7px;
    background: none;
    z-index: 1;
}
.form_label{
    position: absolute;
    left: 1rem;
    top: 0.85rem;
    padding: 0 .30rem;
    background-color: #fff;
    color: #80868B;
    font-size: 18px;
    transition: .3s;
    border-radius: 5px;
}
.btn{
    display: block;
    border:2px solid #076086;
    border-radius: 0.5rem;
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0.75rem 2rem;
    float: right;
    color: #076086;
    transition: .3s;
    cursor: pointer;
    background-color: #fff;
}
.btn:hover {
    font-size: 22px;
}

.form_input:focus + .form_label{
    top: -.5rem;
    left: 0.8rem;
    color: #076086;
    font-size: 14px;
    font-weight: 400;
    z-index: 10;

}
.form_input:not(:placeholder-shown).form_input:not(:focus) + .form_label {
    top: -.5rem;
    left: 0.8rem;
    font-size: 14px;
    font-weight: 400;
    z-index: 10;
}
.form_input:focus{
    border: 1.5px solid #076086;
}

.already1{
    position: relative;
    float: left;
    padding-top: 1px;
    padding-left: 10px;
    top: 15px;
    text-decoration: none;
    font-size: 14px;
}
.already1 a{
    text-decoration: none;
    font-size: 14px;
    color: #076086;
}

Responsive Navbar & Toggle menu |HTML,CSS & JavaScript only in few minutes

adwait12345 — Wed, 27 Oct 2021 10:13:42 +0000

☝ Hi folks, this is the complete tutorial for how to built you own responsive web design according to the size of devices , I have done here with navigation bar and simply understanding my tutorial you will able to built complete responsive websites, and here I also built toggle menu with help of javascript, I included it for mobile size devices. Please do checkout my video. And don't forget to give remark if it was helpful or not or what improvements should I do.
Thank-you 😊
I Recommend you to watch above tutorial rather than just copying code below ! Happy coding </>

How to Subscribe Bocadmium: https://www.youtube.com/channel/UC-AjAUV5Q42VV1Yv8oh6apg

Resource Code:
1)index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Menu</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" media="screen and (max-width:1080px)" href="phone.css" > 
    <link rel="stylesheet" media="screen and (max-width:875px)" href="small.css" > 
</head>
<body id="buddy">
    <section>
    <nav class="nav-main">
        <div class="logo"><img src="./Bocadmium-logos_black2.png" alt=""></div>
        <ul>
           <li> <a href="#">Home</a></li>
           <li> <a href="#">Portfolio</a></li>
           <li> <a href="#">About Us</a></li>
           <li> <a href="#">Gallery</a></li>
           <li> <a href="#">Contact</a></li>
        </ul>
    </nav>

<div class="toggle">
    <button id="hit">
        <svg  viewBox="0 -2 100 80" width="40" height="30"style="
        overflow: visible; 
    "> >
            <rect id="change0"width="75" height="10" fill="#2666C1"></rect>
            <rect id="change" y="30" width="75" height="10"fill="#2666C1"></rect>
            <rect id="change1" y="60" width="75" height="10"fill="#2666C1"></rect>
 </svg>  
    </button>
</div></section>
<section>
    <div id="mapid"></div>

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

2)style.css

body{
    background-color: #f1f1f1;
}

.nav-main{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:14vh;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    justify-content: center;
    align-items: center;
}
.logo img {
    width: 349px;
    height: 110px;
    position: relative;
    left: -1px;

    /* border-radius: 100%; */
    top: -5px;
}


.nav-main ul{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    top: -5px;
}
.nav-main ul li{
list-style: none;
line-height: 0px;
padding: 10px 55px 0 0;
}

.nav-main ul li a{
    display: block;
    height: 200%;
    padding: 0 10px;
    text-transform: uppercase;
    text-decoration: none;
    color: #111;
    font-family: arial;
    font-size: 16px;
}

3)phone.css

body{
    background-color: #f1f1f1;
}

.logo img {
    width: 289px;
    height: 96px;
    position: relative;
    top: -16px;
    left: -129px;



 }.logo  {
    width: 100px;
    height: 100px;
    position: absolute;



 }
 .nav-main ul {
    display: flex;
    position: absolute;
    flex-wrap: wrap;
    padding: 15px;
   justify-content: center;
   align-items: baseline;
   top: 70px;
}
.nav-main{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:20vh;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    justify-content: center;
    align-items: center;
}

4)small.css

.logo  {
    width: 100%;
    height: 70px;
    position: absolute;

    display: flex;
    justify-content: start;
    align-self: center;

 }

 .logo img {
    display: block;
    width: 223px;
    height: 65px;
    position: absolute;
    left: -9px;
    top: 2px;

 }

 .nav-main ul {
     height: 40vh;
     width: 200px;
     position: fixed;
     top: -1px;
   right: 10px;
     background-color: whitesmoke;
     border-radius: 10px;
     visibility: hidden;

     box-shadow: none;
 }
 .nav-main ul li {

     position: relative;
     left: 30px;
     top: 10px;

 }
 .nav-main{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:8vh;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    justify-content: center;
    align-items: center;

}
.toggle button {
    position: absolute;
    right: 10px;
    z-index: 1;
   top: 17px;
    background: transparent;
    border: none;
}

5)main.js

console.log("hi there");
let togglestatus = false;
let toggle = document.getElementById('hit');
let element =  document.querySelector('.nav-main ul')
toggle.addEventListener('click',()=>{

 if(togglestatus === false) { document.getElementById('change').setAttribute('transform','rotate(45),translate(0)')
   document.getElementById('change').setAttribute('y','0')
    document.getElementById('change1').setAttribute('transform','rotate(-45),translate(-45)')
   document.getElementById('change1').setAttribute('y','30')
     document.getElementById('change0').setAttribute('transform','rotate(-45),translate(-40)')
   document.getElementById('change0').setAttribute('y','30')
    }
    else if (togglestatus === true){
        document.getElementById('change').setAttribute('transform','rotate(0),translate(0)')
   document.getElementById('change').setAttribute('y','30')
    document.getElementById('change1').setAttribute('transform','rotate(0),translate(0)')
   document.getElementById('change1').setAttribute('y','60')
     document.getElementById('change0').setAttribute('transform','rotate(0),translate(0)')
   document.getElementById('change0').setAttribute('y','0')
    }
   if(togglestatus === false)
{ 
    element.style.visibility="visible";
    element.style.boxShadow= "0 10px 25px rgba(92, 99, 105, .2)";
    togglestatus = true;
    }
  else if(togglestatus === true){

    element.style.visibility="hidden";
    togglestatus = false;
  }
});