Forem: Megha M

Difference Between Two Live Clock Codes in JavaScript

Megha M — Tue, 02 Sep 2025 12:50:48 +0000

Hey guys!
One of the first fun projects you can try while learning JavaScript is creating a live clock. It’s simple, but it teaches you a lot about the Date() object, DOM manipulation, and how to keep things updating in real-time with setInterval().

I recently tried two different versions of a live clock. Both of them work perfectly, but they look and behave a little differently. Let’s check out the differences.

Code 1 – Styled and Semantic Clock

In this version, I used the element along with a datetime attribute for accessibility. I also added some CSS to make it look modern and professional.

What’s special about this version:

Uses → more semantic and SEO-friendly.
Adds leading zeros (07:05:09 instead of 7:5:9).
Updates datetime attribute for better accessibility.
Styled with a gradient background and rounded container.
Looks polished, almost like something you’d see in a real app.

Code 2 – Simple Clock

This one is the beginner-friendly approach. It uses just a

tag and a few lines of JavaScript. Instead of manually formatting the time, it relies on toLocaleTimeString().

What’s special about this version:

Very easy to understand.
toLocaleTimeString() automatically adjusts to the user’s system (12-hour or 24-hour).
No extra styling, just plain text.
Great for practicing JavaScript basics quickly.

Key Differences Between the Two

HTML Structure → Code 1 uses , Code 2 uses
.
Time Formatting → Code 1 adds leading zeros manually, Code 2 lets the system handle it.
Accessibility → Code 1 updates the datetime attribute, Code 2 doesn’t.
Styling → Code 1 is styled with CSS, Code 2 is plain.
Complexity → Code 1 is advanced and professional, Code 2 is simple and beginner-friendly.

Conclusion

Both versions show the current time, but the choice depends on what you’re aiming for:

If you just want something quick and simple → go with Code 2.
If you want something professional, styled, and more accessible → choose Code 1. At the end of the day, both are great ways to practice JavaScript. The more you try different approaches, the more confident you’ll become in your coding journey.

Build a Random Background Color Changer with JavaScript

Megha M — Tue, 26 Aug 2025 11:08:21 +0000

Hey everyone I have created a Random Background Color Changer using JavaScript. This is a fun beginner-friendly project that changes the background color of the webpage every time you click a button.

What I Did

Created a simple HTML page with a button.
Wrote a JavaScript function that generates random HEX color codes.
Applied that random color to the background of the page when the button is clicked.

Steps I Followed

HTML Structure

Added a that calls the changecolor() function when clicked.
Gave the an id so we can easily target it in JavaScript.

Define HEX Digits

HEX colors are made from numbers 0–9 and letters A–F.
I stored them in an array called color.

Random Generator Function

Wrote a random() function that picks a random digit from the array.

Build a HEX Code

Started with #.
Used a loop to add 6 random characters to form a complete HEX code (like #12ABF3).

Change Background Color

Used document.querySelector("#body").style.backgroundColor = hexa;

This updates the background color each time the button is clicked.

How It Works

You click the button.
JavaScript runs the changecolor() function.
A random HEX color is generated.
The color is applied as the new background of the webpage.

Every click gives a fresh new color

Getting Started with React.js: What, Why, and How

Megha M — Fri, 08 Aug 2025 16:14:43 +0000

I’ve Started Learning React.js!

Today marks the beginning of my React.js journey, and I’m super excited to share what I’ve learned so far. If you’re also curious about React or just starting out, this post will give you a quick overview of what it is, why we use it, and some essential setup details.

What is React.js?

React.js is an open-source JavaScript library created by Facebook for building fast, interactive user interfaces.

It’s component-based, meaning we build small, reusable pieces of UI.
It uses a virtual DOM for better performance.
It’s mainly used for single-page applications (SPAs).

Why Do We Use React?

Reusable Components – Write once, use anywhere.
Faster Rendering – Virtual DOM makes updates quick.
Easy to Learn – If you know JavaScript, you can pick it up quickly.
Strong Community – Tons of tutorials, libraries, and support available.
Scalability – Works well for small and large projects.

What is CRA and Vite?

CRA (Create React App)

A command-line tool by Facebook to quickly set up a new React project with all configurations done for you. It’s beginner-friendly but slower during development.

Vite

A modern build tool that’s super fast because it uses native ES modules and builds only what’s needed. Many developers are switching to Vite because of its speed.

Difference Between CRA and Vite

Feature	CRA	Vite
Speed	Slower start time	Lightning-fast startup
Bundler	Webpack	ESBuild + Rollup
Configuration	Pre-configured, less flexible	More configurable, modern setup
Learning Curve	Beginner-friendly	Also beginner-friendly but faster
Popularity	Widely used earlier	Growing rapidly now

Commands to Install CRA and Vite

Create React App:

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

Vite:

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

How the Application Looks

CRA: Shows the default React spinning logo with "Edit src/App.js and save to reload."

Vite: Shows a clean starter template with “Vite + React” text and a clickable counter.

My takeaway:

Starting with React feels like opening the door to endless possibilities in front-end development. I’m planning to experiment with both CRA and Vite so I can choose the one that fits my workflow best.

How I Grew as a UI/UX Designer Through Practice and Projects

Megha M — Wed, 06 Aug 2025 02:35:27 +0000

When I first started exploring UI/UX design, I had no idea what wireframes, design systems, or user flow meant. I just knew one thing — I loved creating and I was curious about how apps and websites were designed behind the scenes.

Looking back now, my journey has been filled with small steps, a lot of mistakes, and constant learning. And I’m proud of how far I’ve come.

Starting Out: Full of Curiosity (and Mistakes)

During my internship, I got the opportunity to work on a SPA management software project, where I was responsible for creating the wireframe. It was my first real exposure to UI/UX. I made several mistakes — from inconsistent spacing and poor alignment to choosing the wrong color combinations. But I learned quickly that mistakes are part of the process.

To improve, I started watching YouTube tutorials, exploring UI/UX blogs, and doing daily practice projects. Every video I watched, every design I tried — made my skills stronger. I understood how important it was to focus not just on looks, but on user experience.

Projects That Shaped My Skills

Here are some of the projects I worked on:

SPA Management Software Wireframe – My first major UI/UX work during an internship.
Burger Shop Website – Focused on layout, menu display, and mobile responsiveness.
YouTube Trimmer Web App – Designed to help users trim YouTube videos quickly and intuitively.
Textile Business Website – Worked on showcasing products in a clean and attractive way.
Logo Designs – Created multiple logos and brand identity elements.
Mobile App Screens – Tried designing simple mobile UI screens to practice responsive design.
Brochures – Worked on layouts, typography, and visual balance for print designs. Every project taught me something new — about colors, alignment, spacing, visual hierarchy, and most importantly, how users think.

Tools That Helped Me

Figma – My favorite tool for UI design and wireframing
Canva – For quick graphics, posters, and brochure design
Notion – For organizing ideas and project research
YouTube – My go-to learning platform!
Daily Practice – The best tool of all is consistent practice

How I’ve Grown

Now, my designs are more structured, clean, and user-friendly. I’ve learned how to:

Create wireframes that are easy to hand off for development
Focus on both functionality and aesthetic
Think from a user’s perspective
Maintain design consistency across screens
Explore real-life design problems and solve them visually

Working on small and large projects helped me understand how design plays a crucial role in user interaction and product success.

What’s Next?

I want to continue improving my skills, explore design systems, learn about accessibility, and collaborate more with developers to see my designs come to life.

My ultimate goal is to design solutions that make people’s lives easier — whether it’s a small mobile app or a full business platform.

Final Words to Other Beginners

If you're new to UI/UX, don’t worry about being perfect at the start. Make mistakes, learn from them, and keep creating. You don’t need a degree to begin — just a curious mind and a willingness to improve.

Meow & Move: My First Fun Project on Scratch 🐱

Megha M — Tue, 05 Aug 2025 05:28:39 +0000

Today, I explored something exciting – Scratch, a beginner-friendly visual programming language developed by MIT. It’s a drag-and-drop coding platform where I got to create animations and make my own game without writing a single line of code.

What is Scratch?
Scratch is a block-based programming language designed for kids, students, and beginners to help them learn the logic of programming in a visual way. Instead of typing, you connect blocks that represent actions, movements, sounds, and more.

You can access it online at: scratch.mit.edu

What I Did Today on Scratch

I played around with the default character in Scratch — the cute orange cat, also known as Sprite1.

Here’s what I created:

Move Block: I used the move 20 steps block to make the cat walk across the screen.
Random Position: I added the go to random position block to make the cat teleport randomly after moving.
Sound Block: I used the play sound Meow block — and guess what? The cat made a cute "meow" sound just like in real life!
Ask Block: I connected the ask "mee" and wait block which let me interact with the character through a question popup.

What I Learned

How to combine motion and sound blocks to create simple animation.
How sprites (characters) behave on screen based on instructions.
How easy and fun coding can be when done visually!
Most importantly, I understood the flow of a basic program — from triggering an event to responding with actions.

Final Thoughts

Using Scratch today was an amazing learning experience. It helped me understand the fundamentals of logic and programming in a fun and interactive way. I really enjoyed seeing the cat come to life with my instructions — especially when it moved and meowed!

I can’t wait to explore more and maybe even create a small game or animation soon.

Tip for Beginners: If you’re new to coding or want to teach someone the basics, Scratch is a perfect starting point. It’s free, fun, and full of possibilities.

The 5th Div Mystery Solved! CSS Selectors Explained

Megha M — Fri, 01 Aug 2025 02:05:00 +0000

What I Learned Today at the Institute!
Every day after class, I work on my given tasks at the institute. Sometimes, Muthu Sir interacts with us, and today he asked a tricky question:

“In HTML, you can create 10

elements with the same class name. How would you style only the 5th using CSS?”

At first, I was blank because I thought I had basic HTML & CSS knowledge, but I hadn’t deeply explored some tags and selectors before. This question made me curious, and I learned something new today!

What are Selectors?

Selectors are patterns used to target HTML elements. Once selected, you can style them using CSS or manipulate them using JavaScript.

Think of them like an “address” to find elements in your web page.

1. What are HTML Selectors?

Selectors are used to find and target elements in your HTML.
You use selectors in CSS to style elements or in XPath (mainly for testing/automation) to locate elements.

2. CSS Selector

Used in CSS to apply styles.
Example:

.myclass:nth-child(5) {
  background: yellow;
}

This selects only the 5th element having the class myclass.

Types of Selectors & Explanation

a) Universal Selector (*)

Targets all elements in the document.

* {
  margin: 0;
  padding: 0;
}

b) Type Selector (Tag name)

Selects elements by their HTML tag name.

p {
  color: blue;
}

Changes the text color of all
tags.

c) Class Selector (.classname)

-Selects elements with a specific class.

html

<div class="box"></div>

css

.box {
  background: yellow;
}

d) ID Selector (#idname)

Selects a single element with a unique ID.

html

<h1 id="title">Hello</h1>

css

#title {
  font-size: 24px;
}

e) Group Selector (,)

Selects multiple elements at once.

css

h1, p, a {
  font-family: Arial, sans-serif;
}

f) Descendant Selector (space)

Selects elements inside another element.

css
div p {
  color: red;
}

g) Child Selector (>)

Selects only direct children. css

div > p {
  font-weight: bold;
}

h) Pseudo-Class Selectors (:hover, :nth-child)

Targets elements based on state or position.

.myclass:nth-child(5) {
  background: yellow;
}

When to Use Which Selector?

Use class when multiple elements share the same style.
Use ID for unique elements.
Use nth-child or pseudo-classes for special conditions.
Use XPath (not CSS) when automating/testing to locate elements in the DOM.

innerText vs innerHTML vs textContent: What’s the Real Difference?

Megha M — Thu, 31 Jul 2025 01:27:02 +0000

Hey everyone!
If you’re working with JavaScript and trying to get or change content inside HTML elements, you’ve probably come across these three:
innerText, innerHTML, and textContent.

They might look similar — but they work differently!
Let’s go through them one by one with simple examples so you can see exactly what each one does.

1. innerText

innerText gives you the text you can actually see on the screen. It hides anything that’s not visible (like elements with display: none) and respects line breaks and formatting.

html

<p id="demo1">Hello <span style="display:none;">Hidden</span> World</p>

const result = document.getElementById("demo1").innerText;
console.log(result);  // Output: "Hello World"

2. innerHTML

innerHTML gives you everything inside an element — not just the text, but also the HTML tags.

html

<p id="demo2">Hello <strong>World</strong></p>

const result = document.getElementById("demo2").innerHTML;
console.log(result);  // Output: "Hello <strong>World</strong>"

3. textContent

textContent gives you all the text, even from elements that are hidden — but it doesn’t include any HTML tags.

html

<p id="demo3">Hello <span style="display:none;">Hidden</span> World</p>

const result = document.getElementById("demo3").textContent;
console.log(result);  // Output: "Hello Hidden World"

Which One Should You Use?

Use innerText if you want only what’s visible on the page.
Use innerHTML if you need to get or set HTML code.
Use textContent if you want plain text, including what’s hidden.

That’s All!

Now you won’t mix them up again! Next time you're dealing with the DOM, you’ll know exactly which one to choose — depending on whether you want HTML, visible text, or raw content.

What is JSON.stringify()? A Beginner’s Guide with Examples

Megha M — Wed, 30 Jul 2025 03:18:26 +0000

When building modern web applications, working with JavaScript objects is inevitable. But what happens when you need to send data to a server, store it locally, or debug it in a readable format?

That’s where JSON.stringify() comes into play — a powerful method that transforms JavaScript objects into JSON strings. In today’s blog, we’ll explore what it does, how it works, and how to use it like a pro.

What is JSON.stringify()?

JSON.stringify() is a built-in JavaScript method that converts a JavaScript object, array, or value into a JSON-formatted string.

Syntax

JSON.stringify(value, replacer, space);

Why Use JSON.stringify()?

Sending Data to APIs: Most APIs accept JSON-formatted data.
Saving to Local Storage: localStorage and sessionStorage only store strings.
Debugging: Easily inspect object structure in a readable format.

Getting Started with an Example

const user = {
  name: "Megha",
  age: 25,
  isMember: true
};

const jsonString = JSON.stringify(user);
console.log(jsonString);

Output:

{"name":"Megha","age":25,"isMember":true}

Working with Nested Objects

const product = {
  id: 101,
  name: "Saree",
  details: {
    color: "Red",
    size: "Free"
  }
};

console.log(JSON.stringify(product));

Output:

{"id":101,"name":"Saree","details":{"color":"Red","size":"Free"}}

Pretty Printing with space:

console.log(JSON.stringify(product, null, 2));

Output:

{
  "id": 101,
  "name": "Saree",
  "details": {
    "color": "Red",
    "size": "Free"
  }
}

Filtering Properties with replacer

const user = {
  name: "Megha",
  age: 25,
  password: "secret"
};

const filteredJSON = JSON.stringify(user, ["name", "age"]);
console.log(filteredJSON);

Output:

{"name":"Megha","age":25}

What JSON.stringify() Ignores

const data = {
  name: "Test",
  date: new Date(),
  sayHello: function () {
    return "Hello!";
  },
  something: undefined
};

console.log(JSON.stringify(data));

Output:

{"name":"Test","date":"2025-07-30T02:19:04.000Z"}

Final Thoughts

JSON.stringify() is an essential tool in every JavaScript developer’s toolkit. It allows you to:

Serialize complex objects
Communicate with APIs
Store structured data
Clean up logs for debugging

Next time you need to convert your JavaScript objects into a string — remember, JSON.stringify() has you covered!

Treasure Hunt in the Classroom: How Aptitude Became an Adventure

Megha M — Wed, 16 Jul 2025 13:59:14 +0000

Like every day, I had my aptitude session in the afternoon. But today was not just about aptitude practice — it was a mix of logic, teamwork, and fun activities. Sometimes, our trainer encourages us to participate in these fun activities to refresh our minds, and today he had something special planned for us:
A Treasure Hunt Game!

How the Game Started

Our trainer announced that today's activity would be a Treasure Hunt where we needed to solve clues step-by-step to reach the final treasure. He divided us into 4 teams, and each team had 5 members. I was part of one of these teams.

The first round started with a logic-based seating arrangement question that tested our thinking skills. We discussed as a team and successfully found the answer. Interestingly, the answer was the name of one of our trainers, which became our first clue.

Second Round: Prime Numbers

The next question was related to prime numbers. We solved this as well, and the answer pointed us towards a bike number plate, which was our second clue.

We found a sheet of paper that instructed us to meet another trainer who would give us the next questions. He gave us two questions, and to get a hint for any question, we had to complete a small task.

Completing the Task

We solved the first question easily. For the second question, we also found the answer, but we weren't fully confident about it. So, we requested a hint.
The trainer said we could get a hint only if one of our team members performed a task. He chose me, and I was asked to introduce myself to everyone. After completing the task, we received the hint — and it turned out that our answer was already correct! This made us laugh, but it was really fun.

Next Challenge: A 5-Letter Word

The next round was a bit tricky. We had to guess a 5-letter word within 10 chances. The trainer gave us the first clue:

It’s a non-living thing.
If triggered, it becomes living. After thinking carefully, we found the answer: “Badam”. The Badam tree in the backside of our institution was our next clue.

Final Treasure

We searched around the Badam tree and found a small sheet of paper. On it, it was written:

“Rule No. 1 in Aptitude Class”

We immediately knew the answer:

“Aptitude is Easy.”

Because every day in our session, our trainer reminds us of these two rules:

Aptitude is Easy

You can understand half of the question; you don’t need to understand the full question.

This was the final treasure we found!

The Winning Moment

Finally, our team was the winner! We finished the treasure hunt first. It was such a fun and interesting experience that improved our teamwork and problem-solving speed.

As a reward, each member of our team received a pen and some chocolates.

I really enjoyed this day and learned that combining logic with fun activities can make learning more memorable.

Reflecting on My HTML & CSS Journey: From Basics to Practical Projects

Megha M — Tue, 15 Jul 2025 03:07:43 +0000

Over the past few weeks, I have been deeply focused on strengthening my foundational web development skills, specifically through hands-on practice with HTML and CSS. This period of learning was not just theoretical but highly practical allowing me to translate concepts into working web pages and user interfaces.

Projects I've Built Using Only HTML & CSS:

Throughout this journey, I have created multiple small-scale projects to reinforce my understanding. Below is a snapshot of the types of interfaces I developed:

To-Do List (UI Only)
Social Media Login Pages (X, Facebook, Instagram UI clones)
Restaurant Menu Design (Static UI)
Portfolio Website (Personal Profile)
Simple Blog Layout (Text and Navigation)
Responsive Forms (Dark and Light Modes)
Sidebar Navigation & Tutorial Pages (Inspired by learning platforms like W3Schools)

Key Skills Strengthened:

Through these projects, I’ve gained confidence and hands-on experience in:

HTML5 Semantic Structure
CSS Flexbox and Grid Layouts
Responsive Design Principles
Form Styling and UI Components
Creating Clean, Minimal Web Layouts

What's Next?

With a solid foundation in HTML and CSS, I am now moving forward to strengthen my JavaScript skills. My upcoming focus will be on creating interactive, dynamic web applications where I can bring together everything I’ve learned so far.

My next milestone:

➡ Building a complete project using JavaScript for real-world functionality.

Final Thoughts

Looking back at my early projects is a motivating reminder of how far consistent practice can take you. While these might seem like simple beginner projects, each one played a role in building my confidence for more advanced development.

Stay tuned — I’ll be sharing my JavaScript journey soon!

June Ponal July Kaatre: Where JVM Meets Fun, Learning & Networking!

Megha M — Mon, 14 Jul 2025 09:52:22 +0000

Introduction

I had the opportunity to attend another fantastic Code on JVM event, part of the "June Ponal July Kaatre" tech series hosted at Yuniq, Ticel Park. I was genuinely looking forward to this event because the agenda promised an exciting mix of learning, networking, and fun activities.

Having previously attended a Code on JVM session, I already knew how much value these events bring — whether it's gaining technical insights, building connections within the industry, or simply having a great time. These experiences remind me why consistent participation in such events truly helps you grow as a tech professional.

Agenda Highlights

Introduction to Code on JVM
Technical Talk Sessions
Fun Activities
Interactive Kahoot Quiz

How the Day Went

Registration & Kick-off

After registration, I received my ID card, pen, and notebook. My friends and I captured some fun moments at the photo booth — the environment was energetic, and the excitement for the sessions ahead was palpable.

At 9:30 AM sharp, the event kicked off with an introduction session. It was wonderful to see some familiar faces from past events.

Technical Talk 1: Concurrency & Multithreading through Dasavatharam

The first session, delivered by Mr. Jenifer, was an insightful breakdown of Concurrency and Multithreading — explained in a unique way through the characters of the movie Dasavatharam. This creative analogy made the concepts of Java Threads more approachable and memorable.

Concepts Explained via Characters:

Krishnaveni Paati – Deadlock
Fletcher – Race Condition
Govind Ramaswamy – Main Thread
Avatar Singh – Daemon Thread
Shinghen Narahashi – Thread Pool
Vincent Poovaraagan – Synchronization
Balram Naidu – Watchdog
George W. Bush – Exceptional Thread
Rangaraj Nambi – AtomicInteger
K.S. Ravikumar – Semaphore

Break Time: Refreshments & Conversations

We had a short tea break with tea, biscuits, and of course — more photo moments! Breaks like these are perfect for networking and exchanging ideas casually.

Fun Activity: The Connection Game
One of my favorite parts of the event was the Connection Game.
Participants were shown a set of images and asked to guess the technical term they represented. For example:

An image of Zero + Security = Cybersecurity

This fun activity blended creativity and technical thinking, sparking great conversations and lots of laughs.

Technical Talk 2: Java Garbage Collection

The second technical session, presented by Mr. Karthick, was focused on Java Garbage Collection (GC). He explained:

The benefits of Garbage Collection
How it works under the hood
How GC has evolved across Java versions

This talk highlighted the importance of memory management and how it impacts application performance, scalability, and stability.

Kahoot Quiz: Java Edition

To wrap up the technical segment, we had an interactive Java Quiz on Kahoot.
This session was competitive, fun, and educational — a great way to reinforce knowledge through gamification.

Wrapping Up the Day

The event concluded with a group photo of all participants — a perfect way to capture the spirit of learning, networking, and community.

Conclusion:

Events like Code on JVM remind me how important it is to keep learning , stay connected with the tech community , and never stop being curious. These experiences keep me motivated and ready for the next opportunity to grow .

My First Step into APIs – With Dogs, Jokes & Weather!

Megha M — Fri, 11 Jul 2025 12:29:37 +0000

Today, I explored a new concept in web development — API. I’ve heard the word many times in classes and tutorials, and I finally decided to understand what it actually means and how it works. I haven’t used APIs in a real project yet, but I’m slowly getting comfortable with the idea and the way it works.

What is an API?

API stands for Application Programming Interface.
In simple words, it helps two different applications talk to each other and exchange data.

For example:
Imagine you’re in a restaurant.
You (the user) tell the waiter (API) what you want.
The waiter goes to the kitchen (server), brings your food (data), and gives it to you.

That's how APIs work — they request and deliver information between apps.

How It Works (In Basic Terms)

In JavaScript, we can use fetch() to call an API and get the data back.

fetch('API_URL')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Some Fun APIs I Explored

Even though I haven’t used them in a real app, I found these cool APIs that are easy to try out and understand:

Dog API

Gives a random dog image:
https://dog.ceo/api/breeds/image/random

Joke API

Returns a random joke:
https://official-joke-api.appspot.com/random_joke

Weather API

Shows weather info for a city:
https://api.weatherapi.com/v1/current.json?key=YOUR_KEY&q=Chennai

What I Learned

APIs connect apps and allow them to share data.
We use tools like fetch() in JavaScript to interact with APIs.
Most APIs return data in JSON format (easy to read).
I'm still exploring how to use them practically, but now the concept makes sense!

Final Note

This was my first step into understanding APIs, and it’s honestly fun to explore! I’m excited to keep learning and soon start using APIs in my mini projects.