DEV Community

Cover image for Starting My Frontend Development Journey: Day 3 of #100DaysOfCode 💻🚀
Sehar Munawar
Sehar Munawar

Posted on

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

#100daysofcode #javascript #webdev #beginners

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

Top comments (1)

Collapse
 
merbayerp profile image
Mustafa ERBAY •

Nice work! The real-world examples make the operators much easier to understand, especially for beginners.

One small suggestion: while ++ and -- are important to learn, many modern JavaScript codebases avoid using them inside expressions like x++ + ++x because they can reduce readability and make the evaluation order less obvious. Using x += 1 or separating the operations is often clearer in production code.

Also, for the time conversion example, Math.floor(totalSeconds / 3600) is the approach you’ll most commonly see in production code and in the MDN examples.

Overall, it’s great to see you focusing on understanding the fundamentals instead of rushing ahead. Keep it up!