DEV Community: Sehar Munawar

Starting My Frontend Development Journey: Day 3 of #100DaysOfCode 💻🚀

Sehar Munawar — Tue, 21 Jul 2026 20:39:49 +0000

Hey Dev Community! 👋

Continuing my #100DaysOfCode journey, today I deeply practiced all essential JavaScript Arithmetic Operators (+, -, *, /, %, **, ++, --) using real-world scenarios like shopping carts, grocery bills, game timers, and savings logic.

Here is a breakdown of what I built and learned today! 💡

💡 TL;DR:

Basic Arithmetic (+, -, *, /): Handles core logic like totals, discounts, and averages.

Modulo (%): Perfect for converting units (e.g., total seconds into hours/minutes/seconds).

Exponentiation (`):** Powers & exponential growth calculation (2 ** 5 = 32`).

Post vs Pre Operators (x++ vs ++x): Post uses old value first; Pre updates immediately.

🛒 1. Shopping Cart & Grocery Bill Logic

Practiced addition, subtraction, multiplication, division, and .toFixed() for financial calculations.

// Grocery Bill Calculation
const milk = 2 * 200;
const bread = 3 * 150;
const sugar = 1 * 180;

let subtotal = milk + bread + sugar;
let discount = (10 / 100) * subtotal;
const deliveryFee = 50;

let finalBill = subtotal - discount + deliveryFee;
let avgCost = subtotal / 3;

console.log("Subtotal: Rs.", subtotal);
console.log("Final Bill: Rs.", finalBill);
console.log("Average Cost Per Item Type: Rs.", avgCost.toFixed(2));

⏱️ 2. Game Playtime Converter (Modulo `%` & Division `/`)

Converted total raw game seconds (7485s) into Hours, Minutes, and Seconds using remainder arithmetic.

const totalSeconds = 7485;

// Extract Hours
let remainingAfterHours = totalSeconds % 3600;
let hours = (totalSeconds - remainingAfterHours) / 3600;

// Extract Minutes & Seconds
let remainingSeconds = remainingAfterHours % 60;
let minutes = (remainingAfterHours - remainingSeconds) / 60;

console.log(`Time: ${hours}h ${minutes}m ${remainingSeconds}s`);
// Output: Time: 2h 4m 45s

📈 3. Savings Growth with Exponentiation (`**`)

Calculated compound money doubling over time using the exponentiation operator.

let initialAmount = 10;
let multiplier = 2;
let years = 5;

// Formula: Initial * (Multiplier ^ Years)
let totalSavings = initialAmount * (multiplier ** years);
console.log("Total Savings after 5 years:", totalSavings); // Output: 320

⚡ 4. Increment (`++`) & Decrement (`--`) Operators

🔹 Post-Op (`itemCount++`, `itemCount--`)

Uses the current value first, then updates in the background.

let itemCount = 1;
let displayedQuantityAdd = itemCount++; // Displays 1, updates DB to 2

🔹 Pre-Op (`++completedOrders`, `--activeOrders`)

Updates the value immediately, then returns the result.

let completedOrders = 9;
let totalOrdersForBonus = ++completedOrders; // Immediately becomes 10

📝 Arithmetic Operators Quick Reference

Operator	Name	Example	Output / Behavior
`+`	Addition	`10 + 5`	`15`
`-`	Subtraction	`10 - 5`	`5`
`*`	Multiplication	`10 * 5`	`50`
`/`	Division	`10 / 5`	`2`
`%`	Modulo (Remainder)	`10 % 3`	`1`
`**`	Exponentiation	`2 ** 3`	$2^3 = 8$
`x++`	Post-Increment	`let a = x++`	`a` gets old value
`++x`	Pre-Increment	`let a = ++x`	`a` gets new value

📂 Source Code & Repository

Check out the full working code for all 5 exercises on GitHub:
🔗 GitHub Repository: https://github.com/CodeWithSehar/js-logic-building

🧠 Quick Quiz for You!

What will be the output of this JavaScript snippet? Drop your answer in the comments below! 👇


javascript
let x = 4;
let result = x++ + ++x;
console.log(result);

Starting My Frontend Development Journey: Day 2 of #100DaysOfCode 💻🚀

Sehar Munawar — Mon, 20 Jul 2026 12:03:50 +0000

Building a strong foundation in JavaScript isn't just about writing syntax.it's about understanding how data moves, changes, and structures itself under the hood.

Here is my engineering review and key reflections from Day 2 of my #100DaysOfCode journey! 💡

🛠️ Concepts Explored & Key Takeaways

1. Data Type Behavior & Dynamic Concatenation

The Insight: JavaScript’s dynamic typing makes combining strings and numbers straightforward, but understanding type coercion is essential to preventing silent logical errors.
Key Reflection: Clean formatting during string operations ensures readable outputs without unexpected type conversions.

2. Type Inspection (`typeof`)

The Insight: Explicitly verifying data structures before operating on them is a core practice for defensive programming.
Key Reflection: Getting into the habit of inspecting primitive types early helps build reliable logic as state complexity grows.

3. Mini JavaScript Terminology Reference

The Insight: Built a structured 5-word core dictionary using JavaScript variables to practice clean naming conventions and formatted console delivery.
Key Reflection: Documenting technical definitions in code reinforces both variable scoping concepts and fundamental web development vocabulary.

🔍 Technical Reflections & Next Steps

Key takeaway: Consistency in variable naming, proper data handling, and clean repository structuring on Day 2 set the standard for maintainable code down the road.

🌐 Code Repository: Track my daily progress, commit history, and code structure on GitHub: js-logic-building.
⏱️ Coding Logs: Live coding activity and time tracking are tracked automatically via WakaTime.

Drop a reaction ❤️ or bookmark 🔖 if you are also tracking your #100DaysOfCode journey!

Starting My Frontend Development Journey: Day 1 of #100DaysOfCode 💻🚀

Sehar Munawar — Sun, 19 Jul 2026 07:05:18 +0000

Hello everyone! 👋

I have officially started my Frontend Web Development learning journey. Instead of just watching tutorials, I decided to jump straight into hands-on practice to build a strong foundation.

💻 Day 1 Milestones

Today, I focused on core fundamentals and built 4 basic programming tasks to understand how variables and conditional operations work in real scenarios:

📅 Days in a Year: Storing data and printing it dynamically inside sentences.
🧾 Restaurant Bill: Calculating total amounts with added tax values.
📊 Percentage Calculator: Finding student scores out of total marks.
🗳️ Voting Eligibility Check: Implementing basic if/else conditional logic.

📝 Example Code (Restaurant Bill Logic)

Here is a quick look at one of the logic programs I wrote today:

let bill = 1500;
let tax = 250;
let total_bill = bill + tax;

console.log("Total bill including tax is " + total_bill);

🚀 Accountability & Code Repo

I am hosting all my practice code on GitHub to track my consistency and progress. You can check out my repository here:

🔗 js-logic-building on GitHub

Wish me luck for the next 99 days! Let's keep building. 🔥

javascript #frontend #webdev #100DaysOfCode #coding