Chandrasekhar 21011102107 WT-LAB

Ex.
No: 1
Personal CV
24.07.2023
Aim:
Create your CV using HTML.
Program:
<!DOCTYPE html>
<html>
<head>
<title>CV</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 30px;
}
h2 {
margin-top: 20px;
}
.section {
margin-top: 10px;
}
.section h3 {
margin-bottom: 5px;
}
.section p {
margin: 0;
}
.education,
.experience {
margin-top: 15px;
}
.education h4,
.experience h4 {
margin: 0;
}
.education p,
.experience p {
margin-bottom: 5px;
}
.profile-image {
display: block;
margin: 0 auto;
width: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Chandra Sekhar</h1>
<img class="profile-image" src="C:\Users\Chandu\OneDrive\Desktop\WhatsApp

Image 2023-07-
18 at 18.38.53.jpg" alt="Profile Image">
<div class="section">
<h2>Personal Information</h2>
<p>Email: chandrasekhar21110411@snuchennai.edu.in</p>
<p>Phone: 6303414988</p>
</div>
<h2>Education</h2>
<div class="education">
<h4>B.Tech-Cse(IOT)</h4>
<p>Shivnadar University Chennai,2021-2025</p>
</div>
</div>
<h2>Experience</h2>
<div class="experience">
<h4>Intern</h4>
<p>Amazon web services</p>
<ul>
<li>Managed and executed projects</li>
<li>Communicated with clients</li>
<li>Trained and mentored new team members</li>
</ul>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>CV</title>
<style>
body {
}
h1 {
text-align: center;
margin-top: 30px;
}
h2 {
margin-top: 20px;
}
.section {
margin-top: 10px;
}
.section h3 {
margin-bottom: 5px;
}
.section p {
margin: 0;
}
.education,
.experience {
margin-top: 15px;
}
.education h4,
.experience h4 {
margin: 0;
}
.education p,
.experience p {
margin-bottom: 5px;
}
.profile-image {
display: block;
margin: 0 auto;
width: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<img class="profile-image" src="C:\Users\Chandu\OneDrive\Desktop\WhatsApp

Image 2023-07-
<h2>Personal Information</h2>
<p>Email: chandrasekhar21110411@snuchennai.edu.in</p>
<p>Phone: 6303414988</p>
</div>
<h2>Education</h2>
<div class="education">
<h4>B.Tech-Cse(IOT)</h4>
<p>Shivnadar University Chennai,2021-2025</p>
</div>
</div>
<h2>Experience</h2>
<div class="experience">
<h4>Intern</h4>
<ul>
<li>Managed and executed projects</li>
<li>Communicated with clients</li>
<li>Trained and mentored new team members</li>
</ul>
</div>
</div>
</body>
</html>
Output:
Github Link:
https://github.com/chandu-19/WT_lab/blob/main/Lab-1
Result:
Therefore, we've successfully created personal CV using HTML.
Ex. No: 2 CSS enabled CV
24.07.2023
Aim:
Creating Personal CV using CSS and HTML
Program:
HTML CODE:-
<!DOCTYPE html>
<html>
<head>
<title> CV</title>
<link rel="stylesheet" type="text/css" href="cv.css">
</head>
<body>
<div class="container">
<div class="header">
<img class="profile-image" src="C:\Users\Chandu\OneDrive\Desktop\WhatsApp Image
2023-07-
<p> Email: chandrasekhar21110411@snuchennai.edu.in| Phone: 6303414988</p>
</div>
<h2>Education</h2>
<div class="item">
<h3>B.Tech-CSE(IOT)</h3>
<p>Shivnadar University,Chennai 2021-2025</p>
</div>
</div>
<h2>Experience</h2>
<div class="item">
<h3>Intern</h3>
<ul>
<li>Managed and executed projects, ensuring timely delivery and adherence to quality
standards.</li>
<li>Collaborated with cross-functional teams to develop and implement innovative
solutions.</li>
<li>Analyzed data and generated reports to provide insights and recommendations for
process
improvements.</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS CODE:-
body {
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.container {
max-width: 800px;
margin: 30px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 20px;
}
h1 {
margin: 0;
color: #333;
}
p{
color: #666;
margin: 5px 0;
}
.section {
margin-top: 30px;
padding: 20px;
border-radius: 5px;
}
h2 {
border-bottom: 2px solid #333;
padding-bottom: 5px;
color: #333;
margin-top: 0;
}
.item {
margin-top: 20px;
}
h3 {
margin: 0;
color: #444;
}
ul {
margin: 0;
padding-left: 20px;
}
li {
color: #666;
margin-bottom: 5px;
}
.profile-image {
display: block;
margin: 0 auto;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid #333;
}
/* Style the links in the CV */

a{
color: #d9ff00;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Add background colors for different sections */

.header {
background-color: #00d9ff;
color: #fff;
padding: 15px;
border-radius: 5px 5px 0 0;
}
.section {
padding: 20px;
border-radius: 5px;
}
/* Add spacing between sections */

.section + .section {
margin-top: 40px;
}
OUTPUT:
GITHUB LINK:
https://github.com/chandu-19/WT_lab/blob/main/LAB-2
RESULT:
Therefore we have successfully created cv using HTML and CSS
Ex. No: 3
Form Making and Validation using JavaScript
31-07-2023
Aim:
Form Making and Validation using JavaScript
Program:
HTML CODE:-
<!DOCTYPE html>
<html>
<head>
<title>Form with Validation</title>
<link rel="stylesheet" type="text/css" href="WT3.CSS">
</head>
<body>
<h1>FORM</h1>
<form id="myForm" onsubmit="return validateForm()">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label>
</div>
<div>
<label for="hobbies">Hobbies:</label>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="gaming" name="hobbies" value="gaming">
<label for="gaming">Gaming</label>
</div>
<div>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
<script src="WT3.JS"></script>
</body>
</html>
CSS code:-
body {
margin: 20px;
}
h1 {
text-align: center;
}
form {
max-width: 400px;
margin: 0 auto;
}
div {
margin: 10px 0;
}
label {
display: inline-block;
width: 100px;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
JS code:-
function validateForm() {
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const gender = document.querySelector('input[name="gender"]:checked');
const hobbies = document.querySelectorAll('input[name="hobbies"]:checked');
const message = document.getElementById('message').value.trim();
if (!name || !email || !gender || !message) {

alert('Please fill in all required fields.');
return false;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!email.match(emailRegex)) {
alert('Please enter a valid email address.');
return false;
}
const selectedGender = gender.value;

const selectedHobbies = Array.from(hobbies).map(hobby => hobby.value);
alert(`Form submitted successfully!\n\nName: ${name}\nEmail: ${email}\nGender:

${selectedGender}\nHobbies: ${selectedHobbies.join(", ")}\nMessage: ${message}`);
return true;
}
Github link:
Output:
Ex. No: 4 Angular based App creation
19/08/2023
AIM:
Creating an App using ANGULAR with Components, Binding, and Services usage
PROGRAM:
Task.service.ts:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TaskService {
tasks: string[] = [];
constructor() { }
addTask(task: string) {
this.tasks.push(task);
}
getTasks() {
return this.tasks;
}
}
Task-form.components.ts:
import { Component } from '@angular/core';
import { TaskService } from '../task.service';
@Component({
selector: 'app-task-form',
templateUrl: './task-form.component.html',
styleUrls: ['./task-form.component.css']
})
export class TaskFormComponent {
newTask: string = '';
constructor(private taskService: TaskService) { }
addTask() {
if (this.newTask.trim() !== '') {
this.taskService.addTask(this.newTask);
this.newTask = '';
}
}
}
Task-list.components.ts:
import { Component } from '@angular/core';
import { TaskService } from '../task.service';
@Component({
selector: 'app-task-list',
templateUrl: './task-list.component.html',
styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
tasks: string[] = [];
constructor(private taskService: TaskService) {
this.tasks = this.taskService.getTasks();
}
}
Task-form.component.html:
<div>
<input [(ngModel)]="newTask" placeholder="Enter task" />
<button (click)="addTask()">Add Task</button>
</div>
Task-list.component.html:
div *ngFor="let task of tasks">
{{ task }}
</div>
GITHUB LINK:
OUTPUT:
Ex. No: 5
React based App Development
31/08/2023
AIM:
Creating an App using React with Components, Rendering, and Data Sharing.
PROGRAM:
import React, { useState } from 'react';
function TaskForm({ addTask }) {
const [task, setTask] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (task.trim() !== '') {
addTask(task);
setTask('');
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Enter a new task"
/>
<button type="submit">Add Task</button>
</form>
);
}
export default TaskForm;
import React, { useState } from 'react';
import TaskForm from './TaskForm';
import TaskList from './TaskList';
import './App.css';
function App() {
const [tasks, setTasks] = useState([]);
const addTask = (task) => {
setTasks([...tasks, task]);
};
return (
<div className="App">
<h1>Task List App</h1>
<TaskForm addTask={addTask} />
<TaskList tasks={tasks} />
</div>
);
}
export default App;
GITHUB LINK:
OUTPUT:
Ex. No: 6 Web Server Creation using NodeJS
3/10/2023
Aim:
To create a web server using NodeJS.
Program:
Server.js :
const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
res.setHeader('Content-Type', 'text/html');
if (req.method === 'GET' && req.url === '/') {
const filePath = path.join(__dirname, 'index.html');
fs.readFile(filePath, (err, data) => {
if (err) {
res.statusCode = 500;
res.end('Internal Server Error');
} else {
res.end(data);
}
});
} else if (req.method === 'GET' && req.url === '/getDateTime') {
res.setHeader('Content-Type', 'text/plain');
const currentDateTime = new Date().toLocaleString();
res.end(currentDateTime);
} else {
res.end('Not Found');
}
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node.js Web Server</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
background-color: #132328;
color: #fff;
padding: 20px 0;
text-align: center;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
h2 {
font-size: 28px;
color: #333;
}
p{
font-size: 18px;
line-height: 1.6;
color: #666;
}
strong {
font-weight: bold;
color: #333;
}
#datetime {
font-size: 20px;
font-weight: bold;
color: #007bff;
}
#reloadButton {
background-color: #007bff;
color: #fff;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#reloadButton:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<header>
<h1>Node.js Web Server</h1>
</header>
<h2>Web server built using Node.js</h2>
<p>This is a basic web server built using Node.js that serves this
HTML page.</p>
<p>This script creates a basic HTTP server that can serve an HTML
file, provide the current date and time, and handle 404 Not Found errors. The
HTML file it serves contains additional JavaScript for dynamically updating
the date and time and a button to reload the page.
</p>
<p><strong>Current Date and Time:</strong> <span
id="datetime"></span></p>
<button id="reloadButton">Update Time</button>
</div>
<script>
function updateDateTime() {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.status === 200) {
var dateTime = new Date(xhr.responseText);
document.getElementById('datetime').textContent =
dateTime.toLocaleString();
} else {
console.error('Failed to fetch date and time from the
server');
}
};
xhr.open('GET', '/getDateTime', true);
xhr.send();
}
function reloadPage() {
window.location.reload();
}
window.addEventListener('load', updateDateTime);
document.getElementById('reloadButton').addEventListener('click',
reloadPage);
</script>
</body>
</html>
GITHUB LINK:
Output:
Ex. No: 7 Routing Implementation using ExpressJS
3/10/2023
Aim:
To implement routing using ExpressJS.
Program:
Express.js :
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;
app.use(express.static(path.join(__dirname + '/home.html')));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname + '/home.html'));
});
app.get('/course1', (req, res) => {
res.sendFile(path.join(__dirname + '/course1.html'));
});
app.get('/course2', (req, res) => {
res.sendFile(path.join(__dirname + '/course2.html'));
});
app.get('/enroll', (req, res) => {
res.sendFile(path.join(__dirname + '/enroll.html'));
});
app.get('/done', (req, res) => {
res.sendFile(path.join(__dirname + '/done.html'));
});
app.get('/enroll2', (req, res) => {
res.sendFile(path.join(__dirname + '/enroll2.html'));
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
Home.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning Management System</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
color: #fff;
padding: 20px 0;
text-align: center;
}
h1 {
font-size: 2.5rem;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border-radius: 5px;
}
.course {
padding: 10px;
border-radius: 5px;
}
.course h2 {
font-size: 1.5rem;
margin-top: 0;
}
.course p {
font-size: 1.2rem;
}
.btn {
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}
.btn:hover {
}
</style>
</head>
<body>
<header>
<h1>Learning Management System</h1>
<p>Online education platform</p>
</header>
<h2>Courses</h2>
<div class="course">
<h2>Course 1: Introduction to Programming</h2>
<p>This course covers the basics of programming and computer
science.</p>
<a href="/course1" class="btn">View Course</a>
</div>
<div class="course">
<h2>Course 2: Web Development Fundamentals</h2>
<p>Learn the fundamentals of web development, including HTML, CSS,
and JavaScript.</p>
<a href="/course2" class="btn">View Course</a>
</div>
</div>
</body>
</html>
course.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Course 1: Introduction to Programming</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
color: #fff;
padding: 20px 0;
text-align: center;
}
h1 {
font-size: 2.5rem;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border-radius: 5px;
}
h2 {
font-size: 1.5rem;
margin-top: 0;
}
p{
font-size: 1.2rem;
}
.btn {
background-color:#062534;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}
.btn:hover {
}
</style>
</head>
<body>
<header>
<h1>Course 1: Introduction to Programming</h1>
<p>Welcome to the course on the basics of programming!</p>
</header>
<h2>Course Overview</h2>
<p>This course covers the fundamentals of programming, including
concepts like variables, loops, and conditional statements. You'll also learn
how to write and run simple programs in your chosen programming language.</p>
<h2>Course Content</h2>
<ul>
<li>Lesson 1: Introduction to Programming Concepts</li>
<li>Lesson 2: Variables and Data Types</li>
<li>Lesson 3: Control Structures (Loops and Conditionals)</li>
</ul>
<a href="enroll" class="btn">Enroll in Course</a>
</div>
</body>
</html>
Enroll.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Enroll in Course</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
color: #fff;
padding: 20px 0;
text-align: center;
}
h1 {
font-size: 2.5rem;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border-radius: 5px;
}
h2 {
font-size: 1.5rem;
margin-top: 0;
}
label {
display: block;
margin-bottom: 8px;
}
input[type="text"] {
width: 97%;
padding: 10px;
border-radius: 3px;
}
.btn {
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}
.btn:hover {
}
</style>
</head>
<body>
<header>
<h1>Enroll in Course</h1>
<p>Complete the form below to enroll in the course.</p>
</header>
<h2>Course Information</h2>
<p><strong>Course:</strong> Introduction to Programming</p>
<p><strong>Description:</strong> Refer to the previous page.</p>
<h2>Enrollment Form</h2>
<form action="/enroll" method="post">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required>
<label for="email">Email Address:</label>
<input type="text" id="email" name="email" required>
<a href="/done" class="btn">Enroll</a>
</form>
</div>
</body>
</html>
Done.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Enrollment Successful</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
color: #fff;
padding: 20px 0;
text-align: center;
}
h1 {
font-size: 2.5rem;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border-radius: 5px;
}
h2 {
font-size: 1.5rem;
margin-top: 0;
}
p{
font-size: 1.2rem;
}
.btn {
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
}
</style>
</head>
<body>
<header>
<h1>Enrollment Successful</h1>
</header>
<h2>Thank you for enrolling in the course!</h2>
<p>Your enrollment is confirmed, and you are now registered for the
course.</p>
<a href="/" class="btn">Go to Home</a>
</div>
</body>
</html>
GITHUB LINK:
OUTPUT:
Ex. No: 8 Building a REST API with Express, Node, and
10/12/2023 MongoDB
Aim:
To Build a REST API with Express, Node, and MongoDB
Program:
Server.js
const express = require('express')
const app = express()
const mongoose = require('mongoose')
mongoose.connect('mongodb://localhost:27017/student', { useNewUrlParser: true })
const db = mongoose.connection
db.on('error', (error) => console.error(error))
db.once('open', () => console.log('Connected to Database'))
app.use(express.json())
const studentSchema = new mongoose.Schema({
name: String,
age: Number,
grade: String,
});
const Student = mongoose.model('Student', studentSchema);
app.get('/students', async (req, res) => {
try {
const students = await Student.find();
res.json(students);
} catch (error) {
res.status(500).json({ error: error.message });
}
});
app.post('/students', async (req, res) => {
const { name, age, grade } = req.body;
try {
const newStudent = new Student({ name, age, grade });
await newStudent.save();
res.json(newStudent);
} catch (error) {
}
});
app.put('/students/:id', async (req, res) => {
const { id } = req.params;
const { name, age, grade } = req.body;
try {
const updatedStudent = await Student.findByIdAndUpdate(
id,
{ name, age, grade },
{ new: true } // Return the updated document
);
if (!updatedStudent) {
return res.status(404).json({ error: 'Student not found' });
}
res.json(updatedStudent);
} catch (error) {
}
});
app.delete('/students/:id', async (req, res) => {
const { id } = req.params;
try {
const deletedStudent = await Student.findByIdAndDelete(id);
if (!deletedStudent) {
return res.status(404).json({ error: 'Student not found' });
}
res.json({ message: 'Student deleted successfully' });
} catch (error) {
}
});
app.listen(3000, () => console.log('Server Started'))
GITHUB LINK:
https://github.com/chandu-19/WT_lab/blob/main/Lab-8
OUTPUT:

Chandrasekhar 21011102107 WT-LAB

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

Chandrasekhar 21011102107 WT-LAB

Uploaded by

Copyright:

Available Formats

Ex.

<img class="profile-image" src="C:\Users\Chandu\OneDrive\Desktop\WhatsApp

<img class="profile-image" src="C:\Users\Chandu\OneDrive\Desktop\WhatsApp

/* Style the links in the CV */

/* Add background colors for different sections */

/* Add spacing between sections */

if (!name || !email || !gender || !message) {

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const selectedGender = gender.value;

alert(`Form submitted successfully!\n\nName: ${name}\nEmail: ${email}\nGender:

You might also like