DEV Community: Masudur Rahman Sourav

React Compound Components: The "Build Your Own Adventure" Pattern

Masudur Rahman Sourav — Mon, 16 Feb 2026 11:07:40 +0000

If you've ever bought a piece of furniture from a certain Swedish store, you know the drill. You don't buy a pre-assembled "Sitting Unit." You buy a frame, cushions, legs, and maybe a weird little wrench, and you put it together yourself.
Compound Components are the Ikea furniture of React.

Instead of building one giant, monolithic component that takes 500 props (), you build a set of smaller components that work together like magic. They share state behind the scenes, but you decide where everything goes.

Let's dive into the pattern that makes libraries like Radix UI and Headless UI possible.

🎨 The Graphical Explanation

Imagine you are building a Tabs component.

The "Mega-Prop" Way (The Old Way) 🦖

You pass a giant configuration object. The component decides the layout. You have zero control. If you want to move the "Tab List" below the "Panels," you have to rewrite the library.


       +-----------------------------+
       |      <Tabs config={...} />  |
       +-----------------------------+
       | [Tab 1] [Tab 2] [Tab 3]     |  <-- Hardcoded position
       |                             |
       |  Content for Tab 1...       |
       +-----------------------------+

The Compound Component Way (The Flexible Way) 🤸

You export a parent (Tabs) and several children (Tab, Panel). The Parent holds the state (which tab is active), but the User decides the layout.

       <Tabs>
          <TabList>  <-- You put this where YOU want
             <Tab>One</Tab>
             <Tab>Two</Tab>
          </TabList>

          <TabPanels>
             <Panel>Content 1</Panel>
             <Panel>Content 2</Panel>
          </TabPanels>
       </Tabs>

The Parent (Tabs) secretly passes state to the children using Context. They communicate telepathically. 🧠✨

💻 The Code: From "Prop Hell" to "Component Heaven"

Let's build a simple Accordion (toggle sections).

1. The Setup (Creating the Context)

First, we need a secret channel for our components to talk.

import React, { createContext, useContext, useState } from 'react';

// 1. Create the Context
const AccordionContext = createContext();

// 2. Create the Parent Component
const Accordion = ({ children }) => {
  const [openIndex, setOpenIndex] = useState(0);

  // The toggle function logic
  const toggleIndex = (index) => {
    setOpenIndex(prev => (prev === index ? null : index));
  };

  return (
    <AccordionContext.Provider value={{ openIndex, toggleIndex }}>
      <div className="accordion-wrapper">
        {children}
      </div>
    </AccordionContext.Provider>
  );
};

2. The Children (Consuming the Context)

Now we create the sub-components. Notice they don't accept isOpen or onClick as props from the user. They grab it from the Context!

// 3. The Item Component (Just a wrapper, usually)
const AccordionItem = ({ children }) => {
  return <div className="accordion-item">{children}</div>;
};

// 4. The Trigger (The clickable part)
const AccordionHeader = ({ children, index }) => {
  const { toggleIndex, openIndex } = useContext(AccordionContext);
  const isActive = openIndex === index;

  return (
    <button 
      className={`accordion-header ${isActive ? 'active' : ''}`}
      onClick={() => toggleIndex(index)}
    >
      {children} {isActive ? '🔽' : '▶️'}
    </button>
  );
};

// 5. The Content (The hidden part)
const AccordionPanel = ({ children, index }) => {
  const { openIndex } = useContext(AccordionContext);

  if (openIndex !== index) return null;

  return <div className="accordion-panel">{children}</div>;
};

// Attach sub-components to the Parent for cleaner imports (Optional but cool)
Accordion.Item = AccordionItem;
Accordion.Header = AccordionHeader;
Accordion.Panel = AccordionPanel;

export default Accordion;

3. Usage (The Magic Moment) 🪄

Look how clean this API is. No complex config objects. Just JSX.

import Accordion from './Accordion';

const FAQ = () => (
  <Accordion>

    <Accordion.Item>
      <Accordion.Header index={0}>Is React hard?</Accordion.Header>
      <Accordion.Panel index={0}>
        Only until you understand `useEffect`. Then it's just chaotic.
      </Accordion.Panel>
    </Accordion.Item>

    <Accordion.Item>
      <Accordion.Header index={1}>Why use Compound Components?</Accordion.Header>
      <Accordion.Panel index={1}>
        Because passing 50 props is bad for your blood pressure.
      </Accordion.Panel>
    </Accordion.Item>

  </Accordion>
);

🏆 Why Should You Do This? (Use Cases)

1. UI Libraries (Tabs, Selects, Menus)

If you are building a design system, this is mandatory. Users will want to put an icon inside the Tab, or move the Label below the Input. Compound components let them do that without bugging you to add a renderLabelBottom prop.

2. Implicit State Sharing

Notice how Accordion.Header automatically knew how to toggle the panel? The user didn't have to wire up onClick={() => setIndex(1)} manually. It "Just Works".

3. Semantic Structure

It reads like HTML. <List><Item /><Item /></List>. It’s declarative and beautiful.

🕳️ The Pitfalls (The "Gotchas")

1. The "Single Child" Restriction

If you try to wrap a child in a <div> that blocks the Context (rare with Context API, but common with the older React.Children.map approach), things break.

Fix: Stick to the Context API pattern shown above. It penetrates through divs like X-rays.

2. Over-Engineering

Don't use this for a simple Button. If a component doesn't have internal state that needs to be shared among multiple distinct children, you probably just need regular props.

3. Name Pollution

If you export Accordion, AccordionItem, AccordionHeader, AccordionPanel, your imports get messy.

Fix: Attach them to the main component: Accordion.Item. It keeps the namespace clean and makes you look like a pro.

🏁 Conclusion
The Compound Component Pattern is the difference between giving someone a fish (a rigid component) and teaching them to fish (a flexible set of tools).

It requires a bit more setup code for you (the library author), but it creates a delightful experience for the developer using your component. And isn't that what we all want? To be loved by other developers? (Please validate me). 🥺🤝

React Form Patterns: Controlled vs. Uncontrolled Components

Masudur Rahman Sourav — Fri, 06 Feb 2026 05:57:38 +0000

If React components were people, Controlled Components would be that friend who plans every minute of their vacation in an Excel spreadsheet. Uncontrolled Components would be the friend who shows up at the airport without a ticket, wearing flip-flops, saying, "The universe will provide."

Handling forms in React forces you to choose a side. Do you want to micro-manage every keystroke? Or do you want to let the DOM do its thing and just check the results later?

Let's break down the battle between Controlled and Uncontrolled forms.

🎮 The Controlled Component (The Micro-Manager)

In a Controlled setup, React is the single source of truth. The DOM input doesn't breathe without React's permission.

How it works:

The User types 'A'.
React says, "Hold on, let me update my State first."
React updates State to 'A'.
React tells the Input: "Okay, now you can display 'A'."

It’s a tight feedback loop. It’s secure. It’s predictable. It’s also a little exhausting.

🎨 The Graphical Explanation


    User Types 'H'
           |
           v
  +------------------+
  |  Event Handler   |  "Hey React, they typed H!"
  +--------+---------+
           |
           v
  +------------------+
  |   React State    |  "Updating state to 'H'..."
  +--------+---------+
           |
           v
  +------------------+
  |   Input Value    |  "Displaying 'H' as ordered, sir!"
  +------------------+

💻 The Code

import React, { useState } from 'react';

const ControlFreakForm = () => {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    const value = e.target.value;
    // We can intercept! NO LOWERCASE ALLOWED! 👮‍♂️
    setName(value.toUpperCase());
  };

  return (
    <form>
      <label>Name (Screaming only):</label>
      <input 
        type="text" 
        value={name} 
        onChange={handleChange} 
      />
      <p>Current State: {name}</p>
    </form>
  );
};

✅ Use Case: When you need instant validation (password strength meters), dynamic formatting (credit card spacing), or conditional disabling of the submit button.

🐎 The Uncontrolled Component (The "It Is What It Is")

In an Uncontrolled setup, the data lives in the DOM, not in React state. React is like a landlord who owns the building but doesn't have a key to your apartment. When React needs the data (like on submit), it has to knock on the door (using a ref) and ask, "Hey, what did you write in there?"

How it works:

The User types 'A'.
The Input displays 'A'.
React is asleep.
User hits "Submit".
React wakes up and checks the Ref to see what happened.

🎨 The Graphical Explanation

      User Types 'H'
           |
           v
  +------------------+
  |   DOM Input      |  "I got this. I'll hold the 'H'."
  +------------------+
           |
           | (React ignores this part)
           |
      User Clicks Submit
           |
           v
  +------------------+
  |    React Ref     |  "Yo DOM, what's the value?"
  +------------------+

💻 The Code

import React, { useRef } from 'react';

const WildWestForm = () => {
  const nameInputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Knocking on the DOM's door ✊
    alert(`Welcome, ${nameInputRef.current.value}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Name (I don't care until you submit):</label>
      <input 
        type="text" 
        defaultValue="" 
        ref={nameInputRef} 
      />
      <button type="submit">Submit</button>
    </form>
  );
};

✅ Use Case: When you are migrating legacy code, integrating with non-React libraries (like jQuery plugins... shudder), or building simple forms where you don't need instant validation.

🥊 The Showdown: Comparison

Feature	Controlled	Uncontrolled
Source of Truth	React State	The DOM
Data Access	Instant (on every keystroke)	On Demand (usually submit)
Validation	Real-time (as you type)	On Submit
Performance	Re-renders on every keystroke	Only re-renders on submit
Code Volume	More boilerplate (handlers, state)	Less boilerplate (refs)

🕳️ The Pitfalls (Gotchas)

1. The "File Input" Exception 📁

In React, an is always uncontrolled because its value can only be set by a user, not by code (security reasons). If you try to control a file input value, React will yell at you. Just use a Ref.

2. The Performance Myth 🐌

People say Controlled components are slower because they re-render on every keystroke. Unless you are pasting the entire script of The Bee Movie into a text area on a low-end Android phone from 2015, it usually doesn't matter. React is fast. Don't optimize prematurely.

3. The null vs undefined Trap 🪤

If you initialize a controlled input with value={undefined} (or null) and then switch it to a string later, React will scream: "A component is changing an uncontrolled input of type text to be controlled."
Fix: Always initialize state with an empty string useState('').

🏁 Conclusion

So, which one should you choose?

Controlled is the standard. It’s robust, "React-y," and allows you to do cool things like disable the submit button if the email is invalid. It’s high-maintenance but high-reward.

Uncontrolled is the quick-and-dirty. It’s great for quick hacks, simple forms, or when you just don't want to write a handleChange function for the 100th time today.

The Container & Presentational Pattern: Separation of Concerns in React

Masudur Rahman Sourav — Wed, 04 Feb 2026 05:23:14 +0000

If you’ve been writing React for a while, you’ve probably created a "God Component." You know the one. It fetches data, manages fifty state variables, handles form validation, calculates the Fibonacci sequence for some reason, and also renders the HTML. It’s a messy, co-dependent relationship where everyone is screaming.

Enter the Container/Presentational Pattern (also known as Smart vs. Dumb components, though we try to be nicer about the naming these days). It’s couples therapy for your code.

🎨 The Graphical Explanation

Imagine a high-end restaurant.

The Container ( The Chef / Manager ): Sweating in the back. Dealing with suppliers (APIs), managing inventory (State), and screaming about hygiene standards (Business Logic). They don't care what the plate looks like; they just care that the food exists.

The Presentational ( The Waiter / Plater ): Takes the prepared food, arranges it beautifully, and smiles at the customer. They don't know how the sausage is made, and frankly, they don't want to know.

Here is how it looks in your app structure:

   +-------------------------+
   |   CONTAINER COMPONENT   |
   |  (The Brains / Logic)   |
   +-------------------------+
   | 1. Fetches Data (API)   |
   | 2. Manages State        |
   | 3. Defines Handlers     |
   +-----------+-------------+
               |
    (Passes Data via Props)
               |
               v
   +-------------------------+
   | PRESENTATIONAL COMPONENT|
   |  (The Looks / UI)       |
   +-------------------------+
   | 1. Receives props       |
   | 2. Renders JSX / CSS    |
   | 3. Looks Fabulous       |
   +-------------------------+

💻 The Code: A Tale of Two Components

Let's look at a classic example: A list of Crypto Currencies.

1. The Presentational Component (The "Pretty" One)

This component is pure. It has no idea where the data comes from. It just takes props and turns them into pixels. It has zero anxiety.


// CryptoList.jsx
import React from 'react';

const CryptoList = ({ coins, isLoading, onRefresh }) => {
  if (isLoading) {
    return <div className="spinner">Loading your digital gold...</div>;
  }

  return (
    <div className="crypto-card">
      <h2>🚀 To The Moon!</h2>
      <ul>
        {coins.map((coin) => (
          <li key={coin.id} className="coin-row">
            <strong>{coin.name}</strong>: ${coin.price.toFixed(2)}
          </li>
        ))}
      </ul>
      <button onClick={onRefresh}>Refresh Prices</button>
    </div>
  );
};

export default CryptoList;

2. The Container Component (The "Smart" One)

This component does the heavy lifting. It doesn't care about CSS classes. It cares about useEffect, fetch, and handling errors without crying.

// CryptoListContainer.jsx
import React, { useState, useEffect } from 'react';
import CryptoList from './CryptoList';

const CryptoListContainer = () => {
  const [coins, setCoins] = useState([]);
  const [loading, setLoading] = useState(true);

  const fetchCoinData = async () => {
    setLoading(true);
    // Simulating an API call because I don't have an API key handy
    setTimeout(() => {
      setCoins([
        { id: 1, name: 'Bitcoin', price: 45000 },
        { id: 2, name: 'Ethereum', price: 3200 },
        { id: 3, name: 'Doge', price: 0.12 },
      ]);
      setLoading(false);
    }, 1000);
  };

  useEffect(() => {
    fetchCoinData();
  }, []);

  // Notice: No HTML here, just passing data down!
  return (
    <CryptoList 
      coins={coins} 
      isLoading={loading} 
      onRefresh={fetchCoinData} 
    />
  );
};

export default CryptoListContainer;

🏆 Why Should You Do This? (Use Cases)

1. Reusability (The Outfit Change)

You can use the same CryptoList UI to display data from a different source (like a "Favorites" list vs "All Coins" list) without rewriting the styling logic.

2. Separation of Concerns (Mental Health)

When you need to fix a styling bug (margin issues, ugh), you open the Presentational file. When the data isn't loading, you open the Container. You don't have to scroll past 400 lines of logic to find the

tag.

3. Designer/Developer Harmony

If you have a designer on your team who knows HTML/CSS but is scared of useEffect, they can work safely in the Presentational files without accidentally creating an infinite render loop that crashes the browser.

🕳️ The Pitfalls (The "Gotchas")

1. The "Hook" Twist

Plot twist! Since React Hooks (useCustomHook) came out in 2019, strictly creating "Container Components" (class-style) is less common.
Nowadays, the Container is often replaced by a Custom Hook.

Old Way:
Container Component wraps UI Component.
New Way:
UI Component calls useCryptoData() hook.
Verdict:
The concept (separation of logic/view) is still king, but the implementation has shifted.

2. Over-Engineering

Don't create a Container/Presenter pair for a simple "Submit Button." If a component is 10 lines of code, splitting it into two files just makes you look pretentious. Keep it simple.

3. Prop Drilling Hell

If you have containers inside containers inside containers, passing props down becomes a nightmare. If you find yourself passing user={user} down 15 levels, stop. Get help. Use Context.

🏁 Conclusion

The Container/Presentational pattern is like separating your laundry into "Whites" and "Colors." It takes a little extra effort upfront, but it prevents your codebase from turning into a muddy, grey mess later on.

Keep your UI dumb and your logic smart, and your React app will be a happy place. 🚀

Understanding Hoisting in JavaScript: Why Can We Use `var` Before Declaration?

Masudur Rahman Sourav — Tue, 25 Mar 2025 19:37:37 +0000

Hoisting is a fundamental concept in JavaScript that often confuses beginners. You might have seen situations where a variable declared using var is accessed even before it is defined in the code, without throwing an error. How does that work?

To understand this, let's dive into hoisting, the JavaScript execution context, and how the JavaScript engine processes code.

What is Hoisting?

Hoisting is JavaScript’s default behavior of moving variable and function declarations to the top of their scope before execution. This means JavaScript allocates memory for variables and functions during the creation phase of execution, making them available before the code actually runs.

But there’s an important distinction:

Function declarations are hoisted with their definitions, meaning you can call a function before declaring it.
Variables declared with var are hoisted but initialized with undefined, meaning you can reference them before declaration, but they won't hold their actual value until the assignment line is executed.
let and const variables are hoisted but not initialized, so accessing them before declaration results in a ReferenceError.

The JavaScript Execution Context and Hoisting

If don't know what is JavaScript Execution Context or doesn't have a full understanding of it read my this article :

Behind the Scenes of JavaScript: How Execution Works with Execution Context & Call Stack

JavaScript executes code in two phases inside the Execution Context:

Creation Phase (Memory Allocation)

The JavaScript engine scans the code and sets up the execution context.
It allocates memory for variables and functions.
Functions are stored with their full definitions.
Variables declared with var are set to undefined.
let and const variables are stored but are not initialized, causing the Temporal Dead Zone (TDZ) error if accessed before declaration.

Execution Phase (Code Execution)

JavaScript runs the code line by line.
Variable values get assigned during execution.
Function calls are executed where they appear.

Example: Hoisting with `var`

console.log(x); // Output: undefined
var x = 10;
console.log(x); // Output: 10

Behind the Scenes (How JavaScript Executes It)

During the Creation Phase, JavaScript sees var x = 10; and does the following:

Declares x and assigns it undefined in memory.
The console.log(x); at the top executes, printing undefined.
When the execution reaches x = 10;, it assigns 10 to x.
The second console.log(x); prints 10.

The hoisting behavior explains why console.log(x) doesn’t throw an error but prints undefined instead.

Why Doesn’t `let` and `const` Work the Same Way?

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;

Here, y is hoisted, but it remains uninitialized in a Temporal Dead Zone (TDZ) until the execution reaches let y = 20;. This protects developers from accidental errors by ensuring variables cannot be accessed before assignment.

Hoisting with Functions

Unlike var, function declarations are fully hoisted with their definitions.

greet(); // Output: Hello, World!

function greet() {
    console.log("Hello, World!");
}

JavaScript hoists the entire function definition, so calling greet() before its declaration works perfectly.

Notes:

Hoisting moves variable and function declarations to the top of their scope before execution.
var variables are hoisted and initialized as undefined, allowing access before declaration.
let and const are hoisted but remain uninitialized, causing a ReferenceError if accessed before declaration.
Function declarations are fully hoisted, meaning they can be called before being defined.
Hoisting helps JavaScript interpret code efficiently but can lead to unexpected behavior if not understood properly.

Best Practices to Avoid Hoisting Issues

Always declare variables at the beginning of their scope.
Prefer let and const over var to avoid unintended undefined values.
Declare and initialize variables at the same time to avoid unexpected results.
Use arrow function (const func = () => {}) instead of function declarations if you don’t want them to be hoisted.

Behind the Scenes of JavaScript: How Execution Works with Execution Context & Call Stack

Masudur Rahman Sourav — Sat, 22 Mar 2025 04:18:08 +0000

Since there’s a lot to cover, grab a coffee and stay focused! Each section connects to the next, so if you skip one, you might miss something important. Let’s dive in and make sense of it all together!

Execution of JavaScript:

JavaScript runs code one step at a time because it's a synchronous, single-threaded language. But how does it manage everything?

It all comes down to the execution context, which is like a backstage manager for your code. JavaScript uses the call stack to keep track of what’s running. Every piece of code gets its own execution context, starting with a global execution context and adding temporary ones as needed.

So, what exactly is an execution context, and how does it work? Let’s break it down!

Execution Context in JavaScript:

It is a container or box-like model consisting of two blocks. The first block manages memory allocation for variables and functions, using a key-value pair mapping. This is also known as the variable environment. The second block handles line-by-line code execution and is referred to as the thread of execution. It's important to note that JavaScript can only execute one line or command at a time. Upon running JavaScript code, an execution context is immediately created to facilitate program execution.

notes:

Memory block also known as Variable Environment.
Code block also known as the thread of execution.

Example for in-depth exploration:
Here I will use the example which is most commonly used to understand execution context of JavaScript:

1. var n = 2;
2. function square(num) {
3.         var squareValue = num * num;
4.         return squareValue;
5. }
6. var squareOfTwo = square(n);
7. var squareOfThree = square(3);

Execution context have two phases:

Memory creation phase
Code execution phase

Phase 1: Memory Creation

Here all variables name will be the key and stored on the memory as code execution isn't happened yet all the values of the variable will be undefined. The functions name and body will be stored on the memory block as it is.

notes:

All variables value will be undefined in this phase
Functions will be stored in memory without any change of it's body.

*Phase 2: Code Execution
*
Here all the command or statement of the code executed line by line top to bottom. While executing line by line it assign the value of the key in the memory block and skip the body of a function until it invoked on the code. Function is a beautiful entity in JavaScript. In JavaScript for every function there will be a function execution context or temporally execution context.

Here, we can see in that after executing the 1st line of the code n is not undefined anymore it gets replaced by 2.

After executing 1st line the code execution skip the function and try to execute the 6th line and here this encounter a function invoke. So, as I said before a new functional or temporally execution context will be created. There will be also 2 phases as global execution context. When a functional execution context encounter a return the it get deleted from the call stack.

Here, memory creation phase happened on functional execution context and as parameter also a variable of the function. Then it stored in memory as undefined initially. After the memory creation phase the code execution phase start. The value of num = n so, num = 2 and squareValue = num * num so, squareValue = 2 * 2 = 4.

After this on code execution in functional execution context encounter return. As I said previously if code execution in a function encounter return the functional execution context of that function deleted immediately.So for our code the functional execution context get deleted and it returns the value to the global execution context. In the line of 6 after invoke the function we get the value of squareOfTwo or squareOfTwo = 4

Now, you know what happen while executing the 7th line of the code. Here, is another function invoke.Another functional execution context will be created and it will go through all two phases of execution context and finally get deleted. You can try it by your own. Now the mystery is how JavaScript handle all those complex global and functional execution? Simply with the call stack of JavaScript.

Handling Execution context with Call Stack:

The Call Stack is like a to-do list for your code, built with execution contexts. Think of it as a stack of boxes. The bottom box is the Global Execution Context – the starting point. When a function runs, a new box (its Function Execution Context) gets stacked on top. Once that function finishes, its box is removed, or 'popped' off. This keeps happening until all function boxes are gone, and finally, the Global box is also removed, signaling the end of your program's run.

I hope this explanation helped you understand how JavaScript runs. It's like a neat little dance of boxes and lists, right? If you still don't think JavaScript is interesting, maybe you just haven't seen all it can do yet. Try learning more about it – you might find it's cooler than you thought.

After this article read the article below to know about JavaScript hoisting :

Understanding Hoisting in JavaScript: Why Can We Use var Before Declaration?

How Make Text-Formatter with Download functionality with JS

Masudur Rahman Sourav — Wed, 05 Jan 2022 18:54:32 +0000

Hey,
Hope you all are doing good. Today we are going to learn how to make a Text-Formatter or Case converter with JS and little bit of HTML and CSS. First what is a text-formatter or case converter. It is a simple application which will format your text in a proper way. TextFormatter is the text engine that provides services for formatting text and breaking text lines. TextFormatter can handle different text character formats and paragraph styles, and includes support for international text layout.

What we will need for this. We just need a input field and some button and we will write some logic with JS to make those proper.

first start with the HTML.Here is my HTML code:

index.html

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Case Converter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title"><h1>Case Converter</h1></div>
<div class="text">
    <textarea></textarea>
</div>
<div class="buttons">
    <button id="upper-case">Upper Case</button>
    <button id="lower-case">Lower Case</button>
    <button id="proper-case">Proper Case</button>
    <button id="sentence-case">Sentence Case</button>
    <button id="save-text-file">Save The File</button>
</div>
<script src="main.js"></script>
</body>
</html>

The HTML looks so simple right? Yes, this project will also very easy for you. Let discuss about the HTML first. Here we have a textarea and five buttons. The first button which called Uppercase will convert all letters to uppercase. The button which called lowercase will convert all case to lower case .Proper case will make fist letter of every word capital or uppercase and Sentence case will make all the text to sentence case. What about the Save the file button ? With this you can download your converted text into a .txt file.

We added our main.js file at script tag and we link our CSS style sheet with the link tag inside the head. I hope you understand what I did into the HTML file.

Now we will add some style init.You can style your application how you like. Here is my style file:

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
button{
    background-color: #FFA07A;
    padding: 0.7rem;
    border: none;
    border-radius: 0.3rem;
    margin: 1rem;
    font-size: large;
}
.buttons{
    text-align: center;
}
textarea{
    width: 70rem;
    height: 27rem;
    border-radius: 1rem;
    padding: 1rem;
    outline: none;
    font-size: 2rem;
    font-family: 'Roboto Slab', serif;
}
.text{
    text-align: center;
}
.title{
    text-align: center;
}
@media only screen and (max-width:  480px) {
    textarea{
     height: 10rem;
     width: 25rem;
    }
  }
  @media only screen and (max-width:  1080px) {
    textarea{
     height: 15rem;
     width: 30rem;
    }
  }

  @media only screen and (max-width:  1480px) {
    textarea{
     height: 45rem;
     width: 22rem;
    }
  }

I added some media query also I hope you know why we add media query. media query is for make the application or webpage responsive for many device.

Now, Add some logic with JS or we can say add some brain to our application. Without brain human can't do anything neither our webpage or application.

first we have to get the input from the user

let input = document.querySelector("textarea");

by this we are selecting textarea to get data form here in future. After that it is time to add some functionality in our uppercase button.

document.getElementById("upper-case").addEventListener("click",function (){
    let string = input.value;
    input.value = string.toUpperCase();
 });

here we used pre-built function is .toUpperCase() which make all letter of string to the uppercase.

The lowercase button functionality also same

document.getElementById("lower-case").addEventListener("click",function (){
     let string = input.value;
     input.value = string.toLowerCase();
 });

here we used pre-built function is .toLowerCase() which make all letter of string to the uppercase.

Here the full of my JavaScript code:

main.js

let input = document.querySelector("textarea");
document.getElementById("upper-case").addEventListener("click",function (){
    let string = input.value;
    input.value = string.toUpperCase();
 });
 document.getElementById("lower-case").addEventListener("click",function (){
     let string = input.value;
     input.value = string.toLowerCase();
 });
 function properCase (str) {
     if ((str===null) || (str===''))
         return false;
     else
         str = str.toString();

     return str.replace(/\w\S*/g,
         function(txt){return txt.charAt(0).toUpperCase() +
             txt.substr(1).toLowerCase();});
 }

 document.getElementById("proper-case").addEventListener("click",function (){
     let string = input.value;
     let newString = properCase(string);
     input.value = newString;
 });

 function sentenceCase(theString) {
     let newString = theString.toLowerCase().replace(/(^\s*\w|[\.\!\?]\s*\w)/g,function(c){return c.toUpperCase()});
     return newString;
 }
 document.getElementById("sentence-case").addEventListener("click",function (){
     let string = input.value;
     let newString = sentenceCase(string);
     input.value = newString;
 });

 function download(filename, text) {
     let element = document.createElement('a');
     element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
     element.setAttribute('download', filename);

     element.style.display = 'none';
     document.body.appendChild(element);

     element.click();

     document.body.removeChild(element);
 }
 document.getElementById("save-text-file").addEventListener("click",function () {
     let string = input.value;
     download("text.txt" , string);
 });

Thank you for reading this.

My project's live site : Live
Project's Source file : Source

Follow me on

Twitter
LinkedIn
GitHub
Website

How to Create a IP Finder Web Application With JS

Masudur Rahman Sourav — Sun, 02 Jan 2022 18:58:35 +0000

Hey,
If you are new in JavaScrip it will be interesting for you. Here you can learn to use API on JS. It will be a very very easy project for you. First you have to learn what is an API. API stands for Application Programming Interface pretty messy right but it is a fun thing. In easy way API will send you some data you just have to show them in your Webpage you have to just learn how to fetch a API and how to show the data on your webpage. If you want to learn more about the API just click here and watch the video. It will explain you in a easy way. But again you don't have to learn the internal processing of an API.

First, We have to write some code for our HTML page. Here is a simple code which I used you can use this or write by your own :

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>Find Your IP</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main-items">
        <div class="main-text">
            <h1>Here Is Your IP :</h1>
            <h2 class="ip"></h2>
            <h1>Your ISP is :</h1>
            <h2 class="isp"></h2>
            <h1>Your Location :</h1>
            <h2 class="location"></h2>
        </div>
    </div>
    <script src="main.js"></script>
</body>

</html>

It will look so simple without any styles you probably know that HTML without CSS it almost like a man without cloths. So, let's put some cloths on our HTML webpage. HA! HA! HA!,
Here is my CSS style file but here again you can style your own webpage in your own way.

style.css

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@1,500&display=swap');
body {
    font-family: 'Fira Sans', sans-serif;
    background-image: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 119, 1) 24%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

h1 {
    color: rgb(42, 81, 209);
}

.main-text {
    width: 25em;
    background-color: aliceblue;
    text-align: center;
    border: 1em solid rgb(73, 167, 230);
    border-radius: 2em;
}

.main-text h1 {
    margin: .5em;
}

.main-items {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 7em;
}

Now we will add some brain on our webpage which call JavaScript. First we will have to fetch the API if you don't know how to fetch a API watch the video he explained this clearly Click here . get your own API link from ipify . Then fetch the API in this way :

fetch('Your URL provided by ipify')
  .then(response => response.json())
  .then(data => changeTheDom(data));

here fetch getting response from ipify API and .json making this as json . Then you data is sending on changeTheDom function.

Here the changeTheDom function code:

function changeTheDom(data) {
    let IP = data.ip;
    let dom1 = document.querySelector('.ip');
    dom1.innerHTML = IP;
    let ISP = data.isp;
    let dom2 = document.querySelector('.isp');
    dom2.innerHTML = ISP;
    let dom3 = document.querySelector('.location');
    dom3.innerHTML = data.location.city + ' , ' + data.location.region + ' , ' + data.location.country;
}

in this piece of function we are changing the DOM we are getting the ip element by data.ip. We selected the ip class by querySelector and replacing its innerHTML value with IP.And in this way we changed other values also.

Thanks for reading .
My project's live site : Live
Project's Source file : Source

Follow me on

Twitter
LinkedIn
GitHub
Website

DEV Community: Masudur Rahman Sourav

React Compound Components: The "Build Your Own Adventure" Pattern

React Form Patterns: Controlled vs. Uncontrolled Components

🎮 The Controlled Component (The Micro-Manager)

🐎 The Uncontrolled Component (The "It Is What It Is")

🥊 The Showdown: Comparison

🕳️ The Pitfalls (Gotchas)

🏁 Conclusion

The Container & Presentational Pattern: Separation of Concerns in React

🎨 The Graphical Explanation

💻 The Code: A Tale of Two Components

🏆 Why Should You Do This? (Use Cases)

🕳️ The Pitfalls (The "Gotchas")

🏁 Conclusion

Understanding Hoisting in JavaScript: Why Can We Use `var` Before Declaration?

What is Hoisting?

The JavaScript Execution Context and Hoisting

Example: Hoisting with var

Why Doesn’t let and const Work the Same Way?

Hoisting with Functions

Notes:

Best Practices to Avoid Hoisting Issues

Behind the Scenes of JavaScript: How Execution Works with Execution Context & Call Stack

Execution of JavaScript:

How Make Text-Formatter with Download functionality with JS

How to Create a IP Finder Web Application With JS

Example: Hoisting with `var`

Why Doesn’t `let` and `const` Work the Same Way?