IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
EXPERIMENT - 7
OBJECTIVE :- Implement basic layout techniques (floats, positioning, flexbox) to
structure your webpage.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Layout Techniques</title>
<style>
/* Internal CSS */
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px 0;
}
/* Floats for Navigation */
.float-nav {
background-color: #333;
overflow: hidden;
}
.float-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.float-nav ul li {
float: left;
width: 25%;
}
.float-nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
.float-nav ul li {
background-color: #111;
}
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
/* Flexbox for Main Content */
.flex-container {
display: flex;
justify-content: space-between;
padding: 20px;
}
.content {
flex: 2;
background-color: #f4f4f4;
padding: 20px;
margin-right: 10px;
}
.sidebar {
flex: 1;
background-color: #e0e0e0;
padding: 20px;
}
/* Positioning for Footer */
.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<!-- Header Section -->
<header style="background-color: #4CAF50; color: white; text-align: center; padding: 20px 0;">
<h1>Basic Layout Techniques</h1>
</header>
<!-- Navigation using Floats with Internal and Inline CSS -->
<nav class="float-nav" style="background-color: #444; overflow: hidden;">
<ul style="padding: 0;">
<li style="float: left; width: 25%;"><a href="#" style="color: white; display: block; padding: 14px; text-
align: center;">Home</a></li>
<li style="float: left; width: 25%;"><a href="#" style="color: white; display: block; padding: 14px; text-
align: center;">About</a></li>
<li style="float: left; width: 25%;"><a href="#" style="color: white; display: block; padding: 14px; text-
align: center;">Services</a></li>
<li style="float: left; width: 25%;"><a href="#" style="color: white; display: block; padding: 14px; text-
align: center;">Contact</a></li>
</ul>
</nav>
<!-- Main Content Section with Flexbox and Inline Styles -->
<main class="flex-container">
<section class="content" style="background-color: #f9f9f9; padding: 25px;">
<h2 style="color: #333;">Welcome to the my world</h2>
<p style="color: #555;">This section my world .</p>
</section>
<aside class="sidebar" style="background-color: #d0d0d0; padding: 25px;">
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
<h3 style="color: #333;">content here</h3>
<p style="color: #555;">This is content box.</p>
</aside>
</main>
<!-- Footer with Absolute Positioning and Inline Styles -->
<footer class="footer" style="background-color: #555; padding: 15px 0;">
<p style="color: white;">Created by Jatin Garg</p>
</footer>
</body>
</html>
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
OUTPUT:
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
EXPERIMENT - 8
OBJECTIVE :- Create a simple "Hello, World!" script and Use JavaScript to manipulate
HTML elements (change text, styles, attributes)..
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Element Manipulation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
background-color: #f0f8ff;
}
#hello-text {
font-size: 24px;
color: #0000ff;
transition: all 0.5s ease;
}
.styled {
color: #ff0000;
background-color: #ffff00;
padding: 10px;
border-radius: 10px;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
</style>
</head>
<body>
<h1 id="hello-text">Hello, world this is me jatin </h1>
<button onclick="changeText()">Change Text</button>
<button onclick="changeStyle()">Change Style</button>
<button onclick="changeAttribute()">Change Attribute</button>
<script>
function changeText() {
[Link]("hello-text").innerHTML = "Here this is my world!";
}
function changeStyle() {
const helloText = [Link]("hello-text");
[Link]('styled');
}
function changeAttribute() {
const helloText = [Link]("hello-text");
[Link]("title", "You changed the attribute!");
}
</script>
</body>
</html>
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
OUTPUT-
Manipulated output-
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
EXPERIMENT - 9
OBJECTIVE :- Create interactive elements like buttons with event listeners.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Elements Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
background-color: #f7f7f7;
}
h1 {
color: black; /* Set title color to black */
}
#message {
font-size: 24px;
color: #333;
margin: 20px;
transition: all 0.3s ease;
}
.styled {
background-color: #ffeb3b;
color: #ff5722;
padding: 15px;
border-radius: 10px;
}
.hidden {
display: none;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Interactive Elements Example</h1>
<p id="message">Hello, this is ips acadmy world!</p>
<button id="changeTextButton">Change Text</button>
<button id="changeStyleButton">Change Style</button>
<button id="toggleVisibilityButton">Toggle Visibility</button>
<button id="increaseFontSizeButton">Increase Font Size</button>
<script>
const messageElement = [Link]('message');
[Link]('changeTextButton').addEventListener('click', function() {
[Link] = 'Here this is my world!';
});
[Link]('changeStyleButton').addEventListener('click', function() {
[Link]('styled');
});
[Link]('toggleVisibilityButton').addEventListener('click', function() {
[Link]('hidden');
});
[Link]('increaseFontSizeButton').addEventListener('click', function() {
const currentFontSize = parseInt([Link](messageElement).fontSize);
[Link] = (currentFontSize + 2) + 'px';
});
</script>
</body>
</html>
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
OUTPUT
WITH CHANGE STYLE-
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
WITH TOGGLE VISIBILITY-
WITH INCREASED FONT SIZE-
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
EXPERIMENT - 10
OBJECTIVE :- Implement basic form validation using JavaScript.
Solutiuon:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Form Validation Example</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e9ecef;
color: #343a40;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #007bff;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ced4da;
border-radius: 5px;
transition: border-color 0.3s;
}
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
.form-group input:focus,
.form-group textarea:focus {
border-color: #007bff;
outline: none;
}
.form-group .error {
color: #d9534f;
font-size: 0.9em;
margin-top: 5px;
}
.btn-submit {
width: 100%;
padding: 10px;
font-size: 1em;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}
.btn-submit:hover {
background-color: #0056b3;
}
@media (max-width: 480px) {
form {
padding: 20px;
}
}
</style>
</head>
<body>
<form id="contactForm">
<h1>Contact Us (ips academy)</h1>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<div class="error" id="nameError"></div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<div class="error" id="emailError"></div>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="120" required>
<div class="error" id="ageError"></div>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
<div class="error" id="messageError"></div>
</div>
<button type="submit" class="btn-submit">Submit</button>
</form>
<script>
[Link]('contactForm').addEventListener('submit', function(event) {
[Link](); // Prevent form submission
// Clear previous errors
let errors = [Link]('.error');
[Link](error => [Link] = '');
// Get form values
const name = [Link]('name').[Link]();
const email = [Link]('email').[Link]();
const age = [Link]('age').[Link]();
const message = [Link]('message').[Link]();
let isValid = true;
// Validate name
if (name === '') {
[Link]('nameError').textContent = 'Name is required.';
isValid = false;
}
// Validate email
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === '' || ) {
[Link]('emailError').textContent = 'Enter a valid email address.';
isValid = false;
}
// Validate age
if (age === '' || age < 1 || age > 120) {
[Link]('ageError').textContent = 'Enter a valid age between 1 and 120.';
isValid = false;
}
// Validate message
if (message === '') {
[Link]('messageError').textContent = 'Message is required.';
isValid = false;
}
// If valid, submit form
if (isValid) {
alert('Form submitted successfully!');
// Optionally, you could submit the form data via AJAX or perform other actions
}
});
</script>
</body>
</html>
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
IPS ACADEMY, INSTITUTE OF ENGINEERING AND SCIENCE- INDORE
OUTPUT
5th SEM BASIC WEB DEVELOPMENT(SBC—C103(P)) 2024-25
