1.
Write a program to associate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Front-End vs Back-End | MERN Stack</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>MERN Stack Web Development</h1>
<p>Understanding Front-End and Back-End Technologies</p>
</header>
<section class="container">
<!-- Front End -->
<div class="card frontend">
<h2>Front-End Development</h2>
<p>The part of the website users see and interact with.</p>
<h3>Technologies:</h3>
<ul>
<li>HTML - Structure</li>
<li>CSS - Styling</li>
<li>JavaScript - Interactivity</li>
<li>React (MERN)</li>
</ul>
<p class="role">Role: Creates UI & User Experience</p>
</div>
<!-- Back End -->
<div class="card backend">
<h2>Back-End Development</h2>
<p>The server-side logic that works behind the scenes.</p>
<h3>Technologies:</h3>
<ul>
<li>[Link]</li>
<li>[Link]</li>
<li>Database Management</li>
<li>API Handling</li>
</ul>
<p class="role">Role: Handles Server, Data & Authentication</p>
</div>
</section>
<!-- MERN STACK SECTION -->
<section class="mern">
<h2>MERN Stack Architecture</h2>
<div class="mern-box">
<div>MongoDB<br><span>Database</span></div>
<div>[Link]<br><span>Backend Framework</span></div>
<div>React<br><span>Frontend Library</span></div>
<div>[Link]<br><span>Server Runtime</span></div>
</div>
<p class="mern-role">
MERN Stack combines Front-End and Back-End technologies to build
full-stack web applications using JavaScript.
</p>
</section>
<footer>
<p>Simple MERN Stack Webpage Example</p>
</footer>
</body>
</html>
2. Program for form validaton.
<!DOCTYPE html>
<html>
<head>
<title>User Registration Form</title>
<script>
function validateForm() {
// Getting values
let name = [Link]("name").value;
let email = [Link]("email").value;
let password = [Link]("password").value;
// Name Validation
if (name == "") {
alert("Name cannot be empty");
return false;
// Email Validation
let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if () {
alert("Enter a valid email address");
return false;
// Password Validation
if ([Link] < 6) {
alert("Password must be at least 6 characters");
return false;
// Success
alert("Registration Successful!");
return true;
</script>
</head>
<body>
<h2>User Registration Form</h2>
<form onsubmit="return validateForm()">
Name:<br>
<input type="text" id="name"><br><br>
Email:<br>
<input type="text" id="email"><br><br>
Password:<br>
<input type="password" id="password"><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
3. Program for factorial using recursion.
<!DOCTYPE html>
<html>
<head>
<title>Factorial Using Recursion</title>
</head>
<body>
<h2>Factorial Calculator (Recursion)</h2>
<input type="number" id="num" placeholder="Enter a number">
<button onclick="calculateFactorial()">Calculate</button>
<p id="result"></p>
<script>
// Recursive Function
function factorial(n) {
// Base Case
if (n === 0 || n === 1) {
return 1;
}
// Negative number check
if (n < 0) {
return "Factorial not defined for negative numbers";
}
// Recursive Case
return n * factorial(n - 1);
}
// Function to test user input
function calculateFactorial() {
let number = parseInt([Link]("num").value);
let output = factorial(number);
[Link]("result").innerHTML =
"Factorial of " + number + " = " + output;
}
</script>
</body>
</html>
4. Write a program for to do list.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic To Do List</title>
<style>
body{
font-family: Arial;
background:#f4f4f4;
text-align:center;
.container{
background:white;
width:400px;
margin:auto;
padding:20px;
border-radius:10px;
box-shadow:0 0 10px gray;
input{
padding:8px;
width:70%;
button{
padding:8px 12px;
margin:5px;
cursor:pointer;
.completed{
text-decoration: line-through;
color: gray;
li{
list-style:none;
padding:10px;
margin:5px;
background:#e3f2fd;
display:flex;
justify-content:space-between;
</style>
</head>
<body>
<div class="container">
<h2>To Do List App</h2>
<input type="text" id="taskInput" placeholder="Enter task">
<button onclick="addTask()">Add</button>
<ul id="taskList"></ul>
</div>
<script>
// Array to store tasks
let tasks = [];
// Task Object Constructor
function createTask(text){
return {
id: [Link](),
name: text,
completed: false
};
// Add Task
function addTask(){
let input = [Link]("taskInput");
let taskText = [Link];
if(taskText === ""){
alert("Enter a task!");
return;
let task = createTask(taskText);
[Link](task);
[Link]="";
displayTasks();
// Display Tasks
function displayTasks(){
let list = [Link]("taskList");
[Link]="";
[Link](function(task){
let li = [Link]("li");
if([Link]){
[Link]("completed");
[Link] = `
${[Link]}
<div>
<button onclick="toggleComplete(${[Link]})">✔</button>
<button onclick="removeTask(${[Link]})">❌</button>
</div>
`;
[Link](li);
});
// Mark Complete
function toggleComplete(id){
tasks = [Link](task=>{
if([Link] === id){
[Link] = ![Link];
return task;
});
displayTasks();
// Remove Task
function removeTask(id){
tasks = [Link](task => [Link] !== id);
displayTasks();
</script>
</body>
</html>
5. Program for background change color.
<!DOCTYPE html>
<html>
<head>
<title>Background Color Changer</title>
<style>
body{
text-align:center;
font-family: Arial;
transition: background-color 0.5s;
}
button{
padding:10px 20px;
font-size:18px;
margin-top:100px;
cursor:pointer;
}
</style>
</head>
<body>
<h2>Event Driven Background Color Changer</h2>
<button onclick="changeColor()">Change Background</button>
<script>
// Event-driven function
function changeColor(){
// Array of colors
let colors = ["lightblue","lightgreen","pink","orange","yellow","violet"];
// Random color selection
let randomColor = colors[[Link]([Link]()*[Link])];
// Change background
[Link] = randomColor;
}
</script>
</body>
</html>