Scribd
Upload
14 views20 pages

Practical Awp 06

Uploaded by

Archi Jariwala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views20 pages

Practical Awp 06

Uploaded by

Archi Jariwala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Dhruvi Mistry IT-1-A 210410116006

Practical 1
Aim: Design following page with the help of CSS.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practical 1</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
padding: 10px;
background-color: #f8f9fa;
}

.grid-item {
background-color: rgb(250, 247, 236);
padding: 10px;
font-size: 14px;
line-height: 1.5;
}
.grid-items {
background-color: #fff;
padding: 10px;
font-size: 14px;
line-height: 1.5;
}

@media (max-width: 767px) {

1
Dhruvi Mistry IT-1-A 210410116006
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">
<h1>HTML</h1>
<p>HTML (Hypertext Markup Language) is the standard markup language used to create and structure
web pages. It consists of elements that define the structure and content of a webpage, such as headings,
paragraphs, images, links, forms, and more. HTML is essential for building the foundational structure of a web
document, including its layout, text, and multimedia elements.</p>
</div>
<div class="grid-items">
<h1>CSS</h1>
<p>CSS (Cascading Style Sheets) is a style sheet language used to control the presentation and appearance
of HTML elements on a webpage. It allows developers to define styles such as colors, fonts, spacing, layout, and
responsiveness, making it possible to create visually appealing and user-friendly web designs. CSS works by
selecting HTML elements and applying styles to them using selectors, properties, and values.</p>
</div>
<div class="grid-item">
<h1>JavaScript</h1>
<p>JavaScript is a high-level programming language that adds interactivity and dynamic behavior to web
pages. It is commonly used for client-side scripting, enabling developers to create interactive elements like sliders,
dropdown menus, form validation, and animations. JavaScript can manipulate the HTML content, handle user
events, perform calculations, make AJAX requests, and interact with the browser's Document Object Model (DOM)
to update webpage content dynamically.</p>
</div>
<div class="grid-items">
<h1>AJAX</h1>
<p>AJAX (Asynchronous JavaScript and XML) is a technique used to make asynchronous HTTP requests
from a web page to a server, allowing data to be exchanged without refreshing the entire page. AJAX enables
developers to create more responsive and interactive web applications by fetching data from the server in the
background and updating specific parts of the page dynamically. It is often used in conjunction with JavaScript and
XML or JSON to handle data asynchronously.</p>
</div>
<div class="grid-item">
<h1>AngularJS</h1>
<p>AngularJS is a JavaScript framework developed by Google for building dynamic single-page web
applications (SPAs). It provides a structured framework for front-end development, offering features like data
binding, dependency injection, routing, templates, and reusable components. AngularJS simplifies the development
process by abstracting complex tasks and providing tools to create responsive and maintainable web
applications.</p>
</div>
<div class="grid-items">
<h1>Node.js</h1>
<p>Node.js is a server-side JavaScript runtime environment built on the Chrome V8 JavaScript engine. It
allows developers to run JavaScript code on the server, enabling the development of scalable and high-performance
web applications. Node.js is commonly used for building server-side APIs, real-time web applications,

2
Dhruvi Mistry IT-1-A 210410116006
microservices, and backend services. It offers a rich ecosystem of libraries and modules through npm (Node.js
Package Manager) for extending its functionality and building robust web servers.r</p>
</div>
</div>
</body>
</html>

Output:

dhruvi

3
Dhruvi Mistry IT-1-A 210410116006

Practical 2
Aim: Design a page using media query, when page width reduced it will change background and text color
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
color: black;
}
@media (max-width: 800px) {
body {
background-color: lightgreen;
color: white;
}
}
</style>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>The page will change colours when you decrease its size.</p>
</body>
</html>

Output:

4
Dhruvi Mistry IT-1-A 210410116006

Practical 3
Aim: Design a page with list in CSS to design vertical bar when user clicks on link it should display related content
on right side of page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Bar Navigation</title>
<link rel="stylesheet" href="design3.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="content">
<div id="home" class="tabcontent active">
<h2>Home Page</h2>
<p>Welcome to our website!</p>
</div>
<div id="about" class="tabcontent">
<h2>About Us</h2>
<p>Learn more about our company.</p>
</div>
<div id="services" class="tabcontent">
<h2>Services</h2>
<p>Explore our range of services.</p>
</div>
<div id="contact" class="tabcontent">
<h2>Contact</h2>
<p>Get in touch with us.</p>
</div>
</div>
</div>
<script src="script3.js"></script>
</body>
</html>

script3.js:
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.tabcontent');

5
Dhruvi Mistry IT-1-A 210410116006
tabs.forEach(tab => {
tab.style.display = 'none';
});

const links = document.querySelectorAll('.sidebar a');

links.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const target = this.getAttribute('href').substring(1);
tabs.forEach(tab => {
tab.style.display = 'none';
tab.classList.remove('active');
});
document.getElementById(target).style.display = 'block';
document.getElementById(target).classList.add('active');

// Remove active class from all links


links.forEach(link => {
link.classList.remove('active');
});
// Add active class to the clicked link
this.classList.add('active');
});
});

document.querySelector('.tabcontent').style.display = 'block';
document.querySelector('.tabcontent').classList.add('active');
});

design3.css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
background-color: #333;
color: #fff;
width: 200px;
}
ul {
list-style-type: none;
padding: 0;
}
li a {

6
Dhruvi Mistry IT-1-A 210410116006
display: block;
padding: 10px;
text-decoration: none;
color: #fff;
}
li a:hover {
background-color: #555;
}
.content {
flex-grow: 1;
padding: 20px;
}
.tabcontent {
display: none;
}
.tabcontent.active {
display: block;
}
.sidebar a.active {
background-color: #555;
font-weight: bold;
}

Output:

7
Dhruvi Mistry IT-1-A 210410116006

Practical 4
Aim: Write a program with JavaScript to reverse a string.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String Reversal</title>
</head>
<body>
<h1>String Reversal</h1>
<label for="inputString">Enter a string:</label>
<input type="text" id="inputString">
<button onclick="reverseAndDisplay()">Reverse</button>
<p id="reversedString"></p>
<script>
function reverseString(str) {
return str.split('').reverse().join('');
}
function reverseAndDisplay() {
const inputString = document.getElementById('inputString').value;
const reversedString = reverseString(inputString);
document.getElementById('reversedString').innerText = 'Reversed string: ' + reversedString;
}
</script>
</body>
</html>

Output:

8
Dhruvi Mistry IT-1-A 210410116006

Practical 5
Aim: Write a program with JavaScript which add rows to the table while click on the button.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Rows to Table</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
th {
background-color: #333;
color: #fff;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.button-container {
text-align: center;
}
.add-button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
}
.add-button:hover {
background-color: #45a049;
}
</style>
</head>

9
Dhruvi Mistry IT-1-A 210410116006
<body>

<h1>Add Rows to Table</h1>


<table id="dataTable">
<tr>
<th>Sr. No.</th>
<th>Name</th>
</tr>
</table>

<div class="button-container">
<button class="add-button" onclick="addRow()">Add Row</button>
</div>

<script>
const fruits = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango'];
let serialNumber = 1;

function addRow() {
const table = document.getElementById('dataTable');
const newRow = table.insertRow(-1); // Insert row at the end of the table
const cell1 = newRow.insertCell(0);
const cell2 = newRow.insertCell(1);
cell1.textContent = serialNumber++;
cell2.textContent = fruits[Math.floor(Math.random() * fruits.length)];

const rowCount = table.rows.length;


if (rowCount % 2 === 0) {
newRow.style.backgroundColor = '#f2f2f2';
} else {
newRow.style.backgroundColor = '#fff';
}
}
</script>

</body>
</html>

Output:

10
Dhruvi Mistry IT-1-A 210410116006

Practical 6
Aim: Write a JavaScript program to remove items from a dropdown list.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Items from Dropdown</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f8f9fa;
}
</style>
</head>
<body>
<h1>Remove Items from Dropdown</h1>
<select id="dropdown">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
<option value="item4">Item 4</option>
<option value="item5">Item 5</option>
</select>
<button onclick="removeSelected()">Remove Selected Item</button>
<script>
function removeSelected() {
const dropdown = document.getElementById('dropdown');
const selectedIndex = dropdown.selectedIndex;
if (selectedIndex !== -1) {
dropdown.options[selectedIndex].remove();
console.log('Selected item removed.');
} else {
console.log('No item selected.');
}
}
</script>

</body>
</html>

Output:

11
Dhruvi Mistry IT-1-A 210410116006

12
Dhruvi Mistry IT-1-A 210410116006

Practical 7
Aim: Design a sign up (registration) page using bootstrap. Use maximum bootstrap classes while designing a page.
At least take 9-10 fields in registration page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Page</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center mb-4">Sign Up</h1>
<form>
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Enter your first name" required>
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Enter your last name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email address" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter your password"
required>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword" placeholder="Confirm your
password" required>

13
Dhruvi Mistry IT-1-A 210410116006
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number</label>
<input type="tel" class="form-control" id="phoneNumber" placeholder="Enter your phone number"
required>
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" id="address" placeholder="Enter your address" rows="3"
required></textarea>
</div>
<div class="form-group">
<label for="birthdate">Date of Birth</label>
<input type="date" class="form-control" id="birthdate" required>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select class="form-control" id="gender" required>
<option value="">Select your gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="termsCheck" required>
<label class="form-check-label" for="termsCheck">I agree to the <a href="#">terms and
conditions</a></label>
</div>
<button type="submit" class="btn btn-primary btn-block">Sign Up</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Output:

14
Dhruvi Mistry IT-1-A 210410116006

15
Dhruvi Mistry IT-1-A 210410116006

Practical 8
Aim: Create a HTML form that will accept Enrollment No., Name, Semester, Branch, Mobile Number, Email,
Address etc. from the student and display them on the page using Angular JS Directives and Expressions.
Code:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information Form</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="myCtrl">
<div class="row">
<div class="col-md-6">
<h1 class="mt-4 mb-4">Student Information Form</h1>
<form ng-submit="submitForm()">
<div class="form-group">
<label for="enrollmentNo">Enrollment No:</label>
<input type="text" class="form-control" id="enrollmentNo" ng-model="student.enrollmentNo"
required>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" ng-model="student.name" required>
</div>
<div class="form-group">
<label for="semester">Semester:</label>
<input type="text" class="form-control" id="semester" ng-model="student.semester" required>
</div>
<div class="form-group">
<label for="branch">Branch:</label>
<input type="text" class="form-control" id="branch" ng-model="student.branch" required>
</div>
<div class="form-group">
<label for="mobile">Mobile Number:</label>
<input type="tel" class="form-control" id="mobile" ng-model="student.mobile" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" ng-model="student.email" required>
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea class="form-control" id="address" ng-model="student.address" rows="3"
required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>

16
Dhruvi Mistry IT-1-A 210410116006
</form>
</div>
<div class="col-md-6">
<h2 class="mt-4">Student Information</h2>
<div ng-show="submitted">
<p><strong>Enrollment No:</strong> {{ student.enrollmentNo }}</p>
<p><strong>Name:</strong> {{ student.name }}</p>
<p><strong>Semester:</strong> {{ student.semester }}</p>
<p><strong>Branch:</strong> {{ student.branch }}</p>
<p><strong>Mobile Number:</strong> {{ student.mobile }}</p>
<p><strong>Email:</strong> {{ student.email }}</p>
<p><strong>Address:</strong> {{ student.address }}</p>
</div>
</div>
</div>
</div>

<script>
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.student = {};
$scope.submitted = false;

$scope.submitForm = function() {
$scope.submitted = true;
};
});
</script>

</body>
</html>

Output:

17
Dhruvi Mistry IT-1-A 210410116006

Practical 9
Aim: Design a webpage which takes one number as an input and generate its factorial number (use module,
controller)
Code:
<!DOCTYPE html>
<html lang="en" ng-app="factorialApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Factorial Calculator</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
.form-group {
margin-bottom: 20px;
}
.btn-primary {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-primary:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
}
.error {
color: red;
font-weight: bold;
}
</style>
</head>
<body>

<div class="container" ng-controller="FactorialController as factorialCtrl">


18
Dhruvi Mistry IT-1-A 210410116006
<h1>Factorial Calculator</h1>
<div class="form-group">
<label for="numberInput">Enter a number:</label>
<input type="number" id="numberInput" class="form-control" ng-model="factorialCtrl.number"
required>
</div>
<button class="btn btn-primary" ng-click="factorialCtrl.calculateFactorial()">Calculate Factorial</button>
<div ng-if="factorialCtrl.result !== null" class="result">
<p ng-if="!factorialCtrl.error">Factorial of {{ factorialCtrl.number }} is: {{ factorialCtrl.result }}</p>
<p ng-if="factorialCtrl.error" class="error">Error: Factorial is not defined for negative numbers.</p>
</div>
</div>

<script src="script9.js"></script>
</body>
</html>

Output:

19
Dhruvi Mistry IT-1-A 210410116006

Practical 10
Aim: Design a page with username and email and validate (login facility) form using angularJS.
Code:
<>
Output:

20

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy