DEV Community: Shuvo

Functional tabs with only CSS (No JavaScript)

Shuvo — Wed, 04 Jun 2025 01:34:42 +0000

This article demonstrates how to create functional tabs using only CSS, without any JavaScript. The tabs will allow users to switch between different content sections seamlessly, showcasing the power of CSS for interactive elements.
Original article: wtfcodes.com

Basic setup:

To get started, we will create a typical HTML structure for our tabs and apply some basic styles to make them visually appealing.

<div class="tabs-wrapper">  
  <nav class="tabs-nav">
    <div class="tab-item">
      <span>Tab A</span>
    </div>
    <div class="tab-item">
      <span>Tab B</span>
    </div>
    <div class="tab-item">
      <span>Tab C</span>
    </div>

  </nav>

  <div class="tab-content" id="tab-a-content">
    I am Tab A content
  </div>
  <div class="tab-content" id="tab-b-content">
    I am Tab B content
  </div>
  <div class="tab-content" id="tab-c-content">
    I am Tab C content
  </div>
</div>

body{
  font-family: Arial;
  padding: 1em;
}

.tabs-nav{
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  user-select: none;
}

.tab-item{
  background: #bcbcbc;
  padding: 6px 12px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}
.tab-content{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid grey;
}

Great! Now we need somekind of interactivity.
Lets think what cab we do so the active tab has something different than other tabs.
Well we can use <input type="radio" /> to indicate the active tab. Since radio inputs allow only one to be selected at a time, we can use them to control which tab is active.
And to make sure we can toggle the radio inputs by clicking on the tab, we can use the <label> element instead of <div> for the tab items.
So the updated HTML structure will look like this:

<div class="tabs-wrapper">  
  <nav class="tabs-nav">
    <label for="tab-a-toggle" class="tab-item">
      <span>Tab A</span>
      <input checked name="tabs-toggle" id="tab-a-toggle" type="radio">
    </label>
    <label for="tab-b-toggle" class="tab-item">
      <span>Tab B</span>
      <input name="tabs-toggle" id="tab-b-toggle" type="radio">
    </label>
    <label for="tab-c-toggle" class="tab-item">
      <span>Tab C</span>
      <input name="tabs-toggle" id="tab-c-toggle" type="radio">
    </label>
  </nav>

  <div class="tab-content" id="tab-a-content">
    I am Tab A content
  </div>
  <div class="tab-content" id="tab-b-content">
    I am Tab B content
  </div>
  <div class="tab-content" id="tab-c-content">
    I am Tab C content
  </div>
</div>

Nice progress!
Since we don't want the radio inputs to be visible, we can hide them using .tab-item input{display: none; } in the CSS.

Highlight the active tab:

We can use the tab-item:has(input:checked) selector in CSS to check if a tab has a checked input and apply styles to it.

.tab-item input{
  display: none;
}
.tab-item:has(input:checked){
  background: #6b54f0;
}

Amazing! Now we can see which tab is active.
Using the same logic, we can also show/hide the content of the active tab.

.tab-content{
  display: none;
}
.tabs-wrapper:has(#tab-a-toggle:checked) #tab-a-content{
  display: block;
}
.tabs-wrapper:has(#tab-b-toggle:checked) #tab-b-content{
  display: block;
}
.tabs-wrapper:has(#tab-c-toggle:checked) #tab-c-content{
  display: block;
}

Final code:

<div class="tabs-wrapper">  
  <nav class="tabs-nav">
    <label for="tab-a-toggle" class="tab-item">
      <span>Tab A</span>
      <input checked name="tabs-toggle" id="tab-a-toggle" type="radio">
    </label>
    <label for="tab-b-toggle" class="tab-item">
      <span>Tab B</span>
      <input name="tabs-toggle" id="tab-b-toggle" type="radio">
    </label>
    <label for="tab-c-toggle" class="tab-item">
      <span>Tab C</span>
      <input name="tabs-toggle" id="tab-c-toggle" type="radio">
    </label>
  </nav>

  <div class="tab-content" id="tab-a-content">
    I am Tab A content
  </div>
  <div class="tab-content" id="tab-b-content">
    I am Tab B content
  </div>
  <div class="tab-content" id="tab-c-content">
    I am Tab C content
  </div>
</div>

body{
  font-family: Arial;
  padding: 1em;
}

.tabs-nav{
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  user-select: none;
}

.tab-item{
  background: #bcbcbc;
  padding: 6px 12px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}
.tab-content{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid grey;
}

.tab-item input{
  display: none;
}
.tab-item:has(input:checked){
  background: #6b54f0;
}

.tab-content{
  display: none;
}

.tabs-wrapper:has(#tab-a-toggle:checked) #tab-a-content{
  display: block;
}
.tabs-wrapper:has(#tab-b-toggle:checked) #tab-b-content{
  display: block;
}
.tabs-wrapper:has(#tab-c-toggle:checked) #tab-c-content{
  display: block;
}

Thank you for reading!

If you enjoyed this article, please consider sharing it with others.
You can support me on Buy Me a Coffee.
If you have any feedback or suggestions, feel free to reach out to me on Twitter.
Don't forget to checkout wtfcodes.com

When semicolon isn't optional in JavaScript

Shuvo — Mon, 02 Jun 2025 01:58:27 +0000

Original article: wtfcodes.com

TL;DR: In JavaScript, semicolons are optional at the end of statements, but there are specific cases where omitting them can lead to unexpected behavior or errors.

Without semicolon:

In the following example, I am trying to access an element in an array using idx variable and console log if the number is even or odd.
And since semicolon is optional in JavaScript, I have not used any semicolon at the end of the statement.

const array = [1, 2, 3, 4, 5, 6]
const idx = 2
const num = array[idx]
(num && num % 2 === 0)
            ? console.log("Even")
      : console.log("Odd")

Everything seems fine, right?
But wait, we got errors in the console.

With semicolon:

Now let's add semicolons at the end of the statements.

const array = [1, 2, 3, 4, 5, 6];
const idx = 2;
const num = array[idx];
(num && num % 2 === 0)
            ? console.log("Even")
      : console.log("Odd");

And look that, Everything works fine now!

And look that, Everything works fine now!

So WTF?

The deal breaker line here is const num = array[idx]. Because it is followed by (num && num % 2 === 0) ? console.log("Even") : console.log("Odd");

Why? Lets say our array contained functions that returns a number.

const fn1 = () => 1
const fn2 = () => 2
const fn3 = () => 3
const fn4 = () => 4
const fn5 = () => 5

const array = [ fn1, fn2, fn3, fn4, fn5 ]
const idx = 2
const num = array[idx]

console.log(num) //Output: function fn3() {}

It logs function fn3() {} in the console.
But we want num to be the return value of the function. So we need to call the function like this: const num = array[idx]() that way we are calling fn3 num will be the return value of the function.

const num = array[idx]()

console.log(num) //Output: 3

Since fn3 doesn't take any arguments, its deosnt matter if we pass any argument or not the function will still return the same value.
And we could also call the function in the next line and it will still work the same way.

//It doen't matter what we pass as argument
//Since fn3 doesn't take any argument, it will still return the same value
const num = array[idx]
(Math.random() > .5 ? 1 : 0)

console.log(num) //Output: 3

Did you catch it?

In our first example we were accidentally performing a function call on array[idx] which is a number and not a function, which is obviously wrong.
But when we add a semicolon at the end of the statement: const num = array[idx] the statement ends and the next line is treated as a new statement and not a function call.

const array = [1, 2, 3, 4, 5, 6]
const idx = 2
const num = array[idx]; //the semicolon ends the statement
//So the next line is treated as a new statement and not a function call
(num && num % 2 === 0)
            ? console.log("Even")
      : console.log("Odd")

Thank you for reading!

If you enjoyed this article, please consider sharing it with others.
You can support me on Buy Me a Coffee.
If you have any feedback or suggestions, feel free to reach out to me on Twitter.

I forgot about el.outerHTML so I made this

Shuvo — Mon, 07 Feb 2022 05:02:53 +0000

This morning I needed to convert a DOM element into a sting. And at the time I forgot about the el.outerHTML method. And I know the el.innerHTML will not include in element itself. It will only give inner HTML. So after doing a quick Google I was remined about the outerHTML method. And my issue was solved!

But this got me thinking how could I do it if there was no innerHTML or outerHTML method.
And thus htmlToString was born.

0shuvo0 / htmlToString

I forgot about el.outerHTML so I made this, it takes a DOM element and returns its html as string

htmlToString

Convert html/DOM element to string

Works with rendered and virtual DOM

Installation

npm install htmltostring

Or using CDN

<script src="https://cdn.jsdelivr.net/npm/htmltostring@1.0.6/htmlToString.min.js"></script>

Usage

//you don't have to import if you're using CDN
import htmlToString from 'htmltostring'

console.log(htmlToString('.container'))
// or 
// const container = document.querySelector('.container')
// console.log(htmlToString(container))

Example Output

<div class="container">
    <h1>Hello World</h1>
</div>

View on GitHub

And it was very simple to do using recursion.

There was just three main question.

What's the tag name of the element
How to get all the attributes present on a HTML element
Check if a tag is self closing tag or not

And here are the answers

What's the tag name of the element

You can easily get the tag name of the element like this

let tagName = el.tagName.toLowerCase()

How to get all the attributes present on a HTML element

el.attributes returns a list of attribute present on the element.

[...el.attributes].map(e => `${e.name}="${e.value}"`).join(" ")

//example outcome
//'class="main" type="text"'

Check if a tag is self closing tag or not

First we can create an array or self closing tags and then check if tag name is present in the array

const selfClosingTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']
if(selfClosingTags.includes(tagName)){
    console.log("Self closing tag")
}

And with all the questions answered the function was very easy to implement.
You can see the full code here

Found it useless, I mean helpful? By me a Coffee ☕

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

Support me on Patreon

Let's create an Add Tags input with REACT JS

Shuvo — Mon, 17 Jan 2022 03:57:25 +0000

In this article I will show you guys how you can create this multiple tags input using React.JS and a bit of CSS

Lets create a new react js project by running npx create-react-app myapp
Now to simplify things I am goin to delete all the files inside src folder except for App.js and index.js and create a style.css file. So our folder structure should look like this
Great now let's also delete all the unnecessary codes from index.js and App.js

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import "./style.css";
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// src/App.js
function App() {
  return (
    <div className="App">
      <h2>Enter Some Tags ...</h2>
    </div>
  );
}

export default App;

And I am also goin to add these CSS styles in our src/index.js

*{
    margin: 0;
    padding: 0;
}
html, body{
    height: 100%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.tags-input-container{
    border: 2px solid #000;
    padding: .5em;
    border-radius: 3px;
    width: min(80vw, 600px);
    margin-top: 1em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5em;
}

.tag-item{
    background-color: rgb(218, 216, 216);
    display: inline-block;
    padding: .5em .75em;
    border-radius: 20px;
}
.tag-item .close{
    height: 20px;
    width: 20px;
    background-color: rgb(48, 48, 48);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: .5em;
    font-size: 18px;
    cursor: pointer;
}

.tags-input{
    flex-grow: 1;
    padding: .5em 0;
    border: none;
    outline: none;
}

If you want better explanation of the CSS you can watch this video of mine.

Okay now if we were to start our app by running npm start it should look like this

Alright now lets create a folder inside src folder named components inside that we are going to create a component file called TagsInput.js

// src/components/TagsInput.js
function TagsInput(){
    return (
        <div className="tags-input-container">
            <div className="tag-item">{/* One hardcoded tag for test */}
                <span className="text">hello</span>
                <span className="close">&times;</span>
            </div>
            <input type="text" className="tags-input" placeholder="Type somthing" />
        </div>
    )
}

export default TagsInput

Now we can import and use in our App.js

// src/App.js
import TagsInput from "./components/TagsInput"

function App() {
  return (
    <div className="App">
      <h2>Enter Some Tags ...</h2>
      <TagsInput />
    </div>
  );
}

export default App;

Great, but no instead of having a hardcoded tag like this, we want an array and we should loop over the array and show a tag for each element. So lets use useState to do that

// src/components/TagsInput.js
import { useState } from 'react'

function TagsInput(){
    const [tags, setTags] = useState([
        "HTML", "CSS", "JavaScript"
    ])
    return (
        <div className="tags-input-container">
            { tags.map((tag, index) => (
                <div className="tag-item" key={index}>
                    <span className="text">{tag}</span>
                    <span className="close">&times;</span>
                </div>
            )) }
            <input type="text" className="tags-input" placeholder="Type somthing" />
        </div>
    )
}

export default TagsInput

Okay now by default our array should be empty and when we type something in our input and press Enter a new item should be added in our tags state array. So lets create a function for that and add onKeyDown event listener to our input.

// src/components/TagsInput.js
import { useState } from 'react'

function TagsInput(){
    const [tags, setTags] = useState([])

    function handleKeyDown(e){
        // If user did not press enter key, return
        if(e.key !== 'Enter') return
        // Get the value of the input
        const value = e.target.value
        // If the value is empty, return
        if(!value.trim()) return
        // Add the value to the tags array
        setTags([...tags, value])
        // Clear the input
        e.target.value = ''
    }

    return (
        <div className="tags-input-container">
            { tags.map((tag, index) => (
                <div className="tag-item" key={index}>
                    <span className="text">{tag}</span>
                    <span className="close">&times;</span>
                </div>
            )) }
            <input onKeyDown={handleKeyDown} type="text" className="tags-input" placeholder="Type somthing" />
        </div>
    )
}

export default TagsInput

And now finally when even user clicks on the
close(x) button of a tag the tag should be removed from our tags array. So lets create a function that take a index as its argument and removes the item at that index from our tags array. And add onClick listener to the close buttons.

// src/components/TagsInput.js
import { useState } from 'react'

function TagsInput(){
    const [tags, setTags] = useState([])

    function handleKeyDown(e){
        if(e.key !== 'Enter') return
        const value = e.target.value
        if(!value.trim()) return
        setTags([...tags, value])
        e.target.value = ''
    }

    function removeTag(index){
        setTags(tags.filter((el, i) => i !== index))
    }

    return (
        <div className="tags-input-container">
            { tags.map((tag, index) => (
                <div className="tag-item" key={index}>
                    <span className="text">{tag}</span>
                    <span className="close" onClick={() => removeTag(index)}>&times;</span>
                </div>
            )) }
            <input onKeyDown={handleKeyDown} type="text" className="tags-input" placeholder="Type somthing" />
        </div>
    )
}

export default TagsInput

And that's all we have successfully create a tags input using React and Bit of JavaScript.

Found it helpful? By me a Coffee ☕

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

Was it helpful? Support me on Patreon

Let's create a digital clock with CSS & JS

Shuvo — Wed, 08 Dec 2021 10:48:46 +0000

In this article I will show you how to create a working Digital Clock using CSS and JavaScript.

Lets start by creating a 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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="clock">
        <span>
            <!-- this text will be updated using JS -->
            12:23:01 PM
        </span>
    </div>
    <script src="main.js"></script>
</body>
</html>

And now style it using style.css

*{
    margin: 0;
    padding: 0;
}
html, body{
    height: 100%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(26, 25, 25);
}

.clock{
    padding: .75em;
    background-color: rgb(26, 25, 25);
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 2em;
    position: relative;
    color: transparent;
}
.clock span{
    background: linear-gradient(135deg, rgb(255, 145, 0), rgb(255, 0, 221), blue);
    background-clip: text;
    -webkit-background-clip: text;
}
.clock::before, .clock::after{
    content: "";
    display: block;
    width: 108%;
    height: 120%;
    background-image: linear-gradient(135deg, rgb(255, 145, 0), rgb(255, 0, 221), blue);
    position: absolute;
    top: -10%;
    left: -4%;
    z-index: -1;
    border-radius: 5px;
}
.clock::after{
    filter: blur(5px);
}

Now if you open it up in a browser it should look like this

Now we just have to updated the text using JS.
In our main.js JavaScript file let's create a function that will get the current time.

const clock = document.querySelector('.clock span')

function updateClock() {
    // creating a new date object
    const now = new Date()

    // getting the current hour
    let hours = now.getHours()
    // getting the current minute
    let minutes = now.getMinutes()
    // getting the current second 
    let seconds = now.getSeconds()
    // getting the AM/PM 
    let am_pm = hours >= 12 ? 'PM' : 'AM'

    // converting 24 hours format to 12 hours
    if(hours > 12) hours -= 12

    // adding a zero in front of the times
    hours = hours < 10 ? '0' + hours : hours
    minutes = minutes < 10 ? '0' + minutes : minutes
    seconds = seconds < 10 ? '0' + seconds : seconds

    console.log(hours, minutes, seconds, am_pm);
}

updateClock()

Now instead of console logging them we simply have to update the text of our span and them call the updateClock function every seconds

const clock = document.querySelector('.clock span')

function updateClock() {
    const now = new Date()

    let hours = now.getHours()
    let minutes = now.getMinutes()
    let seconds = now.getSeconds()
    let am_pm = hours >= 12 ? 'PM' : 'AM'

    if(hours > 12) hours -= 12

    hours = hours < 10 ? '0' + hours : hours
    minutes = minutes < 10 ? '0' + minutes : minutes
    seconds = seconds < 10 ? '0' + seconds : seconds

    // displaying the time
    clock.innerHTML = `${hours}:${minutes}:${seconds} ${am_pm}`
}

// calling the function every second
setInterval(updateClock, 1000)

And its that easy.
Hey did I earned a coffee from you? Buy Me A Coffee

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

width="710"
height="399"
src="https://www.youtube.com/embed/qcjwkvezZRk"
allowfullscreen
loading="lazy">

Was it helpful? Support me on Patreon

Box shadow vs. drop shadow in CSS

Shuvo — Sat, 04 Dec 2021 10:52:37 +0000

We all know that we can use box-shadow to add shadows to our HTML elements. eg

.box{
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}

But did you know that we can achieve the same using drop-shadow filter. You simply have to pass the shadow value in the drop-shadow function

.box{
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}

Although in this example both box-shadow and drop-shadow does the same thing. But if we were to add box-shadow on a PNG image you will see the shape of box-shadow is rectangular/box.

img{
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}

While if we add drop-shadow to a PNG, the shape of the shadow will be same as the shape of the visible area of the PNG.

img{
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

width="710"
height="399"
src="https://www.youtube.com/embed/rfZQ-nlxlqo"
allowfullscreen
loading="lazy">

Was it helpful? Support me on Patreon

Why you can't trust setTimeout

Shuvo — Fri, 03 Dec 2021 12:15:34 +0000

setTimeout in JavaScript takes time in millisecond so it must be very accurate right?

Well not necessarily. In this article let's explore why.

We all know that JavaScript is single-threaded. Meaning that it can only calculate one thing at a time.
But now imagine you have a setTimeout that is suppose to fire after 10000ms or 10s. So now JS have to keep track of the time passed. But in between that 10s the user might do some interaction with your page. Now JavaScript have to react to them as well.

But if JavaScript is single threaded how it's gonna keep track of passed time while reacting to user activity? That would be performing multiple calculation at the same time right?
Well not really because JavaScript is not keeping track of time. In fact JavaScript doesn't natively support setTimeout even. Then how are we able to use setTimeout? Well these special asynchronous functions like setTimeout, setInterval are provided to JS by the environment it is currently running on. For example in case of Chrome JavaScript runs on the V8 engine, and Fire Fox uses SpiderMonkey as its JavaScript engine etc.

So basically when you call setTimeout, JavaScript under the hood tells its environment/the engine its running on that once all the synchronous code is done executing set a timer and once the timer reaches the given time execute the function.
Now notice that I said "once all the synchronous code is done executing". And this is where the problem lives. The timer for setTimeout won't start until all the normal synchronous codes like dom manipulations, loops etc. aren't fully executed.
And those synchronous codes might take some time to execute.
Here's a dummy code that takes couple of milliseconds to execute.

//JS hack: +new Date() will give you current time in milliseconds 😉
let currentTime = +new Date()
//Dummy long loop
for(let i = 0; i < 999999999; i++){}
//Current time after the loop is over
let endTime = +new Date()
console.log("Ran after: " + (endTime - currentTime) + "ms")

And so if we had a setTimeout out in our code that is suppose to run after lets say 50ms, it might run a few milliseconds late

let currentTime = +new Date()
setTimeout(function(){
    let endTime = +new Date()
    console.log("Ran after: " + (endTime - currentTime) + "ms")
}, 50)
for(let i = 0; i < 99999999; i++){

}

Conclusion

Although setTimeout is fine to use most of the time, but for very time sensitive task it might not be the ideal choice

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

Was it helpful? Support me on Patreon

CSS Text Drawing Animation with SVG

Shuvo — Thu, 02 Dec 2021 11:25:03 +0000

In this article I will show you how you can create this SVG text drawing animation using pure CSS in 5 easy steps.

Step 1: creating the SVG

First we need to create the SVG you want to animate. You can use any tool to create your SVG.

You can follow this tutorial to learn how to create SVG using Figma.

After you're done. Copy the SVG code. In my case the SVG code is this(you can just use this code if you want)

<svg width="1037" height="442" viewBox="0 0 1037 442" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1037" height="442" fill="white"/>
<path d="M42 264.797C61.344 250.887 79.4883 235.193 97.5556 219.686C109.301 209.605 121.002 199.553 130.889 187.575C143.744 172 153.857 153.902 162.778 135.852C173.886 113.378 185.973 87.3855 187.833 61.9635C188.338 55.0653 187.883 48.0041 187.222 41.1302C186.526 33.8921 183.72 41.0593 182.556 44.1302C171.997 71.9672 166.847 102.846 162.111 132.13C157.846 158.505 160 186.207 160 212.852C160 245.797 160 278.741 160 311.686C160 320.76 160 329.834 160 338.908C160 340.729 160.465 343.419 159.944 345.241C156.734 356.478 161.691 321.732 165.167 310.575C173.735 283.065 185.683 256.347 197.778 230.241C210.874 201.974 227.611 169.297 253.444 150.352C258.353 146.753 265.084 151.536 268.389 155.408C278.404 167.14 280.676 180.213 283 195.019C287.029 220.688 287 245.875 287 271.797C287 287.272 287.492 302.888 293 317.575C295.675 324.707 304.136 324.139 310.667 325.464C322.833 327.931 334.891 330.267 347.333 330.686C357.56 331.029 370.452 332.241 380.222 328.519C390.586 324.571 397.662 311.241 405 303.352C412.112 295.706 420.755 290.383 429.444 284.797C452.158 270.196 477.026 258.401 493.333 235.908C496.177 231.986 500 227.041 500 222.019C500 214.815 500 207.612 500 200.408C500 190.355 498.79 179.096 489 174.019C476.982 167.787 456.264 165.332 443.889 171.519C430.592 178.167 420.369 190.553 412.889 203.019C400.474 223.711 386.551 247.605 381.444 271.352C378.695 284.137 379.463 298.755 380.056 311.797C380.52 322.02 387.15 333.384 395 339.797C402.702 346.089 411.308 350.824 420.444 354.797C429.12 358.569 438.285 360.974 447.444 363.241C456.168 365.401 466.889 368.337 475.944 366.464C487.625 364.047 499.586 349.654 508.278 342.019C538.04 315.877 561.749 281.452 582.111 247.797C599.225 219.511 616.595 189.964 627.389 158.575C633.058 142.09 635.069 124.58 635.778 107.241C636.059 100.354 636.571 93.0261 635.944 86.1302C635.594 82.276 626.156 92.8882 625.778 93.3524C604.007 120.04 592.997 157.077 586.667 190.352C583.198 208.584 583 226.866 583 245.352C583 265.624 584.039 284.934 587.944 304.852C589.821 314.423 590.617 329.777 597.111 338.075C599.388 340.984 603.904 339.257 606.444 337.686C612.484 333.95 617.801 328.463 623.056 323.797C631.922 315.922 640.874 308.108 649.444 299.908C684.722 266.154 709.344 225.286 733.778 183.463C744.405 165.273 755.478 147.221 764.778 128.297C772.458 112.668 778.511 96.1667 784.722 79.9079C784.928 79.3687 790.395 66.6955 787.444 65.8524C785.357 65.2559 783.947 66.7968 782 66.7968C780.04 66.7968 778.726 67.1631 777.389 68.7968C769.717 78.1732 766.265 93.7933 763.056 105.186C758.14 122.634 754.683 140.55 752 158.463C748.614 181.078 744.368 203.688 742.222 226.463C740.047 249.549 740 272.743 740 295.908C740 310.274 739.353 324.981 741.444 339.241C741.872 342.156 742.601 352.215 747.167 352.519C752.893 352.901 759.833 346.146 764.722 343.852C785.101 334.292 806.695 327.829 826.611 317.13C863.592 297.264 892.372 262.908 915.778 228.797C931.392 206.041 942.311 181.434 943.778 153.575C944.254 144.523 944 135.413 944 126.352C944 118.711 944.523 111.192 938.833 105.352C928.756 95.0101 908.308 93.697 895.222 97.6857C869.128 105.64 853.782 137.797 845.444 161.352C839.564 177.966 835.35 194.735 832 212.019C827.894 233.205 822.886 254.254 819.222 275.519C815.081 299.558 813.28 324.082 814.667 348.464C815.356 360.573 815.804 379.188 824.444 389.13C832.642 398.563 852.799 392.885 862.667 390.797C875.332 388.117 888.324 386.22 900.278 381.019C916.167 374.105 932.547 361.482 943.167 347.797C953.988 333.851 960.976 316.371 967.222 300.019C972.309 286.702 976.905 273.383 979.333 259.297C981.636 245.943 981.954 232.536 982 219.019C982.049 204.572 982.373 190.1 980 175.797C977.224 159.063 969.811 140.819 954.278 132.241C940.163 124.447 925.249 117.88 910 112.797" stroke="url(#paint0_linear_2_2)" stroke-width="12" stroke-miterlimit="3.99933" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_2_2" x1="186" y1="37.9999" x2="975" y2="358" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF8A00"/>
<stop offset="1" stop-color="#EB00FF"/>
</linearGradient>
</defs>
</svg>

Step 2: The HTML

Create a index.html and paste the the SVG codes. Also add a id on the SVG so we can target it in CSS. I'm giving it an id of text

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <svg id="text" width="1037" height="442" viewBox="0 0 1037 442" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="1037" height="442" fill="white"/>
    <path d="M42 264.797C61.344 250.887 79.4883 235.193 97.5556 219.686C109.301 209.605 121.002 199.553 130.889 187.575C143.744 172 153.857 153.902 162.778 135.852C173.886 113.378 185.973 87.3855 187.833 61.9635C188.338 55.0653 187.883 48.0041 187.222 41.1302C186.526 33.8921 183.72 41.0593 182.556 44.1302C171.997 71.9672 166.847 102.846 162.111 132.13C157.846 158.505 160 186.207 160 212.852C160 245.797 160 278.741 160 311.686C160 320.76 160 329.834 160 338.908C160 340.729 160.465 343.419 159.944 345.241C156.734 356.478 161.691 321.732 165.167 310.575C173.735 283.065 185.683 256.347 197.778 230.241C210.874 201.974 227.611 169.297 253.444 150.352C258.353 146.753 265.084 151.536 268.389 155.408C278.404 167.14 280.676 180.213 283 195.019C287.029 220.688 287 245.875 287 271.797C287 287.272 287.492 302.888 293 317.575C295.675 324.707 304.136 324.139 310.667 325.464C322.833 327.931 334.891 330.267 347.333 330.686C357.56 331.029 370.452 332.241 380.222 328.519C390.586 324.571 397.662 311.241 405 303.352C412.112 295.706 420.755 290.383 429.444 284.797C452.158 270.196 477.026 258.401 493.333 235.908C496.177 231.986 500 227.041 500 222.019C500 214.815 500 207.612 500 200.408C500 190.355 498.79 179.096 489 174.019C476.982 167.787 456.264 165.332 443.889 171.519C430.592 178.167 420.369 190.553 412.889 203.019C400.474 223.711 386.551 247.605 381.444 271.352C378.695 284.137 379.463 298.755 380.056 311.797C380.52 322.02 387.15 333.384 395 339.797C402.702 346.089 411.308 350.824 420.444 354.797C429.12 358.569 438.285 360.974 447.444 363.241C456.168 365.401 466.889 368.337 475.944 366.464C487.625 364.047 499.586 349.654 508.278 342.019C538.04 315.877 561.749 281.452 582.111 247.797C599.225 219.511 616.595 189.964 627.389 158.575C633.058 142.09 635.069 124.58 635.778 107.241C636.059 100.354 636.571 93.0261 635.944 86.1302C635.594 82.276 626.156 92.8882 625.778 93.3524C604.007 120.04 592.997 157.077 586.667 190.352C583.198 208.584 583 226.866 583 245.352C583 265.624 584.039 284.934 587.944 304.852C589.821 314.423 590.617 329.777 597.111 338.075C599.388 340.984 603.904 339.257 606.444 337.686C612.484 333.95 617.801 328.463 623.056 323.797C631.922 315.922 640.874 308.108 649.444 299.908C684.722 266.154 709.344 225.286 733.778 183.463C744.405 165.273 755.478 147.221 764.778 128.297C772.458 112.668 778.511 96.1667 784.722 79.9079C784.928 79.3687 790.395 66.6955 787.444 65.8524C785.357 65.2559 783.947 66.7968 782 66.7968C780.04 66.7968 778.726 67.1631 777.389 68.7968C769.717 78.1732 766.265 93.7933 763.056 105.186C758.14 122.634 754.683 140.55 752 158.463C748.614 181.078 744.368 203.688 742.222 226.463C740.047 249.549 740 272.743 740 295.908C740 310.274 739.353 324.981 741.444 339.241C741.872 342.156 742.601 352.215 747.167 352.519C752.893 352.901 759.833 346.146 764.722 343.852C785.101 334.292 806.695 327.829 826.611 317.13C863.592 297.264 892.372 262.908 915.778 228.797C931.392 206.041 942.311 181.434 943.778 153.575C944.254 144.523 944 135.413 944 126.352C944 118.711 944.523 111.192 938.833 105.352C928.756 95.0101 908.308 93.697 895.222 97.6857C869.128 105.64 853.782 137.797 845.444 161.352C839.564 177.966 835.35 194.735 832 212.019C827.894 233.205 822.886 254.254 819.222 275.519C815.081 299.558 813.28 324.082 814.667 348.464C815.356 360.573 815.804 379.188 824.444 389.13C832.642 398.563 852.799 392.885 862.667 390.797C875.332 388.117 888.324 386.22 900.278 381.019C916.167 374.105 932.547 361.482 943.167 347.797C953.988 333.851 960.976 316.371 967.222 300.019C972.309 286.702 976.905 273.383 979.333 259.297C981.636 245.943 981.954 232.536 982 219.019C982.049 204.572 982.373 190.1 980 175.797C977.224 159.063 969.811 140.819 954.278 132.241C940.163 124.447 925.249 117.88 910 112.797" stroke="url(#paint0_linear_2_2)" stroke-width="12" stroke-miterlimit="3.99933" stroke-linecap="round" stroke-linejoin="round"/>
    <defs>
    <linearGradient id="paint0_linear_2_2" x1="186" y1="37.9999" x2="975" y2="358" gradientUnits="userSpaceOnUse">
    <stop stop-color="#FF8A00"/>
    <stop offset="1" stop-color="#EB00FF"/>
    </linearGradient>
    </defs>
    </svg>
</body>
</html>

Step 3: Basic styles

Now in our style.css lets center the SVG and change its height.

html, body{
    height: 100vh;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
}

#text{
    height: 40vw;
    stroke-dasharray: 4004;
}

Okay so now if we open it up in your browser it should look something like this.

Step 4: Getting stroke-dasharray of svg

The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape. So using this we can define in how many dashes/lines our SVGs path should contain. In our case we only one one path/line.
Okay to get the stroke-dasharray of our SVG we can simply run this JavaScript code in the console.

document.querySelector("#text path").getTotalLength()

So in my case it's 4004(we don't need the decimal points)
Okay so add it in our CSS

html, body{
    height: 100vh;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
}

#text{
    height: 40vw;
    stroke-dasharray: 4004;
}

Now we can use the stroke-dashoffset to offset our line/path
if we set stroke-dashoffset to 0

#text{
    height: 40vw;
    stroke-dasharray: 4004;
    stroke-dashoffset: 0;
}

You will se noting happens. But if we set if to a big number like 300

#text{
    height: 40vw;
    stroke-dasharray: 4004;
    stroke-dashoffset: 300;
}

you will see a small part of our SVG is not visible anymore. And if we set stroke-dashoffset to same as stroke-dasharray

#text{
    height: 40vw;
    stroke-dasharray: 4004;
    stroke-dashoffset: 4004;
}

you will notice the SVG is not visible anymore. That is because Now the entire stroke-dasharray is offset/pushed away.

Step 5: The animation

So with this knowledge in mind we can simply animate our stroke-dashoffset from 0 to the value of our stroke-dasharray to get our desired drawing animation.

html, body{
    height: 100vh;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
}

#text{
    height: 40vw;
    stroke-dasharray: 4004;
    animation: 3s fillSvg linear;
}

@keyframes fillSvg{
    0%{
        stroke-dashoffset: 4004;
    }
    100%{
        stroke-dashoffset: 0;
    }
}

And just like that we have successfully created text drawing animating using CSS and SVG

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

width="710"
height="399"
src="https://www.youtube.com/embed/qhOZoJPMg6w"
allowfullscreen
loading="lazy">

Was it helpful? Support me on Patreon

Pure CSS infinite space/galaxy with just one Div

Shuvo — Tue, 30 Nov 2021 15:58:12 +0000

In this article I will show you how you can create this infinite space/galaxy zoom effect using just one sing div and pure CSS.

Okay so let's create our index.html which will only contain one single div

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="main"></div>
</body>
</html>

Now lets write some basic styles in our style.css

body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-radius: 50%;
}

Now if you open it up in the browser you will see just a small circle in middle of our page.

But we don't want just one, we want a lot of them. Lets move slow and think how you can make two star/circle out on one div?
Well we can use box shadow. We know the syntax on box shadow is box-shadow: offset_form_X_axis offset_form_Y_axis blur_amount sperad_amount color so for example box-shadow: 30px 50px 3px 1px #fff
So let's try to add a box shadow to our div.

body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 30px 50px 3px 1px #fff;
}

And now we have a second circle with some blur. Which is great because stars aren't supposed to be sharp circle.
We can make the star bigger by using a bigger number for our spread.

body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 30px 50px 3px 20px #fff;
}

So we can use little or lot of spread to make our star smaller or bigger to give a feel that the star is near or far way.

Okay so now we lets make the start smaller 10px is too big.

body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 30px 50px 3px 20px #fff;
}

And now we can barely even see the main div. But that's okay for now.
But the bigger issue is 2 star is not enough we want a lot of them.

Well guess what?

We can have multiple layer of box shadows, they just need to separated by comma.

body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 30px 50px 3px 20px #fff,
                -30px -70px 1px 10px #fff;
}

So just like this we have to create a lot of layer to create a lot of stars.
But doing that manually would suck so we can cheat a bit 👉👈.
We are going to use javascript to generate a string of multilayer box shadow.
This would not be completely cheating because we are only using JS to generate the CSS string.

function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
}

const STAR_COUNT = 100
let result = ""
for(let i = 0; i < STAR_COUNT; i++){
    result += `${randomNumber(-50, 50)}vw ${randomNumber(-50, 50)}vh ${randomNumber(0, 3)}px ${randomNumber(0, 3)}px #fff,`
}
console.log(result.substring(0, result.length - 1))

So now we can just copy the generated code and paste it in our CSS.

body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -24vw -44vh 2px 2px #fff,38vw -4vh 0px 0px #fff,-20vw -48vh 1px 2px #fff,-39vw 38vh 3px 1px #fff,-42vw -11vh 0px 3px #fff,12vw 15vh 3px 3px #fff,42vw 6vh 3px 2px #fff,-8vw 9vh 0px 2px #fff,34vw -38vh 1px 0px #fff,-17vw 45vh 3px 1px #fff,22vw -36vh 3px 2px #fff,-42vw 1vh 1px 0px #fff;/*I have only kept a few layers for readability here*/
}

Finally we can add a zoom in and out animation to make it ever more cool.

body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -24vw -44vh 2px 2px #fff,38vw -4vh 0px 0px #fff,-20vw -48vh 1px 2px #fff,-39vw 38vh 3px 1px #fff,-42vw -11vh 0px 3px #fff,12vw 15vh 3px 3px #fff,42vw 6vh 3px 2px #fff,-8vw 9vh 0px 2px #fff,34vw -38vh 1px 0px #fff,-17vw 45vh 3px 1px #fff,22vw -36vh 3px 2px #fff,-42vw 1vh 1px 0px #fff;
    animation: zoom 10s alternate infinite;
}

@keyframes zoom {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

Was it helpful? Support me on Patreon

Creating A Memory Game With React

Shuvo — Mon, 29 Nov 2021 16:03:06 +0000

In this article I will explain how I created this Memory Game with React JS

Basically what happens in this game is You will have some cards and when you click on them the card flips and reveals the image that it has. We have to try to find cards in pair(cards with same image).

I have a step by step tutorial for this project on my YouTube channel you can check it out.

But if you just want a overview stick around.

Okay so first I created a Cards.js components. That will render all the cards.

// components/Cards.js
import Card from './Card'

function Cards(){
    // Items is a array of objects
    // Each object has id, two objects have same id. We will use them to check if the user have found a pair
    // They also have a img property. I have put all the images in public/img folder
    // Thier stat proprty indicates in what status/state the card is currently on
    // stat == "" means the card is not flipped so the image is hidden
    // stat == "active" means the card is flipped so the image is visible
    // stat == "correct" means we found a pair so the card will be flipped and highlighted in green color
    // stat == "wrong" means we choose 2 different type of cards so the card will be flipped and highlighted in red color
    const [items, setItems] = useState([
        { id: 1, img: '/img/html.png', stat: "" },
        { id: 1, img: '/img/html.png', stat: "" },
        { id: 2, img: '/img/css.png', stat: "" },
        { id: 2, img: '/img/css.png', stat: "" },
        { id: 3, img: '/img/js.png', stat: "" },
        { id: 3, img: '/img/js.png', stat: "" },
        { id: 4, img: '/img/scss.png', stat: "" },
        { id: 4, img: '/img/scss.png', stat: "" },
        { id: 5, img: '/img/react.png', stat: "" },
        { id: 5, img: '/img/react.png', stat: "" },
        { id: 6, img: '/img/vue.png', stat: "" },
        { id: 6, img: '/img/vue.png', stat: "" },
        { id: 7, img: '/img/angular.png', stat: "" },
        { id: 7, img: '/img/angular.png', stat: "" },
        { id: 8, img: '/img/nodejs.png', stat: "" },
        { id: 8, img: '/img/nodejs.png', stat: "" }
    ].sort(() => Math.random() - 0.5)) // shuffling the array using the sort method

    // This function will be called when the user click on a card
    function handleClick(id){
        // just for testing
        alert(id)
    }

    return (
        <div className="container">
            { items.map((item, index) => (
                <Card key={index} item={item} id={index} handleClick={handleClick} />
            )) }
        </div>
    )
}

export default Cards

Then I created the Card.js component.

// components/Card.js
function Card({item, id, handleClick}){
    // geting classes based on status of the card
    const itemClass = item.stat ? " active " + item.stat : ""

    return (
        <div className={"card" + itemClass} onClick={() => handleClick(id)}>
            <img src={item.img} alt="" />
        </div>
    )
}

export default Card

And finally I added the JavaScript game logic in Cards.js component

// components/Cards.js
import { useState } from 'react'
import Card from './Card'

function Cards(){
    const [items, setItems] = useState([
        { id: 1, img: '/img/html.png', stat: "" },
        { id: 1, img: '/img/html.png', stat: "" },
        { id: 2, img: '/img/css.png', stat: "" },
        { id: 2, img: '/img/css.png', stat: "" },
        { id: 3, img: '/img/js.png', stat: "" },
        { id: 3, img: '/img/js.png', stat: "" },
        { id: 4, img: '/img/scss.png', stat: "" },
        { id: 4, img: '/img/scss.png', stat: "" },
        { id: 5, img: '/img/react.png', stat: "" },
        { id: 5, img: '/img/react.png', stat: "" },
        { id: 6, img: '/img/vue.png', stat: "" },
        { id: 6, img: '/img/vue.png', stat: "" },
        { id: 7, img: '/img/angular.png', stat: "" },
        { id: 7, img: '/img/angular.png', stat: "" },
        { id: 8, img: '/img/nodejs.png', stat: "" },
        { id: 8, img: '/img/nodejs.png', stat: "" }
    ].sort(() => Math.random() - 0.5))

    // prev is short for previous
    // prev will store the id of previously clicked card
    const [prev, setPrev] = useState(-1)

    function check(current){
        if(items[current].id == items[prev].id){
            // if previously clicked card is same as current card
            // set the stat of both cards to correct
            items[current].stat = "correct"
            items[prev].stat = "correct"
            setItems([...items])
            setPrev(-1)
        }else{
            // if previously clicked card is same not as current card
            // set the stat of both cards to wrong
            items[current].stat = "wrong"
            items[prev].stat = "wrong"
            setItems([...items])

            // After 1 second, set the stat of both cards to ""
            // So they would flip back
            setTimeout(() => {
                items[current].stat = ""
                items[prev].stat = ""
                setItems([...items])
                setPrev(-1)
            }, 1000)
        }
    }

    function handleClick(id){
        if(prev === -1){ // if prev is -1, then it means no card was clicked previously.
            items[id].stat = "active"
            setItems([...items])
            setPrev(id)
        }else{
            check(id)
        }
    }

    return (
        <div className="container">
            { items.map((item, index) => (
                <Card key={index} item={item} id={index} handleClick={handleClick} />
            )) }
        </div>
    )
}

export default Cards

you can find the complete coded here.

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

Was it helpful? Support me on Patreon

Developer console in phone? Chrome APP tricks

Shuvo — Sat, 27 Nov 2021 14:52:46 +0000

Sometimes while surfing through a site on your smartphone you might have wanted to know how the codes for the site looks like. But you never saw it because you didn't wanted to get up and turn on the Computer.
But what if I told you can view source code of any website right on your smartphone using the Chrome APP.

In this article we are going to see some useful Chrome APP tricks that every developers should know.

1. View Source Code:

To get the source code of any website from your Chrome browser App all you have to do is add view-source: in front of the URL.

2. Run JavaScript through address bar:

In the address bar of your Chrome app you can run JavaScript Also. The syntax is javascript:your_code

3. Developer console on smartphone:

You can use eruda to access desktop like developer console from your smartphone.
Just go the website you're developing. Then type javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })(); and hit enter. And you'll be able to acces desktop like developer console from you browser.

PS. if you just copy past it, chrome will remove javascript: from the beginning so you have to type it back manually.

Got a trick? Share it in the comments.

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

Was it helpful? Support me on Patreon

Let's create a Pixel Art maker with JavaScript

Shuvo — Thu, 25 Nov 2021 14:41:52 +0000

In one of my previous article I have showed you how to create a paint app using JavaScript. And in this article we will learn how to create a pixel art generator using HTML, CSS and vanilla JS.

Pixel art app is also a drawing/paint app but you have big pixels so they are less in number so your drawing won't be that detailed

Video tutorial available here

Our app will have:

Color picker/input to change the color of our brush
A reset button to reset our grid
A input through which we can set the size of our pixels/grid

Let's start

So lets create the 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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="navbar">
        <button class="btn">Reset</button>
        <input type="color" value="#00eeff" class="color">
        <input type="number" value="30" class="size">
    </div>
    <div class="container">
        <!-- Here we will add divs representing our pixels -->
    </div>
    <script src="main.js"></script>
</body>
</html>

and now lets style them in our style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    height: 100%;
}
body{
    background-color: blueviolet;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.navbar, .container{
    background-color: rgb(28, 28, 29);
    width: 800px;
    border-radius: 3px;
}
.navbar{
    padding: 1em;
    margin-bottom: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn, input{
    height: 35px;
    padding: 0 1em;
}
.color{
    padding: 0 .25em;
    width: 100px;
    margin: 0 1em;
}

.container{
    --size: 4;
    height: 800px;
    display: grid;
    grid-template-columns: repeat(var(--size), 1fr);
    grid-template-rows: repeat(var(--size), 1fr);
    gap: 3px;
    padding: 3px;
}
.pixel{
    background-color: rgb(61, 61, 61);
    border-radius: 2px;
}

Notice that we are using `--size` variable. We will be updating that in our JavaScript

Anyways now if we open it up in our browser we should see something like this

Now in our JavaScript lets populate the container with divs which will be our pixels.
We will create a helper function called populate for that

const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')

// Getting the value of the size input
let size = sizeEl.value

function populate(size) {
  // Updating the --size CSS variable
  container.style.setProperty('--size', size)
  for (let i = 0; i < size * size; i++) {
    const div = document.createElement('div')
    div.classList.add('pixel')

    container.appendChild(div)
  }
}

populate(size)

Now you should see a grid displayed

Okay so now when we press down our mouse and move it, we want to color the div that is under our cursor.
So lets add mouseover and mousdown event on our pixels

const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')

let size = sizeEl.value

// We will only color our pixels if draw is set to true
let draw = false

function populate(size) {
  container.style.setProperty('--size', size)
  for (let i = 0; i < size * size; i++) {
    const div = document.createElement('div')
    div.classList.add('pixel')

    div.addEventListener('mouseover', function(){
        if(!draw) return
        div.style.backgroundColor = color.value
    })
    div.addEventListener('mousdown', function(){
        // We don't need to check if draw is true here
        // because if we click on a pixel that means we want to draw that pixel
        div.style.backgroundColor = color.value
    })

    container.appendChild(div)
  }
}

// Set draw to true when the user press down the mouse
window.addEventListener("mousedown", function(){
    draw = true
})
// Set draw to false when the user release the mouse
window.addEventListener("mouseup", function(){
    draw = false
})

populate(size)

Now lets make the reset button work. When the reset button is clicked we simply have to empty out the inner html of our container and call the populate function again.

const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')

let size = sizeEl.value
let draw = false

function populate(size) {
  container.style.setProperty('--size', size)
  for (let i = 0; i < size * size; i++) {
    const div = document.createElement('div')
    div.classList.add('pixel')

    div.addEventListener('mouseover', function(){
        if(!draw) return
        div.style.backgroundColor = color.value
    })
    div.addEventListener('mousdown', function(){
        div.style.backgroundColor = color.value
    })

    container.appendChild(div)
  }
}

window.addEventListener("mousedown", function(){
    draw = true
})
window.addEventListener("mouseup", function(){
    draw = false
})

function reset(){
    container.innerHTML = ''
    populate(size)
}

resetBtn.addEventListener('click', reset)

populate(size)

And finally when we change the value of our input we want to create a new grid with the entered size.

const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')

let size = sizeEl.value
let draw = false

function populate(size) {
  container.style.setProperty('--size', size)
  for (let i = 0; i < size * size; i++) {
    const div = document.createElement('div')
    div.classList.add('pixel')

    div.addEventListener('mouseover', function(){
        if(!draw) return
        div.style.backgroundColor = color.value
    })
    div.addEventListener('mousdown', function(){
        div.style.backgroundColor = color.value
    })

    container.appendChild(div)
  }
}

window.addEventListener("mousedown", function(){
    draw = true
})
window.addEventListener("mouseup", function(){
    draw = false
})

function reset(){
    container.innerHTML = ''
    populate(size)
}

resetBtn.addEventListener('click', reset)

sizeEl.addEventListener('keyup', function(){
    size = sizeEl.value
    reset()
})

populate(size)

And just like that we have successfully created a Pixel Art creator using vanilla JavaScript.
You can find the finished codes here.

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

DEVELOPER

width="710"
height="399"
src="https://www.youtube.com/embed/uWAn5TFZY_E"
allowfullscreen
loading="lazy">

DEV Community: Shuvo

Functional tabs with only CSS (No JavaScript)

Basic setup:

Highlight the active tab:

Final code:

Thank you for reading!

When semicolon isn't optional in JavaScript

Without semicolon:

With semicolon:

So WTF?

Did you catch it?

Thank you for reading!

I forgot about el.outerHTML so I made this

0shuvo0 / htmlToString

I forgot about el.outerHTML so I made this, it takes a DOM element and returns its html as string

htmlToString

Convert html/DOM element to string

Works with rendered and virtual DOM

Installation

Or using CDN

Usage

Example Output

There was just three main question.

And here are the answers

What's the tag name of the element

How to get all the attributes present on a HTML element

Check if a tag is self closing tag or not

ShuvoFollow

Support me on Patreon

Let's create an Add Tags input with REACT JS

ShuvoFollow

Was it helpful? Support me on Patreon

Let's create a digital clock with CSS & JS

ShuvoFollow

Was it helpful? Support me on Patreon

Box shadow vs. drop shadow in CSS

ShuvoFollow

Was it helpful? Support me on Patreon

Why you can't trust setTimeout

setTimeout in JavaScript takes time in millisecond so it must be very accurate right?

Conclusion

ShuvoFollow

Was it helpful? Support me on Patreon

CSS Text Drawing Animation with SVG

Step 1: creating the SVG

Step 2: The HTML

Step 3: Basic styles

Step 4: Getting stroke-dasharray of svg

Step 5: The animation

ShuvoFollow

Was it helpful? Support me on Patreon

Pure CSS infinite space/galaxy with just one Div

Well guess what?

ShuvoFollow

Was it helpful? Support me on Patreon

Creating A Memory Game With React

ShuvoFollow

Was it helpful? Support me on Patreon

Developer console in phone? Chrome APP tricks

In this article we are going to see some useful Chrome APP tricks that every developers should know.

1. View Source Code:

2. Run JavaScript through address bar:

3. Developer console on smartphone:

Got a trick? Share it in the comments.

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

Was it helpful? Support me on Patreon

Let's create a Pixel Art maker with JavaScript

Our app will have:

Let's start

Notice that we are using --size variable. We will be updating that in our JavaScript

ShuvoFollow

Was it helpful? Support me on Patreon

Notice that we are using `--size` variable. We will be updating that in our JavaScript