Scribd
Upload
25 views

TAE I Program Execution

Uploaded by

prathmesh vaidya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

TAE I Program Execution

Uploaded by

prathmesh vaidya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

G. H.

RAISONI COLLEGE OF ENGINEERING, NAGPUR


(An Autonomous Institute affiliated to Rashtrasant Tukdoji Maharaj, Nagpur
University, Nagpur)
Department of Computer Science and Engineering

Date: 31/08/2023
Session: 2023-24 (ODD Winter 2023)

Subject: UITL302 Web Development


TAE I:- Program Execution based on problem statements

Student Details:
Roll Number 40
Name Prathmesh vaidya
Semester 5th
Section B
Branch CSE

Sr.
Problem Statements
No

Design a web page demonstrating all Style sheet types:


Generate a nested list as follows: (Display Fruits and Vegetables in “red” font color using
inline style, Display Mango, Banana and Apple in font color “Blue” and Tomato, Potato and
Carrot in font color “Yellow” using internal stylesheet, set background color for Fruits and
Vegetables to pink using external stylesheet). Hint: use id/class attributes and/or styles for
nested tags.

▪Fruits
I. Mango
II. Banana
1 III. Apple

*Vegetables
IV. Tomato
V. Potato
VI. Carrot

code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Fruits and Vegetables</title>
</head>
<body>
<h1>Fruits and Vegetables</h1>
<ul>
<li><span style="color: red;">Fruits</span>
<ul>
<li style="color: blue;">Mango</li>
<li style="color: blue;">Banana</li>
<li style="color: blue;">Apple</li>
</ul>
</li>
<li><span style="color: red;">Vegetables</span>
<ul>
<li style="color: yellow;">Tomato</li>
<li style="color: yellow;">Potato</li>
<li style="color: yellow;">Carrot</li>
</ul>
</li>
</ul>
</body>
</html>

Write a JavaScript program to determine whether a given year is a leap year in the Gregorian
2 calendar.
code:-
function isLeapYear(year) {
if (year % 4 === 0) {
if (year % 100 === 0 && year % 400 !== 0) {
return false;
}

return true;
}
return false;
}

const yearToCheck = 2024; // Change this to the year you want to check
if (isLeapYear(yearToCheck)) {
console.log(`${yearToCheck} is a leap year.`);
} else {
console.log(`${yearToCheck} is not a leap year.`);
}

Write a java script program to design simple calculator.


code in html :-
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<h1>Simple Calculator</h1>
<input type="text" id="display" readonly>
3 <br>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('+')">+</button>
<br>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('-')">-</button>
<br>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('*')">*</button>
<br>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendToDisplay('/')">/</button>

<script src="calculator.js"></script>
</body>
</html>

code in js :-
function appendToDisplay(value) {
const display = document.getElementById('display');
display.value += value;
}

function calculateResult() {
try {
const expression = document.getElementById('display').value;
const result = eval(expression);
document.getElementById('display').value = result;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}
Design signup form to validate username, password, and phone numbers etc using Java script.

<!DOCTYPE html> padding: 20px;


<html> width: 400px;
<head> margin: 0 auto;
<title>Signup Form }
Validation</title>
<style> label {
body { display: block;
font-family: Arial, sans-serif; margin-bottom: 10px;
} }

h2 { input[type="text"],
text-align: center; input[type="password"] {
} width: 100%;
padding: 10px;
form { margin-bottom: 15px;
border: 2px solid #ccc; border: 1px solid #ccc;
} }
}
input[type="radio"] { </script>
margin-right: 10px; </head>
} <body>
<h2>Employee Details</h2>
input[type="submit"] { <form name="signupForm"
background-color: #007BFF; onsubmit="return validateForm()"
color: #fff; method="post">
padding: 10px 20px; <label for="firstname">First
border: none; Name:</label>
cursor: pointer; <input type="text" id="firstname"
} name="firstname" required><br><br>
<label for="lastname">Last
input[type="submit"]:hover { Name:</label>
background-color: #0056b3; <input type="text" id="lastname"
} name="lastname" required><br><br>
</style> <label
<script> for="gender">Gender:</label>
function validateForm() { <input type="radio" id="male"
var username = name="gender" value="male"
document.forms["signupForm"]["usern required>
ame"].value; <label for="male">Male</label>
var password = <input type="radio" id="female"
document.forms["signupForm"]["pass name="gender" value="female"
word"].value; required>
var phoneNumber = <label
document.forms["signupForm"]["phon for="female">Female</label><br><br
eNumber"].value; >
<label
// Validate username for="employeeid">Employee
if (username === "") { ID:</label>
alert("Username must be <input type="text"
filled out"); id="employeeid" name="employeeid"
return false; required><br><br>
} <label
for="designation">Designation:</label
// Validate password >
if (password === "") { <input type="text"
alert("Password must be id="designation" name="designation"
filled out"); required><br><br>
return false; <label
} for="username">Username:</label>
<input type="text" id="username"
var phoneRegex = /^\d{10}$/; name="username" required><br><br>
if <label
(!phoneNumber.match(phoneRegex)) { for="password">Password:</label>
alert("Phone number must <input type="password"
contain 10 digits"); id="password" name="password"
return false; required><br><br>
<label
for="phoneNumber">Phone
Number:</label>
<input type="text"
id="phoneNumber"
name="phoneNumber"
required><br><br>
<input type="submit"
value="Submit">
</form>
</body>
</html>

You might also like