Frontend Assignment Sec-8
Name :- Yash Dhanraj
Admission no :- 22SCSE1010982
1. (a)
(i) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists Example</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Banana</li>
<li>Apple</li>
<li>Mango</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Banana</li>
<li>Apple</li>
<li>Mango</li>
</ol>
</body>
</html>
(ii) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Example</title>
</head>
<body>
<h2>Table Example</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>London</td>
</tr>
</table>
</body>
</html>
(iii) *<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Education Details</title>
</head>
<body>
<h2>My Education Details</h2>
<table border=”1”>
<tr>
<th>Degree</th>
<th>University</th>
<th>Year</th>
</tr>
<tr>
<td>Bachelor of Science</td>
<td>ABC University</td>
<td>2021</td>
</tr>
<tr>
<td>Master of Science</td>
<td>XYZ University</td>
<td>2023</td>
</tr>
</table>
</body>
</html>
(b)
• main.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Home Page</title>
</head>
<body>
<h1>Welcome to Our Website</h1>
<ul>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”services.html”>Our Services</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>
</body>
</html>
• about.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p>Information about the company.</p>
</body>
</html>
• Contact.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<p>Contact information goes here.</p>
</body>
</html>
• services.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Our Services</title>
</head>
<body>
<h1>Our Services</h1>
<p>Details about the services we provide.</p>
</body>
</html>
2.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Login Form</title>
</head>
<body>
<h2>Login</h2>
<form action=”profile.html” method=”POST”>
<label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username” required><br><br>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password” required><br><br>
<input type=”submit” value=”Login”>
</form>
</body>
</html>
3.
(a)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Registration Form</title>
</head>
<body>
<h2>Registration</h2>
<form action=”login.html” method=”POST”>
<label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username” required><br><br>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password” required><br><br>
<input type=”submit” value=”Register”>
</form>
</body>
</html>
(b)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Frames in a Single Row</title>
<style>
/* Basic styling to center the content */
Body {
Display: flex;
Justify-content: center;
Align-items: center;
Height: 100vh;
Margin: 0;
Background-color: #f0f0f0;
/* Container to hold the frames */
.frame-container {
Display: flex;
Position: relative;
/* Frame 1 – Static positioning */
Iframe.frame1 {
Width: 150px;
Height: 100px;
Border: 1px solid black;
/* Frame 2 – Relative positioning */
Iframe.frame2 {
Width: 150px;
Height: 100px;
Border: 1px solid black;
Position: relative;
Top: 20px; /* Adjust positioning */
Margin-left: 10px;
/* Frame 3 – Absolute positioning */
Iframe.frame3 {
Width: 150px;
Height: 100px;
Border: 1px solid black;
Position: absolute;
Top: 0;
Left: 310px; /* Position it far from frame 2 */
</style>
</head>
<body>
<div class=”frame-container”>
<!—Frame 1: Static positioning
<iframe class=”frame1” src=”page1.html” title=”Frame 1”></iframe>
<!—Frame 2: Relative positioning
<iframe class=”frame2” src=”page2.html” title=”Frame 2”></iframe>
<!—Frame 3: Absolute positioning
<iframe class=”frame3” src=”page3.html” title=”Frame 3”></iframe>
</div>
</body>
</html>
4.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Image Map Example</title>
</head>
<body>
<h1>Clickable Image Map</h1>
<img src=”worldmap.webp” alt=”World Map” usemap=”#worldmap”>
<map name=”worldmap”>
<area shape=”rect” coords=”0,0,150,150” alt=”North America”
href=”north_america.html”>
<area shape=”circle” coords=”300,100,50” alt=”Europe” href=”europe.html”>
<area shape=”poly” coords=”450,50,500,100,475,150” alt=”Asia” href=”asia.html”>
<area shape=”rect” coords=”150,200,300,350” alt=”South America”
href=”south_america.html”>
<area shape=”circle” coords=”400,300,75” alt=”Africa” href=”africa.html”>
<area shape=”poly” coords=”550,250,600,300,575,350” alt=”Australia”
href=”australia.html”>
</map>
<p>Click on different areas of the map to learn more about the continents.</p>
</body>
</html>
5.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Text Input Counter</title>
<script>
Function countText() {
Var text = document.getElementById(“userText”).value;
Var lines = text.split(‘\n’).length;
Var chars = text.length;
Alert(“Lines: “ + lines + “\nCharacters: “ + chars);
</script>
</head>
<body>
<h2>Enter Text</h2>
<textarea id=”userText” rows=”4” cols=”50”></textarea><br><br>
<button onclick=”countText()”>Submit</button>
</body>
</html>
6. (a)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Styling Example</title>
<style>
Body {
Font-family: Arial, sans-serif;
Background-color: lightblue;
H1 {
Color: darkblue;
</style>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>Styling with CSS</h1>
<p style=”color: red;”>This is inline style text.</p>
</body>
</html>
(b)
<html>
<head>
<title>A Simple Form with JavaScript Validation</title>
<script type=”text/javascript”>
<!—
Function validate_form ( )
Valid = true;
If ( document.contact_form.contact_name.value == “” )
Alert ( “Please fill in the ‘Your Name’ box.” );
Valid = false;
If ( document.contact_form.contact_name.value != “” )
Alert ( “Succesfull” );
Valid = false;
Return valid;
}//
</script>
</head>
<body bgcolor=”#FFFFFF”>
<form name=”contact_form” method=”post” onSubmit=”return validate_form ( );”>
Please Enter Your Name
<p>Your Name: <input type=”text” name=”contact_name”></p>
<p><input type=”submit” name=”send” value=”Send Details”></p>
</form>
</body>
</html>
7.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Styled Page with CSS</title>
<style>
/* General styles for the page */
Body {
Font-family: ‘Arial’, sans-serif;
Background-image: url(‘background.jpg’);
Background-size: cover;
Color: #ffffff;
Margin: 0;
Padding: 0;
H1 {
Font-family: ‘Georgia’, serif;
Color: #ff6347; /* Tomato color */
Text-align: center;
P{
Font-size: 16px;
Line-height: 1.5;
Text-align: justify;
Margin: 20px;
}
.highlight {
Font-style: italic;
Color: #00ff00; /* Lime color */
.box {
Width: 300px;
Height: 150px;
Background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent box */
Color: white;
Padding: 20px;
Margin: 50px auto;
Border-radius: 10px;
.button {
Background-color: #4CAF50; /* Green */
Color: white;
Padding: 10px 20px;
Border: none;
Border-radius: 5px;
Cursor: pointer;
.button:hover {
Background-color: #45a049;
}
</style>
</head>
<body>
<h1>Welcome to My Stylish Web Page</h1>
<p>This page is styled using CSS. It uses various font styles and background images.</p>
<p class=”highlight”>This text is highlighted using CSS styling.</p>
<div class=”box”>
<h3>This is a styled box with a semi-transparent background.</h3>
<button class=”button”>Click Me</button>
</div>
</body>
</html>
8.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Number to Words Converter</title>
<script>
Function numberToWords() {
Const num = document.getElementById(“numberInput”).value;
Const resultBox = document.getElementById(“result”);
Const numWords = [
“zero”, “one”, “two”, “three”, “four”, “five”, “six”, “seven”, “eight”, “nine”
];
If (isNaN(num)) {
resultBox.value = “Not a number”;
} else if (num < 0 || num > 999) {
resultBox.value = “Out of range”;
} else {
Let words = [];
Const digits = num.split(‘’);
Digits.forEach(digit => {
Words.push(numWords[parseInt(digit)]);
});
resultBox.value = words.join(‘-‘);
</script>
</head>
<body>
<h2>Convert Number to Words</h2>
<label for=”numberInput”>Enter a number (0-999):</label>
<input type=”text” id=”numberInput”>
<button onclick=”numberToWords()”>Convert</button>
<br><br>
<label for=”result”>Result:</label>
<input type=”text” id=”result” readonly>
</body>
</html>
G.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Shopping Cart</title>
<style>
Body {
Font-family: Arial, sans-serif;
.cart-item {
Margin: 10px;
Padding: 10px;
Border: 1px solid #ddd;
Width: 200px;
Display: inline-block;
Text-align: center;
.cart-item img {
Width: 100px;
Height: 100px;
.cart-item button {
Background-color: #4CAF50;
Color: white;
Padding: 10px;
Border: none;
Cursor: pointer;
.cart-item button:hover {
Background-color: #45a049;
#cart {
Margin-top: 20px;
}
</style>
<script>
Let cart = [];
Function addToCart(itemName, itemPrice) {
Cart.push({ name: itemName, price: itemPrice });
displayCart();
Function displayCart() {
Const cartDiv = document.getElementById(“cart”);
cartDiv.innerHTML = “<h3>Your Cart</h3>”;
let total = 0;
cart.forEach(item => {
cartDiv.innerHTML += `<p>${item.name} - $${item.price}</p>`;
total += item.price;
});
cartDiv.innerHTML += `<p>Total: $${total}</p>`;
</script>
</head>
<body>
<h1>Shopping Cart</h1>
<div class=”cart-item”>
<img
src=https://www.zorin.co.in/cdn/shop/products/ZRNOSTSilvo4830Walnut_1.jpg?v=168467
3726Cwidth=5472 alt=”Item 1”>
<h3>Item 1</h3>
<p>900</p>
<button onclick=”addToCart(‘Item 1’, 10)”>Add to Cart</button>
</div>
<div class=”cart-item”>
<img src=https://images.pickawood.com/gfx/conf/tables/new/berlin-et-kernbuche-
natur-geoelt-swiss-legn.jpg alt=”Item 2”>
<h3>Item 2</h3>
<p>800</p>
<button onclick=”addToCart(‘Item 2’, 20)”>Add to Cart</button>
</div>
<div id=”cart”></div>
</body>
</html>
10.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Registration Form</title>
<script>
Function validateForm() {
Const name = document.getElementById(“name”).value;
Const password = document.getElementById(“password”).value;
Const email = document.getElementById(“email”).value;
Const phone = document.getElementById(“phone”).value;
// Name validation
If (!/^[a-zA-Z]{6,}$/.test(name)) {
Alert(“Name should contain only alphabets and be at least 6 characters long.”);
Return false;
// Password validation
If (password.length < 6) {
Alert(“Password should be at least 6 characters long.”);
Return false;
// Email validation
Const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
If (!emailPattern.test(email)) {
Alert(“Invalid email format.”);
Return false;
// Phone number validation
If (!/^\d{10}$/.test(phone)) {
Alert(“Phone number should contain exactly 10 digits.”);
Return false;
}
Alert(“Registration successful!”);
Return true;
</script>
</head>
<body>
<h1>Registration Form</h1>
<form onsubmit=”return validateForm()”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required><br><br>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password” required><br><br>
<label for=”email”>Email:</label>
<input type=”text” id=”email” name=”email” required><br><br>
<label for=”phone”>Phone Number:</label>
<input type=”text” id=”phone” name=”phone” required><br><br>
<input type=”submit” value=”Register”>
</form>
</body>
</html>
11.
import React, { useState } from ‘react’;
Const Counter = () => {
Const [count, setCount] = useState(0); // Initialize state with 0
Const increment = () => setCount(count + 1); // Increase counter by 1
Const decrement = () => setCount(count – 1); // Decrease counter by 1
Return (
<div>
<h1>Current Count: {count}</h1>
<button onClick={increment}>Increase</button>
<button onClick={decrement}>Decrease</button>
</div>
);
};
Export default Counter;
12.
import React, { useState } from 'react';
const NameForm = () => {
const [name, setName] = useState(''); // State to hold the input value
const [submittedName, setSubmittedName] = useState(''); // State to store the submitted
name
const handleSubmit = (event) => {
event.preventDefault(); // Prevent the default form submission
setSubmittedName(name); // Store the entered name after submission
};
return (
<div>
<form onSubmit={handleSubmit}>
<label>
Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)} // Update state with input value
/>
</label>
<button type="submit">Submit</button>
</form>
{submittedName CC <h2>Hello, {submittedName}!</h2>} {/* Display submitted name
*/}
</div>
);
};
export default NameForm;
