DEV Community: Sevaki Rajasekar

From Mistakes to Success: My First JavaScript Login Page Validation!

Sevaki Rajasekar — Wed, 27 Aug 2025 12:30:12 +0000

Hi everyone! Welcome to my another JavaScript series. Today I am going to write about how I create a login page validation using HTML, CSS, JavaScript. Let's see my step by step process.

Create the inputs (HTML) — add ids so JS can find them.

<input id="userName" placeholder="Enter your Username">
<input id="passWord" type="password" placeholder="Enter your password">
<button id="loginBtn">Log In</button>

Why: id lets JavaScript get the element. type="password" hides the characters.

Add demo credentials (JS) — only for learning/demo.

let defaultUser = "sevaki";
let defaultPass = "1234";

Why: these are the values you compare against while practicing (not secure in real apps).

Write a login function — this runs when the user clicks Log In.

function login() {
  // code goes here
}

Why: enclosing logic in a function means it runs only on demand (not at page load).

Read the current input values inside the function

let user = document.getElementById("userName").value;
let pass = document.getElementById("passWord").value;

Why: reading .value inside the function gets what the user typed right now.
**
Compare the values** — check both username and password.

if (user === defaultUser && pass === defaultPass) { /* success */ }
else { /* failure */ }

Why: === checks exact match; use && to require both fields to match.

Show feedback — quick demo uses alert(), but inline messages are better UX.

alert("Login successfully"); // or alert("Login failed! Try again.")

Tip: later replace alert() with updating a <p id="msg"></p> for nicer UI.

Hook the function to the button

Simple (beginner): add onclick="login()" to the button.
Cleaner: attach in JS:

document.getElementById("loginBtn").addEventListener("click", login);

Why: this makes the button run the login code.

Test common cases

Correct username/password → success.
Wrong username or wrong password → failure.
Empty fields → decide to show a “Please fill in” message. Tip: use user = user.trim() to ignore accidental spaces.

SO that's guys. Here I gave a brief explanation for step by step process. I hope I gave a clear and understandable steps. See you in my next blog.

Output: https://front-end-04f891.gitlab.io/loginpageValidation.html
source code: https://gitlab.com/cloning-projects/front-end/-/blob/main/loginpageValidation.html?ref_type=heads
Reference: https://www.geeksforgeeks.org/javascript/form-validation-using-javascript/

How to Create a Random Color Generator in JavaScript

Sevaki Rajasekar — Tue, 26 Aug 2025 11:12:04 +0000

Hi everyone! After a long break, I here with a awesome method from JavaScript. When you visit websites, you often see different colors that make them look attractive. Did you know you can make your webpage change colors randomly with just a few lines of JavaScript?

Today, I learned how to generate random colors using hex codes in JavaScript. Let me explain step by step.

What is a Hex Color?

Colors on the web can be written in different ways, and one of the most popular formats is hexadecimal (hex) colors.

A hex color starts with #.
It is followed by 6 characters.
These characters can be numbers (0–9) or letters (A–F).

👉 Example:

#FF0000 = Red
#00FF00 = Green
#0000FF = Blue

Since each position has 16 possibilities (0–9 and A–F), there are more than 16 million possible colors!

The Logic Behind Random Colors:

To generate a random hex color, we need to:

Create an array with all possible hex characters (0–9 and A–F).
Pick random characters from that array.
Repeat the process 6 times (because hex codes have 6 digits).
Add # at the beginning.
Apply it to the background of our webpage.

The JavaScript Code:

Here’s the complete code:

<!DOCTYPE html>
<html>
<head>
  <title>Random Color Generator</title>
</head>
<body class="body">
  <button onclick="randomValue()">Click me</button>

  <script>
    // Step 1: Hex characters array
    let color = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];

    // Step 2: Function to get one random character
    function getRandomDigit() {
      let index = Math.floor(Math.random() * color.length);
      return color[index];
    }

    // Step 3: Function to generate full hex code
    function randomValue() {
      let hexa = "#"; // start with #
      for (let i = 0; i < 6; i++) {
        hexa += getRandomDigit(); // add 6 random characters
      }
      document.querySelector(".body").style.backgroundColor = hexa;
    }
  </script>
</body>
</html>

How It Works:

Click the button.
JavaScript generates a random 6-character hex code.
That color is applied to the background of the webpage.

👉 Example: If the generated code is #3FA2C1, your page will turn into that color!

Conclusion:

This small project is a fun way to practice:

Arrays (storing characters),
Loops (repeating steps),
DOM Manipulation (changing webpage background).

Now you can impress your friends by showing them a website that changes colors every time you click a button!

That's it guys. I hope it will be helpful for someone who wants to make them website more style and vibrant.Thank you for reading my blog. Will see you in my next blog.

Reference:

Create React App vs Vite: Setting Up React on Linux Made Easy

Sevaki Rajasekar — Thu, 07 Aug 2025 17:12:26 +0000

Hi everyone! Today we are going to see about two types React installation method in Linux.

Are you starting your React journey on a Linux system and confused between using Create React App (CRA) and Vite? In this blog, I’ll walk you through what they are, how to install them, and which one might be better for your next project.

What is Create React App (CRA)?

CRA is the official React setup tool that creates everything you need to start a React project without configuring Webpack or Babel manually.

Features:
- Beginner-friendly
- Comes with sensible defaults
- Supports JSX, ES6+, and more out of the box

Installing CRA on Linux

# Step 1: Install Node.js and npm (if not already)
sudo apt update
sudo apt install nodejs npm

# Step 2: Create a new React app
npx create-react-app my-app

# Step 3: Navigate to your project
cd my-app

# Step 4: Start the development server
npm start

So,let's see about vite tool,

What is Vite?

Vite (pronounced “vite” like “light”) is a modern build tool that’s faster and more efficient than CRA. It uses ESBuild under the hood, offering super fast startup and hot reload.

Features:
- Super fast dev server
- Supports JSX, TypeScript, Vue, etc.
- Lightweight and minimal

Installing Vite on Linux

# Step 1: Install Node.js and npm (if not already)
sudo apt update
sudo apt install nodejs npm

# Step 2: Create a new Vite React app
npm create vite@latest my-vite-app

# Step 3: Choose 'React' and a variant (JavaScript or TypeScript)

# Step 4: Navigate to the project
cd my-vite-app

# Step 5: Install dependencies
npm install

# Step 6: Start the development server
npm run dev

Which One Should You Use?

- **If you're just starting React and want official tools:** Go with CRA.
- **If you want speed and modern dev experience:** Try Vite.
- Both are great, try both once and choose based on your style.

That's it guys. I hope I gave a clear explanation. Whether you choose CRA or Vite, you're building awesome things with React! I hope this guide helped you understand the differences and how to install them on Linux. Feel free to share your thoughts or questions in the comments.

Reference: https://www.geeksforgeeks.org/techtips/how-to-install-reactjs-on-linux/

One Method to Rule Them All: Why I Love "addEventListener()"

Sevaki Rajasekar — Wed, 06 Aug 2025 16:40:49 +0000

HI everyone! I am back with another blog in my Javascript scries. Today we are going to see about a wonderful Javascript method which is very comfortable to use. If you know this already, well good to go! Otherwise it will help you so much, particularly if you going to study DOM(Document Object Model). Let's see,

Introduction

When I first started learning JavaScript, getting element and making them interactive or dynamic using DOM is a very big task for me. That time I found a method addEventListener(). It's like giving life to your HTML elements — making them respond when the user interacts with them.

What is an Event?

In JavaScript, an event is an action that occurs in the browser, like:
- Clicking a button
- Typing in a textbox
- Moving the mouse
- Submitting a form
JavaScript can listen for these events and react when they happen.

What is `addEventListener()`?

addEventListener() is a built-in method that lets you attach a function to run when an event occurs on a specific HTML element.

Basic Syntax:
Javascript

element.addEventListener("eventType", functionToRun);

element: The HTML element you want to interact with
"eventType": The event name as a string (like "click", "mouseover", "input")
functionToRun: The code that should run when the event happens

Example 1
Here is my code, by this you will get better knowledge,

What happens here:
- When you click the button, the browser shows an alert.
- The function inside addEventListener() runs only when the click event happens.
Here, I use addEventListener(), instead of using onclick = "Text change".

Example 2:
In this programming I used onclick = "Text change",

For this you may got What I am trying to said.

Real-Life Use Cases
- Show a success message when a form is submitted
- Change image when a button is clicked
- Toggle dark/light mode
- Validate input when typing

So that's it guys. When I understood addEventListener(), JavaScript felt less scary. I hope this post helps you feel the same. Try using it in your own projects, buttons, forms, sliders — and you’ll see how useful it is.
If you liked this post or have questions, feel free to drop a comment! Will see in my next blog.

What Happens When You Click? JavaScript Events Explained

Sevaki Rajasekar — Thu, 31 Jul 2025 18:00:52 +0000

Hi everyone! Welcome to my blog. Today we are going to see another blog from my JavaScript series. Let's see the about Events with simple examples.

What is JavaScript Events?

An event is something that happens on a webpage — like:

A button is clicked
A key is pressed on the keyboard
A form is submitted
The mouse moves over something

Why do we use it?

We use events when we want the webpage to react when a user does something.
For example:
If someone clicks a button, we want to show a message or change the color.
(I hope this example will help to gain more understanding.)

Let's dive into the technical terms and real-time examples with coding:

How does it work?

First, we choose an element (like a button).
Then, we tell JavaScript to watch that element for something (like a click).
When that happens, we tell it to do something (like run a function). This may confuse you, let me clear with code,

Example:
Let’s say you have a button:
html

<button>Click me!</button>

You want to show a message when someone clicks it.

Here’s the JavaScript:
Javascript

document.querySelector("button").addEventListener("click", function() {
  alert("You clicked the button!");
});

What this does:

document.querySelector("button") — finds the button
.addEventListener("click", ...) — watches for a click
function() { alert(...) } — shows a message when clicked

Common HTML Events

onchange - An HTML element has been changed
onclick - The user clicks an HTML element
onmouseover - The user moves the mouse over an HTML element
onmouseout - The user moves the mouse away from an HTML element
onkeydown - The user pushes a keyboard key
onload - The browser has finished loading the page

So that's it, guys. I hope from this blog you got an idea of what is events and what it can do. So as a JavaScript learner, the introduction of "Events" gave me more ideas and understanding about a web page. So thank you for reading my blog. For more content like this, keep in touch with my blog page. Will see you in my next blog.

Reference: https://www.w3schools.com/js/js_events.asp
Credits:
Diagram: https://www.vrogue.co/post/what-is-event-loop-in-node-js-with-example-printable-templates
Cover image: https://www.guvi.in/blog/guide-for-events-in-javascript/

Turn Your Objects into Strings: Meet JSON.stringify()

Sevaki Rajasekar — Tue, 29 Jul 2025 12:45:18 +0000

Hi everyone! Here is my another blog from Javascript series. Today we are going to see about JSON.stringify(). Let's dive into it,

First we have to know what is JSON.

What is JSON?

JSON stands for:
JavaScript Object Notation
It’s a simple way to store and share data, like a universal language that different apps and websites understand.

Why is JSON important?

Because when computers, websites, or apps talk to each other, they exchange data, and JSON is the most common format they use to do it.
It works everywhere ,in websites, mobile apps, APIs, and databases.

I hope you got better idea about JSON. Now let's see about .stringify().

JSON.stringify()

I will give you a example for better understanding about this,

Imagine this:
You have a box 📦 (object) with information:
let student = { name: "Sevaki", age: 22 };
This is a JavaScript object. It’s great inside your code, but you can’t send it directly to a server, or save it in localStorage, because it's not a simple string.

So what do we do?
We need to change the object into a string, and that's what JSON.stringify() does!

let student = {
  name: "Sevaki",
  age: 22
};

let stringData = JSON.stringify(student);

console.log(stringData);

Output:
{"name":"Sevaki","age":22}
Now it's a string version of the object!

Takeaways:

JSON is a text format for data
Commonly used for data transfer (like in APIs)
Use JSON.stringify() to convert object to string
Use JSON.parse() to convert string to object

So that's guys. I gave a beginner explanation only. In my future blog I will watering to this blog. Thankyou for reading my blog. Will see you in my next blog. If anything wrong in this blog please do comments, it will helpful for me too.

Which Coder Are You? Discover Your Programming Style!

Sevaki Rajasekar — Mon, 28 Jul 2025 12:20:21 +0000

Hi everyone! Today we are going to see about Programming Paradigm.

What is a Programming Paradigm?

A programming paradigm is just a style or method of writing code.
It’s like different ways to solve a problem using a programming language.

1. Procedural Programming
This paradigm emphasizes on procedure in terms of under lying machine model. There is no difference in between procedural and imperative approach. It has the ability to reuse the code and it was boon at that time when it was in use because of its reusability.

Example:js

// Prompt the user for input
let num = prompt("Enter any Number: ");

// Initialize the factorial value to 1
let fact = 1;

// Calculate the factorial of the number
for (let i = 1; i <= num; i++) {
    fact = fact * i;
}

// Print the factorial of the number
console.log("Factorial of " + num + " is: " + fact);

2. Object-Oriented Programming (OOP)
The program is written as a collection of classes and object which are meant for communication. The smallest and basic entity is object and all kind of computation is performed on the objects only. More emphasis is on data rather procedure. It can handle almost all kind of real life problems which are today in scenario.

Advantages:
- Data security
- Inheritance
- Code reusability
- Flexible and abstraction is also present

Example:js

class Signup {
    constructor(userid, name, emailid, sex, mob) {
        this.userid = userid;
        this.name = name;
        this.emailid = emailid;
        this.sex = sex;
        this.mob = mob;
    }

    create(userid, name, emailid, sex, mob) {
        console.log("Welcome to GeeksforGeeks\nLets create your account\n");
        this.userid = 132;
        this.name = "Radha";
        this.emailid = "radha.89@gmail.com";
        this.sex = 'F';
        this.mob = 900558981;
        console.log("your account has been created");
    }
}

console.log("GfG!");
let s1 = new Signup();
s1.create(22, "riya", "riya2@gmail.com", 'F', 89002);
// This code is contributed by akshatve2zi2

3. Functional Programming
The functional programming paradigms has its roots in mathematics and it is language independent. The key principle of this paradigms is the execution of series of mathematical functions.

Example:js

// Functional style
const square = (x) => x * x;

console.log("Square is:", square(5));

Note: In functional programming, we use pure functions and avoid changing variables.

4. Declarative Programming
It is divided as Logic, Functional, Database. In computer science the declarative programming is a style of building programs that expresses logic of computation without talking about its control flow. It often considers programs as theories of some logic.It may simplify writing parallel programs.

Example:js

// React (Declarative UI)
function App() {
  const num = 5;
  return <h1>Square is {num * num}</h1>;
}

In declarative programming, we describe what we want, not how to do it.

5. Logic Programming
It can be termed as abstract model of computation. It would solve logical problems like puzzles, series etc. In logic programming we have a knowledge base which we know before and along with the question and knowledge base which is given to machine, it produces result.

Example:js

// Simulated logic style using conditions
function square(x, y) {
  if (y === x * x) {
    return true;
  }
  return false;
}

console.log(square(5, 25)); // true
console.log(square(5, 20)); // false

True logic programming (like in Prolog) uses rules and lets the system find the answer.

So that's it guys. I hope I gave a clear explanation about these topic. So let me know if anything I gave wrong here. Thank you for reading my blog. Will se in my next Blog.

Resource:https://www.geeksforgeeks.org/system-design/introduction-of-programming-paradigms/

Can It Change? Understanding Mutable and Immutable in JS

Sevaki Rajasekar — Fri, 25 Jul 2025 16:16:10 +0000

Hi all! Welcome to my another blog. Here is a another blog from my JavaScript series, about Mutable and Immutable objects in JavaScript.

What is Mutable and Immutable?

Imagine this:
-> Mutable is like a whiteboard — you can erase and change what you write.
-> Immutable is like a permanent marker on paper — once you write it, you can’t change it.

Now we will see one by one with examples;

Mutable – Can be Changed

If something is mutable, you can change its content after it’s created.

Example with an object:
let person = { name: "Alice" }; person.name = "Bob"; // We changed the name console.log(person); // { name: "Bob" }
Here, the object person is mutable — we changed its value after creating it.

Example with an array:
let numbers = [1, 2, 3]; numbers.push(4); // Added a new number console.log(numbers); // [1, 2, 3, 4]
The array is mutable — we changed it by adding a number.

Common Mutable Types:
- Objects ({})
- Arrays ([])
- Functions
- Dates
- Sets and Maps

Immutable – Cannot be Changed

If something is immutable, you can’t change its content. If you try, nothing happens or a new value is created instead.

Example with a string:
let name = "Alice"; name[0] = "B"; // Trying to change the first letter console.log(name); // Still "Alice"
Strings are immutable — you can’t change a part of it. You’d need to make a new string.

Example with a number:
let a = 10; let b = a; // b is now 10 b = 20; // Changed b, but a stays the same console.log(a); // Still 10
Numbers are immutable — you can’t change them directly.

Common Immutable Types (Primitives):
- String
- Number
- Boolean
- null
- undefined
- BigInt
- Symbol

Simple Tip to Remember:
- Objects & Arrays = can change = mutable
- Strings & Numbers = can’t change = immutable

So that's it guys. I hope I gave a basic and clear explanation which is understandable by beginners also. Thank you for reading my blog. Keep in touch with my page, so you can get more like this content. See in my next blog.

Loops That Think First vs Loops That Just Do It!

Sevaki Rajasekar — Tue, 15 Jul 2025 12:54:33 +0000

Hi all! Today I am going to write about a part of loops which is very interesting. So today we talk about Entry check and Exit check in Loops.

What Is a Loop?

A loop is a structure that repeats a block of code as long as a condition is true.
But when the condition is checked, before or after the loop body, makes the difference between entry check and exit check.

Entry Check Loop (Condition is checked before the loop runs):

-> The loop only runs if the condition is true.
-> If the condition is false at the beginning, the loop won’t run at all.
-> Also called pre-test loop.

Examples:
- for loop
- while loop

a) while loop (entry check)
let i = 0; while (i < 3) { console.log(i); i++; }

Output:
0
1
2

If the condition is false:
let i = 5; while (i < 3) { console.log(i); // This will NOT run i++; }

Output:
(nothing happens, because the condition is false at start)

Real-Life Example (Entry Check):

Imagine you’re entering a movie theater. The security guard checks your ticket before you go in.
✅ If you have a ticket → you can enter.
❌ If you don’t → you can’t enter at all.
Same way, if the condition fails at the beginning, the loop won’t start.

Exit Check Loop (Condition is checked after the loop runs):

-> The loop body always runs once, even if the condition is false.
-> Condition is checked after one execution.
-> Also called post-test loop.

Example:
- do...while loop

do...while loop
let i = 0; do { console.log(i); i++; } while (i < 3);

Output:
0
1
2

Even if the condition is false at the start, the loop runs once:
let i = 5; do { console.log(i); // This still runs once i++; } while (i < 3);

Output:
5

Real-Life Example (Exit Check):

Think of a restaurant where you can eat first and pay after.
✅ You eat → then they check if you can pay.
If you can’t pay, they stop you from eating again.
But you already ate once!
This is like an exit-check loop: one-time execution guaranteed.

So that's it for today. I hope I gave a clear explanation. Thank you reading my blog. Will see in my next blog.

The Loop Trio: Start, Check, Repeat!

Sevaki Rajasekar — Mon, 14 Jul 2025 12:01:41 +0000

Hi everyone! Welcome to my another blog from JavaScript series. Today I am going to write about the important parts of Loops. It's a very interesting topic also. So will se some about that,

Think of a loop like a cycle or a repeating action. For example, if you want to say “Hello” 5 times, you can use a loop instead of writing it 5 times.

Initialization – Start Point:

-> This is where the loop begins.
-> You create a variable (like i) and give it a starting value.

Think of it like starting a car.
You must turn on the key before driving.
Example:
let i = 0;
Here, i is starting at 0.

Condition – When to Continue:

-> This checks if the loop should keep going.
-> If the condition is true, the loop runs again.
-> If it’s false, the loop stops.

Think of it like a traffic signal.
If it's green, you keep going. If red, you stop.
Example:
i < 5;
This means: "Keep going as long as i is less than 5."

Increment or Decrement – How to Move:

-> After each loop, you change the value of the variable.
-> You either increase or decrease it.

Think of it like taking steps.
You must move forward or backward each time.
Example:
i++;
This means: "Add 1 to i every time."

Full Loop Example:

for (let i = 0; i < 5; i++) { console.log("Hello"); }

What’s Happening?

Start with i = 0
Check i < 5 (is 0 less than 5?) Yes
Print "Hello"
Add 1 to i → now i = 1
Repeat steps 2 to 4
When i = 5, the condition is false → loop stops

Real-Life Example:

Imagine you have 5 mangoes and want to count them one by one.

You will see:

So these are the basic introduction about Loops. Here I showed the For Loops examples. My upcoming blogs will cover all the loop types. Thank you for reading my blog. See you in my next Blog.

Do You Need Instagram to Stay Connected? Not Really.

Sevaki Rajasekar — Fri, 11 Jul 2025 12:49:05 +0000

Hi all! Welcome to my another blog. Today, I am going to talk about "life without Instagram" as a person who has not used Instagram for the past 4 years.

The reasons why I am not using Instagram?
"I feel very bored with using Instagram and tired of checking notifications. I used to think that while using Instagram, "What I achieved to post about myself on Instagram? Why do I like random people's Highlights, stories, and profiles?" In my opinion, these things are very useless to me in my growing period. So I quit using that".

What I feel while others are using and creating interesting talks about that:
In that situation, I really feel like, because of not using Instagram, I am being ignored by them. If we went somewhere with friends, they all have Instagram, so they click pictures and post it on their profiles and tag each others. That situation I will be like "🤦‍♀️😆". Actually, I don't like that stuff.
And also sometimes I get angry at some people, those who prioritize Instagram over their career. After you hear this, now you may think, "I a very productive girl". Nothing like that. let me tell you,

Here is the plot twist:
After deleting Instagram, I switched to "YouTube Shorts". Now I also know the trending songs, dance steps, etc. But escaped from tagging others, replying to messages, often checking our story viewers(uffff😮‍💨).
Now I can't do anything without using YouTube. If I think about uninstalling, some of my study reasons stops me. So I want the solution for "I want to use YouTube in a productive way". And also If anyone knows how to use YouTube in a productive way, give some tips for that😁.

Is Instagram Completely Useless?
Well, not really. In my point the only advantage of using Instagram is we can communicate with everyone without their phone number. If a new person asked your number, that time you have to give, then you can give your Instagram ID. But now I knew the solution for this scenario, we can also use Telegram. But I agree If a person wants to improve their business and models who wants to show their talents to the media world, Instagram is perfect for that. But for others like me, it's a waste of time to use that.

So finally, what I am saying is as I said in my title, Do You Need Instagram to Stay Connected? Not Really. Everyone should understand this. All the above messages are from my point of view only. So, thank you for reading my blog. See you in my next blog.

Compiled Vs Interpreted Language

Sevaki Rajasekar — Wed, 09 Jul 2025 13:41:06 +0000

Hi all! Today we are going to see about Compiled and Interpreted language. As a developers we should know about these. Here I planned to share some most important things about those.

What is Compiled Language?

A compiled language is a programming language that is generally compiled and not interpreted. It is one where the program, once compiled, is expressed in the instructions of the target machine; this machine code is undecipherable by humans.

Simple Meaning:
Checks and converts everything before running- A compiler checks the whole program at once and translates it into machine language (0s and 1s) before running. So it will allow you to type full program, finally it will show errors if it's exist. In case if your 50 lines code has 1 error in 20th line, compiler don't show the output.

Think like(More explanation):
You write a story in English. A translator translates the full story into Tamil. Then someone reads the whole Tamil version.

Example Languages:

C
C++
Java (partly)

What is Interpreted Language:

An interpreted language is a programming language that is generally interpreted, without compiling a program into machine instructions. It is one where the instructions are not directly executed by the target machine, but instead, read and executed by some other program.

Simple Meaning:
Checks and runs one line at a time- An interpreter reads and runs your program line by line. This means it checks your code line by line, if in case it occurred any errors in 5th line in your 50 lines code, while you run the code, it shows output for that first 4 line code, and warn the 5th line error.

Think like(More explanation):
You write a story in English. A translator reads each line and speaks it in Tamil immediately.

Example Languages:

Python
JavaScript
Ruby

So that's it. I gave some basic info only here. In the future, I can water the roots of this blog. Will see in my next blog.

Reference:https://www.geeksforgeeks.org/compiler-design/difference-between-compiled-and-interpreted-language/

DEV Community: Sevaki Rajasekar

From Mistakes to Success: My First JavaScript Login Page Validation!

How to Create a Random Color Generator in JavaScript

What is a Hex Color?

The Logic Behind Random Colors:

The JavaScript Code:

How It Works:

Conclusion:

Create React App vs Vite: Setting Up React on Linux Made Easy

What is Create React App (CRA)?

Installing CRA on Linux

What is Vite?

Installing Vite on Linux

Which One Should You Use?

One Method to Rule Them All: Why I Love "addEventListener()"

Introduction

What is an Event?

What is addEventListener()?

What Happens When You Click? JavaScript Events Explained

What is JavaScript Events?

Why do we use it?

How does it work?

Common HTML Events

Turn Your Objects into Strings: Meet JSON.stringify()

What is JSON?

Why is JSON important?

JSON.stringify()

Which Coder Are You? Discover Your Programming Style!

What is a Programming Paradigm?

Can It Change? Understanding Mutable and Immutable in JS

What is Mutable and Immutable?

Mutable – Can be Changed

Immutable – Cannot be Changed

Loops That Think First vs Loops That Just Do It!

What Is a Loop?

Entry Check Loop (Condition is checked before the loop runs):

Real-Life Example (Entry Check):

Exit Check Loop (Condition is checked after the loop runs):

Real-Life Example (Exit Check):

The Loop Trio: Start, Check, Repeat!

Initialization – Start Point:

Condition – When to Continue:

Increment or Decrement – How to Move:

Full Loop Example:

Real-Life Example:

Do You Need Instagram to Stay Connected? Not Really.

Compiled Vs Interpreted Language

What is Compiled Language?

What is Interpreted Language:

What is `addEventListener()`?