Scribd
Upload
25 views

Frontend assignment

Uploaded by

manidevang1001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Frontend assignment

Uploaded by

manidevang1001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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