Lesson 6.9 – Mini Project: Interactive Web Page

🚀 Building a Complete Interactive Website Using HTML, CSS & JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Combine HTML, CSS, and JavaScript

✅ Use Variables

✅ Use Functions

✅ Use Events

✅ Use DOM Manipulation

✅ Create Interactive User Interfaces

✅ Build Real-World JavaScript Projects

📖 Introduction

Congratulations! 🎉

You have learned:

✅ Introduction to JavaScript

✅ Variables & Data Types

✅ Operators

✅ Conditional Statements

✅ Loops

✅ Functions

✅ Events

✅ DOM Manipulation

Now it’s time to combine everything into a complete:

🏆 Interactive Web Page Project

🌟 Project Overview

We will create:

Student Information Portal

Features:

✅ Enter Student Name

✅ Display Welcome Message

✅ Change Background Color

✅ Show Student Details

✅ Interactive Buttons

✅ DOM Manipulation

🎯 Project Layout

 
----------------------------------

Student Information Portal

----------------------------------

Enter Name

[____________]

[ Show Welcome ]

[ Change Color ]

[ Show Details ]

----------------------------------

Output Area

----------------------------------
 

🗂️ Project Files

Create:

index.html

style.css

script.js

🎯 Step 1 – Create HTML Structure

index.html

<!DOCTYPE html>

<html>

<head>

<title>Interactive Web Page</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>

Student Information Portal

</h1>

<input type="text"

id="studentName"

placeholder="Enter Your Name">

<br><br>

<button onclick="showWelcome()">

Show Welcome

</button>

<button onclick="changeColor()">

Change Color

</button>

<button onclick="showDetails()">

Show Details

</button>

<div id="output">

Result Appears Here

</div>

<script src="script.js"></script>

</body>

</html>

🎯 Step 2 – Create CSS Design

style.css

body{

font-family:Arial;

text-align:center;

padding:50px;

background:#f5f5f5;

}

h1{

color:#0d6efd;

}

input{

padding:10px;

width:250px;

font-size:16px;

}

button{

padding:10px 20px;

margin:5px;

background:#0d6efd;

color:white;

border:none;

cursor:pointer;

border-radius:5px;

}

button:hover{

background:#084298;

}

#output{

margin-top:30px;

padding:20px;

background:white;

border-radius:10px;

box-shadow:0 0 10px lightgray;

font-size:20px;

}

🎯 Step 3 – Create JavaScript Functions

script.js

function showWelcome()
{

let name =
document.getElementById("studentName").value;

document.getElementById("output").innerHTML =
"Welcome " + name;

}

🌟 Understanding the Code

Get user input:

 

document.getElementById("studentName").value
 

Display message:

document.getElementById("output").innerHTML

🎯 Step 4 – Change Background Color

Add to:

script.js

function changeColor()
{

document.body.style.backgroundColor =
"lightblue";

}

Output

Click:

 
Change Color
 

Background becomes:

 
Light Blue
 

🎯 Step 5 – Show Student Details

Add:

function showDetails()
{

let name =
document.getElementById("studentName").value;

document.getElementById("output").innerHTML =

"Student Name: " + name +

"<br>Branch: Computer Science" +

"<br>College: Government Polytechnic";

}

Output Example

If user enters:

 
Rahul
 

Display:

 
Student Name: Rahul

Branch: Computer Science

College: Government Polytechnic
 

🌟 Complete JavaScript Code

script.js

function showWelcome()
{

let name =
document.getElementById("studentName").value;

document.getElementById("output").innerHTML =
"Welcome " + name;

}

function changeColor()
{

document.body.style.backgroundColor =
"lightblue";

}

function showDetails()
{

let name =
document.getElementById("studentName").value;

document.getElementById("output").innerHTML =

"Student Name: " + name +

"<br>Branch: Computer Science" +

"<br>College: Government Polytechnic";

}

🎯 Project Features Used

Concept Used
Variables ✅
Functions ✅
Events ✅
DOM Manipulation ✅
Input Fields ✅
Buttons ✅

🌟 Adding Conditional Statement

Improve Welcome Button:

function showWelcome()
{

let name =
document.getElementById("studentName").value;

if(name == "")
{

document.getElementById("output").innerHTML =
"Please Enter Your Name";

}
else
{

document.getElementById("output").innerHTML =
"Welcome " + name;

}

}

Output

If input is empty:

 
Please Enter Your Name
 

Otherwise:

 
Welcome Rahul
 

🎯 Adding Counter Using Variables

HTML

<button onclick="countClick()">

Count Click

</button>

JavaScript

let count = 0;

function countClick()
{

count++;

document.getElementById("output").innerHTML =

"Button Clicked " + count + " Times";

}

Output

First Click:

 
Button Clicked 1 Times
 

Second Click:

 
Button Clicked 2 Times
 

🌟 Complete Professional Version

Features:

✅ Welcome Message

✅ Student Details

✅ Input Validation

✅ Background Color Change

✅ Click Counter

✅ Dynamic Output Area

💻 Final Complete Project

index.html

<!DOCTYPE html>

<html>

<head>

<title>Interactive Web Page</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>

Student Information Portal

</h1>

<input type="text"

id="studentName"

placeholder="Enter Your Name">

<br><br>

<button onclick="showWelcome()">

Show Welcome

</button>

<button onclick="changeColor()">

Change Color

</button>

<button onclick="showDetails()">

Show Details

</button>

<button onclick="countClick()">

Count Click

</button>

<div id="output">

Result Appears Here

</div>

<script src="script.js"></script>

</body>

</html>

script.js

let count = 0;

function showWelcome()
{

let name =
document.getElementById("studentName").value;

if(name == "")
{

document.getElementById("output").innerHTML =
"Please Enter Your Name";

}
else
{

document.getElementById("output").innerHTML =
"Welcome " + name;

}

}

function changeColor()
{

document.body.style.backgroundColor =
"lightgreen";

}

function showDetails()
{

let name =
document.getElementById("studentName").value;

document.getElementById("output").innerHTML =

"Student Name: " + name +

"<br>Branch: Computer Science" +

"<br>College: Government Polytechnic";

}

function countClick()
{

count++;

document.getElementById("output").innerHTML =

"Button Clicked " + count + " Times";

}

🎯 Expected Output

User enters:

 
Rahul
 

Button Click:

 
Show Welcome
 

Output:

 
Welcome Rahul
 

Button Click:

 
Show Details
 

Output:

 
Student Name: Rahul

Branch: Computer Science

College: Government Polytechnic
 

🏫 Real World Applications

This project demonstrates concepts used in:

✅ Student Management Systems

✅ Online Registration Forms

✅ LMS Platforms

✅ Attendance Systems

✅ College Portals

✅ Dashboard Applications

⚠️ Common Beginner Mistakes

Mistake 1

Wrong ID Name

document.getElementById("name")

HTML:

id="studentName"

IDs must match.

Mistake 2

Missing Function Parentheses

Wrong:

onclick="showWelcome"

Correct:

onclick="showWelcome()"

Mistake 3

Forgetting Script File Link

<script src="script.js"></script>

Must be added.

🌟 Best Practices

✅ Use meaningful function names.

✅ Validate user input.

✅ Keep code organized.

✅ Separate HTML, CSS, and JavaScript files.

✅ Test every feature.

🏆 Module 6 Final Project Challenge

Create your own:

Polytechnic Student Portal

Include:

✅ Student Name

✅ Roll Number

✅ Branch

✅ Semester

✅ Welcome Message

✅ Color Changer

✅ Student Details Viewer

📝 Practical Activity

Create:

College Admission Portal

Features:

  • Name Input
  • Email Input
  • Course Selection
  • Submit Button
  • Success Message

Using JavaScript and DOM Manipulation.

📋 Assignment

Assignment 6.9

  1. Which concepts are used in this project?
  2. Why is DOM Manipulation important?
  3. How are Events used?
  4. Why are Functions useful?
  5. Add a Reset Button to the project.
  6. Add another button to change text color.
  7. Modify the project for a College Admission Form.

🧠 Quiz

Q1. Which JavaScript feature changes webpage content?

A. Loop

B. DOM Manipulation

C. Variable

D. Operator

✅ Answer: B

Q2. Which event is used for button clicks?

A. onload

B. onsubmit

C. onclick

D. onkeyup

✅ Answer: C

Q3. Which property gets text box data?

A. innerHTML

B. style

C. value

D. src

✅ Answer: C

Q4. Which keyword creates a function?

A. create

B. define

C. function

D. method

✅ Answer: C

Q5. This project combines?

A. Events

B. Functions

C. DOM Manipulation

D. All of These

✅ Answer: D

📌 Module 6 Summary

You have successfully learned:

✅ Lesson 6.1 – Introduction to JavaScript

✅ Lesson 6.2 – Variables & Data Types

✅ Lesson 6.3 – Operators

✅ Lesson 6.4 – Conditional Statements

✅ Lesson 6.5 – Loops

✅ Lesson 6.6 – Functions

✅ Lesson 6.7 – Events

✅ Lesson 6.8 – DOM Manipulation

✅ Lesson 6.9 – Mini Project: Interactive Web Page

PreviousNext