Forem: Sumukhakb

Creating an Animated and Accessible Accordion with JavaScript, HTML, and CSS

Sumukhakb — Tue, 27 Jun 2023 17:56:41 +0000

Accordions are a popular UI component used to display collapsible sections of content, allowing users to expand or collapse specific sections as needed. In this article, we will explore how to create an animated and accessible accordion using JavaScript, HTML, and CSS.

Tech Stack

The following technologies were used to create the accordion widget:

HTML
CSS
JavaScript

Features

Dynamically generates accordion sections based on data from a JSON file.
Supports keyboard navigation for improved accessibility.
Provides smooth animation effects when expanding and collapsing sections.
Customizable styles to match your design preferences.

Understanding Accessibility in Accordions

Accessibility is about designing and developing applications and websites that can be accessed and used by individuals with disabilities. When it comes to accordions, we need to consider a few key accessibility aspects:

Keyboard Accessibility: Users should be able to navigate and interact with the accordion using only the keyboard. This is particularly important for users who cannot use a mouse.
Screen Reader Compatibility: Screen reader users rely on assistive technologies to access and navigate web content. To ensure compatibility, we need to provide appropriate HTML structure and use ARIA (Accessible Rich Internet Applications) attributes to convey the accordion's state and behavior.
Focus Management: Proper focus management is crucial to indicate the currently focused element and maintain logical tab order within the accordion.
Fore more information refer, Accordion aria example

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript

Some Important links:

Repo Link:- https://github.com/Sumukha210/accordion
Check out Live Demo
Below javascript code is written using ES6 classes, if you want to see function based code, https://github.com/Sumukha210/accordion/blob/master/src/function_based.js
Animating height in css by Kevin Powel
Aria Accordion example:- https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/

Setting Up the HTML Structure:

Let's start by creating the HTML structure for our accordion. We'll have a main container element, and within it, we'll dynamically generate section elements using JavaScript.

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Accordion</title>
        <link rel="stylesheet" href="./style.css">
    </head>

    <body>

        <header>
            <h1>Accordion</h1>
        </header>

        <main>



        </main>

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

</html>

Styling the Accordion:

Next, we need to define the CSS styles to make our accordion visually appealing. Please refer to the provided CSS file style.css file for the complete styles. You can customize the styles based on your design preferences.
style.css

JavaScript Implementation:

Now let's dive into the JavaScript code and understand how the accordion functionality is implemented.

class Section {
  constructor(main) {
    this.main = main;
  }

  createSection(title, content, index) {
    const section = document.createElement("section");
    section.innerHTML = `
        <h3 class="heading">
          <button aria-expanded="false" tabindex="${index === 0 ? 0 : -1}" data-index="${index}">${title}</button>
        </h3> 
        <div class="content" role="region">
            <div><p>${content}</p></div>
        </div>
    `;

    this.main.appendChild(section);
  }
}



class Accordion extends Section {
  constructor() {
    const main = document.querySelector("main");
    super(main);

    this.main.addEventListener("click", this.handleMainClick);
    this.main.addEventListener("keydown", this.handleMainPress);
    this.getData();

  }

  async getData() {
    try {
      const data = await fetch("./data.json");
      const posts = await data.json();
      posts.forEach((post, index) => {
        this.createSection(post.title, post.content, index);
      });
    } catch (error) {
      console.log(error);
    }
  }

  handleMainPress = (e) => {
    if (e.code === "Tab") {
      const nextNumber = parseInt(e.target.dataset.index) + 1;
      this.setButtonTabIndex(nextNumber < this.main.childElementCount ? nextNumber : 0);
    }

    if ((e.code === "Enter" || e.code === "Space") && e.target.localName === "button") {
      e.preventDefault();
      this.toggleAccordion(e);
    }
  };

  handleMainClick = (e) => {
    if (e.target.localName === "button") {
      e.stopImmediatePropagation();
      this.toggleAccordion(e);
    }
  };

  closeAllAccordions() {
    const buttons = document.querySelectorAll("button");
    buttons.forEach((button) => button.setAttribute("aria-expanded", "false"));
  }

  setButtonTabIndex(nextNumber) {
    document.querySelectorAll("section button").forEach((section) => {
      section.tabIndex = -1;
      if (parseInt(section.dataset.index) === nextNumber) {
        section.tabIndex = 0;
      }
    });
  }

  toggleAccordion(event) {
    const button = event.target;

    if (button.getAttribute("aria-expanded") === "true") {
      button.setAttribute("aria-expanded", "false");
    } else {
      this.closeAllAccordions();
      button.setAttribute("aria-expanded", "true");
    }
  }


}

const accordion = new Accordion();

The Section Class:

The Section class represents a single section within the accordion. It has a createSection method that generates the HTML structure for a section, including the title and content. This method is called within the getData method of the Accordion class to populate the accordion with data from a JSON file.

The Accordion Class:

The Accordion class extends the Section class and adds additional functionality specific to the accordion component. Here's an overview of the important methods within this class:

getData: This method fetches data from a JSON file (data.json) asynchronously using the Fetch API. It retrieves an array of posts and dynamically creates sections for each post using the createSection method inherited from the Section class.
closeAllAccordions: This method closes all accordion sections by setting the aria-expanded attribute of the buttons to "false".
toggleAccordion: This method toggles the expanded/collapsed state of an accordion section when a button is clicked. It also closes other sections by calling closeAllAccordions before expanding the clicked section.
setButtonTabIndex: This method sets the tabIndex property of the buttons based on the next section's index. It allows keyboard navigation using the Tab key.
handleMainPress and handleMainClick: These event handler methods listen for keyboard and mouse click events, respectively. They call the appropriate methods to handle accordion interaction based on the user's actions.

Handling Accessibility in the Accordion Implementation

`handleMainPress` Method

The handleMainPress method is an event handler that listens for keyboard events within the accordion's main container. Its purpose is to handle keyboard navigation and expand/collapse behavior. Let's look at the key aspects of this method:

Tab Navigation: When the Tab key is pressed, the method calls the setButtonTabIndex method to manage the tabIndex attribute of the buttons within the accordion. This ensures that the focus moves in a logical order through the accordion sections.
Accordion Interaction: If the Enter key or Spacebar is pressed while a button is focused, the method prevents the default action (e.preventDefault()) to avoid unintended browser behavior. It then calls the toggleAccordion method to expand or collapse the section associated with the clicked button.

`toggleAccordion` Method

The toggleAccordion method is responsible for expanding or collapsing an accordion section. Let's delve into its functionality:

Button State Management: The method toggles the aria-expanded attribute of the clicked button to indicate the expanded or collapsed state of the section. When a button is expanded, it sets aria-expanded="true", and when it's collapsed, it sets aria-expanded="false".
Closing Other Accordions: To ensure that only one section is open at a time, the method calls the closeAllAccordions method to close all other sections before expanding the clicked section. This enhances usability and prevents users from getting lost within the accordion.

Animating accordion using css

Here i am adding transition to grid-template-rows. By default, it will be 0fr(don't set in pixels), once the user clicks on button it will be 1fr.

main section .content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s;
}

main section:has(button[aria-expanded="true"]) button {
  outline-color: lightcyan;
  background-color: lightskyblue;
}

main section:has(button[aria-expanded="true"]) .content {
  grid-template-rows: 1fr;
}

main section:has(button[aria-expanded="true"]) .heading::after {
  rotate: 0deg;
}

By implementing proper accessibility features in accordions, we can make them usable for all users, regardless of their abilities or the assistive technologies they rely on. If you have any queries, let me know in the comments

How to improve performance of Next.js website?

Sumukhakb — Sun, 26 Jun 2022 12:38:30 +0000

In this post, I'll teach you how to boost the performance of your Next.js website. I'm going to utilize the Lighthouse Chrome add-on to measure performance (now by default it is available). There may also be some simple tips included. Depending upon the type of website, always make sure your score is more than 80. I utilized some methods listed below to improve the performance of my website.

Repo(This is my personal portfolio website) :- https://github.com/Sumukha210/new-portfolio-website

1) Always use Lighthouse in private mode.

It is a basic strategy, but it is incredibly successful. Because when you run your lighthouse, the performance may suffer owing to external interference such as chrome extensions, scripts, and so on. Also, be certain that you are running a production build. To run the production build, use yarn run build.

2) Lazy loading.

I utilized a smoke effect on my website by copying and pasting the codepen demo https://codepen.io/Irehan/pen/YgyozL. It works great on the desktop, however it does not operate properly on touch devices. Also, because it uses WebGL, there is a lot of code; to avoid this, I lazily loaded the code. Similar to this

const lazyLoadSmokeEffect = async (canvas: any) => {
    const { smokeSimulation } = await import("./SmokeEffect");
    smokeSimulation(canvas); // This functions contains the code
  };

  useIsomorphicLayoutEffect(() => {
    if (canvasRef?.current && window.innerWidth >= 1200) {
      setTimeout(() => {
        lazyLoadSmokeEffect(canvasRef.current);
      }, 2000);
    }
  }, []);

3) Intersection observer to lazily load the Component.

Because my site has a contact form, I used reCAPTCHA to avoid spam (check my article on how to implement Google reCAPTCHA here: https://dev.to/sumukhakb210/integrating-recaptcha-with-nextjs-4ig6), but when I checked the lighthouse tab, it generated scripts that weighed about 143kb. As a result, I employed Next.js Dynamic imports. I also used the useOnScreen custom react hook, which loads the component lazily when the user scrolls to a specific point.

Here, I implemented the Next.js Dynamic imports for contact section.

import React, { useRef } from "react";
import About from "@/modules/about/About";
import Hero from "@/modules/hero/Hero";
import Layout from "@/modules/Layout";
import Skills from "@/modules/skills/Skills";
import dynamic from "next/dynamic";
import { useOnScreen } from "@/utils/useOnScreen";
import SEO from "@/utils/SEO";
import Project from "@/modules/projects/Project";

const DynamicContactUsComponent = dynamic(
  () => import("@/modules/contact/Contact"),
  {
    loading: () => (
      <p className="loadingText subtitle-4">
        Contact us Loading, please wait...
      </p>
    ),
  }
);

const MainPage = () => {
  const bodyHeight = 800;
  const ContactRef = useRef(null);
  const isContactIntersecting = useOnScreen(ContactRef, `${bodyHeight / 2}px`);

  return (
    <Layout>
      <SEO />
      <Hero />
      <About />
      <Skills />
      <Project />

      <div ref={ContactRef} id="contactSection">
        {isContactIntersecting && <DynamicContactUsComponent />}
      </div>
    </Layout>
  );
};

export default MainPage;

useOnScreen Custom Hook,

import { MutableRefObject, useState } from "react";
import useIsomorphicLayoutEffect from "./useIsomorphicEffect";

export const useOnScreen = (
  ref: MutableRefObject<null>,
  rootMargin: string = "0px"
): boolean => {
  const [isIntersecting, setIntersecting] = useState<boolean>(false);
  useIsomorphicLayoutEffect(() => {
    const observer = new IntersectionObserver(entries => {
      console.log("entries", entries);
      entries.forEach(
        entry => {
          if (entry.isIntersecting) {
            setIntersecting(true);
          }
        },
        { rootMargin }
      );
    });

    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      ref.current && observer.unobserve(ref.current);
    };
  }, []);

  return isIntersecting;
};

Also, don't overdo it because using dynamic for more components increases the amount of requests browser sent to the server.

4) Using the Babel plugin for styled components to reduce delays while applying styles.

In .babelrc file,

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "styled-components"
        ]
    ]
}

In _document.tsx

import Document, { DocumentContext, DocumentInitialProps } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: [
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>,
        ],
      };
    } finally {
      sheet.seal();
    }
  }
}

These are some quick tips to help you enhance your performance:-

To display images, use the next/image component.
Using the font optimization technique of Next.js

// pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Thank you for reading my article. If you have any techniques for improving performance, please feel free to share them in the comments. ✌🖐👍

Integrating reCAPTCHA with Next.js

Sumukhakb — Tue, 21 Jun 2022 20:18:05 +0000

In this post, I will demonstrate how to incorporate reCAPTCHA into Next.js applications.

But, before we get started, let's first grasp how reCAPTCHA works. Assume you built a portfolio website with a contact us form, but instead of receiving actual messages, you received a lot of spam; those spam messages were generated by bots; to block bots, we will utilize reCAPTCHA.

Let's put it into action now. First, you go to this website and fill out the form with the relevant information (shown below).

After submitting the form, you will be given a site key (which the browser can see) and a secret key; add those into .env.local as seen below.

We will now begin integrating reCAPTCHA with Next.js 12

Project Repo(This is personal portfolio website):- https://github.com/Sumukha210/new-portfolio-website

Installing Next.js along with other dependencies,

npx create-next-app@latest --typescript

or

yarn create next-app --typescript

then add these packages,

yarn add  react-google-recaptcha-v3

Add this code to _app.tsx(or .jsx) file. Here we are wrapping our Component with GoogleRecaptchaProvider.

import type { AppProps } from "next/app";
import "@/styles/styles.scss";
import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <GoogleReCaptchaProvider
      reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTHA_SITE_KEY}
      scriptProps={{
        async: false, // optional, default to false,
        defer: true, // optional, default to false
        appendTo: "body", // optional, default to "head", can be "head" or "body",
        nonce: undefined,
      }}>
      <Component {...pageProps} />;
    </GoogleReCaptchaProvider>
  );
}

export default MyApp;

Now, add this code onto the page where you've placed the form. Here, I first imported the useGoogleRecaptcha hook, and once the form is verified, I check if reCAPTCHA is loaded or not, and if it is, I return from the function. If there is no error, I send the token along with other data to the server.

import React, { useState } from "react";
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
import { Wrapper, SubmitBtn } from "./RightSectionStyles";
import axios from "axios";
import { responseTypes } from "@/utils/types";

const RightSection = () => {
  const [isBtnDisabled, setBtnDisabled] = useState(false);
  const { executeRecaptcha } = useGoogleReCaptcha();
  const [response, setResponse] = useState<responseTypes | null>(null);

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    const name = e.target[0];
    const email = e.target[1];
    const message = e.target[2];

    [name, email, message].forEach(item => {
      if (item.validity.valid === false && item.validity.valid) {
        return;
      }
    });

    setBtnDisabled(true);

    if (!executeRecaptcha) {
      return;
    }

    try {
      const token = await executeRecaptcha();
      if (!token) {
        setResponse({ message: "Failed to Send!!!", status: "Failed" });
        return;
      }

      const result = await axios.post("/api/contactUs", {
        token,
        name: name.value,
        email: email.value,
        message: message.value,
      });
      console.log(result);

      if (result.data) {
        setResponse({
          message: result.data.message,
          status: result.data.status,
        });
      }
      setBtnDisabled(false);
    } catch (error) {
      console.log(error);
      setResponse({ message: "Failed to Send!!!", status: "Failed" });
      setBtnDisabled(false);
    }
  };

  return (
    <Wrapper>
      <form onSubmit={handleSubmit}>
        <div className="flex">
          <section>
            <input
              type="text"
              placeholder="Enter your name"
              name="name"
              required
            />
          </section>

          <section>
            <input
              type="email"
              placeholder="Enter your email"
              name="email"
              required
            />
          </section>
        </div>

        <section>
          <textarea
            name="message"
            placeholder="Enter your message"
            cols={30}
            rows={10}></textarea>
        </section>

        <div className="responseText">
          <h3
            className="subtitle-4"
            style={{
              color: response?.status === "Failed" ? "red" : "#24ff72",
            }}>
            {response?.message}
          </h3>
        </div>

        <div className="btnContainer">
          <SubmitBtn disabled={isBtnDisabled} type="submit" marginTop="2rem">
            <span>Submit{isBtnDisabled && "ting"}</span>
            {isBtnDisabled && <span className="loader"></span>}
          </SubmitBtn>
        </div>
      </form>
    </Wrapper>
  );
};

export default RightSection;

In /pages/api, create a new file(endpoint) contactUs.ts and add this code.

import { responseTypes } from "@/utils/types";
import axios from "axios";
import type { NextApiRequest, NextApiResponse } from "next";

const verifyRecaptcha = async token => {
  const secretKey = process.env.RECAPTHA_SECRET_KEY;

  var verificationUrl =
    "https://www.google.com/recaptcha/api/siteverify?secret=" +
    secretKey +
    "&response=" +
    token;

  return await axios.post(verificationUrl);
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<responseTypes>
) {
  try {
    const name = req.body.name;
    const email = req.body.email;
    const message = req.body.message;
    const token = req.body.token;

    // Recaptcha response
    const response = await verifyRecaptcha(token);

    // Checking if the reponse sent by reCaptcha success or not and if the score is above 0.5
    // In ReCaptcha v3, a score sent which tells if the data sent from front end is from Human or from Bots. If score above 0.5 then it is human otherwise it is bot
    // For more info check, https://developers.google.com/recaptcha/docs/v3
    // ReCaptcha v3 response, {
    //     "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
    //     "score": number             // the score for this request (0.0 - 1.0)
    //     "action": string            // the action name for this request (important to verify)
    //     "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
    //     "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
    //     "error-codes": [...]        // optional
    //   }
    if (response.data.success && response.data.score >= 0.5) {
      return res
        .status(200)
        .json({ status: "Success", message: "Thank you for contacting me." });
    } else {
      return res.json({
        status: "Failed",
        message: "Something went wrong, please try again!!!",
      });
    }
  } catch (error) {
    console.log("ERRRRROr", error);
    res.json({
      status: "Failed",
      message: "Something went wrong, please try again!!!",
    });
  }
}

Using styled components with next.js 12 and typescript in 2022

Sumukhakb — Mon, 07 Mar 2022 17:42:55 +0000

In this article, I will show how you can use styled-components in next.js 12 along with typescript.

Benefits:-

We can use normal css syntax, instead of using css-in-js method. In order to set background color, we write background-color:red in plain css instead of using css-in-js method(annoying) backgroundColor="red".
If you are a fan of sass(scss) like me, we can use sass like syntax inside the component.
Documentation is also pretty good.
Output size is small.

Project Repo:- https://github.com/Sumukha210/tesla-clone

Installing Next.js along with other dependencies,

npx create-next-app@latest --typescript

or

yarn create next-app --typescript

then add these packages,

yarn add styled-components

yarn add -D @types/styled-components

Configuring Styled components for Next.js

You can skip this part if you are using plain React.js

If you are Next.js 12, then you can just use this code, in `next.config.js`,

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  compiler: {
    styledComponents: true,
  },
};

module.exports = nextConfig;

In `_document.tsx` file(inside pages folder), use this method if you are not using Next.js 12

import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

Now we can get started to use styled components along with next js and typescript

Creating a Button component


const MyCustomBtn = () => <Button darkBtn={false}>Custom Btn Button</Button>;

// Creating Simple button with props, checkout button component in elements folder for more advanced stuff about button
type buttonProps = {
  active?: boolean; // making this props optional
  darkBtn: boolean;
};

const Button = styled.button<buttonProps>`
  background-color: ${({ darkBtn }) =>
    darkBtn
      ? "black"
      : "cyan"}; // i am destructing here, instead of using as prop.darkBtn
  padding: 1rem 2rem;
  font-size: 1.2rem;
  border: none;

  &:hover {
    background: rebeccapurple;
  }


  /* if you want to place multiple lines of css, you can import {css}  */
  ${({ active }) =>
    active &&
    css`
      border: 2px solid gold;
      background-color: darkcyan;
      color: white;
    `}
`;

Creating a Container Component, using scss like syntax inside the component,


const MyContainer: React.FC = ({ children }) => (
  <Container>
    <div className="content">
      <ul>
        <li>First list</li>
        <li>second list</li>
        <li>third list</li>
        <li>fourth list</li>
      </ul>
      {children}
    </div>
  </Container>
);

const Container = styled.div`
  width: 80%;

  .content {
    padding: 2rem;

    ul {
      margin-bottom: 5rem;
      li {
        &:not(:last-child) {
          margin-bottom: 0.5rem;
        }
      }
    }
  }
`;

Final Code:-

import React from "react";
import styled, { css } from "styled-components";

const StyledComponents = () => {
  return (
    <MyContainer>
      <MyCustomBtn />
    </MyContainer>
  );
};

export default StyledComponents;

const MyCustomBtn = () => <Button darkBtn={false}>Custom Btn Button</Button>;

// Creating Simple button with props, checkout button component in elements folder for more advanced stuff about button
type buttonProps = {
  active?: boolean; // making this props optional
  darkBtn: boolean;
};

const Button = styled.button<buttonProps>`
  background-color: ${({ darkBtn }) =>
    darkBtn
      ? "black"
      : "cyan"}; // i am destructing here, instead of using as prop.darkBtn
  padding: 1rem 2rem;
  font-size: 1.2rem;
  border: none;

  &:hover {
    background: rebeccapurple;
  }

  /* if you want to place multiple lines of css, you can import {css}  */
  ${({ active }) =>
    active &&
    css`
      border: 2px solid gold;
      background-color: darkcyan;
      color: white;
    `}
`;

const MyContainer: React.FC = ({ children }) => (
  <Container>
    <div className="content">
      <ul>
        <li>First list</li>
        <li>second list</li>
        <li>third list</li>
        <li>fourth list</li>
      </ul>
      {children}
    </div>
  </Container>
);

const Container = styled.div`
  width: 80%;

  .content {
    padding: 2rem;

    ul {
      margin-bottom: 5rem;
      li {
        &:not(:last-child) {
          margin-bottom: 0.5rem;
        }
      }
    }
  }
`;

Final output:-

Navbar scroll animation based on scroll direction(toggle navbar when user scroll up or down)

Sumukhakb — Sat, 27 Nov 2021 16:28:35 +0000

In this article, I will show you, how you can create navbar which shows when you scroll up.

Live demo link:- https://sumukha210.github.io/Toggle-navbar/
Github Repo link:- https://github.com/Sumukha210/Toggle-navbar

First you need to create 3 pages,

touch index.html style.scss app.js

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 navbar</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <nav class="nav">
      <div class="nav__container">
        <div class="nav__logo">Navbar</div>
        <ul class="nav__menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Blogs</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>
      </div>
    </nav>

    <section>lorem3000 (and then press enter) </section>

    <script src="./app.js"></script>
  </body>
</html>

style.scss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav {
  background-color: rgb(9, 190, 190);
  box-shadow: 0px 0px 5px silver;
  padding: 10px 0px;
  position: fixed;
  width: 100vw;
  top: -10%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease-in;

  &.active__menu {
    top: 0%;
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
  }

  &__container {
    width: 90%;
    margin: auto;
    @extend .flex;
  }

  &__logo {
    font-size: 2rem;
    font-weight: bold;
  }

  &__menu {
    @extend .flex;
    list-style: none;

    li {
      a {
        color: black;
        text-decoration: none;
        margin-right: 10px;
        font-weight: 600;
      }
    }
  }
}

section {
  width: 90%;
  margin: 8rem auto 2rem auto;
}

app.js

// Grab nav element from the dom
const nav = document.querySelector("nav");

// Creating variales
let scroll_position = 30;
let scroll_direction;

// Show Navbar when dom loads
nav.classList.add("active__menu");

// Create an scroll event listener
window.addEventListener("scroll", () => {
  scroll_direction =
    document.body.getBoundingClientRect().top > scroll_position ? "up" : "down";
  scroll_position = document.body.getBoundingClientRect().top;

  if (scroll_direction === "up") {
    // If you are scrolling up, then add active menu class
    nav.classList.add("active__menu");
  } else {
    // If you Scrolling down, remove the active menu class
    nav.classList.remove("active__menu");
  }
});

//Create Variables outside the scroll event listener

Forem: Sumukhakb

Creating an Animated and Accessible Accordion with JavaScript, HTML, and CSS

Tech Stack

Features

Understanding Accessibility in Accordions

Prerequisites:

Some Important links:

Setting Up the HTML Structure:

Styling the Accordion:

JavaScript Implementation:

The Section Class:

The Accordion Class:

Handling Accessibility in the Accordion Implementation

handleMainPress Method

toggleAccordion Method

Animating accordion using css

How to improve performance of Next.js website?

1) Always use Lighthouse in private mode.

2) Lazy loading.

3) Intersection observer to lazily load the Component.

4) Using the Babel plugin for styled components to reduce delays while applying styles.

These are some quick tips to help you enhance your performance:-

Integrating reCAPTCHA with Next.js

We will now begin integrating reCAPTCHA with Next.js 12

Project Repo(This is personal portfolio website):- https://github.com/Sumukha210/new-portfolio-website

Installing Next.js along with other dependencies,

or

Using styled components with next.js 12 and typescript in 2022

Benefits:-

Project Repo:- https://github.com/Sumukha210/tesla-clone

Installing Next.js along with other dependencies,

or

Configuring Styled components for Next.js

If you are Next.js 12, then you can just use this code, in next.config.js,

In _document.tsx file(inside pages folder), use this method if you are not using Next.js 12

Now we can get started to use styled components along with next js and typescript

Creating a Button component

Creating a Container Component, using scss like syntax inside the component,

Final Code:-

Final output:-

Navbar scroll animation based on scroll direction(toggle navbar when user scroll up or down)

index.html

style.scss

app.js

`handleMainPress` Method

`toggleAccordion` Method

If you are Next.js 12, then you can just use this code, in `next.config.js`,

In `_document.tsx` file(inside pages folder), use this method if you are not using Next.js 12