IN-CLASS PRACTICAL (Part 1) Duration: 45–60 Minutes Guided Workshop / Live Demo

Javascript Basic - Mark Calculator

Students will build a simple form-based calculator using Bootstrap, then apply DOM access, event handling, variables, data types, operators and if/else grading.

Back to Topic Start Practical

Class Flow

Type → Save → Refresh → Verify. Repeat for every task.
1) Setup 2) HTML + Form 3) JS (DOM + Events) 4) if/else Grade

Outcomes

Target
  • Access elements using getElementById()
  • Use addEventListener() correctly
  • Convert input to number using Number()
  • Apply operators for total/average/percentage
  • Grade using if / else if / else

Setup

Tools
  • VS Code
  • Chrome / Edge
  • Files: index.html, script.js
  • Console: F12

Rule of Thumb

Pro Tip
  • Always label your console.log() outputs
  • Prefer const, use let when reassigning
  • Input from form is usually string → convert to number
  • Use clear validation before calculation

PART 1 — IN-CLASS LAB TASKS

Rule: TYPE JavaScript (do not copy-paste). Each step: Type → Save → Refresh → Verify.
Pair / Small group allowed (2–3 students)
Task 1 Environment Setup

Create folder and files

Student action (do this now):
  1. Create folder: RegNo_JS_MarkCalc_Lab
  2. Create files inside it: index.html and script.js
  3. Open the folder in VS Code
Suggested:
Example folder name: 10DDT23F1705_JS_MarkCalc_Lab
Task 2 Starter HTML + Connect script.js
Create this form in index.html.
Screenshot Starter HTML
Verification (must do):
  1. Open index.html in Chrome/Edge
  2. Open Console (F12) and keep it open
  3. Confirm the form loads (3 inputs + 1 button + output box)
Task 3 JS Connection Test
In script.js, TYPE:
script.js TYPE (copy disabled) 
console.clear();
console.log("✅ script.js connected");
Verification:
Save → Refresh → ensure Console shows: ✅ script.js connected
Task 4 Access All Elements (DOM)
In script.js, TYPE:
script.js TYPE (copy disabled) 
const nameInput = document.getElementById("studentName");
const pw1Input  = document.getElementById("pw1");
const pw2Input  = document.getElementById("pw2");
const btn       = document.getElementById("btnCalc");
const outputBox = document.getElementById("outputBox");
Quick checks (TYPE):
script.js TYPE (copy disabled) 
console.log(nameInput);
console.log(pw1Input);
console.log(pw2Input);
console.log(btn);
console.log(outputBox);
Verification:
Refresh → ensure all logs are NOT null.
Task 5 Event Handling (Button Click)
In script.js, TYPE:
script.js TYPE (copy disabled) 
btn.addEventListener("click", function () {
  console.log("✅ Button clicked");
});
Verification:
Refresh → click Calculate → Console shows ✅ Button clicked.
Task 6 Function (Declare + Call)
TYPE this function in script.js:
script.js TYPE (copy disabled) 
function calculateMarks() {
  console.log("➡️ calculateMarks() executed");
}
Replace your click listener with (TYPE):
script.js TYPE (copy disabled) 
btn.addEventListener("click", function () {
  calculateMarks();
});
Verification:
Refresh → click Calculate → see ➡️ calculateMarks() executed.
Task 7 Variables from Form + Data Types
Replace calculateMarks() with (TYPE):
script.js TYPE (copy disabled) 
function calculateMarks() {
  let name = nameInput.value;
  let pw1  = Number(pw1Input.value);
  let pw2  = Number(pw2Input.value);

  console.log("Name:", name);
  console.log("PW1:", pw1);
  console.log("PW2:", pw2);
}
Verification:
Enter values → click Calculate → logs appear and marks show as numbers.
Task 8 Operators (Total, Average, Percentage)
Inside calculateMarks() (below logs), TYPE:
script.js TYPE (copy disabled) 
let total = pw1 + pw2;
let average = total / 2;
let percentage = (total / 200) * 100;

console.log("Total:", total);
console.log("Average:", average);
console.log("Percentage:", percentage);
Task 9 if/else Grade (Based on Average)
Grade scale:
Inside calculateMarks(), TYPE:
script.js TYPE (copy disabled) 
let grade;

if (average >= 80) {
  grade = "Excellent";
} else if (average >= 60) {
  grade = "Good";
} else if (average >= 40) {
  grade = "Satisfactory";
} else {
  grade = "Fail";
}

console.log("Grade:", grade);
Task 10 Validation + Display Output (UI)
Replace your function with the final version (TYPE):
script.js TYPE (copy disabled) 
function calculateMarks() {
  let name = nameInput.value.trim();
  let pw1  = Number(pw1Input.value);
  let pw2  = Number(pw2Input.value);

  if (!name || isNaN(pw1) || isNaN(pw2) || pw1 < 0 || pw1 > 100 || pw2 < 0 || pw2 > 100) {
    outputBox.className = "alert alert-danger mt-3 mb-0";
    outputBox.innerHTML = "❌ Please enter a name and valid marks (0–100) for PW1 and PW2.";
    return;
  }

  let total = pw1 + pw2;
  let average = total / 2;
  let percentage = (total / 200) * 100;

  let grade;
  if (average >= 80) {
    grade = "Excellent";
  } else if (average >= 60) {
    grade = "Good";
  } else if (average >= 40) {
    grade = "Satisfactory";
  } else {
    grade = "Fail";
  }

  outputBox.className = "alert alert-success mt-3 mb-0";
  outputBox.innerHTML = `
    
✅ Result Summary

    Name: ${name}

    PW1: ${pw1} / 100

    PW2: ${pw2} / 100

    

    Total: ${total} / 200

    Average: ${average.toFixed(2)} / 100

    Percentage: ${percentage.toFixed(2)}%

    Grade: ${grade}
  `;
}
Verification:
Try these tests:
  • Empty name → shows red error message
  • Marks above 100 → error message
  • Valid inputs → green result summary appears

Submission (Deliverables)