DEV Community: DHANRAJ S

React Explained — What It Is, Why You Need It, and How to Set It Up the Right Way

DHANRAJ S — Thu, 16 Apr 2026 16:06:08 +0000

Hey!

Before we start — have you ever built something with JavaScript and thought:

"Why is this getting so complicated so fast?"

You're not alone. Every developer hits that wall.

That's exactly why React exists. And by the end of this blog, you'll know what React is, why it matters, and how to get started with it the right way.

Let's go.

1. What Is React?

React is a JavaScript library built by Facebook (now Meta) in 2013.

It is used to build user interfaces — the part of the app that users see and interact with.

React does not replace JavaScript. It is written in JavaScript. But it gives you a smarter, cleaner way to build complex UIs.

Think of it like this.

JavaScript is like raw ingredients — flour, eggs, butter. You can make a cake with them, but it takes a lot of effort and the process can get messy fast.

React is like a baking kit — everything is organized, structured, and designed to make the process faster and less error-prone.

Same ingredients. Much better result.

2. Why Do We Need React Instead of JavaScript?

This is the most important question. Let's be honest about it.

Plain JavaScript works. You can build anything with it. But as your app grows — things start to break down.

Here is a real example.

Imagine you are building a social media feed. You have:

A list of posts
A like button on each post
A comment count that updates when someone comments
A notification bell that updates when something changes
A user profile section at the top

In plain JavaScript — every time something changes, you have to manually find the right element in the DOM and update it.

// Plain JavaScript — updating manually every time
document.getElementById("like-count").innerText = newCount;
document.getElementById("notification-bell").innerText = newNotifications;
document.getElementById("comment-count").innerText = newComments;

Now imagine doing this for 50 different parts of the page.

It gets messy. It gets slow. And one mistake breaks everything.

React solves this with one core idea — components and a virtual DOM.

3. How React Solves the Problem

React introduces two things that change everything.

Components

A component is a small, reusable piece of UI.

Instead of writing one giant HTML file — you break your page into small independent pieces.

function LikeButton() {
  return <button>Like</button>;
}

function Post() {
  return (
    <div>
      <p>This is a post</p>
      <LikeButton />
    </div>
  );
}

Each component manages its own logic and display. You build once — use anywhere.

Virtual DOM

Quick question for you.

When you click "like" on a post — should the entire page reload? Or just the like count?

Obviously just the like count.

But in plain JavaScript, you have to figure that out yourself and manually update the right element.

React handles this automatically using a Virtual DOM.

Here is how it works:

React keeps a copy of the real DOM in memory — this is the Virtual DOM
When something changes, React creates a new Virtual DOM
It compares the old and new Virtual DOM
It finds exactly what changed
It updates only that part in the real DOM

The result? Faster updates. Less work. No manual DOM hunting.

4. What Is a Single Page Application (SPA)?

Before we go further — you need to understand this concept. Because React is built for it.

Traditional websites reload the entire page every time you click a link.

You click "About" — the browser sends a request to the server, the server sends back a whole new HTML page, the browser loads it from scratch.

That is a Multi Page Application (MPA).

A Single Page Application works differently.

The browser loads one HTML page at the start. After that — React takes over. When you navigate, React swaps out just the content on screen. No full page reload. No request to the server for a new page.

Think of it like a TV.

When you change channels — the TV itself does not restart. Only what is playing on screen changes.

That is exactly how an SPA works.

5. Single Page Application vs Multi Page Application

	Single Page Application (SPA)	Multi Page Application (MPA)
How it works	One HTML file, content swaps on screen	Separate HTML page for every route
Page reload	No full reload on navigation	Full reload on every navigation
Speed after load	Very fast	Depends on server response
Initial load	Slightly slower (loads everything upfront)	Faster initial load
SEO	Needs extra setup for SEO	Naturally good for SEO
Best for	Dashboards, apps, tools	Blogs, e-commerce, content sites
Examples	Gmail, Notion, Figma	Wikipedia, news sites, Amazon

Quick question for you.

When you use Gmail — do you notice the page never fully reloads when you open an email? You just see the email content appear on the right side.

That is a Single Page Application in action.

6. How to Set Up React

There are two popular ways to set up a React project:

Create React App (CRA)
Vite

Let's understand both before you pick one.

7. Create React App (CRA)

CRA was the official way to start a React project for a long time.

You run one command and it sets up everything for you — React, Webpack, Babel, and a development server.

npx create-react-app my-app
cd my-app
npm start

That's it. Your React app runs at http://localhost:3000.

The project structure looks like this:

my-app/
  node_modules/
  public/
    index.html
  src/
    App.js
    index.js
  package.json

src/App.js is where you write your React code.
public/index.html is the single HTML file React injects into.

8. Vite

Vite is a newer and faster build tool.

It was not built specifically for React — but it supports React very well and has become the preferred choice for most developers today.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Your React app runs at http://localhost:5173.

The project structure looks like this:

my-app/
  node_modules/
  public/
  src/
    App.jsx
    main.jsx
  index.html
  package.json
  vite.config.js

Quick Summary — 5 Things to Remember

React is a JavaScript library — used to build user interfaces with reusable components.
React solves the DOM problem — instead of manually updating the page, React figures out what changed and updates only that part using the Virtual DOM.
React is built for SPAs — Single Page Applications load once and swap content without full page reloads, making them fast and smooth.
SPA vs MPA — SPAs are best for apps and dashboards. MPAs are best for content-heavy sites that need SEO out of the box.
Use Vite, not CRA — CRA is deprecated. Vite is faster, lighter, and actively supported. It is the right choice for every new React project today.

React can feel like a big jump at first. But once you understand components, state, and how the Virtual DOM works — everything starts to click.

The best way to learn React is to build something with it. Start small. A counter. A todo list. A weather card.

Pick one and build it.

If this helped you understand React better, drop a comment below. What are you planning to build first?

Thanks for reading. Keep building.

I Built a Todo List App with HTML, CSS & JS — Here's What I Learned

DHANRAJ S — Tue, 07 Apr 2026 15:35:51 +0000

Hey!

I built a Todo List app.

Simple? Yes. But this project taught me some JavaScript concepts I was avoiding for a long time.

localStorage. Dynamic DOM. Event listeners. Array methods.

All in one small project.

Let me walk you through what I built — and what actually clicked for me.

You can check out all my frontend projects right here.

1. What This Todo App Does

Type a task and press Add
Task appears in the list below
Click a task → it gets a strikethrough (marked as done)
Press Delete → task is removed
Refresh the page → tasks are still there (thanks to localStorage)

That last point is the interesting one. Let's get into it.

2. The HTML — Just the Skeleton

<input id="inputText" type="text" placeholder="Enter your task" />
<button class="add-btn" id="btn">Add</button>

<ul id="list"></ul>

That's honestly all the HTML needed.

<input id="inputText"> → where you type the task.

<button id="btn"> → the Add button.

<ul id="list"> → the list that shows all tasks. Starts empty. JavaScript fills it in.

No tasks are hardcoded in HTML. Everything is created dynamically by JS. That was new for me.

3. The CSS — Two Things I Really Liked

The gradient background:

body {
  background:
    radial-gradient(at top left, #9d61ba, transparent),
    radial-gradient(at bottom right, #718777, #554f75);
}

Two radial-gradient layers stacked together — purple top left, green bottom right. They blend in the middle. Looks way better than a solid color.

The gradient text on the heading:

h1 {
  background: linear-gradient(135deg, #f97aff 0%, #7afff0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Quick question for you

How do you make text show a gradient color?

You apply a gradient as the background — then clip it to the text shape — then make the text color transparent so the background shows through.

Three lines working together. The result? Pink to cyan gradient text.

4. The JavaScript — This Is Where I Learned the Most

Instead of dumping the full code at once — let me show you how the app is broken into 4 clear responsibilities:

What it does	Function
Save tasks to browser	`saveTodos()`
Draw tasks on screen	`renderTodos()`
Add a new task	`btn` click event
Load tasks on startup	`renderTodos()` called once at the end

Every action in this app goes through these 4 things.

Add a task → save → redraw.
Delete a task → save → redraw.
Mark done → save → redraw.

Simple pattern. Repeated every time. Once I saw that — the whole JS made sense.

Let's go through the parts that taught me the most.

5. localStorage — Tasks That Don't Disappear

This was the biggest thing I learned in this project.

Normally — when you refresh a page, everything resets. Variables are gone. Your tasks vanish.

localStorage fixes that. It saves data in the browser — and it stays there even after a refresh.

Saving data:

localStorage.setItem("todos", JSON.stringify(todos));

localStorage only stores strings. So JSON.stringify() converts our array into a string first.

todos (array) → JSON.stringify → "[{...},{...}]" (string) → saved in browser.

Loading data:

let todos = JSON.parse(localStorage.getItem("todos")) || [];

localStorage.getItem("todos") → gets the saved string back.

JSON.parse() → converts it back into a real array.

|| [] → if nothing is saved yet, start with an empty array.

Quick question for you

Why do we need both JSON.stringify and JSON.parse?

Because localStorage only understands strings — not arrays or objects. So we convert to string when saving, and convert back when loading.

String in. String out. JS array in between.

6. renderTodos() — Drawing the List Every Time

function renderTodos() {
  ul.innerHTML = "";

  todos.forEach((todo, index) => {
    const li = document.createElement("li");
    // ...build each task item
    ul.appendChild(li);
  });
}

Every time something changes — add, delete, mark done — we call renderTodos().

It clears the list with ul.innerHTML = "" and redraws everything fresh.

document.createElement("li") → creates a new <li> element in JavaScript. No HTML needed.

ul.appendChild(li) → adds it to the page.

I never created HTML elements from JavaScript before this project. Now it feels natural.

7. Marking a Task as Done — Toggle Logic

li.addEventListener("click", () => {
  todos[index].done = !todos[index].done;
  saveTodos();
  renderTodos();
});

When you click a task — it toggles between done and not done.

!todos[index].done → if it's true, make it false. If it's false, make it true.

That ! flips the value every time. One line. Clean toggle.

In CSS, when a task is done — we add the class done which adds a strikethrough:

li.done span {
  text-decoration: line-through;
  color: #9ca3af;
}

JS handles the logic. CSS handles the look. They work together perfectly.

8. Deleting a Task — splice()

delBtn.addEventListener("click", () => {
  todos.splice(index, 1);
  saveTodos();
  renderTodos();
});

todos.splice(index, 1) → removes 1 item from the array at position index.

So if you have ["Buy milk", "Read book", "Go gym"] and delete index 1:

Result → ["Buy milk", "Go gym"].

"Read book" is gone. Array updated. Save. Redraw. Done.

9. The Add Button — Putting It All Together

btn.addEventListener("click", () => {
  const value = inputText.value.trim();
  if (value === "") return;

  todos.push({ text: value, done: false });
  saveTodos();
  renderTodos();
  inputText.value = "";
});

.trim() → removes empty spaces from the start and end. So just pressing spacebar doesn't add a blank task.

if (value === "") return → if the input is empty, stop. Don't add anything.

todos.push({ text: value, done: false }) → add a new task object to the array. Every task has a text and a done status.

Then save → redraw → clear the input.

Every. Single. Time.

10. What This Project Actually Taught Me

localStorage — saving and loading data in the browser. JSON.stringify to save. JSON.parse to load. I use this in every project now.
document.createElement() — building HTML elements with JavaScript instead of hardcoding them. Powerful once it clicks.
splice() — removing items from an array by index. Simple but I always forgot how it worked before this.
Toggle with ! — flipping a boolean value in one character. Clean and satisfying.
renderTodos() pattern — clear and redraw. Simple state management without any library.
Gradient text with CSS — background-clip: text + transparent fill. Looks great. One trick I'll use everywhere now.

Quick Summary

localStorage.setItem + JSON.stringify → saves array as string in browser
localStorage.getItem + JSON.parse → loads it back as a real array
document.createElement() → builds HTML elements from JavaScript
Every action follows one pattern → save → redraw → done
!todo.done → toggles between true and false
renderTodos() → clears and redraws the list every time something changes

You can see my project here: https://dhanraj166.github.io/frontend-projects/todo.

Build this yourself. It's the perfect beginner project.

If you build your own version — drop it in the comments. I'd love to see what you make.

Thanks for reading! Keep building — one project at a time.

I Built a Calculator with HTML, CSS & JS — Here's What I Learned

DHANRAJ S — Sat, 04 Apr 2026 17:36:05 +0000

Hey!

I built a calculator using HTML, CSS, and JavaScript.

It's a small project. But it taught me things that hours of tutorials didn't.

Let me walk you through what I built — and what clicked for me along the way.

1. What the Calculator Does

Type numbers and operators on the screen
Press = or Ans to get the result
Press C to clear everything
Press Del to delete the last character

Simple. Clean. And building it yourself hits different.

2. The HTML — Screen + Buttons

<input type="text" id="result">

<div class="btn">
  <button onclick="clearDisplay()">C</button>
  <button onclick="appendValue('/')">÷</button>
  <button onclick="appendValue('*')">×</button>
  <button onclick="deleteLast()">Del</button>
  <!-- number and operator buttons -->
  <button class="equal" onclick="calculate()">=</button>
</div>

<input id="result"> → the display screen. Shows numbers and the final answer.

Every button has onclick → clicking it runs a JavaScript function.

That's the whole structure. Nothing fancy.

3. The CSS — Dark Look with Grid Layout

Background gradient:

body {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}

Three colors blending together — gives that rich dark feel.

The button grid:

.btn {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

repeat(4, 1fr) → 4 equal columns. Grid handles all the positioning automatically.

*Quick question for you *

Why does the 0 button look wider than the rest?

.zero {
  grid-column: span 2;
}

span 2 → the zero button takes up 2 columns instead of 1. One line. That's it.

Hover effect:

button:hover {
  background: #555;
  box-shadow: 0 1px 6px rgba(174, 167, 167, 0.91);
}

transition: 0.2s on the button makes the hover smooth — not a sudden jump. Makes the calculator feel alive.

4. The JavaScript — Just 4 Functions

const result = document.getElementById("result");

function appendValue(value) {
  result.value += value;
}

function calculate() {
  result.value = eval(result.value);
}

function clearDisplay() {
  result.value = "";
}

function deleteLast() {
  result.value = result.value.slice(0, -1);
}

4 functions. That's the whole brain of this calculator. Let's go through each one.

5. appendValue() — Builds the Expression

function appendValue(value) {
  result.value += value;
}

Every button click adds a character to the screen.

Press 4 → screen shows 4.
Press + → screen shows 4+.
Press 3 → screen shows 4+3.

Just adding characters one by one. Simple.

6. clearDisplay() and deleteLast()

function clearDisplay() {
  result.value = "";        // wipes everything
}

function deleteLast() {
  result.value = result.value.slice(0, -1);  // removes last character
}

clearDisplay → sets screen to empty. Fresh start.

deleteLast → .slice(0, -1) means "keep everything except the last character."

So 123+ becomes 123. Press again → 12. That's your backspace.

7. calculate() and eval() — The Interesting One

function calculate() {
  result.value = eval(result.value);
}

Quick question for you

If the screen shows "45+3" — that's just a string. Plain text.

How does JavaScript know it's math?

That's where eval() comes in.

eval("45+3")   // 48
eval("10*5")   // 50
eval("100/4")  // 25

eval() takes a string and runs it as JavaScript code. So "45+3" becomes actual math — and returns 48.

One line. Whole calculator works.

One thing I learned though →

eval() is powerful but risky in real apps. If someone types harmful code, eval will run it. For a personal project like this — totally fine. For a real app — use a safer math library.

Good to know.

8. What This Project Actually Taught Me

CSS Grid — I always used Flexbox. This project made me finally use Grid properly.
grid-column: span 2 — one line to make a button wider. Didn't know this before.
.slice(0, -1) — negative numbers in slice. Small but useful trick.
eval() — what it does, why it works, and when not to use it.

You don't learn these things from tutorials. You learn them when you need them.

You can see my project here: https://dhanraj166.github.io/frontend-projects/calculator.html/

Thanks for reading! Keep building

JavaScript Promises Explained — With a Real Online Shopping Flow

DHANRAJ S — Sun, 29 Mar 2026 17:03:34 +0000

Hey!

You've probably seen the word Promise in JavaScript and thought —

"What is this? Why does it exist? Why can't JavaScript just... do things normally?"

Fair question. Let's fix that today.

We're going to use a real online shopping flow to understand Promises — step by step, together.

And by the end, this code will make complete sense to you.

1. What Is a Promise? (Before We Touch the Code)

Imagine you order food online.

The app doesn't freeze while your food is being made. You go about your day. When it's ready — you get a notification.

That notification? That's a Promise resolving.

In JavaScript, a Promise is an object that says:

"I'll give you a result — but not right now. Give me some time. I'll get back to you."

A Promise has 3 possible states:

Pending — still working, no result yet
Resolved — finished successfully, here's your result
Rejected — something went wrong, here's the error

Now let's see this in real code.

2. The Full Code — Look at It Once

function checkInternet() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const online = true;
      if (online) {
        resolve("Internet connected ✅");
      } else {
        reject("No internet connection ❌");
      }
    }, 1000);
  });
}

function loginUser() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("User logged in ✅");
    }, 1000);
  });
}

function checkStock() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const stockAvailable = true;
      if (stockAvailable) {
        resolve("Product in stock ✅");
      } else {
        reject("Product out of stock ❌");
      }
    }, 1500);
  });
}

function processPayment() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const paymentSuccess = true;
      if (paymentSuccess) {
        resolve("Payment successful ✅");
      } else {
        reject("Payment failed ❌");
      }
    }, 2000);
  });
}

function placeOrder() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Order placed successfully ✅");
    }, 1000);
  });
}

function sendConfirmation() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Confirmation message sent ✅");
    }, 1000);
  });
}

checkInternet()
  .then(result => {
   console.log(result);
   return loginUser();
   })
  .then(result => {
   console.log(result); 
   return checkStock();
   })
  .then(result => {
   console.log(result);
   return processPayment();
   })
  .then(result => {
   console.log(result);
   return placeOrder(); })
  .then(result => {
   console.log(result);
   return sendConfirmation();
   })
  .then(result => {
   console.log(result);
   console.log("Order completed successfully!");
   })
  .catch(error => {
   console.log("❌ Error:", error);
   });

Looks long, right?

Don't worry. We'll break it into small pieces. Each piece is actually very simple.

3. What's Actually Happening Here? — The Big Picture

This code simulates a complete online order flow.

Think of it like this — when you buy something online, the app runs these steps one after another:

Check Internet
     ↓
  Login User
     ↓
 Check Stock
     ↓
Process Payment
     ↓
  Place Order
     ↓
Send Confirmation
     ↓
   Done!

Each step waits for the previous one to finish before starting.

That's exactly what Promises and .then() do.

4. Let's Understand One Promise First

Let's take the simplest one — checkInternet.

function checkInternet() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const online = true;
      if (online) {
        resolve("Internet connected ✅");
      } else {
        reject("No internet connection ❌");
      }
    }, 1000);
  });
}

Let's read this line by line 👇

return new Promise((resolve, reject) => {
→ We're creating a new Promise. It takes two things — resolve and reject. These are functions JavaScript gives us.

setTimeout(() => { ... }, 1000)
→ Wait 1 second before doing anything. This simulates real network delay.

const online = true
→ This is our fake condition. In a real app, this would check your actual internet.

if (online) { resolve("Internet connected ✅") }
→ If internet is available — call resolve. Promise is successful. ✅

else { reject("No internet connection ❌") }
→ If no internet — call reject. Promise failed. ❌

That's it. That's one complete Promise.

*5. Quick Question for You *

Look at loginUser:

function loginUser() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("User logged in ✅");
    }, 1000);
  });
}

Did you notice something different from checkInternet?

Take a second. Look carefully.

...

It only has resolve — no reject.

Why? Because in this code, login always succeeds. There's no failure case written for it. So we only need resolve.

Simple — but important to notice. 👀

6. Now Let's Talk About resolve and reject

These two are the heart of every Promise.

resolve → "Everything went well. Here's the result. Move to the next step."

reject → "Something went wrong. Stop here. Jump to .catch()."

Here's a clear picture of which functions can fail and which always succeed:

Function	Can Fail?	Why
`checkInternet()`	✅ Yes	Internet might be off
`loginUser()`	❌ No	Always resolves
`checkStock()`	✅ Yes	Item might be out of stock
`processPayment()`	✅ Yes	Payment might fail
`placeOrder()`	❌ No	Always resolves
`sendConfirmation()`	❌ No	Always resolves

Functions that can fail have both resolve and reject.
Functions that always succeed only have resolve.

7. What Does .then() Actually Do?

Now the fun part. Look at how we run all 6 steps:

checkInternet()
  .then(result => {
    console.log(result);
    return loginUser();
  })
  .then(result => {
    console.log(result);
    return checkStock();
  })
  .then(result => {
    console.log(result);
    return processPayment();
  })
  ...

Let's understand .then() clearly.

.then() runs only when the previous Promise resolves successfully.

It receives the resolved value as result — and you can use it however you want.

Then — you return the next Promise inside it. That's what creates the chain.

Think of it like a relay race :

Runner 1 finishes → passes the baton → Runner 2 starts → passes the baton → Runner 3 starts...

Each .then() is one runner. Each return is passing the baton.

8. Step-by-Step Output — Let's Walk Through It Together

Here's what happens when you run this code:

Waits 1 second...

Internet connected ✅

Waits 1 more second...

User logged in ✅

Waits 1.5 seconds...

Product in stock ✅

Waits 2 seconds...

Payment successful ✅

Waits 1 second...

Order placed successfully ✅

Waits 1 second...

Confirmation message sent ✅
 Order completed successfully!

Each step runs one at a time, in order. The next step never starts before the previous one finishes.

That's the power of Promise chaining.

9. What About .catch()? — The Safety Net

.catch(error => {
  console.log("❌ Error:", error);
});

This is your safety net.

If any Promise in the entire chain calls reject — the whole chain stops and jumps straight to .catch().

Let's say you change this in checkStock:

const stockAvailable = false; //  changed to false

The output would be:

Internet connected ✅
User logged in ✅
❌ Error: Product out of stock ❌

Everything after checkStock — payment, order, confirmation — none of it runs.

One failure. Whole chain stops. .catch() handles it.

Clean. Safe. Controlled.

*10. Small Challenge for You *

Before you move on — try this mentally.

What happens if you change this line in processPayment:

const paymentSuccess = false; //

What will the output be?

Think about it.

...

Answer:

Internet connected ✅
User logged in ✅
Product in stock ✅
❌ Error: Payment failed ❌

The chain ran fine until payment failed. Then .catch() caught it. Order never placed. Confirmation never sent.

Makes sense, right? That's exactly how real apps work.

Quick Summary — 5 Things to Remember

A Promise = a future result — it's either going to succeed (resolve) or fail (reject). Not both.
resolve = success — moves to the next .then() in the chain.
reject = failure — skips everything and jumps straight to .catch().
.then() chains steps — each step waits for the previous one to finish before starting.
.catch() is your safety net — one place to handle any error from anywhere in the chain.

Promises feel confusing at first because they're about time — things happening later, not immediately.

But once you see it as a relay race — one step finishing and passing to the next — it starts to click.

Try running this code yourself. Change true to false in different places and watch what happens. That hands-on experiment will teach you more than any explanation.

Got a question? Drop it in the comments. No question is too basic — ask away.

Thanks for reading! Keep building, one Promise at a time.

Why Problem-Solving Is More Important Than Programming Languages

DHANRAJ S — Sat, 28 Mar 2026 06:13:57 +0000

Hey!

Quick question before we start.

When someone asks you "which programming language should I learn first?" — what do you usually say?

Python? JavaScript? Java? C++?

Here's the thing. That question itself might be the wrong question.

And today, let's talk about why.

1. The Mistake Almost Every Beginner Makes

When most people start coding, they spend weeks asking:

"Should I learn Python or JavaScript?"
"Is Java still worth it?"
"What language do big companies use?"

Sound familiar?

It's okay. We've all been there.

But here's what nobody tells you early enough — the language is just a tool. What actually matters is whether you know how to think through a problem before you even open your code editor.

*2. Let's Try Something Together *

Forget code for a second.

Imagine your friend asks you:

"I have a box of 10 chocolates. I want to share them equally with 4 people. Can I do it?"

You didn't need Python to answer that. You didn't need JavaScript.

You just thought through it.

That thinking — breaking a problem into pieces, figuring out what's possible, finding the answer — that's problem-solving.

And that's exactly what programming is. The language is just how you write the solution down.

3. Here's a Real Example in Code

Let's say someone asks you:

"Find the largest number in a list."

A beginner who only focused on syntax might freeze. They'll think — "What method do I use? Is it .max()? .sort()? How do I write this?"

But a developer who thinks in problems first does this:

Start with the first number. Assume it's the largest.
Go through every other number.
If you find a bigger one, update your answer.
At the end, you have the largest.

Now the code almost writes itself:

function findLargest(numbers) {
  let largest = numbers[0];

  for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > largest) {
      largest = numbers[i];
    }
  }

  return largest;
}

console.log(findLargest([3, 7, 1, 9, 4]));
// Output: 9

See what happened there?

The logic came first. The code came second.

That's the mindset shift everything depends on.

*4. Quick Question for You *

If someone took that same logic and wrote it in Python — would it still work?

def find_largest(numbers):
    largest = numbers[0]

    for num in numbers[1:]:
        if num > largest:
            largest = num

    return largest

print(find_largest([3, 7, 1, 9, 4]))
# Output: 9

Same logic. Different language. Same result.

The problem-solving didn't change. Only the syntax did.

That's the whole point.

5. So Why Do People Focus on Languages So Much?

Honestly? Because languages are visible.

You can google "Python tutorial." You can finish a course and say "I learned Python." It feels like progress.

But problem-solving is invisible. It's harder to measure. It grows slowly. And nobody gives you a certificate for it.

So people avoid it — without even realizing they're avoiding it.

But here's the truth:

A developer who thinks clearly can pick up any language in weeks.
A developer who only knows syntax will struggle in every language.

*6. Think About It This Way *

Imagine two people want to build a house.

Person A studies every tool in the toolbox. Hammer. Drill. Saw. They know the names, the brands, the specs.

Person B learns how buildings actually work. Foundations. Load-bearing walls. How rooms connect.

Now give both of them a new tool they've never seen.

Who figures it out faster?

Person B. Every time.

Languages are the tools. Problem-solving is understanding how buildings work.

7. What Does "Thinking Like a Developer" Actually Look Like?

Here's what it looks like in practice. Someone gives you a problem:

"Check if a word is a palindrome." (a word that reads the same forwards and backwards — like racecar)

Before writing a single line of code, a good developer asks:

What exactly am I checking?
What does the input look like?
What should the output be?
What's the simplest way to check this?

And then they think:

"If I reverse the word and it's the same — it's a palindrome."

function isPalindrome(word) {
  const reversed = word.split("").reverse().join("");
  return word === reversed;
}

console.log(isPalindrome("racecar")); // true
console.log(isPalindrome("hello"));   // false

The solution is clean because the thinking was clear.

That's not about JavaScript. That's about how you approached the problem.

*8. A Small Challenge for You *

Try this without looking anything up.

Write the logic — not the code — to check if a number is even or odd.

Just words. No syntax. No googling.

...

Done? Great.

If you said something like "divide the number by 2 and check if there's a remainder" — you just problem-solved.

Now the code is easy:

function isEven(number) {
  return number % 2 === 0;
}

console.log(isEven(4));  // true
console.log(isEven(7));  // false

You didn't need to know JavaScript to figure that out.

You needed to think.

9. Does This Mean Languages Don't Matter?

Not at all!

Languages absolutely matter. You need to know the syntax. You need to understand how a language works. That's real and important.

But think of it like learning to drive.

Understanding road rules, reading traffic, making decisions — that's the core skill.

The car you drive is the language. A good driver can switch cars. A person who only memorized one car's dashboard will struggle in a different one.

Learn the language. But build the thinking first.

10. How Do You Actually Get Better at Problem-Solving?

Here's what actually works — and you can start today:

Read problems out loud before coding. Understand what's really being asked.
Write your logic in plain English first. If you can't explain it in words, you can't write it in code.
Practice on paper or a whiteboard. No autocomplete. No shortcuts. Pure thinking.
Do easy problems on platforms like LeetCode or HackerRank — not to grind hard problems, but to build the habit of breaking things down.
After solving, ask yourself — is there a simpler way?

None of these require a specific language.

All of them make you better in every language.

Quick Summary — 3 Things to Take Away

Languages are tools, not the skill — knowing 5 languages with weak problem-solving won't take you far. Strong thinking with one language will.
Logic first, syntax second — always understand what you're solving before you think about how to write it.
Problem-solving transfers everywhere — learn it once, use it in Python, JavaScript, Java, whatever comes next.

Thanks for reading! Keep thinking, keep building. ✨

JavaScript Closures — Explained with a Bank Account You'll Never Forget

DHANRAJ S — Thu, 26 Mar 2026 14:43:22 +0000

Hey!

Before we start — have you ever tried to understand closures and ended up more confused than before?

Yeah. Most beginners have. And it's not your fault.

The definitions are dry. The examples feel random. Nothing clicks.

So today, let's skip the textbook stuff. We'll use a real bank account to understand closures — step by step, together.

1. What Is a Closure?

Here's the simplest way to think about it.

Imagine a bank. When you open an account, the bank keeps your balance locked inside a private vault. You can't just walk in and grab it. You have to go through the bank's system — deposit, withdraw, check balance.

That vault? That's a closure in JavaScript.

A closure is when an inner function remembers the variables from its outer function — even after the outer function has stopped running.

We'll see exactly what that means in code. Keep reading.

2. Here's Our Bank Account Code

Let's look at the full example first. Don't worry if you don't get everything right away — we'll walk through it piece by piece.

function createAccount(userName, initialBalance) {
  let balance = initialBalance;    //  private — no one can touch this directly
  let accountNumber = Math.floor(Math.random() * 100000);

  function deposit(amount) {
    balance += amount;
    return `${userName} deposited ₹${amount}. Balance: ₹${balance}`;
  }

  function withdraw(amount) {
    if (amount > balance) {
      return "Insufficient balance";
    }
    balance -= amount;
    return `${userName} withdrew ₹${amount}. Balance: ₹${balance}`;
  }

  function getBalance() {
    return `${userName}'s balance is ₹${balance}`;
  }

  return { accountNumber, deposit, withdraw, getBalance };
}

createAccount is the outer function — it's like the bank itself.

balance and userName are private variables — they live inside the bank vault.

deposit, withdraw, and getBalance are the inner functions — they're the only keys to that vault.

3. So Where Does the Closure Happen?

Here's the interesting part.

When createAccount finishes running — it's done. Gone. But look what we return:

return { accountNumber, deposit, withdraw, getBalance };

We're returning the inner functions. And those functions still remember balance and userName from inside createAccount.

That memory? That's the closure.

Think of it this way — even after a bank branch closes for the day, your account data is still safely stored inside. The branch is gone, but your balance is alive and well.

4. Let's Create Some Accounts and See It in Action

const user1 = createAccount("Ravi", 1000);
const user2 = createAccount("Anu", 5000);
const user3 = createAccount("Karthik", 200);

Each call to createAccount creates a separate closure — a separate private vault for each user.

Ravi has his own balance. Anu has hers. Karthik has his.

They don't share anything.

Now let's use them:

console.log(user1.getBalance());
// Ravi's balance is ₹1000

console.log(user1.deposit(500));
// Ravi deposited ₹500. Balance: ₹1500

console.log(user2.withdraw(1000));
// Anu withdrew ₹1000. Balance: ₹4000

Notice — when Anu withdraws ₹1000, Ravi's balance doesn't change at all. Each closure is its own world.

5. Quick Question for You 🤔

Try guessing this before you read the answer.

What happens when you do this?

console.log(user1.balance);

Go on, take a guess.

...

The answer is undefined.

Why? Because balance is not part of the returned object. It's locked inside the closure. The only way to read it is through getBalance() — not directly.

That's data privacy, powered by closures.

6. There's a Sneaky Bug — Did You Spot It?

Look at these two lines:

console.log(user2.getBalance)   // ❌ oops
console.log(user1.getBalance()) // ✅ correct

See the difference? The first one is missing ().

Without (), you're not calling the function — you're just pointing at it. JavaScript will print this instead:

[Function: getBalance]

Always use () when you want to actually run a function. Small thing — big difference.

7. The Mental Model — Vault + Keys 🗝️

Here's a picture to lock this in:

createAccount("Ravi", 1000)
│
├── 🔒 Private Vault (the closure)
│     ├── balance = 1000
│     └── userName = "Ravi"
│
└── 🗝️ Your Keys (returned methods)
      ├── deposit()    → adds to balance
      ├── withdraw()   → subtracts from balance
      └── getBalance() → reads the balance

You hold the keys. But the vault stays hidden.

No one else can open it. No one else can change the balance — unless they go through the keys you have.

8. One More Thing — Try This Yourself!

Open your browser console or a JS playground and run this:

const user3 = createAccount("Karthik", 200);

console.log(user3.withdraw(500));
// What do you think this prints?

Take a guess before you run it.

...

It prints "Insufficient balance" — because Karthik only has ₹200 and tried to withdraw ₹500.

The withdraw function checked balance through the closure and protected the account. 💪

Quick Summary — 3 Things to Remember

A closure remembers — inner functions keep access to outer variables even after the outer function is done.
Each call is its own world — every createAccount call creates a fresh, isolated closure. Ravi and Anu never share data.
Closures = privacy — balance isn't exposed directly. You can only interact with it through the functions returned. That's intentional and powerful.

Thanks for reading! Keep building, keep asking questions. ✨

🔐 JavaScript Closures Explained with a Bank Account (Beginners, This One's for You!)

DHANRAJ S — Thu, 26 Mar 2026 14:33:50 +0000

Ever wondered how a bank keeps your balance private — so no one else can just walk in and change it?

That's exactly what a closure does in JavaScript. It locks your data away and only lets you touch it through specific actions — like a deposit or withdrawal.

Let's break it down with a real banking example. 🏦

1. What Is a Closure?

Imagine you open a bank account. The bank creates a private locker for you — your balance, your account number. No one else can access it directly. You can only interact with it through the bank's services: deposit, withdraw, check balance.

In JavaScript, a closure is when an inner function "remembers" the variables from the outer function — even after the outer function has finished running.

That's it. That's the whole idea. 🎉

2. What Does the Code Look Like?

Here's the full createAccount function we'll be working with:

function createAccount(userName, initialBalance) {
  let balance = initialBalance;    // private
  let accountNumber = Math.floor(Math.random() * 100000);

  function deposit(amount) {
    balance += amount;
    return `${userName} deposited ₹${amount}. Balance: ₹${balance}`;
  }

  function withdraw(amount) {
    if (amount > balance) {
      return "Insufficient balance";
    }
    balance -= amount;
    return `${userName} withdrew ₹${amount}. Balance: ₹${balance}`;
  }

  function getBalance() {
    return `${userName}'s balance is ₹${balance}`;
  }

  return {
    accountNumber,
    deposit,
    withdraw,
    getBalance
  };
}

createAccount is the outer function. It holds balance and userName as private variables inside it.

deposit, withdraw, and getBalance are the inner functions. Each one is a closure — they can all see and use balance even after createAccount has finished running.

3. Why Can Inner Functions Still Access balance?

When createAccount runs and returns, you'd think balance is gone forever, right?

Nope. 🙅

JavaScript keeps balance alive in memory because the inner functions still hold a reference to it. This "remembered environment" is called the closure.

Think of it like this — even after the bank teller goes home, your locker is still safely locked inside the vault. The locker doesn't disappear. It stays as long as you still hold the keys.

4. How Does Each User Get Their Own Private Balance?

const user1 = createAccount("Ravi", 1000);
const user2 = createAccount("Anu", 5000);
const user3 = createAccount("Karthik", 200);

Every call to createAccount creates a brand new closure — a completely separate private environment.

user1 gets its own balance starting at ₹1000
user2 gets its own balance starting at ₹5000
user3 gets its own balance starting at ₹200

Ravi's deposit will never affect Anu's balance. Each account is fully isolated. 🔒

5. How Do You Use the Returned Methods?

console.log(user1.getBalance());
// Ravi's balance is ₹1000

console.log(user1.deposit(500));
// Ravi deposited ₹500. Balance: ₹1500

console.log(user2.withdraw(1000));
// Anu withdrew ₹1000. Balance: ₹4000

Every time you call user1.deposit(500), the closure remembers Ravi's balance and updates it. The next time you call user1.getBalance(), it shows the updated value.

The closure is keeping score behind the scenes — silently, reliably. 📝

6. There's a Bug in the Code — Did You Catch It?

Look at this line from the original code:

console.log(user2.getBalance)   // ❌ Missing ()
console.log(user1.getBalance()) // ✅ Correct

user2.getBalance without () does not call the function. It just prints the function itself:

[Function: getBalance]

Always add () when you actually want to call the function and get a result. Easy mistake — now you'll never forget! 😄

7. Why Is balance Considered "Private"?

Try accessing balance directly from outside:

console.log(user1.balance); // undefined

It returns undefined because balance is not part of the returned object. It lives only inside the closure.

The only way to read or change it is through deposit(), withdraw(), or getBalance(). That's data privacy powered by closures — no one can sneak in and tamper with it directly.

8. The Mental Model — Picture It Like This

createAccount("Ravi", 1000)
│
├── 🔒 Private Vault (closure)
│     ├── balance = 1000
│     └── userName = "Ravi"
│
└── 🗝️ Keys Returned to You
      ├── deposit()    → updates balance
      ├── withdraw()   → updates balance
      └── getBalance() → reads balance

The vault is the closure. The keys are the inner functions. You can only touch what's inside through the keys.

Quick Summary — 3 Golden Rules of Closures

Inner functions remember outer variables — even after the outer function has finished running, the inner functions still hold on to those variables.
Each function call creates its own closure — user1, user2, and user3 each have their own private balance that never leaks into each other.
Closures give you data privacy — if balance isn't in the returned object, no one outside can access or modify it directly.

Closures sound scary at first — but once you picture them as a private vault with keys, they just click. 🔑

Drop a comment if you have questions. And if this made closures finally make sense, smash that ❤️ and share it with a friend who's learning JavaScript. 🚀

The DOM and CRUD in JavaScript

DHANRAJ S — Wed, 25 Mar 2026 14:12:27 +0000

Have you ever wondered how clicking a button on a webpage makes something appear or disappear? That's the magic of the DOM and CRUD in JavaScript. Let's break it down super simply.

1. What is the DOM?

DOM stands for Document Object Model.

Think of your webpage like a family tree. At the top is the grandparent (<html>), then come the parents (<head>, <body>), then children (<h1>, <p>, <button>), and so on.

The DOM is just JavaScript's way of seeing and touching that family tree.

When your browser loads a webpage, it turns all your HTML into a tree of objects. JavaScript can then read, change, add, or remove anything on that tree.

<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Hello, World!</h1>
  </body>
</html>

JavaScript sees this as a tree it can play with.

2. Why Do We Use the DOM?

Without the DOM, your webpage would just sit there — like a painting. Nothing would move or change.

With the DOM, JavaScript can:

Change text on the screen
Add new buttons or boxes
Remove things you don't need
React when someone clicks or types

In short: the DOM makes your webpage alive and interactive.

3. What is CRUD?

CRUD is just a fancy word for 4 basic things you do with stuff:

C — Create (make something new)
R — Read (look at something)
U — Update (change something)
D — Delete (remove something)

Think of it like your toy box:

You add a new toy (Create)
You look at your toys (Read)
You swap a toy's color (Update)
You throw away a broken toy (Delete)

In the DOM, we do the exact same thing — but with HTML elements on a webpage.

4. CRUD Operations in the DOM

Create — Add a New Element

You can create a new HTML element and put it on the page.

// Create a new paragraph
const newPara = document.createElement('p');

// Give it some text
newPara.textContent = 'I was just born!';

// Add it to the body
document.body.appendChild(newPara);

document.createElement('p') — makes a new <p> tag in memory.

appendChild() — places it inside the body so it shows on screen.

Read — Find and Look at an Element

You can find any element on the page and read what's inside it.

// Find the element with id="title"
const title = document.getElementById('title');

// Read its text
console.log(title.textContent); // Hello, World!

Other ways to find elements:

document.querySelector('.classname') — finds by class
document.querySelectorAll('p') — finds ALL paragraphs

Update — Change an Element

Once you find an element, you can change its text, color, style — anything!

// Find the title
const title = document.getElementById('title');

// Change its text
title.textContent = 'Hello, DOM!';

// Change its color
title.style.color = 'blue';

You can also change the HTML inside an element using innerHTML:

title.innerHTML = '<strong>Bold Title Now!</strong>';

Delete — Remove an Element

You can remove any element from the page completely.

// Find the element
const para = document.getElementById('myPara');

// Remove it
para.remove();

That's it. Gone. Like it never existed.

5. A Full Mini Example

Here's a tiny app that does all 4 CRUD things together:

<!DOCTYPE html>
<html>
  <body>
    <h2 id="message">Original Message</h2>
    <button onclick="createItem()">Create</button>
    <button onclick="readItem()">Read</button>
    <button onclick="updateItem()">Update</button>
    <button onclick="deleteItem()">Delete</button>

    <script>
      // CREATE
      function createItem() {
        const newEl = document.createElement('p');
        newEl.id = 'newItem';
        newEl.textContent = 'I am a new item!';
        document.body.appendChild(newEl);
      }

      // READ
      function readItem() {
        const msg = document.getElementById('message');
        alert('Current text: ' + msg.textContent);
      }

      // UPDATE
      function updateItem() {
        const msg = document.getElementById('message');
        msg.textContent = 'Message Updated!';
        msg.style.color = 'green';
      }

      // DELETE
      function deleteItem() {
        const item = document.getElementById('newItem');
        if (item) item.remove();
      }
    </script>
  </body>
</html>

Try pasting this in your browser and clicking the buttons!

3 Golden Rules 🏆

The DOM is your webpage's remote control — use JavaScript to find, change, add, or remove anything on screen.
CRUD is just 4 actions — Create, Read, Update, Delete. Master these and you can build almost anything.
Always find before you change — use getElementById or querySelector to grab the element first, then do stuff with it.

Understanding createElement() in JavaScript

DHANRAJ S — Tue, 24 Mar 2026 15:35:20 +0000

1. What is createElement()?

createElement() is a built-in JavaScript method that lets you create a brand new HTML element from scratch — without touching your HTML file.

You can create a button, a paragraph, a div, or any HTML tag you want — right from JavaScript.

Basic Syntax:

const newElement = document.createElement('tagName');

For example, to create a new paragraph:

const para = document.createElement('p');
para.textContent = "Hello, I am a new paragraph!";

This creates a <p> element in memory. But it won't appear on the page yet — you have to place it somewhere.

2. Why Do We Use createElement()?

Imagine you run an online to-do list app. Every time the user types a task and clicks "Add", a new item should appear. You cannot hardcode that in HTML — you don't know what the user will type!

That's where createElement() saves the day. It lets you dynamically add content to the page based on user actions, API data, or any logic.

3. Add Element at the LAST Position

This is the most common use case. Use appendChild() to add your new element at the end of a parent.

Think of it like adding a new dish at the bottom of the menu.

// script.js

const list = document.getElementById('myList');

const newItem = document.createElement('li');
newItem.textContent = "Item 4 (added at last)";

list.appendChild(newItem);

Result:

appendChild() always adds the element as the last child of the parent.

4. Add Element at the FIRST Position

Now say you want the new item to appear at the top. Use insertBefore() with the first child as the reference.

Like putting a "Chef's Special" dish at the very top of the menu.

const list = document.getElementById('myList');

const newItem = document.createElement('li');
newItem.textContent = "Item 0 (added at first)";

// Insert before the first existing child
list.insertBefore(newItem, list.firstChild);

Result:

list.firstChild points to the first item in the list. By passing it to insertBefore(), we place our new element before it.

💡 Tip: Use list.firstElementChild instead of list.firstChild to avoid accidentally targeting text nodes (whitespace) in some browsers.

list.insertBefore(newItem, list.firstElementChild);

5. Add Element at a SPECIFIC Position

What if you want the new item to appear after Item 2? You pick the exact reference point.

Like inserting a new dish between "Starters" and "Mains" on the menu.

const list = document.getElementById('myList');

const newItem = document.createElement('li');
newItem.textContent = "Item 2.5 (added in between)";

// Get all current items
const items = list.getElementsByTagName('li');

// Insert after Item 2, which is index 1 (0-based)
// To insert AFTER index 1, we reference index 2
list.insertBefore(newItem, items[2]);

Result:
insertBefore(newElement, referenceElement) places the new element right before the reference. So if you pass items[2] (which is Item 3), the new item lands just before it — which is after Item 2.

6. Bonus: Using insertAdjacentElement() for More Control

There's another method that gives you 4 precise positions in one neat package:

targetElement.insertAdjacentElement(position, newElement);

Position	Where it goes
`'beforebegin'`	Before the target element itself
`'afterbegin'`	Inside target, before its first child
`'beforeend'`	Inside target, after its last child
`'afterend'`	After the target element itself

Example:

const list = document.getElementById('myList');
const items = list.getElementsByTagName('li');

const newItem = document.createElement('li');
newItem.textContent = "Inserted using insertAdjacentElement";

// Insert after Item 2 (index 1)
items[1].insertAdjacentElement('afterend', newItem);

This places the new item right after Item 2. Clean and readable!

7. Quick Summary of All Methods

Goal	Method
Add at the end	`parent.appendChild(newEl)`
Add at the beginning	`parent.insertBefore(newEl, parent.firstElementChild)`
Add at a specific spot	`parent.insertBefore(newEl, referenceEl)`
Fine-grained positioning	`target.insertAdjacentElement(position, newEl)`

3 Golden Rules

✅ Always create the element first with createElement(), then place it with appendChild() or insertBefore()
✅ Use firstElementChild instead of firstChild to avoid whitespace issues
✅ insertBefore(newEl, ref) places the new element before the reference — so to insert after item N, pass item N+1 as the reference

Understanding JavaScript Callbacks: The "Don't Call Us, We'll Call You" Concept

DHANRAJ S — Fri, 27 Feb 2026 15:45:33 +0000

Imagine you are at a busy restaurant. You place your order, but instead of standing at the counter waiting for your food, the waiter gives you a buzzer. You go sit down, chat with friends, or check your phone. When the food is ready, the buzzer goes off.

In JavaScript, a Callback Function is exactly like that buzzer.

1. What is a Callback Function?
In simple terms, a callback is a function passed as an argument to another function.

2. Why do we use it?
JavaScript usually runs code line-by-line. But some things (like loading a large image or fetching data) take time. Callbacks prevent the whole website from "freezing" while waiting for that task to finish.

3. A Simple Example
Let’s look at a basic example where we pass a greeting function into another function.

// The Callback Function
function sayGoodbye() {
    console.log("Goodbye! Task is finished.");
}

// The Main Function
function processUser(callback) {
    console.log("Processing user data...");
    // Simulating a task, then calling the callback
    callback(); 
}

// Passing sayGoodbye as an argument
processUser(sayGoodbye);

output

Chef is cooking...
Your food is ready

What happened here?

processUser starts running.
It prints "Processing user data..."
It then executes callback(), which is actually the sayGoodbye function we passed in.

4. Practical Use: setTimeout
The most common way beginners see callbacks is with timers.

console.log("Start");

setTimeout(function() {
    console.log("This happens after 3 seconds!");
}, 3000);

console.log("End");

The Result:

"Start" is printed.
"End" is printed.
3 seconds later, the callback function inside setTimeout runs and prints "This happens after 3 seconds!"

Here, the anonymous function inside is the callback. It waits for the 3-second "long task" to finish before running.

5. 3 Golden Rules

A callback is just a function.
Pass the name, don't call it: Pass myFunc, not myFunc().
Async Power: They are the secret behind why websites can do many things at once.

6. summary