Scribd
Upload
17 views

Frontend assignment

Uploaded by

manidevang1001
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Frontend assignment

Uploaded by

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

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;

You might also like