JavaScript I
Javascript for Beginners
Embark on your coding journey with our JavaScript Beginner Course! Discover the core concepts of JavaScript, from variables and data types to basic operations. Unleash your potential to create interactive web experiences and build a strong foundation for web development. Join us to unlock the magic of code and shape the future of the web! 🚀💻
- Day 1
- Step 1: Display a welcome message in the console:
"Welcome to Tony’s Café — Where Genius Meets Coffee" - Step 2: Store the following details in variables:
- Café Name
- Owner Name (Tony Stark)
- Café Location
- Coffee Price
- Step 3: Use
console.log()to print all the stored details neatly.
Concept:
Resources:
Assignments:
Your Task
💡 Bonus Challenge
Try using template literals (`backticks`) for a cleaner message:
console.log(`Welcome to ${cafeName}! Run by ${owner}, located at ${location}.`);
Tip: Go to Submit via Editor, select JavaScript from the dropdown, write your code, and click Run — you’ll see your output in the console!
- Day 2
- Fix the Welcome Message:
In the JS code, you’ll find a wrong or incomplete message insidealert().
Replace it with this correct greeting:
"Welcome to Tony’s Café — Where Genius Meets Coffee!" - Ask the Customer’s Name:
Useprompt()to ask:
"What’s your name, dear guest?" - Display Personalized Greeting:
Use anotheralert()to display:
"Hello, <name>! Enjoy your time at Tony’s Café ☕"
Concept:
Resources:
Assignments:
You're going to create a digital welcome board for Tony’s Café! Make a few small edits in the JavaScript code — and watch the popup appear with your personalized café greeting! ☕
Your Tasks
💡 Bonus Challenge:
Try storing one more variable — like their favorite drink — and include that in the final alert message too!
Example:
"Hello, Riya! Enjoy your Latte at Tony’s Café ☕"
Go to “Submit via Editor”.
In the dropdown, select HTML — since the JavaScript is written inside the <script> section of your HTML file.
When you run the code, the HTML page will open and show your café greeting pop-ups!
- Day 3
- 1️⃣ Fill in the Café Details:
Find these variables in the JS code:
Replace the placeholders with real values:let cafeName = ""; let itemPrice = 0; let isAvailable = false; let specialDish; // undefined let discount = null;
cafeName→ Name of the caféitemPrice→ Price of a menu itemisAvailable→true/falsefor item availabilityspecialDish→ leave undefined (to practice)discount→ leave null for now
- 2️⃣ Check the Data Types:
Use thetypeofoperator on each variable to see what type of data it is.
Example:typeof cafeName typeof itemPrice - Change
isAvailabletofalse - Change
itemPriceto a string like"200" - Observe how the data type output changes!
Concept:
Resources:
Assignments:
You're going to set up a digital inventory display for Tony’s Café! Make a few edits in the JavaScript code and watch all the data appear neatly on the page. 📋
Your Tasks
💡 Tip:
Everything will appear directly in the UI — no console needed!
Try experimenting:
Go to “Submit via Editor”.
In the dropdown, select HTML — because your JavaScript code is written inside the <script> section of the HTML file.
When you run it, the page will show your inventory data directly!
- Day 4
- 1️⃣ Fill in the Order Details:
Find these variables at the top of the JS code:
Replace the placeholders with:let customerName = ""; let itemName = ""; let price = 0; let quantity = 0;- Your customer name
- The item name (messy input like
"LATTE"is fine) - Item price
- Quantity ordered
- 2️⃣ Format the Item Name Neatly:
Use at least two string methods to clean or format the name.
Examples:toUpperCase(),toLowerCase(),charAt(),replace()
Update the variableformattedItemin your code accordingly. - 3️⃣ Calculate the Total Bill:
Use this formula:
total = price * quantity
Then show the total on the digital receipt.
Concept:
Resources:
Assignments:
You're going to create a real-looking café receipt for Tony’s busy café! Make a few edits in the JavaScript code and watch it generate a professional order receipt — just like a real café bill. 🧾
Your Tasks
🔥 BONUS Challenge – Service Charge:
Add a 10% service charge to the final amount.
Example:
finalAmount = total + (total * 0.1)
Display the service charge and the new total in your final receipt.
💡 Tip:
Everything is displayed directly in the UI — no console needed!
Try different names, messy item names, prices, and quantities — watch how your café receipt updates automatically!
Go to “Submit via Editor” and select HTML in the dropdown — since your JavaScript code is written inside the <script> section of the HTML file.
When you run it, your café receipt will appear instantly on the page!
- Day 5
- 1️⃣ Find the Bug:
There’s a problem where"200"and50are added incorrectly.
Run the code to see what goes wrong — the total might look strange! - 2️⃣ Fix It with Explicit Conversion:
Convert the string"200"into a number using either:
Number("200")orparseInt("200")
Then, display the correct total on the webpage. - 3️⃣ Add Another Calculation:
Add a new item price like"100.75"and useparseFloat()to calculate its total.
Show both results together in the UI. - 4️⃣ Show the Results in a Stylish Bill UI:
Instead of usingconsole.log, display both the buggy and fixed totals inside the HTML page — like a café bill.
Concept:
Resources:
Assignments:
Today, you're going to repair Tony’s Buggy Billing System and make the café’s display show the correct totals! 💻 Fix the type errors and create a stylish bill output on the screen.
Your Tasks
🔥 Bonus Challenge:
Add a small message below the total using String() that says:
"Final total (as string): ₹250"
This helps you practice converting numbers back into strings!
💡 Tip:
Watch how data types affect your totals! Try changing strings and numbers to see when they combine incorrectly — and how type conversion fixes it.
Go to “Submit via Editor” and select HTML in the dropdown — because your JavaScript code is written inside the <script> section of your HTML file.
When you run it, the webpage will display Tony’s corrected café bill right on the screen!
- Day 6
- 1️⃣ Step 1 – Identify Membership Type:
Find the variable:
let membership = "";
Assign one of these values:
"Gold","Silver","Bronze", or"Regular". - 2️⃣ Step 2 – Apply Discount with if-else:
Useif-elsestatements to assign discounts:
- Gold → 20%
- Silver → 10%
- Bronze → 5%
- Regular → 0%
- 3️⃣ Step 3 – Calculate Final Amount:
Use this formula:
finalAmount = billAmount - (billAmount * discount);
Show the result neatly inside the webpage using template literals. - 4️⃣ Step 4 – Add a Switch Version (Bonus Feature):
Write the same logic again using aswitchstatement.
Display both results on the page:
🔹 One for if-else
🔹 One for switch - 5️⃣ Step 5 – Add a Welcome Message (Ternary Operator):
Use a ternary operator:
isMember ? "Welcome back, loyal customer!" : "Sign up to get discounts!";
Display the message right above the bill.
Concept:
Resources:
Assignments:
Tony’s Café has launched its Membership Program — Gold, Silver, Bronze, and Regular! 🏆 Each level offers a different discount, but right now the staff is still doing math by hand. Your mission: help J.A.R.V.I.S. automate discount calculations using conditional logic!
Your Tasks
💡 Tip:
Test your program using all membership types — Gold, Silver, Bronze, and Regular —
and watch how J.A.R.V.I.S. updates the final bill instantly!
When submitting, go to “Submit via Editor” and select HTML in the dropdown —
since your JavaScript logic will be inside the <script> tag of your HTML file.
Run it to see Tony’s Café display the discounts live on the webpage!
- Day 7
- 1️⃣ Step 1 – Customer Info:
Create these variables:
let memberType; // "Gold", "Silver", "Regular"
let totalBill; // e.g. 750
let hasCoupon; // true or false
let isWeekend; // true or false - 2️⃣ Step 2 – Free Refill Offer (AND Operator &&):
If the customer is Gold and the bill is above ₹500,
display →"You get a free refill and cookie!" - 3️⃣ Step 3 – Combo Offer (OR Operator ||):
If the bill is above ₹800 or they have a coupon,
display →"You qualify for a combo offer!" - 4️⃣ Step 4 – Café Open Check (NOT Operator !):
If it’s not the weekend (!isWeekend), display →"Tony’s Café is open!"
else display →"Closed for maintenance!" - 5️⃣ Step 5 – Comparison Practice:
Add one more condition:
IftotalBill >= 1000, display →"You earned a bonus gift!"
Concept:
Resources:
Assignments:
Tony wants to upgrade his café’s Reward System! 🎁 Customers can now earn free refills, cookies, or combo offers — but only if they meet certain conditions. Your job: automate these offers using comparison and logical operators in JavaScript!
Your Tasks
💡 Tip:
Experiment by changing memberType, hasCoupon, and isWeekend to see how all offers update dynamically!
Combine conditions to test multiple reward paths
When submitting, go to “Submit via Editor” and select HTML —
because your JavaScript logic will be inside the <script> tag of your HTML file.
Watch the rewards display right on Tony’s digital board!
- Day 8
- 1️⃣ Step 1 – Complete the Serving Coffee Loop (for loop):
There’s aforloop already started in the code.
➤ Update the loop range and add this message inside the loop body:
"☕ Serving coffee to Customer 1..."up to 5.
After the loop finishes, show:
"All customers have been served!" - 2️⃣ Step 2 – Fix the Cleaning Loop (while loop):
Thewhileloop is missing its condition!
➤ Make it continue cleaning untiltablesLeft = 0.
Hint message:
"Cleaning table... Tables left: 3" - 3️⃣ Step 3 – Complete the Machine Test (do...while loop):
You just need to add the correct condition in thewhile()parentheses.
Remember: It should run at least once — even iftestsLeft = 0. - 🔥 BONUS:
Add a fun little countdown when closing:
"Closing café in 3... 2... 1... ☕ Goodnight!"
Concept:
Resources:
Assignments:
Tony’s Café just got smarter — meet Loopie, the café’s new AI assistant! Your job is to help Loopie master repetitive café tasks using loops in JavaScript. From serving customers to cleaning tables, let’s make Loopie unstoppable! 💪
Your Tasks
💡 Tip:
Try using different starting values for tablesLeft or testsLeft to see how each loop behaves!
Notice how for, while, and do...while loops act differently!
When submitting, go to “Submit via Editor” and select HTML —
because your JavaScript code will be inside the <script> tag.
Run it to watch Loopie complete all tasks like a pro barista!
- Day 9
- 1️⃣ Step 1 – Complete the Greeting Function:
A function namedgreetCustomer()is defined but not showing the correct message.
👉 Fix it to display:
"Hello, <name>! Welcome to Tony’s Café ☕" - 2️⃣ Step 2 – Fix the Bill Calculator:
There’s a functioncalculateBill()— but Tony forgot to return the total!
👉 Add areturnstatement to send back the calculated bill. - 3️⃣ Step 3 – Combine the Functions:
A main functionserveCustomer()is already written.
👉 Inside it, call bothgreetCustomer()andcalculateBill()properly to serve the guest. - 4️⃣ Step 4 – Test the Scope:
There’s a global variablecafeNameand a local variablespecialinside a function.
👉 Try logging both outside the function — what happens?
💡 Observe which variable is accessible and which isn’t!
Concept:
Resources:
Assignments:
Tony’s Café is becoming smarter every day! Today, you’ll help Tony organize his code with functions — reusable blocks of logic that make his café run like clockwork! You’ll also explore scope to understand which variables can be used where. 🔍
Your Tasks
💡 Hint:
Functions make your code reusable and organized.
Use return wisely and test how local and global scopes affect your output.
When submitting, go to “Submit via Editor” and select HTML —
because your JavaScript code will be written inside the <script> section of the page.
Run it to see Tony’s digital assistant greet and serve customers automatically! ☕
- Day 10
- 1️⃣ Task 1 – Display the Menu Items:
Tony already has a menu list but wants to display the first and third items individually.
👉 Access and show them using array indexes.
menuItems[0]; // First item
menuItems[2]; // Third item - 2️⃣ Task 2 – Add and Remove Items:
Tony added a new summer drink — “Iced Latte” — and temporarily removed “Croissant”.
👉 Use these methods to update the array:
push()→ Add a new item
pop()→ Remove the last item
shift()→ Remove the first item
After updating, display the new menu list. - 3️⃣ Task 3 – Show the Full Menu (Loop):
Use aforloop to print the complete updated menu beautifully.
Example output:
Latte is available today!
Cappuccino is available today! - 4️⃣ Task 4 – Add 10% Tax to Prices (map):
Every menu item now gets a 10% tax.
👉 Use.map()to increase each price by 10%.
💡 Formula hint:price * 1.1 - 5️⃣ Task 5 – Find Cold Drinks (filter):
Tony wants to show only cold drinks — the ones containing the word “Iced”.
👉 Use.filter()to display all items that include"Iced".
Concept:
Resources:
Assignments:
Tony’s Café system now needs a smarter way to manage its menu! 🍩 Today, you’ll use arrays to store menu items, update them, and display them neatly — just like a real café dashboard.
Your Tasks
💡 Hint:
Arrays are the backbone of Tony’s digital café — they help manage lists, prices, and stock easily.
Use methods like push(), pop(), map(), and filter() to make your café menu truly dynamic.
When submitting, go to “Submit via Editor” and select HTML —
because all your JavaScript will be written inside the <script> section of the page.
Run your code to see Tony’s café system update, filter, and serve the perfect digital menu! ☕
- Day 11
- Create an object named
menuItemwith the following properties: - name: "Espresso"
- price: 120
- type: "Drink"
- Log the whole object and each property individually using both dot and bracket notation.
- Add a new property:
isAvailable = true - Update the price to 150
- Print the updated object.
- Add a method
describe()insidemenuItemthat prints: - Create a constructor function
MenuItem(name, price, type). - Inside it, assign the properties and define a
describe()method. - Create two objects:
latte→ name: "Latte", price: 160, type: "Drink"sandwich→ name: "Cheese Sandwich", price: 120, type: "Snack"- Call their
describe()methods. - Create an array
menucontaining multipleMenuItemobjects: - Latte – ₹150 – Drink
- Espresso – ₹120 – Drink
- Brownie – ₹100 – Dessert
- Use a
for...ofloop to calldescribe()on each item.
Concept:
Resources:
Assignments:
Tony wants to make his café menu system smarter by using Objects instead of plain lists. Let’s help him organize his menu in style using object properties, methods, and constructors!
Task 1: Create Your First Object
Expected Output:
{ name: 'Espresso', price: 120, type: 'Drink' }
Espresso
120
Task 2: Add & Update Properties
Expected Output:
{ name: 'Espresso', price: 150, type: 'Drink', isAvailable: true }
Task 3: Add a Method
"☕ Espresso costs ₹150 and is a Drink."
Then call that method.
Expected Output:
☕ Espresso costs ₹150 and is a Drink.
Task 4: Constructor Function Magic
Expected Output:
☕ Latte costs ₹160 and is a Drink.
🥪 Cheese Sandwich costs ₹120 and is a Snack.
Task 5: Array of Objects
Expected Output:
☕ Latte costs ₹150 and is a Drink.
☕ Espresso costs ₹120 and is a Drink.
🍫 Brownie costs ₹100 and is a Dessert.
When submitting, choose JavaScript from the dropdown Run it and check your console to see Tony’s smart café menu in action!
- Day 12
- Inside the
<script>tag, find where menu items are displayed. - Add a
console.log()that prints each item’s description using the class method. - There’s a while loop with a
// TODOcomment — that’s your job! - Keep asking the user for their order until they type
"done". - Add each valid item to the order list and increase the total bill.
- Show an alert every time an item is added.
- Use
.find()to check if the entered item exists in the menu. - The current receipt only shows item names and total.
- Tony wants a real café-style bill!
- Add the following details to
receiptTextnear the end of the code: - Customer’s name
- A line divider (
------------------) - A thank-you message
Concept:
Resources:
Assignments:
Tony’s Café is now fully digital! Customers can view the menu, place orders, and even get loyalty discounts. Your job is to complete the system logic inside the <script> tag and make the café run smoothly from menu to receipt!
Task 1: Show the Menu in Style
Tony wants customers to see what’s available before ordering.
Example:
menu.forEach(item => console.log(item.describe()));👉 This should print all menu items neatly in the console with emoji and price.
Task 2: Complete the Ordering Loop
Example Hint:
let orderedItem = menu.find(i => i.name.toLowerCase() === input.toLowerCase());
Task 3: Loyalty Discount Logic
If the customer says “yes” when asked “Are you a returning customer?”, apply a 10% discount to the total.
Hint:
if (isReturning.toLowerCase() === "yes") {
let discount = totalBill * 0.1;
totalBill -= discount;
alert(`🎉 You saved ₹${discount}!`);
}
Task 4: Improve the Receipt
👉 Format it to look neat and professional in the alert or output.
💡 Pro Tip: Make sure to test with different inputs — valid, invalid, uppercase, lowercase — to ensure your system responds like a true café assistant! Each part of this assignment ties together everything you’ve learned so far — loops, arrays, objects, conditionals, and functions!
When submitting, choose HTML in the editor —
because all your JavaScript will be inside the <script> tag.
Run your code and enjoy watching Tony’s Café come to life, from menu display to the final receipt!