NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 30Mini Project Capstone3 Hours Practical
Push to GitHub to Complete

Sprint 3 Capstone: Interactive Student SGPA & Grade Portal

This Sprint 3 Capstone integrates everything learned across Days 21–29 into a complete, interactive Single Page Application. Students build a real-world University Grade & SGPA Evaluation Portal that accepts subject marks, performs calculations, and renders professional report cards dynamically.

Interactive Learning Roadmap

Day 30 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Assemble HTML5 forms, modern CSS layout, and JavaScript DOM mechanics into a production-grade mini app.
✔Collect subject marks dynamically from user form inputs and cast strings with Number().
✔Compute Total Marks, Percentage, SGPA (10-point scale), and Letter Grade.
✔Dynamically render grade reports in DOM with color-coded Pass/Fail badges.
✔Deploy the working application to your GitHub repository and personal portfolio.
Day 30 MasterclassMini Project Capstone

Sprint 3 Capstone: Interactive Student SGPA & Grade Portal — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

This Sprint 3 Capstone integrates everything learned across Days 21–29 into a complete, interactive Single Page Application. Students build a real-world University Grade & SGPA Evaluation Portal that accepts subject marks, performs calculations, and renders professional report cards dynamically.

Input Type Casting: Values from <input> elements are ALWAYS strings; use Number() or parseFloat() before arithmetic.
Modular Functions: Separate calculation logic (calculateSGPA) from DOM rendering logic (renderReport).
Form Handling: Intercept submissions with e.preventDefault() to update the dashboard instantly.
Dynamic DOM Construction: Create table rows and status pills with template literals or createElement.
UX Polish: Color-code badges: Emerald Green for First Class/Distinction, Red for Fail, Amber for Pass.
Sprint 3 Milestone: Marks the transition from basic scripting to building functional interactive web tools.
Dimaag Mein Bithane Ka Model

"Think of this project like the official IGNOU or Delhi University Grade Card web portal: students enter their marks, and the web app automatically computes credits, SGPA, grades, and displays their official term results."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

Study how the HTML form connects to JavaScript calculation logic and updates the DOM dynamically.

Complete Interactive Grade Calculator Architecturehtml
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background: #060c18; color: #fff; padding: 24px; }
    .card { background: #0c1328; border: 1px solid #1e293b; padding: 24px; border-radius: 12px; max-width: 500px; margin: auto; }
    input { width: 100%; padding: 10px; margin: 8px 0; background: #060c18; border: 1px solid #334155; color: #fff; border-radius: 6px; box-sizing: border-box; }
    button { width: 100%; padding: 12px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 10px; }
    .result-box { margin-top: 20px; padding: 16px; border-radius: 8px; background: #1e293b; display: none; }
    .badge-pass { color: #10b981; font-weight: bold; }
    .badge-fail { color: #ef4444; font-weight: bold; }
  </style>
</head>
<body>
  <div class="card">
    <h2>🎓 BCA Grade Calculator</h2>
    <form id="grade-form">
      <input type="number" id="sub1" placeholder="BCS-011 Computer Basics Marks" required min="0" max="100" />
      <input type="number" id="sub2" placeholder="BCSL-013 Lab Practical Marks" required min="0" max="100" />
      <button type="submit">Calculate Grade</button>
    </form>
    <div id="results" class="result-box"></div>
  </div>

  <script>
    const form = document.querySelector("#grade-form");
    const results = document.querySelector("#results");

    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const m1 = Number(document.querySelector("#sub1").value);
      const m2 = Number(document.querySelector("#sub2").value);
      const total = m1 + m2;
      const percentage = (total / 200) * 100;
      const sgpa = (percentage / 9.5).toFixed(2);
      const isPass = m1 >= 40 && m2 >= 40;

      results.style.display = "block";
      results.innerHTML = "<h4>Performance Summary</h4>" +
        "<p>Total Marks: <strong>" + total + " / 200</strong></p>" +
        "<p>Percentage: <strong>" + percentage.toFixed(1) + "%</strong></p>" +
        "<p>Estimated SGPA: <strong>" + sgpa + "</strong></p>" +
        "<p>Status: <span class='" + (isPass ? "badge-pass" : "badge-fail") + "'>" + (isPass ? "PASS ✅" : "FAIL ❌") + "</span></p>";
    });
  </script>
</body>
</html>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 30 Practical Task Test Studio

Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Calculate total and percentage with Number()

In the form submit listener, preventDefault and calculate const total = Number(document.querySelector("#m1").value) + Number(document.querySelector("#m2").value); and const pct = (total / 200) * 100;

⏳ WAITING
Task 2Render output into DOM

Set outputBox.style.display = "block" and inject total and percentage into outputBox.innerHTML.

⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing Active
Tab inserts 2 spaces • Live DOM refresh679 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
Live
Renders live HTML & CSS typed on the left.
Interactive Bug Detective

Spot the Bug: String Concatenation Trap in User Inputs

Tap or click on the exact line below that contains the error:

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
const score1 = document.querySelector("#s1").value; // e.g. "80"
2
const score2 = document.querySelector("#s2").value; // e.g. "90"
3
4
const total = score1 + score2;
5
console.log("Total Score:", total); // Prints: "8090" instead of 170!
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Values read from HTML <input> elements are always strings. Using + concatenates "80" and "90" into "8090" instead of adding numbers.

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 sgpa-portal.html

Production BCA SGPA & Semester Transcript Portal

  • •Create day-30/index.html and day-30/styles.css.
  • •Support 4 BCA 1st Semester subjects: Computer Basics, PC Software Lab, Math, and Communication.
  • •Compute overall SGPA, Division (Distinction / 1st / 2nd / Fail), and percentage.
  • •Style with a sleek dark theme (#060c18 background, #0c1328 cards, blue buttons).
  • •Deploy to GitHub Pages or Firebase and verify all interactions run smoothly.
Submission Evaluation Criteria: Submit a clean GitHub repository containing day-30/index.html and day-30/styles.css.
Exact Assignment Solution Code: sgpa-portal.html

Open Visual Studio Code on your PC (code .), create sgpa-portal.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Day 30 - Production SGPA & Semester Transcript Portal</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #060c18;
      color: white;
      min-height: 100vh;
      padding: 32px 16px;
    }
    .portal-card {
      max-width: 640px;
      margin: 0 auto;
      background: #0c1328;
      border: 1px solid #1e293b;
      border-radius: 20px;
      padding: 32px;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    }
    h1 { font-size: 22px; color: #38bdf8; margin-bottom: 6px; }
    .sub { font-size: 13px; color: #94a3b8; margin-bottom: 24px; }
    
    .subject-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #070d1e;
      border: 1px solid #1e293b;
      padding: 12px 16px;
      border-radius: 10px;
      margin-bottom: 10px;
    }
    .subject-info div { font-size: 13px; font-weight: bold; }
    .subject-info span { font-size: 11px; color: #64748b; }
    
    input[type="number"] {
      width: 80px;
      padding: 8px;
      background: #0c1328;
      border: 1px solid #334155;
      border-radius: 6px;
      color: white;
      text-align: center;
      font-size: 14px;
      outline: none;
    }
    input[type="number"]:focus { border-color: #2563eb; }

    .btn-calc {
      width: 100%;
      padding: 14px;
      background: #2563eb;
      color: white;
      border: none;
      border-radius: 10px;
      font-weight: 800;
      font-size: 14px;
      cursor: pointer;
      margin-top: 16px;
      transition: background 0.2s ease;
    }
    .btn-calc:hover { background: #1d4ed8; }

    .result-sheet {
      margin-top: 24px;
      padding: 20px;
      background: #070d1e;
      border: 1px dashed #2563eb;
      border-radius: 12px;
      display: none;
    }
    .score-badge { font-size: 24px; font-weight: 800; color: #34d399; }
    .division-text { font-size: 14px; color: #38bdf8; font-weight: bold; margin-top: 4px; }
  </style>
</head>
<body>
  <div class="portal-card">
    <h1>BCA Semester 1 SGPA Calculator</h1>
    <p class="sub">Sprint 3 Capstone • 4 Core Subjects with Real-time Grade Evaluation</p>

    <div class="subject-row">
      <div class="subject-info">
        <div>BCS-011: Computer Basics</div>
        <span>3 Credits</span>
      </div>
      <input type="number" id="m1" value="78" min="0" max="100">
    </div>

    <div class="subject-row">
      <div class="subject-info">
        <div>BCSL-013: PC Software Lab</div>
        <span>2 Credits</span>
      </div>
      <input type="number" id="m2" value="85" min="0" max="100">
    </div>

    <div class="subject-row">
      <div class="subject-info">
        <div>BCS-012: Mathematics</div>
        <span>4 Credits</span>
      </div>
      <input type="number" id="m3" value="70" min="0" max="100">
    </div>

    <div class="subject-row">
      <div class="subject-info">
        <div>FEG-02: Communication Skills</div>
        <span>3 Credits</span>
      </div>
      <input type="number" id="m4" value="75" min="0" max="100">
    </div>

    <button class="btn-calc" onclick="calculateTranscript()">Calculate SGPA &amp; Transcript</button>

    <div class="result-sheet" id="resultSheet">
      <div class="score-badge" id="sgpaVal">--</div>
      <div class="division-text" id="divVal">--</div>
      <div style="font-size: 12px; color: #94a3b8; margin-top: 8px;" id="breakdownVal">--</div>
    </div>
  </div>

  <script>
    function calculateTranscript() {
      const s1 = parseFloat(document.getElementById("m1").value) || 0;
      const s2 = parseFloat(document.getElementById("m2").value) || 0;
      const s3 = parseFloat(document.getElementById("m3").value) || 0;
      const s4 = parseFloat(document.getElementById("m4").value) || 0;

      const credits = [3, 2, 4, 3];
      const marks = [s1, s2, s3, s4];

      const totalCredits = 12;
      let totalWeightedScore = 0;
      let rawTotal = 0;

      for (let i = 0; i < 4; i++) {
        rawTotal += marks[i];
        totalWeightedScore += marks[i] * credits[i];
      }

      const percentage = (rawTotal / 400 * 100).toFixed(1);
      const sgpa = (totalWeightedScore / (totalCredits * 10)).toFixed(2);

      let division = "Fail";
      if (percentage >= 75) division = "First Division with Distinction 🌟";
      else if (percentage >= 60) division = "First Division";
      else if (percentage >= 50) division = "Second Division";
      else if (percentage >= 40) division = "Pass";

      document.getElementById("sgpaVal").textContent = `SGPA: ${sgpa} / 10.0`;
      document.getElementById("divVal").textContent = `Award: ${division}`;
      document.getElementById("breakdownVal").textContent = 
        `Total Marks: ${rawTotal}/400 (${percentage}%) • Total Credits: ${totalCredits}`;
      document.getElementById("resultSheet").style.display = "block";
    }
  </script>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

Why does adding two <input> values directly (inputA.value + inputB.value) often result in unexpected outputs like "5060" instead of 110?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-30
Create a new project folder (day-30)
2$
cd day-30
Change working directory to day-30
3$
git checkout -b feature/day-30-capstone-grade-portal
4$
git add index.html styles.css
5$
git commit -m "feat(day-30): build sprint 3 capstone interactive student grade portal"
Commit staged changes with a descriptive message
6$
git push origin feature/day-30-capstone-grade-portal
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ Required
VS Code Implementation
Step 4 Viva Check
Own GitHub Project
Required

Exact GitHub Setup Guide & Expected Structure

Day 30 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-30/ or bca-day-30/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 30
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 30
4$
mkdir day-30
Create a new project folder (day-30)
5$
cd day-30
Change working directory to day-30
6$
# 3. Create your code file: index.html
7$
# (Write your Day 30 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 30: Sprint 3 Capstone: Interactive Student SGPA & Grade Portal"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.
2.Separate Day Folders: Create a new folder day-30/ for today so you don't overwrite previous days.
3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.
📁 github.com/YOUR_USERNAME/html-css-projects
Branch: main
README.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/Day 17 Prior Lesson
└──index.html
day-18/Day 18 Prior Lesson
└──index.html
day-19/Day 19 Prior Lesson
└──index.html
day-20/Day 20 Prior Lesson
└──index.html
└──styles.css
day-21/Day 21 Prior Lesson
└──index.html
day-22/Day 22 Prior Lesson
└──index.html
day-23/Day 23 Prior Lesson
└──index.html
day-24/Day 24 Prior Lesson
└──index.html
day-25/Day 25 Prior Lesson
└──index.html
day-26/Day 26 Prior Lesson
└──index.html
day-27/Day 27 Prior Lesson
└──index.html
day-28/Day 28 Prior Lesson
└──index.html
day-29/Day 29 Prior Lesson
└──index.html
day-30/✨ CREATE THIS FOLDER FOR TODAY (Day 30)
└──index.htmlMust contain: Interactive form, Number() casting, SGPA calculation, Dynamic DOM table
└──styles.css
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 30 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 29: DOM Events: addEventListener, Click, Input & Form Submission with preventDefault first.

Complete Day 29 First
Day 29: DOM Events: addEventListener, Click, Input & Form Submission with preventDefault
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal