6. Write a JavaScript script to perform basic arithmetic operations and display the results.
<html>
<head>
<title>Simple Calculator</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
.calculator {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
.display {
width: 100%;
height: 50px;
font-size: 1.5em;
text-align: right;
padding: 10px;
border: none;
margin-bottom: 10px;
background: #eee;
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
button {
width: 60px;
height: 60px;
font-size: 1.2em;
cursor: pointer;
border: none;
background: #ddd;
border-radius: 5px;
button:active {
background: #bbb;
.operator {
background: #f39c12;
color: white;
.equal {
background: #2ecc71;
color: white;
.clear {
background: #e74c3c;
color: white;
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" class="display" disabled>
<div class="buttons">
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button class="operator" onclick="appendValue('/')">/</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="operator" onclick="appendValue('*')">*</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button class="operator" onclick="appendValue('-')">-</button>
<button onclick="appendValue('0')">0</button>
<button class="clear" onclick="clearDisplay()">C</button>
<button class="equal" onclick="calculate()">=</button>
<button class="operator" onclick="appendValue('+')">+</button>
</div>
</div>
<script>
function appendValue(value) {
document.getElementById("display").value += value;
function clearDisplay() {
document.getElementById("display").value = "";
function calculate() {
try {
document.getElementById("display").value =
eval(document.getElementById("display").value);
} catch {
document.getElementById("display").value = "Error";
</script>
</body>
</html>
7) Implement form validation using JavaScript to check input fields and display error messages.
<!DOCTYPE html>
<html>
<head>
<title>Student Report Form</title>
<style>
.error { color: red; }
</style>
</head>
<body>
<h2>Student Report Form</h2>
<form id="studentForm">
Name: <input type="text" id="name"> <span class="error" id="nameError"></span><br><br>
USN: <input type="text" id="usn"> <br><br>
Subject 1: <input type="number" id="sub1"> <span class="error"
id="sub1Error"></span><br><br>
Subject 2: <input type="number" id="sub2"> <span class="error"
id="sub2Error"></span><br><br>
Subject 3: <input type="number" id="sub3"> <span class="error"
id="sub3Error"></span><br><br>
Subject 4: <input type="number" id="sub4"> <span class="error"
id="sub4Error"></span><br><br>
Subject 5: <input type="number" id="sub5"> <span class="error"
id="sub5Error"></span><br><br>
Subject 6: <input type="number" id="sub6"> <span class="error"
id="sub6Error"></span><br><br>
<button type="button" onclick="validateForm()">Submit</button>
<button type="button" onclick="resetForm()">Reset</button>
</form>
<h2>Student Report</h2>
<p id="report"></p>
<script>
function validateForm() {
let isValid = true;
let name = document.getElementById("name").value.trim();
let usn = document.getElementById("usn").value.trim();
let subjects = [];
let errors = ["sub1Error", "sub2Error", "sub3Error", "sub4Error", "sub5Error", "sub6Error"];
document.getElementById("nameError").textContent = "";
errors.forEach(error => document.getElementById(error).textContent = "");
if (!/^[a-zA-Z ]+$/.test(name)) {
document.getElementById("nameError").textContent = "Only letters allowed in Name";
isValid = false;
for (let i = 1; i <= 6; i++) {
let value = document.getElementById("sub" + i).value;
if (value === "" || value < 0 || value > 100) {
document.getElementById(errors[i - 1]).textContent = "Enter a valid score (0-100)";
isValid = false;
subjects.push(parseFloat(value));
if (isValid) {
generateReport(name, usn, subjects);
}
function generateReport(name, usn, subjects) {
let total = subjects.reduce((a, b) => a + b, 0);
let percentage = (total / 600) * 100;
let grade = "";
if (percentage >= 90) grade = "A";
else if (percentage >= 80) grade = "B";
else if (percentage >= 70) grade = "C";
else if (percentage >= 60) grade = "D";
else grade = "F";
document.getElementById("report").innerHTML =
`<strong>${name}'s Report (USN: ${usn}):</strong><br>
Total Marks: ${total}/600<br>
Percentage: ${percentage.toFixed(2)}%<br>
Grade: ${grade}`;
function resetForm() {
document.getElementById("studentForm").reset();
document.getElementById("report").innerHTML = "";
document.getElementById("nameError").textContent = "";
let errors = ["sub1Error", "sub2Error", "sub3Error", "sub4Error", "sub5Error", "sub6Error"];
errors.forEach(error => document.getElementById(error).textContent = "");
</script>
</body>
</html>
8) Use JavaScript to manipulate the DOM by changing content and styles of elements on user
interaction.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Page Theme Change</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
transition: all 0.5s ease-in-out;
background-color: white;
color: black;
font-size: 18px;
button {
padding: 10px 20px;
font-size: 18px;
border: none;
cursor: pointer;
background-color: black;
color: white;
border-radius: 5px;
margin: 10px;
button:hover {
background-color: gray;
</style>
</head>
<body>
<h1>Click the button to change the theme!</h1>
<button id="changeAppearance">Change Theme</button>
<button id="resetAppearance">Reset</button>
<script>
let themes = [
{ bg: "white", color: "black", font: "Arial, sans-serif", size: "18px" }, // Light Mode
{ bg: "#1e1e1e", color: "#ffffff", font: "Courier New, monospace", size: "20px" }, // Dark Mode
{ bg: "#007BFF", color: "#ffffff", font: "Verdana, sans-serif", size: "22px" }, // Blue Theme
{ bg: "#28a745", color: "#ffffff", font: "Tahoma, sans-serif", size: "24px" } // Green Theme
];
let currentTheme = 0;
document.getElementById("changeAppearance").addEventListener("click", function() {
currentTheme = (currentTheme + 1) % themes.length;
document.body.style.backgroundColor = themes[currentTheme].bg;
document.body.style.color = themes[currentTheme].color;
document.body.style.fontFamily = themes[currentTheme].font;
document.body.style.fontSize = themes[currentTheme].size;
});
document.getElementById("resetAppearance").addEventListener("click", function() {
document.body.style.backgroundColor = "white";
document.body.style.color = "black";
document.body.style.fontFamily = "Arial, sans-serif";
document.body.style.fontSize = "18px";
currentTheme = 0; // Reset theme index
});
</script>
</body>
</html>
9) Handle form submissions using PHP to process and display the submitted data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP Form Handling</title>
</head>
<body>
<h2>Submit Your Details</h2>
<form method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<input type="submit" value="Submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST["name"]);
$email = htmlspecialchars($_POST["email"]);
echo "<h2>Submitted Data</h2>";
echo "<p><strong>Name:</strong> $name</p>";
echo "<p><strong>Email:</strong> $email</p>";
?>
</body>
</html>
10) question space budla gothujji
<!DOCTYPE html>
<html>
<head>
<title>GET and POST Method Demo</title>
</head>
<body>
<h2>GET and POST Method Example</h2>
<!-- Form using GET method -->
<form action="process.php" method="get">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit using GET">
</form>
<br>
<!-- Form using POST method -->
<form action="process.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit using POST">
</form>
</body>
</html>
Process.php
<!DOCTYPE html>
<html>
<head>
<title>Form Data Processing</title>
</head>
<body>
<h2>Received Data</h2>
<?php
if ($_SERVER["REQUEST_METHOD"] == "GET" && !empty($_GET)) {
echo "<h3>Data received using GET method:</h3>";
echo "Name: " . htmlspecialchars($_GET["name"]) . "<br>";
echo "Email: " . htmlspecialchars($_GET["email"]) . "<br>";
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST)) {
echo "<h3>Data received using POST method:</h3>";
echo "Name: " . htmlspecialchars($_POST["name"]) . "<br>";
echo "Email: " . htmlspecialchars($_POST["email"]) . "<br>";
?>
</body>
</html>
