HTML File 2.0

NAME: SHIVAM GORLA COURSE: BCA-G1 SEMESTER-4th
ROLLNO: 2221964(67) STUDENT ID-220111410
10: Demonstrate the use of different style sheet.

a) Inline
b) Embedded
c) External
CODE:
a) Inline
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px;">This is an Inline CSS Example</h1>
<p style="color: red; font-size: 18px;">This paragraph is styled using inline CSS.</p>
</body>
</html>
b) Embedded
<!DOCTYPE html>
<html>
<head>
<title>Embedded CSS Example</title>
<style>
h1 {
color: green;
font-size: 24px;
}
p{
color: purple;
font-size: 18px;
}
</style>
</head>
<body>
<h1>This is an Embedded CSS Example</h1>
<p>This paragraph is styled using embedded CSS.</p>
</body>
</html>
c) External
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is an External CSS Example</h1>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>
CSS file:
h1 {
color: orange;
font-size: 24px;
}
p{
color: brown;
font-size: 18px;
}
11: Write a html code to design a web page to implement facebook.com login
page using html and css?
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Facebook Login</title>
<style>
/* Add a wrapper element to center the login container */
.wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 300px;
transition: box-shadow 0.3s; /* Add a transition effect */
}
.login-container h2 {
color: #1877f2;
}
.login-container input[type="text"],
.login-container input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
.login-container input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #1877f2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="login-container">
<h2><img src="facebook-logo.png" alt="Facebook Logo"></h2>
<form>
<label for="email">Email or Phone</label>
<input type="text" id="email" placeholder="Email or Phone" required
autocomplete="email">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Password" required
autocomplete="current-password">
<input type="submit" id="login-btn" value="Log In">

</form>
</div>
</div>
</body>
</html>
12: Write an HTML code to divide the page into two columns using div tag
with proper margin and border properties. One should display the login page
and other should display text and image?
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Two Column Layout</title>
<style>
body {
display: flex;
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, sans-serif;
}
.column {
width: 50%;
padding: 20px;
box-sizing: border-box;
}
.column:nth-child(1) {
border-right: 2px solid #ccc;
}
.login {
max-width: 300px;
margin: auto;
}
.login input[type="text"],
.login input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
.login input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #1877f2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="column">
<div class="login">
<h2>Login</h2>
<form>
<input type="text" placeholder="Email or Phone" required>
<input type="password" placeholder="Password" required>
<input type="submit" value="Log In">
</form>
</div>
</div>
<div class="column">
<h2>Welcome</h2>
<p>This is a sample text.</p>
<img src="https://example.com/sample-image.jpg" alt="Sample Image"
style="width:100%;">
</div>
</body>
</html>
13: Write the javascript code to reverse the foreground and background color.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reverse Colors</title>
<style>
body {
background-color: white;
color: black;
text-align: center;
padding: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<script>
function reverseColors(element) {
const currentBgColor = element.style.backgroundColor;
const currentColor = element.style.color;
if (currentBgColor && currentColor) {

element.style.backgroundColor = currentColor;
element.style.color = currentBgColor;
} else {
console.log('Error: backgroundColor or color not set.');

}
}
</script>
</head>
<body>
<h1>Reverse Colors Example</h1>
<button onclick="reverseColors(document.body)">Reverse Colors</button>
</body>
</html>
14: Write the javascript code for showing the use of all the three dialog
boxes(alert, confirm, prompt)
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dialog Boxes</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>JavaScript Dialog Boxes</h1>
<button id="show-alert">Show Alert</button>
<button id="show-confirm">Show Confirm</button>
<button id="show-prompt">Show Prompt</button>
<script>
const showAlertButton = document.getElementById('show-alert');
const showConfirmButton = document.getElementById('show-confirm');
const showPromptButton = document.getElementById('show-prompt');
function showDialog(message, type) {

if (type === 'alert') {

alert(message);
} else if (type === 'confirm') {
const result = confirm(message);
alert(result ? 'You pressed OK!' : 'You pressed Cancel!');
} else if (type === 'prompt') {
const name = prompt(message);
alert(name ? `Hello, ${name}!` : 'You didn\'t enter anything.');
} else {
console.log('Error: Invalid dialog type.');
}
}
showAlertButton.addEventListener('click', () => {
showDialog('This is an alert box!', 'alert');
});
showConfirmButton.addEventListener('click', () => {
showDialog('Do you confirm this?', 'confirm');
});
showPromptButton.addEventListener('click', () => {
showDialog('What is your name?', 'prompt');
});
</script>
</body>
</html>
15: Write a JavaScript to validate inputs to a form consists of four different

functions:
a) Email validation will check to see if a value lives up to the general syntax of
an email
b) Digit validation will check to see if a value consists of a certain number of
digits.
c) Empty validation will check to see if a field is empty or not
d) Username validation will check to see if a value consists of a certain number,
a capital letter, a small letter and length should be greater than 8 characters
A proper alert box should be displayed if the user doesn’t enter the values in the
above format
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation</title>
<style>
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<form id="my-form">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<div class="error" id="email-error"></div>
<label for="digits">Enter 4 digits:</label>

<input type="text" id="digits" name="digits">

<div class="error" id="digits-error"></div>
<label for="username">Enter a username:</label>

<input type="text" id="username" name="username">
<div class="error" id="username-error"></div>
<label for="password">Enter a password:</label>

<input type="password" id="password" name="password">
<div class="error" id="password-error"></div>
<button type="submit">Submit</button>
</form>
<script>
const emailInput = document.getElementById('email');
const emailError = document.getElementById('email-error');
const digitsInput = document.getElementById('digits');

const digitsError = document.getElementById('digits-error');
const usernameInput = document.getElementById('username');

const usernameError = document.getElementById('username-error');
const passwordInput = document.getElementById('password');

const passwordError = document.getElementById('password-error');
function isValidEmail(email) {
const regex = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
return regex.test(email);
}
function isValidDigits(digits) {
return digits.length === 4 && /^\d+$/.test(digits);
}
function isValidUsername(username) {
const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
return regex.test(username);
}
function validateForm(event) {
event.preventDefault();
let isFormValid = true;
if (!isValidEmail(emailInput.value)) {
emailError.textContent = 'Please enter a valid email address.';
isFormValid = false;
} else {
emailError.textContent = '';
}
if (!isValidDigits(digitsInput.value)) {
digitsError.textContent = 'Please enter exactly 4 digits.';
} else {
digitsError.textContent = '';
if (!isValidUsername(usernameInput.value)) {
usernameError.textContent = 'Please enter a valid username.';
} else {
usernameError.textContent = '';
}
if (passwordInput.value.length < 8) {
passwordError.textContent = 'Please enter a password with at least 8 characters.';
} else {
passwordError.textContent = '';
}
if (isFormValid) {
alert('Form submitted successfully!');
}
}
const form = document.getElementById('my-form');

form.addEventListener('submit', validateForm);
</script>
</body>
</html>
16: Write a php script to validate a student registration form using appropriate
validations as
i) Name field must not be kept empty
ii) Email id should contain @sign
iii) Age field must be greater than 18 years
iv) Check boxes, Radio Buttons must be checked
v) Password filed must contain atleast one capital letter with minimum length 8
and maximum 12
CODE:
<?php
// Function to check if a name field is empty

function isNameValid($name) {
if (empty($name)) {
return false;
}
return true;
}
// Function to check if an email contains an @ sign

function isEmailValid($email) {
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
return false;
}
return true;
}
// Function to check if an age is greater than 18 years

function isAgeValid($age) {
if ($age < 18) {
return false;
}
return true;
}
// Function to check if checkboxes or radio buttons are checked

function areOptionsSelected($options) {
if (empty($options)) {
return false;
}
return true;
}
// Function to check if a password contains at least one capital letter and has a minimum
length of 8 and maximum length of 12
function isPasswordValid($password) {
if (!preg_match("/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,12}$/", $password)) {
return false;
}
return true;
}
// Check if form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$age = $_POST["age"];
$options = $_POST["options"];
$password = $_POST["password"];
// Validate name field

if (!isNameValid($name)) {
echo "Name field must not be empty.<br>";
}
// Validate email field

if (!isEmailValid($email)) {
echo "Email id should contain @ sign.<br>";
}
// Validate age field

if (!isAgeValid($age)) {
echo "Age field must be greater than 18 years.<br>";
}
// Validate options
if (!areOptionsSelected($options)) {
echo "Check boxes or Radio Buttons must be checked.<br>";
}
// Validate password field

if (!isPasswordValid($password)) {
echo "Password field must contain at least one capital letter with minimum length 8 and
maximum 12.<br>";
}
// If all fields are valid, display success message

if (isNameValid($name) && isEmailValid($email) && isAgeValid($age) &&
areOptionsSelected($options) && isPasswordValid($password)) {
echo "Registration successful!"; }}?>

HTML File 2.0

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML File 2.0

Uploaded by

Copyright:

Available Formats

NAME: SHIVAM GORLA COURSE: BCA-G1 SEMESTER-4th

ROLLNO: 2221964(67) STUDENT ID-220111410

10: Demonstrate the use of different style sheet.

<input type="submit" id="login-btn" value="Log In">

if (currentBgColor && currentColor) {

console.log('Error: backgroundColor or color not set.');

function showDialog(message, type) {

if (type === 'alert') {

15: Write a JavaScript to validate inputs to a form consists of four different

<label for="digits">Enter 4 digits:</label>

<input type="text" id="digits" name="digits">

<label for="username">Enter a username:</label>

<label for="password">Enter a password:</label>

const digitsInput = document.getElementById('digits');

const usernameInput = document.getElementById('username');

const passwordInput = document.getElementById('password');

let isFormValid = true;

const form = document.getElementById('my-form');

// Function to check if a name field is empty

// Function to check if an email contains an @ sign

// Function to check if an age is greater than 18 years

// Function to check if checkboxes or radio buttons are checked

// Check if form is submitted

// Validate name field

// Validate email field

// Validate age field

// Validate password field

// If all fields are valid, display success message

You might also like