JavaScript I

Javascript for Beginners


Progress
Reviewed: 0%
8 Tasks

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
  • Introduction to JavaScript + Variables

    Concept:



    Resources:



    Assignments:


    Your Task

    • 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.

    💡 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
  • Console, Prompt & Alert Basics

    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

    • Fix the Welcome Message:
      In the JS code, you’ll find a wrong or incomplete message inside alert().
      Replace it with this correct greeting:
      "Welcome to Tony’s Café — Where Genius Meets Coffee!"
    • Ask the Customer’s Name:
      Use prompt() to ask:
      "What’s your name, dear guest?"
    • Display Personalized Greeting:
      Use another alert() to display:
      "Hello, <name>! Enjoy your time at Tony’s Café ☕"

    💡 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
  • Data Types & Type Checking

    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

    • 1️⃣ Fill in the Café Details:
      Find these variables in the JS code:
      let cafeName = "";
      let itemPrice = 0;
      let isAvailable = false;
      let specialDish; // undefined
      let discount = null;
      Replace the placeholders with real values:
      • cafeName → Name of the café
      • itemPrice → Price of a menu item
      • isAvailabletrue/false for item availability
      • specialDish → leave undefined (to practice)
      • discount → leave null for now
    • 2️⃣ Check the Data Types:
      Use the typeof operator on each variable to see what type of data it is.
      Example:
      typeof cafeName
      typeof itemPrice

    💡 Tip:
    Everything will appear directly in the UI — no console needed!

    Try experimenting:

    • Change isAvailable to false
    • Change itemPrice to a string like "200"
    • Observe how the data type output changes!

    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
  • String & Number Operations

    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

    • 1️⃣ Fill in the Order Details:
      Find these variables at the top of the JS code:
      let customerName = "";
      let itemName = "";
      let price = 0;
      let quantity = 0;
      Replace the placeholders with:
      • 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 variable formattedItem in your code accordingly.
    • 3️⃣ Calculate the Total Bill:
      Use this formula:
      total = price * quantity
      Then show the total on the digital receipt.

    🔥 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
  • Data Coercion & Type Conversion

    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

    • 1️⃣ Find the Bug:
      There’s a problem where "200" and 50 are 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") or parseInt("200")
      Then, display the correct total on the webpage.
    • 3️⃣ Add Another Calculation:
      Add a new item price like "100.75" and use parseFloat() to calculate its total.
      Show both results together in the UI.
    • 4️⃣ Show the Results in a Stylish Bill UI:
      Instead of using console.log, display both the buggy and fixed totals inside the HTML page — like a café bill.

    🔥 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
  • Conditional Statements

    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

    • 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:
      Use if-else statements 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 a switch statement.
      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.

    💡 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
  • Logical & Comparison Operators

    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

    • 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:
      If totalBill >= 1000, display → "You earned a bonus gift!"

    💡 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
  • Loops (for, while, do-while)

    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

    • 1️⃣ Step 1 – Complete the Serving Coffee Loop (for loop):
      There’s a for loop 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):
      The while loop is missing its condition!
      ➤ Make it continue cleaning until tablesLeft = 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 the while() parentheses.
      Remember: It should run at least once — even if testsLeft = 0.
    • 🔥 BONUS:
      Add a fun little countdown when closing:
      "Closing café in 3... 2... 1... ☕ Goodnight!"

    💡 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
  • Functions & Scope Basics

    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

    • 1️⃣ Step 1 – Complete the Greeting Function:
      A function named greetCustomer() 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 function calculateBill() — but Tony forgot to return the total!
      👉 Add a return statement to send back the calculated bill.
    • 3️⃣ Step 3 – Combine the Functions:
      A main function serveCustomer() is already written.
      👉 Inside it, call both greetCustomer() and calculateBill() properly to serve the guest.
    • 4️⃣ Step 4 – Test the Scope:
      There’s a global variable cafeName and a local variable special inside a function.
      👉 Try logging both outside the function — what happens?
      💡 Observe which variable is accessible and which isn’t!

    💡 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
  • Arrays & Iteration Methods

    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

    • 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 a for loop 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".

    💡 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
  • Objects & Constructors

    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

    • Create an object named menuItem with the following properties:
      • name: "Espresso"
      • price: 120
      • type: "Drink"
    • Log the whole object and each property individually using both dot and bracket notation.

    Expected Output:

    { name: 'Espresso', price: 120, type: 'Drink' }
    Espresso
    120

    Task 2: Add & Update Properties

    • Add a new property: isAvailable = true
    • Update the price to 150
    • Print the updated object.

    Expected Output:

    { name: 'Espresso', price: 150, type: 'Drink', isAvailable: true }

    Task 3: Add a Method

    • Add a method describe() inside menuItem that prints:

    "☕ 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

    • 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.

    Expected Output:

    ☕ Latte costs ₹160 and is a Drink.
    🥪 Cheese Sandwich costs ₹120 and is a Snack.

    Task 5: Array of Objects

    • Create an array menu containing multiple MenuItem objects:
      • Latte – ₹150 – Drink
      • Espresso – ₹120 – Drink
      • Brownie – ₹100 – Dessert
    • Use a for...of loop to call describe() on each item.

    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
  • Capstone Project – Tony’s Café Ordering System

    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.

    • Inside the <script> tag, find where menu items are displayed.
    • Add a console.log() that prints each item’s description using the class method.

    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

    • There’s a while loop with a // TODO comment — 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.

    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

    • The current receipt only shows item names and total.
    • Tony wants a real café-style bill!
    • Add the following details to receiptText near the end of the code:
      • Customer’s name
      • A line divider (------------------)
      • A thank-you message

      👉 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!



×

Let's Go!

Congratulations on getting started. Here is a little reward for you...

×

10

Going to the next task in