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

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));

Enter fullscreen mode Exit fullscreen mode

⏱️ 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

Enter fullscreen mode Exit fullscreen mode

📈 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

Enter fullscreen mode Exit fullscreen mode

⚡ 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

Enter fullscreen mode Exit fullscreen mode

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

Updates the value immediately, then returns the result.

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

Enter fullscreen mode Exit fullscreen mode

📝 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);

Enter fullscreen mode Exit fullscreen mode