DEV Community: Smriti Singh

🖼️ Frontend Challenge Submission: Cubicle Chronicles – A Slice of Office Life

Smriti Singh — Sat, 19 Jul 2025 08:08:07 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

🎨 Inspiration
"Cubicle Chronicles" is a CSS art piece that captures the essence of everyone's office life — the desk clutter, the glowing screen, coffee breaks, the water cooler by the side, and the never-ending meetings, mostly stand-up calls. I wanted to recreate a scene that feels both familiar and fun for anyone who’s worked in an office (remote or IRL).

🧪 Demo
👉 Live Demo: CodePen – https://codepen.io/creative-coder/pen/bNVEbPR

Here's a preview of the scene:

🛠️ Journey
Creating this CSS artwork was a blend of creativity and challenge. I started by sketching a basic layout of an office cubicle and then built it piece-by-piece using only HTML and CSS.

✏️ Process Highlights:
Cubicle Structure: Designed with divs representing the walls and desk layout

Monitor & Code: Simulated a developer’s screen showing a loop of writeCode() and drinkCoffee()

Water Cooler & Coffee Mug: Added animated bubbles and subtle styling for realism

Post-it Notes: Used absolute positioning to place floating sticky notes with reminders

Animated Plant & Clock: Brought life to the cubicle with subtle plant movement and ticking clock hands

Keyboard: Dynamically generated with JavaScript for added interactivity

👩‍💻 Sample HTML Structure:

<div class="monitor">
  <div class="monitor-screen">
    <div class="screen-content">
      <div class="code-line">function work() {</div>
      <div class="code-line"> while(true) {</div>
      <div class="code-line"> writeCode();</div>
      <div class="code-line"> drinkCoffee();</div>
      <div class="code-line"> attendMeeting();</div>
      <div class="code-line"> }</div>
      <div class="code-line">}</div>
    </div>
  </div>
</div>

🎯 What I Learned
Deepened my understanding of CSS positioning, transformations, and animations

Gained appreciation for how small design touches (like shadows, reflections, or sticky notes) can elevate an entire scene

Practiced writing clean, component-like HTML structure even in pure CSS art projects

🧑‍🤝‍🧑 Team
This was a solo submission, but inspired by every coworker who’s ever said, "Did you get my email?"

📜 License
Feel free to remix or build upon this idea — all code is open-source and available via the CodePen link.

Thanks for visiting my virtual cubicle! 👩‍💻☕

🌿 Frontend Challenge Submission: The Hub – A Modern Intranet Portal

Smriti Singh — Fri, 18 Jul 2025 13:01:31 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

🚀 What I Built
"The Hub" is a sleek, eco-inspired intranet portal tailored to improve employee experience and simplify access to internal tools and information. Key features include:

Personalized Dashboard with user-specific greetings

Quick Access Toolbar for common tasks like timesheets, time off, and expenses

Document Management System with color-coded categories for easy navigation

Company News Feed showcasing featured announcements

Interactive Calendar with event management via FullCalendar.js

Fully Responsive Layout optimized for mobile, tablet, and desktop screens

🔗 Live Demo
👉 View Demo on CodePen - https://codepen.io/creative-coder/pen/EaVVqZZ

🛠️ Development Journey
Design & Planning

Created a nature-themed UI using calming greens and soft shadows
Focused on accessibility and readability throughout the design

Component Architecture

Built modular and reusable card components
Implemented hover animations and click effects for better interactivity

Feature Implementation

Integrated FullCalendar.js with mock event data
Used a card-based layout to organize multiple features cleanly
Performed responsive testing to ensure cross-device compatibility

Sample Code Snippet

<div class="icon-box">
  <i class="fas fa-clock"></i>
  <div>Time Sheets</div>
</div>

// FullCalendar initialization
document.addEventListener('DOMContentLoaded', function() {
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
      {
        title: 'Team Standup',
        start: new Date()
      }
    ]
  });
  calendar.render();
});

🧠 Key Challenges & Solutions
Challenge: Differentiating document categories visually
Solution: Created a harmonious yet high-contrast color palette

Challenge: Calendar integration without backend support
Solution: Used client-side event management via FullCalendar.js

Challenge: Balancing feature richness with visual simplicity
Solution: Adopted a consistent card-based layout and spacing system

Thank you for checking out my project! Feedback is always welcome. 😊

📅 Day 10: Project Day – Build a Small App

Smriti Singh — Fri, 18 Jul 2025 10:12:28 +0000

Welcome to the final day of the 10-Day JavaScript Learning Challenge! 🎉
You’ve explored the core concepts of JavaScript — from variables, loops, and functions to arrays, objects, and DOM manipulation. Now it’s time to bring it all together with a mini project.

🧠 Why a Project?
Projects are the best way to solidify your learning. They give you hands-on experience and help you understand how different JavaScript concepts work together in real-world scenarios.

✅ Mini Project: Build a “To-Do List”
Today’s goal is to build a simple, yet powerful To-Do List App using plain JavaScript.

🧩 Key Features:

Add new tasks
Mark tasks as completed
Delete tasks
Save tasks to localStorage

🛠️ Concepts You’ll Apply:

DOM manipulation (querySelector, classList, innerHTML)
Event handling (addEventListener)
Functions and scope
Arrays and objects
Conditional logic
Looping over data

🪄 Project Skeleton (HTML)

<div class="todo-app">
  <h2>📝 My To-Do List</h2>
  <input type="text" id="taskInput" placeholder="Add a new task" />
  <button id="addTaskBtn">Add Task</button>
  <ul id="taskList"></ul>
</div>

💻 JavaScript Logic (Basic Setup)

const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

addTaskBtn.addEventListener('click', function () {
  const taskText = taskInput.value.trim();
  if (taskText !== '') {
    const li = document.createElement('li');
    li.textContent = taskText;

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '❌';
    deleteBtn.addEventListener('click', () => li.remove());

    li.addEventListener('click', () => {
      li.classList.toggle('completed');
    });

    li.appendChild(deleteBtn);
    taskList.appendChild(li);
    taskInput.value = '';
  }
});

✨ Styling with CSS

.completed {
  text-decoration: line-through;
  color: gray;
}

🧰 Tools You’ll Use
1. localStorage.setItem(key, value)
This saves data to localStorage using a key-value pair.

Example:

localStorage.setItem('username', 'smriti');

2. localStorage.getItem(key)
This retrieves the data stored by a given key.

Example:

const name = localStorage.getItem('username');
console.log(name); // "smriti"

3. JSON.stringify()
JavaScript objects/arrays can't be stored directly in localStorage. You first need to convert them into strings.

Example:

const todos = ['task1', 'task2'];
localStorage.setItem('tasks', JSON.stringify(todos));

4. JSON.parse()
To get the original object/array back, you convert the string back to a JavaScript format.

Example:

const storedTasks = JSON.parse(localStorage.getItem('tasks'));
console.log(storedTasks); // ['task1', 'task2']

💡 So in short:

Use localStorage.setItem() to save tasks.
Convert tasks to a string using JSON.stringify().
Use localStorage.getItem() to retrieve them.
Use JSON.parse() to convert them back to an array.
Load this array when the page loads and rebuild the task list.

🌟 Wrap Up
This mini project wraps up the challenge, but your JavaScript journey doesn’t end here. Try building more complex apps like:

Notes app
Expense tracker
Weather app (using APIs)

💬 Final Thoughts
You’ve built a strong foundation in JavaScript in just 10 days. Keep coding, keep building, and never stop exploring!

If you liked this content, you can buy me a coffee ☕ and support more dev-friendly tutorials.

Day 9: Events, Event Loop & Promises in JavaScript

Smriti Singh — Wed, 16 Jul 2025 09:53:20 +0000

Welcome to Day 9!

Today we’re diving deep into what makes JavaScript interactive and asynchronous. You’ll learn how events work, what makes JavaScript single-threaded yet powerful, and how to handle async operations using Promises and async/await.

🖱️ JavaScript Events
An event is a user or browser action, such as clicking a button, scrolling, typing, or loading the page. JavaScript can "listen" for these events and run code when they happen.

🎯addEventListener() – Listening for Events
Use this method to attach functions to elements:

const btn = document.querySelector(".click-me");

btn.addEventListener("click", function () {
  console.log("Button was clicked!");
});

🖱️ Common Mouse Events

click – when a user clicks
dblclick – double-click
mouseover – hover
mouseout – mouse leaves

⌨️ Keyboard Events

document.addEventListener("keydown", function (e) {
  console.log("Key pressed:", e.key);
});

🌊 Event Bubbling
Events bubble up from the element to its parent elements in the DOM tree.

// Bubbling example:
child.addEventListener("click", function (e) {
  e.stopPropagation(); // Prevents bubbling to parent
});

📦 Event Delegation
Instead of adding listeners to multiple child elements, attach one to the parent and check e.target.

document.querySelector("ul").addEventListener("click", function (e) {
  if (e.target.tagName === "LI") {
    console.log("Item:", e.target.textContent);
  }
});

🧠 The Event Loop & Single-Threaded JavaScript
JavaScript is single-threaded, meaning it runs one operation at a time. So how does it handle things like timers, API calls, or animations without freezing the browser?

🔁 The Event Loop
Here’s how it works:

JavaScript runs code in the call stack.
Long-running tasks (like setTimeout, fetch) are handled by the browser/web APIs.
Once done, those tasks go into a callback queue.
The event loop checks if the stack is clear and pushes queued tasks into it.
This is how JavaScript handles asynchronous code even though it's single-threaded.

🌟 Promises – Managing Asynchronous Tasks
A Promise is an object that represents a value that may be available now, later, or never.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data received!");
  }, 1000);
});
fetchData.then((data) => console.log(data));

⚡ async/await – Cleaner Way to Handle Promises

async function getData() {
  try {
    const response = await fetchData;
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

async makes a function return a Promise
await waits for the promise to resolve

✅ Mini Task: Simple Counter Using Click Events
💻 HTML:

<div>
  <button id="decrease">−</button>
  <span id="count">0</span>
  <button id="increase">+</button>
</div>

💻 JavaScript:

const count = document.getElementById("count");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");

let value = 0;

increase.addEventListener("click", () => {
  value++;
  count.textContent = value;
});

decrease.addEventListener("click", () => {
  value--;
  count.textContent = value;
});

❓ Interview Questions (Day 9 Topics)

How does addEventListener() work?
What is the event loop in JavaScript?
How does JavaScript handle async tasks if it's single-threaded?
What’s the difference between Promise.then() and async/await?
What is event delegation, and why is it useful?

🏁 Day 9 Wrap-Up

☕ If you liked this content, you can support me by buying a coffee:

Let me know when you're ready for Day 10, and I’ll wrap up the series for you in style! 💛

🔍 GitHub Profile Finder – Built with Bolt

Smriti Singh — Wed, 16 Jul 2025 09:07:15 +0000

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

💡 Prompt
The challenge was simple:

Create a landing page on GitHub where I can fill in the GitHub username, and click on search; the profile of the particular user should appear.

What followed was an exciting and seamless experience of building this project with the Bolt template.

🚀 Project Overview
I built a GitHub Profile Finder—a sleek, responsive, and fully functional web app that allows users to search for any GitHub username and instantly view their public profile details including:

Name
Bio
Avatar
Followers & Following count
Repositories
Location
Company
And more!

All of this is powered by the GitHub REST API.

🛠️ Tech Stack
Framework: Vite + React

Styling: Tailwind CSS

Language: TypeScript

Linting: ESLint

API: GitHub REST API

Bolt template: Provided a clean foundation for development 🚀

📁 Project Structure
Here’s a peek at the file structure that kept things modular and scalable:


├── public/
│   └── vite.svg                    # Vite logo
├── src/
│   ├── components/                 # React components
│   │   ├── ErrorMessage.tsx        # Error display component
│   │   ├── LoadingSpinner.tsx      # Loading animation component
│   │   ├── SearchForm.tsx          # User search form
│   │   └── UserProfile.tsx         # User profile display
│   ├── services/                   # API services
│   │   └── githubApi.ts            # GitHub API integration
│   ├── types/                      # TypeScript type definitions
│   │   └── github.ts               # GitHub user interface
│   ├── App.tsx                     # Main application component
│   ├── index.css                   # Global styles (Tailwind imports)
│   ├── main.tsx                    # Application entry point
│   └── vite-env.d.ts               # Vite type definitions
├── index.html                      # HTML template
├── package.json                    # Dependencies and scripts
├── tailwind.config.js              # Tailwind CSS configuration
├── tsconfig.json                   # TypeScript configuration
├── vite.config.ts                  # Vite configuration
└── README.md                       # Project documentation

✨ Features
✅ Live search for any GitHub username
✅ Error handling for invalid users
✅ Clean, responsive UI with Tailwind CSS
✅ Loading spinner during API fetch
✅ Modular file structure

🧠 Challenges & Breakthroughs
While using Bolt, the AI model itself worked smoothly, but I did face a few friction points on the platform side:

🛑 Google Sign-In Issues: I tried signing up with Google twice, but both attempts failed. Eventually, I had to use my GitHub account to get started.

👻 Browser Extension Glitches:While AI was generating my project, my Phantom and MetaMask Chrome extensions kept popping up repeatedly—even though I wasn’t interacting with them at all. It disrupted the experience a bit. It might be that this error was due to my browser. Don't know.

These small bugs aside, once I was inside the workspace, everything worked as expected, and I was able to build and deploy my app with ease using github and netlify.

🧩 Favorite Bolt Features
Bolt made it effortless to get started:

🔥 Vite + React + TS combo out of the box

🎨 Tailwind pre-configured

✅ ESLint and TypeScript ready

🧹 Clean file organization

It saved hours of setup time and let me focus purely on building.

💻 Code Highlight: GitHub API Integration

// src/services/githubApi.ts
import { GitHubUser } from '../types/github';

export const fetchGitHubUser = async (username: string): Promise<GitHubUser> => {
  const response = await fetch(`https://api.github.com/users/${username}`);

  if (!response.ok) {
    if (response.status === 404) {
      throw new Error('User not found. Please check the username and try again.');
    } else if (response.status === 403) {
      throw new Error('API rate limit exceeded. Please try again later.');
    } else {
      throw new Error('Failed to fetch user data. Please try again.');
    }
  }

  return response.json();
};

👥 Team
This was an individual submission, but shoutout to the DEV and Bolt teams for making this possible! 🙌

📸 Preview
Here’s what the final product looks like:

🔗 Try It Yourself
👉 GitHub Repo: https://github.com/thecreativecoder07/github-profile-finder
👉 Live Demo: https://github-profile-finderapp.netlify.app/

❤️ Final Thoughts
Building with Bolt was overall an exciting and smooth experience. I was able to go from idea to deployment in just a few hours—exactly what a hackathon platform should offer.

Thanks for reading and happy building! ⚡

☕ If you liked this content, you can support me by buying a coffee:

🧠 10-Day JavaScript Challenge: DOM Manipulation Day-8

Smriti Singh — Tue, 15 Jul 2025 07:33:00 +0000

📅 Day 8: DOM Manipulation

Welcome to Day 8 of our JavaScript journey!
Today, we're exploring the power of DOM manipulation — the key to making your web pages dynamic and interactive.

🌐 What is the DOM?
The DOM (Document Object Model) is a representation of your HTML page as a tree-like structure that JavaScript can interact with. It lets you read, change, and update HTML content and styles dynamically.

🔍 Selecting Elements from the DOM
Before modifying anything, you need to select the element in JavaScript.

✅ getElementById()
Selects a single element by its ID.

<p id="greeting">Hello!</p>
const message = document.getElementById("greeting");
console.log(message.textContent); // Hello!

✅ querySelector()
Selects the first element that matches a CSS selector.

<div class="box"></div>
const box = document.querySelector(".box");

//You can also select by ID or tag:
document.querySelector("#header");
document.querySelector("h1");

✅ querySelectorAll()
Selects all elements that match a selector — returns a NodeList.

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

const items = document.querySelectorAll("li");
console.log(items.length); // 2

🧱 Changing Text and Styles

const heading = document.querySelector("h1");

// Change text
heading.textContent = "Welcome to JavaScript DOM";

// Change styles
heading.style.color = "tomato";
heading.style.fontSize = "32px";

🎨 Adding & Removing Classes
One of the best ways to control styles dynamically is using classList.

✅ classList.add()
Adds a class to the element:

const box = document.querySelector(".box");
box.classList.add("active");

✅ classList.remove()
Removes a class:

box.classList.remove("active");

This way, you can toggle styles by switching classes defined in your CSS.

✅ Mini Task: Change Page Background Using Class
🎯 Task:
Create a button that, when clicked, applies a class to the

that changes its background color.
For this version, we’ll add the class manually in JS, not using event listeners.

💻 HTML:

<body class="light-theme">
  <button class="switch">Apply Dark Theme</button>
</body>

💻 CSS:

.light-theme {
  background-color: #ffffff;
}

.dark-theme {
  background-color: #121212;
  color: #f5f5f5;
}

💻 JavaScript:

// Simulate toggle manually
document.body.classList.remove("light-theme");
document.body.classList.add("dark-theme");

Try writing a conditional check next time to switch themes back and forth!

❓ Interview Questions (Day 8 Topics)

What does querySelector() return?
What is the difference between querySelector() and querySelectorAll()?
How can you change an element's text using JavaScript?
How do you apply a class to an element using JS?
Why might you prefer using classList.add() over setting element.className directly?

🏁 Day 8 Wrap-Up
In Day 9, we’ll dive deeper into Forms & Input Handling to create interactive web applications.

Keep practicing and experimenting with the DOM — it’s where frontend magic happens! 💫

☕ If you liked this content, you can support me by buying a coffee:

🧠 10-Day JS Challenge: Objects & Nested Data Day-7

Smriti Singh — Mon, 14 Jul 2025 08:51:50 +0000

📅 Day 7: Objects & Nested Data

Welcome to Day 7 of the challenge!

Today we're diving into objects—a key data structure in JavaScript that helps us store data in the form of key-value pairs. Objects are perfect for representing real-world entities like users, products, or configurations.

🧩 What is an Object?
An object is a collection of related data and functions (called properties and methods). Each property is a key-value pair.

let user = {
  name: "Smriti",
  age: 24,
  isMember: true
};

🔍 Accessing Object Properties
You can access object properties in two ways:

1. Dot Notation

console.log(user.name); // Smriti

2. Bracket Notation

console.log(user["age"]); // 24

Bracket notation is useful when:

The key is stored in a variable
The key has spaces or special characters

🧱 Updating & Adding Properties

user.name = "Aarav";          // Update
user.email = "aarav@email.com"; // Add

You can also delete properties:

delete user.isMember;

🧭 Nested Objects and Arrays
Objects can contain other objects and arrays — making it easy to model complex data.

let student = {
  name: "Ananya",
  age: 18,
  subjects: ["Math", "Science", "English"],
  address: {
    city: "Delhi",
    pin: 110001
  }
};

console.log(student.subjects[1]);       // "Science"
console.log(student.address.city);      // "Delhi"

❄️ Using Object.freeze() to Lock an Object
If you want to make an object read-only, use Object.freeze().

const settings = {
  theme: "dark",
  fontSize: 16
};

Object.freeze(settings);

settings.theme = "light"; // Ignored!
console.log(settings.theme); // "dark"

Note: Object.freeze() only works at the top level — nested objects remain mutable unless you recursively freeze them.

✅ Mini Task: Create and Print a Student Object
🎯 Task:
Create a student object with:

name
age
subjects (an array)
address (nested object with city and pin)
Print the information neatly.

💻 Example:

const student = {
  name: "Aarav",
  age: 20,
  subjects: ["Math", "Physics", "Chemistry"],
  address: {
    city: "Mumbai",
    pin: 400001
  }
};

Object.freeze(student);

console.log("Name:", student.name);
console.log("Age:", student.age);
console.log("Subjects:", student.subjects.join(", "));
console.log("City:", student.address.city);
console.log("PIN Code:", student.address.pin);

❓ Interview Questions (Day 7 Topics)

What is the difference between dot notation and bracket notation?
How do you add or update properties in an object?
How can you represent nested data in JavaScript?
What does Object.freeze() do?
Can a frozen object be modified? What about its nested values?

🏁 Day 7 Wrap-Up

Tomorrow in Day 8, we’ll learn about Loops with Objects & Arrays — how to iterate over collections efficiently.

☕ If you liked this content, you can support me by buying a coffee:

🧠 10-Day JS Challenge: Arrays & Array Methods Day-6

Smriti Singh — Sun, 13 Jul 2025 18:26:56 +0000

📅 Day 6: Arrays & Array Methods
Welcome to Day 6 of the challenge!

Today, we’re diving into one of JavaScript’s most used data structures — the Array. Whether you're storing numbers, strings, or objects, arrays are essential for organizing and working with collections of data.

📦 What is an Array?
An array is a special variable that can hold more than one value at a time — like a list.

You can think of it as a container that stores items in a specific order, and you can access each item using an index (starting from 0).

✅ Declaring an Array:

let colors = ["red", "green", "blue"];
let numbers = [10, 20, 30, 40];

✅ Accessing Elements:

console.log(colors[0]); // "red"
console.log(numbers[2]); // 30

✅ Modifying Elements:

colors[1] = "yellow"; 
console.log(colors); // ["red", "yellow", "blue"]

🔧 Common Array Methods in JavaScript
JavaScript provides built-in methods to make working with arrays easier and more powerful. Let’s look at some essentials:

📌 1. push()
Adds an element to the end of the array.

let fruits = ["apple", "banana"];
fruits.push("mango");
console.log(fruits); // ["apple", "banana", "mango"]

📌 2. pop()
Removes the last element.

fruits.pop();
console.log(fruits); // ["apple", "banana"]

📌 3. unshift()
Adds an element to the beginning.

fruits.unshift("orange");
console.log(fruits); // ["orange", "apple", "banana"]

📌 4. shift()
Removes the first element.

fruits.shift();
console.log(fruits); // ["apple", "banana"]

🔁 Advanced Array Methods
✅ map()
Creates a new array by applying a function to each item.

let numbers = [1, 2, 3];
let squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9]

✅ filter()
Creates a new array with elements that pass a condition.

let numbers = [1, 2, 3, 4, 5];
let even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

✅ Mini Task: Filter Even Numbers from an Array
🎯 Task:
Write a program that filters all even numbers from an array and stores them in a new array.

💻 Solution:

function filterEven(arr) {
  return arr.filter(num => num % 2 === 0);
}

let sample = [10, 15, 22, 37, 40, 51];
let evens = filterEven(sample);

console.log(evens); // Output: [10, 22, 40]

Try it with different numbers or even as a reusable function in other projects!

Shallow Copy vs Deep Copy
When copying arrays or objects, it's important to know how deep the copy goes.

🔹 Shallow Copy
A shallow copy duplicates only the first layer. If the original contains objects or arrays inside, they are still linked.

let original = [1, 2, [3, 4]];
let copy = [...original];

copy[2][0] = 99;
console.log(original[2][0]); // 99 (original is affected!)

Common shallow copy methods:

[...] spread operator
Array.prototype.slice()
Object.assign()

🔸 Deep Copy
A deep copy duplicates all levels of nested structures — no shared references.

let deepOriginal = [1, 2, [3, 4]];
let deepCopy = JSON.parse(JSON.stringify(deepOriginal));

deepCopy[2][0] = 100;
console.log(deepOriginal[2][0]); // 3 (original is safe!)

Deep copy is ideal when working with complex data structures that shouldn't be altered accidentally.

⚠️ JSON method doesn’t work well with functions, undefined, or circular references.

❓ Interview Questions (Day 6 Topics)

What is an array in JavaScript, and how is it different from an object?
How do push() and unshift() differ?
When would you use map() vs forEach()?
What does the filter() method return?
Can you explain the difference between pop() and shift()?

☕ If you liked this content, you can support me by buying a coffee:

🏁 Day 6 Wrap-Up
Arrays are everywhere in JavaScript — from storing lists of users to managing UI components. By mastering these basic and advanced methods, you're getting closer to writing clean, powerful, and expressive code.

📅 Coming up next in Day 7: We’ll explore Objects & Object Methods
Happy coding! 💻🚀

🧠 10-Day Challenge: Day 5 Functions & Scope in JS

Smriti Singh — Fri, 11 Jul 2025 11:20:24 +0000

📅 Day 5: Functions & Scope

Welcome to Day 5 of the challenge!4

Today, we’re unlocking the core building blocks of JavaScript: Functions and Scope. Functions help you organize, reuse, and simplify your code — and understanding scope gives you control over your variables.

🔧 What Is a Function?
A function is a reusable block of code that performs a specific task.
You define it once and use it wherever you need it.

Think of a function like a vending machine:

Insert input → Process → Get output

✅ Function Declaration

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Smriti")); // Hello, Smriti!

✅ Function Expression

const greet = function(name) {
  return "Hi, " + name + "!";
};

Function expressions are not hoisted, so you can't call them before they’re defined.

⚡ Arrow Function (ES6+)
Arrow functions provide a shorter syntax and behave differently with this.

const greet = (name) => {
  return "Hey, " + name + "!";
};

If the function has only one expression, you can make it even shorter:

const greet = name => "Hey, " + name + "!";

🔄 Parameters vs Arguments
Parameters: Variables listed in the function definition
function greet(name) → name is a parameter

Arguments: Actual values passed when calling the function
greet("Smriti") → "Smriti" is an argument

🔁 The return Keyword
The return keyword is used to output a value from a function.

function add(a, b) {
  return a + b;
}
console.log(add(3, 4)); // 7

If no return, the function returns undefined.

📦 Scope in JavaScript

Scope determines where your variables can be accessed.

✅ Function Scope
Variables declared with var are function-scoped:

function showMessage() {
  var message = "Hello";
  console.log(message);
}
// message is not accessible outside

✅ Block Scope
let and const are block-scoped:

if (true) {
  let msg = "Inside block";
  const x = 42;
}
// msg and x are not accessible here

🔄 Normal Function vs Arrow Function: What's the Difference?

✅ Mini Task: Factorial Function

Write a function that calculates the factorial of a number.

💡 Factorial of 5 = 5 × 4 × 3 × 2 × 1 = 120

💻 Solution:

function factorial(n) {
  let result = 1;
  for (let i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
}

console.log(factorial(5)); // 120

Try writing the same using a recursive function!

❓ Interview Questions (Day 5 Topics)

What’s the difference between a function declaration and a function expression?
Explain the difference between parameters and arguments.
What does the return keyword do in a function?
What is the difference between function scope and block scope?
What are the key differences between arrow functions and regular functions?

🎉 That’s a Wrap for Day 5!
Now you understand how to create and use functions, pass and return values, and manage variable visibility through scope.
Functions = power + reusability.

👉 Coming up in Day 6: Arrays & Array Methods—where we’ll learn how to store and work with lists of data.

Keep coding, and share your factorial function below, which you wrote with a different logic! 💪💻

🧠 10-Day Challenge : Loops in JavaScript Day-4

Smriti Singh — Thu, 10 Jul 2025 12:40:45 +0000

📅 Day 4: Mastering Loops in JavaScript

Welcome to Day 4 of the challenge!
Today we unlock one of JavaScript’s most powerful tools: loops — a way to make your code do more with less.

A loop in JavaScript is a control structure that allows you to execute a block of code repeatedly as long as a specified condition is true.

Instead of writing repetitive code manually, loops help you automate tasks — like printing numbers, processing items in a list, or checking for conditions.

🏃 Why Loops?
Imagine you were asked to print numbers from 1 to 100.
Would you really write:

console.log(1);
console.log(2);
console.log(3);
// ...
console.log(100);

No way!
Instead, we use loops to repeat actions efficiently.

🔁 The 3 Main Loops in JavaScript

✅ 1. for loop
Great when you know how many times to repeat.

for (let i = 1; i <= 5; i++) {
  console.log("Step:", i);
}

✅ 2. while loop
Used when you want to repeat while a condition is true.

let i = 1;
while (i <= 5) {
  console.log("While Step:", i);
  i++;
}

✅ 3. do...while loop
Runs at least once, even if the condition is false.

let i = 6;
do {
  console.log("Do-While Step:", i);
  i++;
} while (i <= 5);

⛔ break and continue

✅ break – exits the loop immediately

for (let i = 1; i <= 10; i++) {
  if (i === 5) break;
  console.log(i); // Stops at 4
}

✅ continue – skips current iteration

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue;
  console.log(i); // Skips 3
}

✅ Mini Task:

Print All Even Numbers from 1 to 50
Your challenge: Loop from 1 to 50 and print only even numbers.

✅ Solution 1 (for loop):

for (let i = 1; i <= 50; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

✅ Solution 2 (while loop):

let i = 2;
while (i <= 50) {
  console.log(i);
  i += 2;
}

❓ Interview Questions:

What’s the difference between a for loop and a while loop?
When would you prefer a do...while loop?
What does break do inside a loop?
What does continue do?
Can you print numbers 1 to 100 using just one loop?

🎯 That’s a wrap for Day 4!
Tomorrow, in Day 5, we’ll explore Functions & Scope — a major step toward writing cleaner, reusable code.

Keep learning. Keep building. 💪

🧠 10-Day Challenge: Day-3 Conditional Statements

Smriti Singh — Wed, 09 Jul 2025 13:24:00 +0000

📅 Day 3: Conditional Statements
Welcome to Day 3 of our JavaScript Learning Challenge! 🧠
Today, we’re stepping into the world of decisions in JavaScript — using conditional statements to control the flow of your program.

🤔 What Are Conditional Statements?
Conditional statements allow you to run different blocks of code depending on whether certain conditions are true or false.

Think of it like this:

“If it’s raining, take an umbrella. Else, wear sunglasses.

✅ if Statement
The most basic decision-making syntax.

let age = 18;

if (age >= 18) {
  console.log("You are eligible to vote!");
}

✅ if...else Statement
Use this when you need two different paths.

let age = 16;

if (age >= 18) {
  console.log("You can vote.");
} else {
  console.log("You are not eligible to vote yet.");
}

✅ else if Statement
For checking multiple conditions in sequence.

let score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else {
  console.log("Grade: D");
}

✅ Ternary Operator (Shorthand for if...else)
A more compact syntax for simple decisions.

let age = 20;
let message = age >= 18 ? "You Can Drive" : "You Cannot Drive!";
console.log(message);

✅ Example: Voting Eligibility Checker

Write a JavaScript program that checks whether a person is eligible to vote based on their age.

🧪 Requirements:
If age is 18 or above, print "You can vote!"
If age is below 18, print "You are too young to vote."

🧠 Example Solution:

let age = prompt("Enter your age:");
age = Number(age);

if (age >= 18) {
  console.log("You can vote!");
} else {
  console.log("You are too young to vote.");
}

Using Ternary Operator

console.log(age >= 18 ? "You can vote!" : "You are too young to vote.");

❓ Interview Questions (Day 3 Topics)

What’s the difference between if, else if, and else?
When should you use a ternary operator over an if...else block?
How does JavaScript evaluate multiple conditions in a chain?
What happens if no condition in an if...else if chain is true?
What’s the output of:

let age = 18;
console.log(age >= 18 ? "Yes" : "No");

🎉 Awesome! You’ve now mastered conditional logic in JavaScript.
Tomorrow in Day 4, we’ll explore Loops — the magic behind repetition and iteration in code.

🧠 10-Day JavaScript Learning Challenge - Day2

Smriti Singh — Tue, 08 Jul 2025 11:31:52 +0000

📅 Day 2: Data Types & Operators

Welcome back to Day 2 of the JavaScript Learning Challenge! 👋
Now that you've learned how to set up JavaScript and print output in the console, it’s time to dive deeper into one of the most fundamental aspects of JavaScript: Data Types and Operators.

🔢 JavaScript Data Types
In JavaScript, everything is a value. Every value has a type, and JavaScript has two broad categories:

✅ 1. Primitive Data Types
These are basic and immutable:

String – Text inside quotes

let name = "Smriti";

Number – Whole numbers or decimals

let age = 25;
let score = 98.6;

Boolean – true or false

let isLoggedIn = true;

Undefined – A variable declared but not assigned a value

let email;
console.log(email); // undefined

Null – Explicitly empty value

let address = null;

✅ 2. Non-Primitive (Reference) Data Types
These are mutable and store references to values (objects in memory):

🧱 Object
A collection of key-value pairs.

let person = {
  name: "Smriti",
  age: 25,
  isStudent: true
};

📦 Array
An ordered list of values (indexed from 0).

let fruits = ["apple", "banana", "mango"];

📜 Function
Functions are also objects!

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

Unlike primitive types, non-primitive types are copied by reference — changing one changes the original.

🧮 JavaScript Operators
✅ 1. Arithmetic Operators
Used for math operations:

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0

✅ 2. Assignment Operators
Used to assign or update variable values:

let x = 10;
x += 5; // x = x + 5
x -= 2; // x = x - 2

✅ 3. Comparison Operators
Used to compare values. Returns a boolean (true or false).

console.log(10 == "10");  // true (loose equality)
console.log(10 === "10"); // false (strict equality)
console.log(5 != 3);       // true
console.log(5 < 10);       // true
console.log(5 >= 5);       // true

✅ 4. Logical Operators
Used to combine boolean values:

let isStudent = true;
let hasID = false;

console.log(isStudent && hasID); // false (AND)
console.log(isStudent || hasID); // true (OR)
console.log(!isStudent);         // false (NOT)

✅ Mini Task: Create a Simple Calculator
Let’s build a simple calculator using the arithmetic operators we learned today.

Example:

let num1 = 12;
let num2 = 4;

console.log("Addition:", num1 + num2);
console.log("Subtraction:", num1 - num2);
console.log("Multiplication:", num1 * num2);
console.log("Division:", num1 / num2);
console.log("Remainder:", num1 % num2);

💡 Try modifying the values of num1 and num2 and re-running the code.
You can even extend this to ask for user input using prompt() (in browsers)!

❓ Interview Questions (Day 2 Topics)

What is the difference between primitive and non-primitive data types in JavaScript?
What are objects and arrays? How are they different?
What is the result of 5 == "5" and 5 === "5"? Why?
What does the && operator do? When would you use it?
How are variables assigned by value vs. reference in JavaScript?

🎉 Congrats on completing Day 2!
Tomorrow in Day 3, we’ll explore Conditional Statements and learn how to make decisions in your code using if, else, and switch.