JAVASCRIPT
PROBLEM STATEMENT 1: Design a web page to validate credit card numbers per the
specifications below. The following tables outline the major credit cards you want to
validate and allow prefixes and lengths.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Credit Card Validation</title>
<script>
function validateCard()
var card = [Link]("card").value;
if (/^5[1-5][0-9]{14}$/.test(card))
alert("Valid Master Card");
else if (/^4[0-9]{12}([0-9]{3})?$/.test(card))
alert("Valid Visa Card");
else if (/^3[47][0-9]{13}$/.test(card))
alert("Valid American Express");
else
alert("Invalid Credit Card");
</script>
</head>
<body>
<h2>Credit Card Validation</h2>
Enter Card Number:
<input type="text" id="card">
<br><br>
<button onclick="validateCard()">Validate</button>
</body>
</html>
OUTPUT:
PROBLEM STATEMENT 2: Design a web page to validate the following according to the
standard conditions:
a. Name
b. E-Mail-id
c. Password
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm()
var name = [Link]("name").value;
var email = [Link]("email").value;
var password = [Link]("password").value;
var namePattern = /^[A-Za-z ]+$/;
var emailPattern = /^[a-z0-9._]+@[a-z]+\.[a-z]{2,3}$/;
if()
alert("Invalid Name");
return false;
if()
alert("Invalid Email");
return false;
if([Link] < 6)
{
alert("Password must be at least 6 characters");
return false;
alert("All inputs are valid");
</script>
</head>
<body>
<h2>Registration Form</h2>
Name: <input type="text" id="name"><br><br>
Email: <input type="text" id="email"><br><br>
Password: <input type="password" id="password"><br><br>
<button onclick="validateForm()">Submit</button>
</body>
</html>
OUTPUT:
PROBLEM STATEMENT 3: Store some country names and their capitals. Ask the user to
select a country and its capital from two lists. If the match is correct, display “Correct
answer”; otherwise, display an error message and tell the correct answer.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Country Capital Match</title>
<script>
function check()
var country = [Link]("country").value;
var capital = [Link]("capital").value;
var data = {
India:"Delhi",
USA:"Washington",
Japan:"Tokyo"
};
if(data[country] == capital)
alert("Correct Answer");
else
alert("Wrong! Correct answer is " + data[country]);
</script>
</head>
<body>
<h2>Match Country with Capital</h2>
Country:
<select id="country">
<option>India</option>
<option>USA</option>
<option>Japan</option>
</select>
<br><br>
Capital:
<select id="capital">
<option>Delhi</option>
<option>Washington</option>
<option>Tokyo</option>
</select>
<br><br>
<button onclick="check()">Check</button>
</body>
</html>
OUTPUT:
PROBLEM STATEMENT 4: Design a simple Calculator.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<script>
function calculate(op)
{
var a = parseFloat([Link]("num1").value);
var b = parseFloat([Link]("num2").value);
var result;
if(op=='+') result = a+b;
if(op=='-') result = a-b;
if(op=='*') result = a*b;
if(op=='/') result = a/b;
[Link]("result").value = result;
}
</script>
</head>
<body>
<h2>Calculator</h2>
Number 1: <input type="text" id="num1"><br><br>
Number 2: <input type="text" id="num2"><br><br>
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('*')">*</button>
<button onclick="calculate('/')">/</button>
<br><br>
Result: <input type="text" id="result">
</body>
</html>
OUTPUT:
PROBLEM STATEMENT 5: Design a web page that is self-modifying itself after every
minute.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Self Changing Page</title>
<script>
function changeText()
{
var date = new Date();
[Link]("msg").innerHTML = "Page Updated at : " + [Link]();
}
setInterval(changeText,60000);
</script>
</head>
<body>
<h2 id="msg">This page will change every minute</h2>
</body>
</html>
OUTPUT:
PROBLEM STATEMENT 6: Design a web page that implements a running clock.
SOURCE CODE:
OUTPUT:
<!DOCTYPE html>
<html>
<head>
<title>Running Clock</title>
<script>
function showTime()
{
var date = new Date();
var time = [Link]();
[Link]("clock").innerHTML = time;
}
[Link] = function() {
showTime(); // Show immediately
setInterval(showTime, 1000); // Update every second
};
</script>
</head>
<body>
<h2>Running Digital Clock</h2>
<h1 id="clock"></h1>
</body>
</html>
OUTPUT:
PROBLEM STATEMENT 7: Write a code for a web application that accepts the user’s
birthdate in a textbox and displays the day of the week in a message box at the click of a
button .
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Find Day of Birth</title>
<script>
function findDay()
{
var birthdate = [Link]("bdate").value;
if(birthdate == "")
{
alert("Please enter your birthdate");
return;
}
var d = new Date(birthdate);
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var day = days[[Link]()];
alert("You were born on " + day);
}
</script>
</head>
<body>
<h2>Find Your Birth Day</h2>
Enter your Birthdate:
<input type="date" id="bdate">
<br><br>
<button onclick="findDay()">Find Day</button>
</body>
</html>
OUTPUT:
PROBLEM STATEMENT 8: Write a script that inputs a telephone number as a string in
the form (555)555-555. The script should use the string method split to extract the area
code as a token and the last four digits of the phone number as a token.
Display the area code in one text field and the seven-digit phone number in another text
field.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Phone Number Parser</title>
<script>
function extractNumber() {
var phone = [Link]("phone").value;
// Example: (555)555-5555
var parts = [Link](")");
var areaCode = parts[0].replace("(", "");
var remaining = parts[1].split("-");
var firstPart = remaining[0];
var lastPart = remaining[1];
var fullNumber = firstPart + lastPart;
[Link]("area").value = areaCode;
[Link]("number").value = fullNumber;
}
</script>
</head>
<body>
<h2>Enter Phone Number</h2>
<input type="text" id="phone" placeholder="(555)555-5555">
<button onclick="extractNumber()">Extract</button>
<br><br>
Area Code:
<input type="text" id="area" readonly>
<br><br>
7-digit Number:
<input type="text" id="number" readonly>
</body>
</html>
OUTPUT:
PROBLEM STATEMENT 9: Develop and demonstrate an HTML file that includes a
JavaScript script that uses functions for the following problems:
(a)
Parameter: A string
Output: The position of the left-most vowel
(b)
Parameter: A number
Output: The number with its digits in reverse order
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>String and Number Functions</title>
<script>
// (a) Find position of left-most vowel
function findVowel() {
var str = [Link]("textInput").[Link]();
var vowels = "aeiou";
for (var i = 0; i < [Link]; i++) {
if ([Link](str[i])) {
[Link]("result1").innerHTML =
"Left-most vowel at position: " + (i + 1);
return;
}
}
[Link]("result1").innerHTML =
"No vowel found";
}
// (b) Reverse digits of a number
function reverseNumber() {
var num = [Link]("numInput").value;
var reversed = [Link]("").reverse().join("");
[Link]("result2").innerHTML =
"Reversed Number: " + reversed;
}
</script>
</head>
<body>
<h2>String Operation</h2>
<input type="text" id="textInput" placeholder="Enter a string">
<button onclick="findVowel()">Find Left-most Vowel</button>
<p id="result1"></p>
<h2>Number Operation</h2>
<input type="text" id="numInput" placeholder="Enter a number">
<button onclick="reverseNumber()">Reverse Number</button>
<p id="result2"></p>
</body>
</html>
OUTPUT:
PROBLEM STATEMENT 11: Design a web page to perform a survey on four different
models of Maruti (Maruti-K10, Zen-Astelo, WagonR, Maruti-SX4) owned by people living
in four metro cities (Delhi, Mumbai, Chennai & Kolkata). Display a tabulated report in the
format given below.
SOURCE CODE :
<!DOCTYPE html>
<html>
<head>
<title>Car Survey</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
<script>
let matrix = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
];
function submitData()
{
let city = [Link]("City").selectedIndex;
let model = [Link]("Model").selectedIndex;
matrix[city][model]++;
updateTable();
}
function updateTable()
{
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
[Link]("c"+i+j).innerHTML = matrix[i][j];
}
}
}
</script>
</head>
<body>
<h2>Car Survey</h2>
<label>City: </label>
<select id="City">
<option>Delhi</option>
<option>Mumbai</option>
<option>Chennai</option>
<option>Kolkata</option>
</select>
<br><br>
<label>Model: </label>
<select id="Model">
<option>Maruti-K10</option>
<option>Zen-Astelo</option>
<option>Wagnor</option>
<option>Maruti-SX4</option>
</select>
<br><br>
<button onclick="submitData()">Submit</button>
<hr>
<h2>Survey Table</h2>
<table border="1">
<tr>
<th>City</th>
<th>Maruti-K10</th>
<th>Zen-Astelo</th>
<th>Wagnor</th>
<th>Maruti-SX4</th>
</tr>
<tr>
<td>Delhi</td>
<td id="c00">0</td>
<td id="c01">0</td>
<td id="c02">0</td>
<td id="c03">0</td>
</tr>
<tr>
<td>Mumbai</td>
<td id="c10">0</td>
<td id="c11">0</td>
<td id="c12">0</td>
<td id="c13">0</td>
</tr>
<tr>
<td>Chennai</td>
<td id="c20">0</td>
<td id="c21">0</td>
<td id="c22">0</td>
<td id="c23">0</td>
</tr>
<tr>
<td>Kolkata</td>
<td id="c30">0</td>
<td id="c31">0</td>
<td id="c32">0</td>
<td id="c33">0</td>
</tr>
</table>
</body>
</html>
OUTPUT:
REACT
PROBLEM STATEMENT 1: Create a functional component that accepts props and
displays a personalized message.
SOURCE CODE:
import React from "react";
import { createRoot } from "react-dom/client";
function Greeting(props) {
return <h2>Hello, {[Link]}! Welcome to React.</h2>;
}
function App() {
return (
<div>
<Greeting name="Diya" />
</div>
);
}
const root = createRoot([Link]("root"));
[Link](<App />);
OUTPUT:
DIYA
PROBLEM STATEMENT 2: Create a class component that maintains a counter and
provides buttons to increase and decrease the counter.
SOURCE CODE:
import React, { Component } from "react";
import { createRoot } from "react-dom/client";
class Counter extends Component {
constructor() {
super();
[Link] = { count: 0 };
}
increment = () => {
[Link]({ count: [Link] + 1 });
};
decrement = () => {
[Link]({ count: [Link] - 1 });
};
render() {
return (
<div>
<h2>Count: {[Link]}</h2>
<button onClick={[Link]}>Increase</button>
<button onClick={[Link]}>Decrease</button>
</div>
);
}
}
// Render Counter (not App)
const root = createRoot([Link]("root"));
[Link](<Counter />);
OUTPUT:
PROBLEM STATEMENT 3: Create a functional component that maintains a counter and
provides buttons to increase, decrease and reset the counter.
SOURCE CODE:
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count - 1)}>Decrease</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
const root = createRoot([Link]("root"));
[Link](<Counter />);
OUTPUT:
PROBLEM STATEMENT 4: Create a functional component that displays a running clock
and the current date.
SOURCE CODE:
import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
function Clock() {
const [time, setTime] = useState(new Date());
useEffect(() => {
const timer = setInterval(() => {
setTime(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);
return (
<div>
<h2>Time: {[Link]()}</h2>
<h3>Date: {[Link]()}</h3>
</div>
);
}
const root = createRoot([Link]("root"));
[Link](<Clock />);
OUTPUT:
PROBLEM STATEMENT 5: Create a component with a form that updates the state
based on user input.
SOURCE CODE:
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
function FormExample() {
const [name, setName] = useState("");
return (
<div>
<input
type="text"
placeholder="Enter your name"
onChange={(e) => setName([Link])}
/>
<h2>Your Name: {name}</h2>
</div>
);
}
const root = createRoot([Link]("root"));
[Link](<FormExample />);
OUTPUT:
PROBLEM STATEMENT 6: Create a React application with multiple routes.
SOURCE CODE:
import React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
function Home() {
return <h2>Home Page</h2>;
}
function About() {
return <h2>About Page</h2>;
}
function Contact() {
return <h2>Contact Page</h2>;
}
function App() {
return (
<Router>
<nav>
<Link to="/Home">Home</Link> |{" "}
<Link to="/about">About</Link> |{" "}
<Link to="/contact">Contact</Link>
</nav>
<Routes>
<Route path="/Home" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}
const root = createRoot([Link]("root"));
[Link](<App />);
OUTPUT: