Scribd
Upload
28 views10 pages

Class 12 HTML & JavaScript Projects

The document outlines a Class 12 Web Application Project featuring various HTML and JavaScript programs. It includes a personal portfolio page, feedback form, navigation menu, resume layout, gallery page, and several JavaScript applications such as an age calculator, simple calculator, light on/off feature, live digital clock, and a to-do list app. Each program is presented with its code and a brief description of its functionality.

Uploaded by

zainhasan2408
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views10 pages

Class 12 HTML & JavaScript Projects

The document outlines a Class 12 Web Application Project featuring various HTML and JavaScript programs. It includes a personal portfolio page, feedback form, navigation menu, resume layout, gallery page, and several JavaScript applications such as an age calculator, simple calculator, light on/off feature, live digital clock, and a to-do list app. Each program is presented with its code and a brief description of its functionality.

Uploaded by

zainhasan2408
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Class 12 Web Application Project - HTML and JavaScript Programs

HTML Program 1: Personal Portfolio Page

<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<style>
body { font-family: Arial; background-color: #f0f0f0; }
.box { background: white; width: 60%; margin: auto; padding: 20px; border-radius: 10px; }
</style>
</head>
<body>
<div class="box">
<h1>Hi, I'm Zain Hasan</h1>
<p>I'm a Web Developer & Student at Class 12.</p>
<h2>Skills</h2>
<ul>
<li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul>
<h2>Contact</h2>
<p>Email: zain@[Link]</p>
</div>
</body>
</html>

Output Box: A neat card-style portfolio with heading, skills, and contact info.
Class 12 Web Application Project - HTML and JavaScript Programs

HTML Program 2: Feedback Form

<!DOCTYPE html>
<html>
<head>
<style>
form { background: #e0f7fa; padding: 20px; width: 300px; margin: auto; border-radius: 8px; }
input, textarea { width: 100%; margin-bottom: 10px; }
</style>
</head>
<body>
<form>
<h3>Feedback Form</h3>
Name: <input type="text"><br>
Email: <input type="email"><br>
Message: <textarea></textarea><br>
<input type="submit" value="Send">
</form>
</body>
</html>

Output Box: Colorful and organized feedback form with input fields.
Class 12 Web Application Project - HTML and JavaScript Programs

HTML Program 3: Navigation Menu

<!DOCTYPE html>
<html>
<head>
<style>
ul { background: #333; overflow: hidden; padding: 0; list-style: none; }
li { float: left; }
li a { display: block; padding: 14px 16px; color: white; text-decoration: none; }
li a:hover { background-color: #111; }
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

Output Box: Horizontal navbar with hover effects.


Class 12 Web Application Project - HTML and JavaScript Programs

HTML Program 4: Resume Layout

<!DOCTYPE html>
<html>
<head>
<style>
.resume { width: 70%; margin: auto; font-family: sans-serif; }
h1 { text-align: center; }
.section { margin: 20px 0; }
</style>
</head>
<body>
<div class="resume">
<h1>Zain Hasan</h1>
<div class="section"><strong>Education:</strong> Class 12, Science</div>
<div class="section"><strong>Experience:</strong> School Web Projects</div>
<div class="section"><strong>Skills:</strong> HTML, JS, CSS</div>
</div>
</body>
</html>

Output Box: Professional resume layout with sections.


Class 12 Web Application Project - HTML and JavaScript Programs

HTML Program 5: Gallery Page

<!DOCTYPE html>
<html>
<head>
<style>
.gallery img { width: 200px; margin: 10px; border-radius: 10px; }
.gallery { text-align: center; }
</style>
</head>
<body>
<h2 style="text-align:center;">Image Gallery</h2>
<div class="gallery">
<img src="[Link]
<img src="[Link]
<img src="[Link]
</div>
</body>
</html>

Output Box: Responsive gallery with 3 images.


Class 12 Web Application Project - HTML and JavaScript Programs

JS Program 1: Age Calculator

<!DOCTYPE html>
<html>
<body>
<h2>Enter Birth Year:</h2>
<input type="number" id="year">
<button onclick="calculateAge()">Calculate Age</button>
<p id="result"></p>

<script>
function calculateAge() {
let birthYear = [Link]("year").value;
let age = 2025 - birthYear;
[Link]("result").innerText = "You are " + age + " years old.";
}
</script>
</body>
</html>

Output Box: User enters year, it shows calculated age.


Class 12 Web Application Project - HTML and JavaScript Programs

JS Program 2: Simple Calculator

<!DOCTYPE html>
<html>
<body>
<input id="num1" type="number">
<input id="num2" type="number">
<button onclick="add()">Add</button>
<p id="out"></p>

<script>
function add() {
let a = parseInt([Link]("num1").value);
let b = parseInt([Link]("num2").value);
[Link]("out").innerText = "Sum: " + (a + b);
}
</script>
</body>
</html>

Output Box: Adds two numbers entered by user.


Class 12 Web Application Project - HTML and JavaScript Programs

JS Program 3: Light On/Off

<!DOCTYPE html>
<html>
<body>
<img id="bulb" src="[Link]
<br>
<button onclick="turnOn()">ON</button>
<button onclick="turnOff()">OFF</button>

<script>
function turnOn() {
[Link]("bulb").src = "[Link]
}
function turnOff() {
[Link]("bulb").src = "[Link]
}
</script>
</body>
</html>

Output Box: Bulb turns on/off using button.


Class 12 Web Application Project - HTML and JavaScript Programs

JS Program 4: Live Digital Clock

<!DOCTYPE html>
<html>
<body>
<h1 id="clock"></h1>
<script>
setInterval(() => {
let now = new Date();
[Link]("clock").innerText = [Link]();
}, 1000);
</script>
</body>
</html>

Output Box: Real-time digital clock updates every second.


Class 12 Web Application Project - HTML and JavaScript Programs

JS Program 5: To-Do List App

<!DOCTYPE html>
<html>
<body>
<input type="text" id="task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>

<script>
function addTask() {
let item = [Link]("li");
[Link] = [Link]("task").value;
[Link]("list").appendChild(item);
[Link]("task").value = "";
}
</script>
</body>
</html>

Output Box: Adds tasks to a list dynamically.

Common questions

Powered by AI

The horizontal navigation menu simplifies access to key sections like 'Home', 'Projects', and 'Contact'. It employs a dark background with white-text links for high contrast, improving visibility and readability. Hover effects add interactivity, providing immediate feedback to users as they navigate through links .

The feedback form employs a minimalist design, using form elements like input and textarea with 100% width to ensure ease of input. It has a light background color and padding around elements to enhance readability and separation. The form also uses a border-radius to soften the edges, making it more visually appealing .

The to-do list uses JavaScript to create list items dynamically. When a user enters a task and clicks 'Add,' the addTask() function creates a new 'li' element, sets its text content to the user input, and appends it to the 'ul' element. This demonstrates real-time data handling and updating of the DOM without needing to refresh the page .

The program uses JavaScript's setInterval function to update the displayed time every second within the clock element. Challenges include potential performance issues in processing environments with limited resources, and synchronization complexities if the device's clock settings were to change unexpectedly .

The age calculator calculates age based on a fixed year (2025), which limits its adaptability for future use. It doesn't validate inputs, which could lead to incorrect results if users enter non-numeric values or unrealistic years. Additionally, the program does not handle cases where a user has not yet had their birthday in the current year .

The light on/off program uses buttons to toggle the source of an image element, changing it between two images of a lightbulb. Functions turnOn() and turnOff() are mapped to button clicks, dynamically altering the image source to simulate turning a light bulb on and off, providing a visual feedback mechanism for user interaction .

The gallery page centers images using text-align: center and applies a margin and border-radius to the images, ensuring they are evenly spaced and visually distinct. The fixed width and consistent styles maintain the gallery's layout across different screen sizes, fostering a responsive and aesthetically pleasing appearance .

The personal portfolio page uses a "box" class in CSS to style a central div with a white background, padding, and rounded borders, making the content stand out from the background. This div includes elements like headings and paragraphs to present the user's information, with specific styles applied to create a neat, card-style layout .

The resume layout separates content (HTML) and presentation (CSS), making it easier to maintain. The HTML structures the content into sections for education, experience, and skills, while CSS defines styling aspects such as width, margins, and font properties, ensuring that style changes can occur independently from content changes .

The simple calculator captures numeric input values using input elements identified by IDs. These inputs are converted to integers in the add() function using parseInt, ensuring calculations are performed with number types rather than strings. However, the program lacks validation to handle non-numeric input gracefully .

You might also like