DEV Community: gaganjot singh

Character Cursor Effect

gaganjot singh — Sat, 07 Dec 2024 07:40:58 +0000

Check out this Pen I made!

Every Git Command You Need to Know

gaganjot singh — Sat, 07 Dec 2024 05:40:27 +0000

Git is a powerful tool for version control, enabling developers to manage their code with precision and collaboration. Whether you’re a beginner or a seasoned professional, mastering Git commands is essential. Here’s a comprehensive guide to every Git command you need.

1. Getting Started with Git

Before you begin, set up your Git repository:

git init

Initialize a new Git repository in your project directory.
git clone <repository_url>

Clone an existing repository to your local machine.

2. Tracking Changes

Git helps you track changes effectively:

git add <file>

Stage a specific file for the next commit.
git add .

Stage all changes in the current directory.
git commit -m "Your message"

Save a snapshot of the staged changes with a descriptive message.
git status

Check the status of your working directory and staging area.
git log

View the commit history. Add --oneline for a concise format.

3. Branching and Merging

Work on features or fixes without affecting the main codebase:

git branch

List all branches in your repository.
git branch <branch_name>

Create a new branch.
git checkout <branch_name>

Switch to the specified branch (or use git switch).
git merge <branch_name>

Merge the changes from one branch into the current branch.
git branch -d <branch_name>

Delete a branch safely. Use -D to force deletion.

4. Stashing Changes

Save your work temporarily without committing:

git stash

Stash uncommitted changes.
git stash pop

Apply stashed changes and remove them from the stash list.
git stash list

View all stashed changes.
git stash drop

Delete a specific stash.

5. Collaborating with Remote Repositories

Work with teammates using remote repositories:

git remote add <name> <url>

Connect your local repository to a remote repository.
git pull

Fetch and merge changes from a remote repository.
git push

Push commits to the remote repository. Use -u origin <branch_name> to set up tracking.
git fetch

Retrieve changes from a remote repository without merging.

6. Managing Tags

Tags are great for marking releases or milestones:

git tag <tag_name>

Create a lightweight tag for the current commit.
git push origin <tag_name>

Push your tag to the remote repository.
git tag -d <tag_name>

Delete a tag locally.

7. Undoing Mistakes

Mistakes happen! Git lets you undo them gracefully:

git checkout -- <file>

Discard changes to a file.
git reset <file>

Unstage a file but keep its changes in the working directory.
git reset --soft HEAD~1

Undo the last commit, keeping changes staged.
git reset --hard HEAD~1

Undo the last commit and discard changes.
git revert <commit_hash>

Create a new commit that undoes a specific commit.

8. Viewing and Comparing Changes

Easily track differences in your project:

git diff

Show unstaged changes in your working directory.
git diff --staged

Display changes that are staged for the next commit.
git diff <branch1> <branch2>

Compare two branches.

9. Advanced Commands

Take your Git knowledge to the next level:

git blame <file>

Show who made changes to each line in a file.
git reflog

View a log of all references, including deleted ones.
git clean -f

Remove untracked files.
git bisect

Use binary search to find a commit that introduced a bug.

10. Configuring Git

Personalize Git to your needs:

git config --global user.name "Your Name"

Set your global username.
git config --global user.email "you@example.com"

Configure your global email address.
git config --list

View all your Git configuration settings.

Conclusion

Git is your ultimate tool for managing code, tracking changes, and collaborating with others. From basic commands to advanced features, this guide equips you with everything you need. Bookmark this cheat sheet and refer back anytime.

Happy coding! 🚀

Creating a Dog Age Calculator with ChatGPT

gaganjot singh — Fri, 06 Dec 2024 05:26:31 +0000

Introduction
Why a Dog Age Calculator?
How ChatGPT Helped
Step 1: HTML Structure
Step 2: CSS Styling
Step 3: JavaScript Logic
Is AI a Threat to Programmers?
- The Pros of AI for Programmers
- The Challenges of AI for Programmers
Related Tools
Final Thoughts

Introduction

As a programmer, I enjoy experimenting with fun projects. Recently, I decided to create a Dog Age Calculator—a tool to convert human years into dog years. Instead of starting from scratch, I teamed up with ChatGPT to speed up the process.

ChatGPT acted as a powerful coding assistant, helping me build a functional base that I could customize and refine. In this post, I’ll show you how we created a Dog Age Calculator, complete with separate files for HTML, CSS, and JavaScript.

Why a Dog Age Calculator?

The concept of “dog years” fascinates many dog owners, who wonder how old their pets are in human terms. This project is:

Simple yet practical, with input validation and result display.
Beginner-friendly, perfect for honing your JavaScript skills.
Fun and relatable, especially for pet lovers.

Let’s get started!

How ChatGPT Helped

To save time, I asked ChatGPT:

"Write a Dog Age Calculator using HTML, CSS, and JavaScript."

ChatGPT generated a solid codebase in seconds, which I personalized to add my own style and improvements. Below is the final version of the project.

Check out this Pen I made!

Step 1: HTML Structure

The HTML provides the structure of the calculator.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dog Age Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator-container">
        <h1>Dog Age Calculator</h1>
        <p>Enter your dog's age in human years:</p>
        <input type="number" id="humanYears" placeholder="Enter human years" min="0">
        <button onclick="calculateDogAge()">Calculate</button>
        <p class="result" id="result"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling

The CSS makes the calculator visually appealing.

/* styles.css */

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

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #ffafbd, #ffc3a0);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.calculator-container {
    background: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 300px;
}

.calculator-container h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #ff6f61;
}

.calculator-container input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.calculator-container button {
    background: #ff6f61;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.calculator-container button:hover {
    background: #e55a4e;
}

.result {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

Step 3: JavaScript Logic

The JavaScript handles the calculator’s functionality.

// script.js

function calculateDogAge() {
    const humanYears = document.getElementById('humanYears').value;
    let dogYears;

    if (humanYears === "" || isNaN(humanYears) || humanYears <= 0) {
        dogYears = "Please enter a valid positive number!";
    } else if (humanYears <= 2) {
        dogYears = humanYears * 10.5;
    } else {
        dogYears = (2 * 10.5) + ((humanYears - 2) * 4);
    }

    document.getElementById('result').innerText = 
        typeof dogYears === "number"
        ? `Your dog's age in dog years is: ${dogYears.toFixed(1)}`
        : dogYears;
}

Is AI a Threat to Programmers?

The Pros of AI for Programmers

Speed and Efficiency: AI helps with repetitive tasks and boilerplate code, saving hours.
Learning Aid: It’s a fantastic tool for beginners to learn programming concepts.
Focus on Creativity: AI handles basic tasks, allowing developers to concentrate on solving complex problems.

The Challenges of AI for Programmers

Over-Reliance: There’s a risk of becoming too dependent on AI, which could hinder learning.
Job Concerns: Simple coding jobs may get automated, pushing programmers to specialize in advanced areas.
Code Quality: AI-generated code isn’t always optimized or error-free. A skilled developer is still needed to review and improve it.

Bottom Line: AI won’t replace programmers anytime soon, but it’s essential to adapt and upskill. Think of AI as a tool, not a replacement. Stay curious, keep learning, and embrace innovation!

Related Tools

Explore other dog-related calculators:

Final Thoughts

This project highlights how tools like ChatGPT can complement a programmer’s workflow. It’s like having a coding buddy that handles the basics while you focus on creativity.

While AI is powerful, remember that it’s just a tool. Your unique problem-solving skills and creativity will always make you indispensable.

Happy coding, and don’t forget to give your dog an extra pat today! 🐶

10 Best Javascript Rich Text Editors

gaganjot singh — Sun, 02 Oct 2022 15:42:29 +0000

This post is taken from 25+ Best Javascript Rich Text Editors, so be sure to check it out for more content

This is a list of awesome WYSIWYG editors.

If you have any questions or suggestions, please leave them in the comments section!

Quill Rich Text Editor

Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by Slab.

To get started, check out https://quilljs.com/ for documentation, guides, and live demos!

GITHUB

ContentTools

A JS library for building WYSIWYG editors for HTML content.

GITHUB

editor.js

GITHUB

etherpad-lite

Etherpad is a real-time collaborative editor scalable to thousands of simultaneous real time users. It provides full data export capabilities, and runs on your server, under your control.

GITHUB

jodit

An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.

GITHUB

medium-editor

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

GITHUB

Medium.js

A tiny JavaScript library for making contenteditable beautiful (Like Medium's editor)

GITHUB

milkdown

baby_bottle Plugin driven WYSIWYG markdown editor framework.

GITHUB

mobiledoc-kit

A toolkit for building WYSIWYG editors with Mobiledoc

GITHUB

tiptap

The headless editor framework for web artisans.

GITHUB

More Rich Text Editors example

25+ Best Javascript Rich Text Editors (WYSIWYG)

10 Best CSS Animation Libraries For Designers and developer

gaganjot singh — Mon, 29 Aug 2022 12:11:29 +0000

1. animate.style

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

2. tilomitra.github.io/infinite

Useful infinite CSS animations that you can drop into your project.

3. jonsuh.com/hamburgers

Tasty CSS-animated hamburgers

4. animxyz.com

AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.

5. animista.net

6. animation.kaustubhmenon.com

7. github.com/oliver-gomes/csswand

Easy copy-paste beautiful CSS. That can be easily customized further at your own choice.

8. github.com/yesiamrocks/cssanimation.io

In modern web concept, cssanimation.io is the best controlling animation library for CSS

9. kristofferandreasen.github.io/wickedCSS

A library for CSS3 animations.

10. ianlunn.github.io/Hover

A collection of CSS3 powered hover effects to be applied to links,
buttons, logos, SVG, featured images and so on

Visit my Blog for more articles like this

Free online code editor and code snippets

gaganjot singh — Mon, 05 Apr 2021 11:37:25 +0000

1. CodePen
CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.

2. PlayCode
Run javascript or typescript code online and see the result as you type. Best for practice code and developing complex algorithms.

3. JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

4. stackblitz
Code the Future.
In Your Browser.
Create, edit & deploy fullstack apps — in just one click.

5. JS Bin

6. CodeSandbox

7. codeinterview .io
CodeInterview lets you conduct hassle-free technical interviews in a real-time shared coding environment.

8. godbolt .org

9. wandbox .org

10. ideone .com

11. ide judge0 com

Inspiring Codepen Examples You can Also read

1. 20 CSS Toggle Switches Example

2. 25+ CSS BUTTONS

3. 10+ The Best javascript games code

4. 10+ CSS Digital Clock Animation

5 Many More Front End Web Developer Eaxmple

20 CSS Toggle Switches Example

gaganjot singh — Wed, 17 Feb 2021 10:49:33 +0000

If You Like This Article then check Out more Examples
50+ CSS Toggle Switches

 1.
  Title:- Pure CSS Toggles
  Author:- Rafael González
  Made With:- HTML CSS JAVASCRIPT

Getting fun with some animations & transitions :)

  2.
  Title:- CSS Theme Switcher
  Author:- Michelle Barker
  Made With:- HTML CSS

  3.     
  Title:- Custom Checkbox / Toggle Switch
  Author:- thelaazyguy
  Made With:- HTML CSS

Collection of four toggle switches made with html and css without a single line of javascript. Two of the switches are made with the help of svg also.

   4.
   Title:- Light Bulb Toggle Switch
   Author:- Jon Kantner
   Made With:- HTML CSS

A custom checkbox that features a light bulb’s on/off state in the fashion of a toggle switch

Update 7/28/18: Responsiveness added

   5.
   Title:- Toggle switch with checkbox:checked
   Author:- Jeroen Franse
   Made With:- HTML CSS

   6.
   Title:- Simple CSS Switch / Toggle
   Author:- Aaron Iker
   Made With:- HTML CSS

From https://dribbble.com/shots/2326459-Adobe-Toggle-Switch

   7.
   Title:- Gooey toggle switch
   Author:- Vincent Durand
   Made With:- HTML CSS

Gooey checkbox CSS only

Inspired by : https://dribbble.com/shots/2236296-Feelastic-Switch

    8.
    Title:- Toggles
    Author:- Olivia Ng
    Made With:- HTML CSS JAVSCRIPT

Do you want your toggle fancy or functional? Yes.

      9.
      Title:- A bunch of funky CSS3 Toggle Buttons
      Author:- Ashley Watson-Nolan
      Made With:- HTML CSS

     10
     Title:- Checkbox CSS Toggle – Day / Night Mode
     Author:- Ahmad Emran
     Made With:- HTML CSS

Checkbox CSS Toggle - Day / Night Mode

       10.
       Title:- Big Fat Toggle Switch
       Author:- Andrew Creech
       Made With:- HTML CSS

       11.
       Title:- A Confusing Toggle Button
       Author:- Himalaya Singh
       Made With:- HTML CSS

A Confusing Toggle Button / Toggle Switch Using HTML And CSS

   12.
   Title:- 3D toggle – click it!
   Author:- Ana Tudor
   Made With:- HTML CSS

   13.
    Title:- Sleek sliding toggle checkbox
    Author:- Comehope
    Made With:- HTML CSS

Watch interactive screencast on Scrimba: https://scrimba.com/p/pEgDAM/cPvMzTg

      14.
       Title:- CSS Switch – Day and Night
       Author:- Angela Velasquez
       Made With:- HTML CSS

Having some fun with css.

   15.
   Title:- Pure CSS dark mode toggle switcher
   Author:- Demilade Olaleye
   Made With:- HTML CSS

   16.
   Title:- Custom Toggle Switch Inspiration (Pure CSS)
   Author:- Aditya Bhandari
   Made With:- HTML CSS

A simple toggle in pure CSS3 with a clean HTML markup which includes a label. Leave the label blank if you want do not want any text.

     17.
     Title:- Accessible Custom Toggle Switch
     Author:- Homer Gaines
     Made With:- HTML CSS

This pen shows how to markup and style a semantic checkbox to look and behave like a toggle switch.

    18.
    Title:- Flat Toggle Switch
    Author:- Felix De Montis
    Made With:- HTML CSS

   19.
   Title:- Cookie switch (pure CSS, no SVG)
   Author:- Angela Galliat
   Made With:- HTML CSS

   20.
   Title:- BB-8 Toggle Switch|Pure CSS
   Author:- Claudia Alphonse
   Made With:- HTML CSS JAVASCRIPT

bb-8 toggle switch that changes background color

If You Like This Article then check Out more Examples
50+ CSS Toggle Switches

10 CSS Tabs

gaganjot singh — Fri, 22 Jan 2021 11:10:58 +0000

If You Like This Article then check Out more Examples
30+ CSS and HTML Tabs Example
https://gscode.in/html-tabs

1. Just CSS, no JS!
Author : wallaceerick

2.
Author : mildrenben

3. A lot of CSS tabs need either the tab content or labels to be position absoluted, or sacrifice the selected state on the tabs.

This uses flexbox and order to have both.

It also allows you to drop down to an accordion when on mobile.

Author : mildrenben

Make tabs without javascript.

More documentation here (in spanish) http://flkt.mx/pitaya/componentes.html#pestanias

Author : flkt-crnpio

This is a material inspired tabs modal that gives the user a smooth transition between each panel. The navigation features the iconic Material Design Ripple effect, along with a border that slides around to give the user a hint of which tab is active.

Author :andytran

6.
Author : _massimo

7.
Author : tutsplus

8.
Author : nenadkaevik

9.
Author : aaroniker

From: https://dribbble.com/shots/2561589-Tabs

10.
Author : Kseso

If You Like This Article then check Out more Examples
30+ CSS and HTML Tabs Example
https://gscode.in/html-tabs

10+ CSS Text Glitch Effect

gaganjot singh — Wed, 23 Dec 2020 13:45:48 +0000

If You Like This Article then check Out more Examples
18 CSS Text Glitch Effect
https://gscode.in/css-text-glitch-effect/

1.
Title:- Pure CSS Glitch Effect
Author:-Felix Rilling

2.
Title:- Glitch hover effect CSS
Author:-Kevin Konrad Henriquez

A Glitch hover effect using only css. From https://ihatetomatoes.net/how-to-create-css-glitch-effect/

3.
Title:- Pure CSS Glitch Experiment (Twitch Intro WIP)
Author:-Tee Diang

4.
Title:- CSS Glitch
Author:-Bramus

CSS hacked/glitch effect

5.
Title:- CSS Glitch Effect
Author:-Nirajan Basnet

By using clip-path property, we can create distortion and glitch effect with just CSS3 and HTML5

6.
Title:- CSS Glitch text
Author:-Noureddine Azhar

A simple css only glitch effect

7.
Title:- CSS Glitch Effect
Author:-Savas YILMAZ

8.
Title:- CSS Glitch Shadow
Author:-aMEya

9.
Title:- [CSS] Glitch Effect
Author:-Ricardo Heiji

10.
Title:- Glitch text with image background
Author:-Marcel Legane

11.
Title:- Glitched Text (study of The Verge)
Author:-Derek Palladino

Inspiration: http://www.theverge.com/a/luka-artificial-intelligence-memorial-roman-mazurenko-bot

The Verge is using content: attr(data-text); to make sudo-element copy of the text. I decided to try something a bit different and use some simple JQuery to copy the element instead. The text-shadow works slightly differently too since I am only copying the elements once, I am layering the text shadows to give it that RGB/CRT flicker. The keyframe animations are copied and altered. Great work to the Vox team, the story and development are wonderful. You are a constant inspiration.

12.
Title:- Image glitch effect
Author:-Alain

If You Like This Article then check Out more Examples
18 CSS Text Glitch Effect
https://gscode.in/css-text-glitch-effect/

7 javascript snake game example

gaganjot singh — Mon, 21 Dec 2020 17:50:20 +0000

If You Like This Article then check Out more Examples
Javascript Snake Game code
https://gscode.in/javascript-snake/

1.Title:-Snake Game
Author:-Caio Paiola
Html5 Game

2.Title:-Snake Game - CSS Renderer

Author:-Jack Rugile

This is a basic snake game made with JavaScript for logic and CSS for rendering. Use the arrow keys or WASD to control the snake. You can loop through walls.

Good luck! Post your high score in the comments.

3.Title:-Snake Game - p5js

Author:-Elena

Inspired by the video by: The Coding Train

4.Title:-Snake Game with obelisk.js

Author:-Sebastian Faedo

My first attempt to make a game with obelisk.js Hope you like it :D

If the keys doesn't work, click on the game to gave it focus.

The movement is relative to the snake, so you use only de left and right keys.

Enjoy!

5.Title:-IK Snake Game

Author:-Danie Clawson

Using a bit of inverse kinematics for a fancy snake game

6.Title:-Classic SNAKE game in BRICK GAME style
Author:-Nooray Yemon

7.Title:-interactive snake game

Author:-Heiko

If You Like This Article then check Out more Examples
Javascript Snake Game code
https://gscode.in/javascript-snake/

10 React Example

gaganjot singh — Tue, 08 Dec 2020 14:52:01 +0000

If You Like This Article then check Out more Examples [gscode.in]

30+ Free React Example for beginners
https://gscode.in/react-example/

1.This started because someone asked me if there was ever a case in a layout for preserveAspectRatio="none" in an SVG. I started with the background, thinking about how the layout could change with this responsive SVG. It's built-in React with React-Motion and CSS working in tandem on both SVG and HTML elements.

2.Experimenting with creating a multi-state component with sub-components in ReactJS.

3.Accordion component made with React

7.Date picker in React, you can select a range of dates.

8.A React-based interactive animation of BB-8 from Star Wars.

Bit of a chance to try out handling animation in React + stress test rendering. Turns out it's fantastic.

Draw circles around him :D

9.React 16/Store/Context used to create a CSS Box-Shadow sprite animator. I created this to output data for use with Arduino/LED Matrix devices, and then it just became this little thing.

10 A calculator built with React

30+ Free React Example for beginners
https://gscode.in/react-example/

10 Javascript Map Example

gaganjot singh — Wed, 02 Dec 2020 16:47:55 +0000

If You Like This Article then check Out more Example [gscode.in]
15+ Javascript Map Example
https://gscode.in/javascript-map/

1.Images can animate along lines - even if they are curved. All this demo is made using JavaScript map from amCharts config only - no scripting required! Original demo: https://www.amcharts.com/demos/animations-along-lines/

2.One GeoAdmin map provided by api3.geo.admin.ch. Spy it !

3.US State Map in TopoJSON, rendered with D3.js

4.My experiment building a responsive inline SVG map of the United States (USA) with SASS and limited use of jQuery.

5.Inspired by mashape.com

If You Like This Article then check Out more Example [gscode.in]
15+ Javascript Map Example
https://gscode.in/javascript-map/

7.This interactive map is built without any scripting at all. It was built originally for MTi Group's new site. It has been adapted slightly for this demo. The SASS is a little messy as a result of the hasty port - it was once part of a much larger file.

Thanks a bunch for the featured post!! ♥

8.I used NetworkX for JS to calculate the degree and centrality of all Metro and Bus stops in Los Angeles.

Size of the node represents degrees. Color scale represents centrality.

Degrees and centrality are calculated from the network representation of the system here: http://codepen.io/stevepepple/pen/dPzGGO

10.SVG animation path using tween.js for The100DayProject. Tutorial by LegoMushroom. Illustrator file from Freepik.com.

If You Like This Article then check Out more Example [gscode.in]
15+ Javascript Map Example
https://gscode.in/javascript-map/

DEV Community: gaganjot singh

Character Cursor Effect

Every Git Command You Need to Know

1. Getting Started with Git

2. Tracking Changes

3. Branching and Merging

4. Stashing Changes

5. Collaborating with Remote Repositories

6. Managing Tags

7. Undoing Mistakes

8. Viewing and Comparing Changes

9. Advanced Commands

10. Configuring Git

Conclusion

Creating a Dog Age Calculator with ChatGPT

Table of Contents

Introduction

Why a Dog Age Calculator?

How ChatGPT Helped

Step 1: HTML Structure

Step 2: CSS Styling

Step 3: JavaScript Logic

Is AI a Threat to Programmers?

The Pros of AI for Programmers

The Challenges of AI for Programmers

Related Tools

Final Thoughts

10 Best Javascript Rich Text Editors

Quill Rich Text Editor

ContentTools

editor.js

etherpad-lite

jodit

medium-editor

Medium.js

milkdown

mobiledoc-kit

tiptap

More Rich Text Editors example

10 Best CSS Animation Libraries For Designers and developer

1. animate.style

2. tilomitra.github.io/infinite

3. jonsuh.com/hamburgers

4. animxyz.com

5. animista.net

6. animation.kaustubhmenon.com

7. github.com/oliver-gomes/csswand

8. github.com/yesiamrocks/cssanimation.io

9. kristofferandreasen.github.io/wickedCSS

10. ianlunn.github.io/Hover

Free online code editor and code snippets

Inspiring Codepen Examples You can Also read

20 CSS Toggle Switches Example

10 CSS Tabs

10+ CSS Text Glitch Effect

7 javascript snake game example

10 React Example

10 Javascript Map Example