Exp 1,2
Exp 1,2
Title:- Create html pages for website like login, registration and about us pages.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<center>
<form>
<div class="container">
<label>Username : </label>
<label>Password : </label>
</div>
</form>
</center>
</body>
</html>
Experiments: 02
Title:- Apply and design the created HTML pages using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: pink;
.container {
padding-top: 10px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
background-color: lightblue;
width: 100%;
padding: 15px;
display: inline-block;
border: none;
background: #f1f1f1;
input[type=text]:focus, input[type=password]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
hr {
margin-bottom: 25px;
.registerbtn {
background-color: #4CAF50;
color: white;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
.registerbtn:hover {
opacity: 1;
</style>
</head>
<body>
<form>
<div class="container">
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<label for="email"><b>Email</b></label>
<label for="psw"><b>Password</b></label>
</form>
</body>
</html>
Experiments: 03
Title:- Write a program demonstrating javascript functions and different validations.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
.container {
padding-top: 10px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
background-color: lightblue;
padding: 15px;
display: inline-block;
border: none;
background: #f1f1f1;
input[type=text]:focus, input[type=password]:focus {
background-color: orange;
outline: none;
div {
padding: 10px 0;
hr {
margin-bottom: 25px;
.registerbtn {
background-color: #4CAF50;
color: white;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
.registerbtn:hover {
opacity: 1;
.error {
color: red;
</style>
</head>
<body>
<div class="container">
<hr>
<label>
<b>Course</b>
</label>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
<label>
<b>Gender</b>
</label>
<label for="password"><b>Password</b></label>
</form>
<script>
function validateForm() {
errorElement.textContent = "";
isValid = false; }
if (!last_name.match(nameRegex)) {
isValid = false; }
isValid = false; }
isValid = false; }
if (!email.match(emailRegex)) {
isValid = false; }
if (!password.match(passwordRegex)) {
isValid = false; }
if (isValid) {
alert("Registration successful!"); }
return isValid; }
</script>
</body>
</html>
Experiments: 04
Title:- Write a program to read and write HTML contents with JQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="content">
<h1>Welcome to DYPCET</h1>
</div>
<script>
$(document).ready(function() {
$("#readButton").click(function() {
});
$("#writeButton").click(function() {
var newContent = "<h2>New Content</h2><p>This is the updated content:-We are students of BTech
CSE(AIML).</p>";
// Set the HTML content of the element with id "content" to the new content
$("#content").html(newContent);
});
});
</script>
</body>
</html>
Experiments: 05
Title:- Create a simple Testing Angular application.
Angular is a platform and framework for building single-page client applications using
HTML and TypeScript. Angular is written in TypeScript. It implements core and
optional functionality as a set of TypeScript libraries that you import into your
applications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<form>
<div class="mb-3">
</div>
<div class="mb-3">
</div>
<div class="mb-3">
</div>
<div class="mb-3">
</div>
<div class="mb-3">
<label for="department" class="form-label">Department</label>
<option value="Finance">Finance</option>
<option value="Sales">Sales</option>
</select>
</div>
</div>
</form>
</div>
</body>
</html>
Experiments: 06
Title:- Write a program demonstrating NodeJs application.
Node.js (Node) is an open source, cross-platform runtime environment for executing JavaScript code. Node
is used extensively for server-side programming, making it possible for developers to use JavaScript
for client-side and server-side code without needing to learn an additional language. Node is sometimes
referred to as a programming language or software development framework, but neither is true; it is strictly a
JavaScript runtime.
A Node.js app runs in a single process, without creating a new thread for every request. Node.js provides a
set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and
generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the
exception rather than the norm.
When Node.js performs an I/O operation, like reading from the network, accessing a database or the
filesystem, instead of blocking the thread and wasting CPU cycles waiting, Node.js will resume the
operations when the response comes back.
This allows Node.js to handle thousands of concurrent connections with a single server without introducing
the burden of managing thread concurrency, which could be a significant source of bugs.
Node.js has a unique advantage because millions of frontend developers that write JavaScript for the
browser are now able to write the server-side code in addition to the client-side code without the need to
learn a completely different language.
Frontend code:
<!DOCTYPE html>
<html>
<head>
<title>My Home Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
h1 {
font-size: 36px;
margin: 0;
}
nav {
background-color: #444;
color: #fff;
text-align: center;
padding: 10px 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
margin-right: 20px;
}
main {
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Home Page</h1>
</header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>About Us</h2>
<p>Simple Homepage using Flask</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>App Development</li>
<li>SEO</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</section> </main>
</body>
</html>
Output: