Scribd
Upload
15 views

Webdev_merged

pan cad code

Uploaded by

shitijyadav56
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Webdev_merged

pan cad code

Uploaded by

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

Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

RESUME BUILDING
HTML: -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<title>Resume</title>
<link rel="stylesheet" href="styles2.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="full-name">
<span class="first-name">Shitij </span>
<span class="last-name">Yadav</span>
</div>
<div class="contact-info">
<span class="email">Email: </span>
<span class="email-val">[email protected]</span>
<span class="separator"></span>
<span class="phone">Phone: </span>
<span class="phone-val">9754969133</span>
</div>
<div class="about">
<span class="position">Student</span>
<p class="desc">I am a B.Tech student in Computer Science (A.I) with a passion for
programming and technology.</p>
<hr style="border: none; border-top: 1px solid #ccc; margin: 10px 0;">
</div>
</header>

<div class="objective-section">
<h2 class="section__title">Objective</h2>
<p>
Seeking a challenging position in Full Stack Developer where I can leverage my skills in
programming and problem-solving. I aim to contribute to innovative projects that utilize cutting-edge
technologies while continuously enhancing my expertise
.</p>
</div>
<section class="section">
<h2 class="section__title">Education</h2>
<table>
<thead>

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

<tr>
<th>S.No.</th>
<th>Name of College/Institute</th>
<th>Degree</th>
<th>Percent</th>
<th>Passout Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bhilai Institute of Technology</td>
<td>B.Tech in CSE (A.I)</td>
<td>70</td>
<td>2026</td>
</tr>
<tr>
<td>2</td>
<td>Rungta College Of Engineering & Technology</td>
<td>Diploma</td>
<td>84</td>
<td>2022</td>
</tr>
<tr>
<td>3</td>
<td>K.H.Memorial School </td>
<td>10th</td>
<td>75</td>
<td>2020</td>
</tr>
</tbody>
</table>
</section>
<section class="section">
<h2 class="section__title">Projects</h2>
<table>
<thead>
<tr>
<th>Frontend</th>
<th>Tools</th>
<th>Role</th>
<th>Responsibilities</th>
</tr>
</thead>
<tbody>
<tr>
<td> Personal Website</td>

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

<td>Html,Css</td>
<td>Developer</td>
<td> Create a simple website about myself.</td>
</tr>
<tr>
<td> Real time language translator </td>
<td> Android studio,java </td>
<td>Developer</td>
<td> Created a system for real-time language translate.</td>
</tr>
</tbody>
</table>
</section>
<section class="section">
<h2 class="section__title">Skills</h2>
<ul> <li>Java</li>
<li>JavaScript</li>
</section>
<section class="section">
<h2 class="section__title">Interests</h2>
<p>Programming</p>
</section>
</div>
</body>
</html>

CSS: -

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #eee;
font-family: 'Lato', sans-serif;
font-weight: 400;
color: #222;
font-size: 14px;
line-height: 26px;
padding: 20px;
}
.container {
max-width: 700px;
background: #fff;
margin: 0 auto;

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

box-shadow: 1px 1px 2px #DAD7D7;


border-radius: 3px;
padding: 40px;
}
.header, .section {
margin-bottom: 30px;
}
.full-name {
font-size: 40px;
text-transform: uppercase;
margin-bottom: 5px;
}
.section__title {
letter-spacing: 2px;
color: #54AFE4;
font-weight: bold;
margin-bottom: 10px;
text-transform: uppercase;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #54AFE4;
color: white;
text-transform: uppercase;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd; }
STUDENT REGISTRATION FORM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

<title>Student Registration Form</title>


<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}

.container {
max-width: 500px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="tel"],
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
width: 100%;

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#message {
margin-top: 20px;
text-align: center;
font-size: 1.2em;
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>Student Registration Form</h1>
<form id="registrationForm">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select...</option>

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="course">Course:</label>
<input type="text" id="course" name="course" required>
</div>
<button type="submit">Register</button>
</form>
<div id="message"></div>
</div>
<script>
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission

// Get form values


const name = document.getElementById('name').value;

// Display success message


document.getElementById('message').innerText = `Registration Successful! Welcome, ${name}.`;

// Clear the form


this.reset();
});
</script>
</body>
</html>

CGPA Calculator

<!DOCTYPE html>
<html lang="en">

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CGPA Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}

.container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
}

table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
}

table, th, td {
border: 1px solid #ddd;
text-align: center;
}

th, td {
padding: 8px;
}

select, input[type="text"], input[type="number"] {


padding: 8px;
width: 90%;
margin-bottom: 10px;

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

border: 1px solid #ccc;


border-radius: 4px;
}

button {
padding: 10px 15px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #218838;
}

.remove-btn {
background-color: #dc3545;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}

.remove-btn:hover {
background-color: #c82333;
}

#refresh-btn {
margin-top: 20px;
background-color: #007bff;
}

#refresh-btn:hover {
background-color: #0056b3;
}

#result {
margin-top: 20px;
font-size: 1.2em;
text-align: center;
}

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

#summaryTable {
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>CGPA Calculator</h1>

<table id="subjectTable">
<thead>
<tr>
<th>Subject</th>
<th>Grade</th>
<th>Credits</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="subject">
<option value="" disabled selected>Select subject</option>
<option value="DAA">DAA</option>
<option value="DVAI">DVAI</option>
<option value="CD">CD</option>
<option value="CN">CN</option>
<option value="SEPM">SEPM</option>
</select>
</td>
<td><input type="text" class="grade" placeholder="Enter grade (A/B/C/etc.)"></td>
<td><input type="number" class="credit" placeholder="Credits"></td>
<td><button class="remove-btn">Remove</button></td>
</tr>
</tbody>
</table>

<button id="addSubjectBtn">Add Subject</button>


<button id="calculateBtn">Calculate CGPA</button>
<button id="refresh-btn">Refresh</button>

<div id="result"></div>

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

<table id="summaryTable">
<thead>
<tr>
<th>Subject</th>
<th>Grade</th>
<th>Credits</th>
<th>Grade Points</th>
<th>Score</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const gradesToPoints = {
'A': 10,
'B': 8,
'C': 6,
'D': 4,
'E': 2,
'F': 0
};

document.getElementById('addSubjectBtn').addEventListener('click', function() {
const tableBody = document.querySelector('#subjectTable tbody');
const newRow = document.createElement('tr');

newRow.innerHTML = `
<td>
<select class="subject">
<option value="" disabled selected>Select subject</option>
<option value="DAA">DAA</option>
<option value="DVAI">DVAI</option>
<option value="CD">CD</option>
<option value="CN">CN</option>
<option value="SEPM">SEPM</option>
</select>
</td>
<td><input type="text" class="grade" placeholder="Enter grade (A/B/C/etc.)"></td>
<td><input type="number" class="credit" placeholder="Credits"></td>
<td><button class="remove-btn">Remove</button></td>
`;

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

tableBody.appendChild(newRow);
});

document.querySelector('#subjectTable').addEventListener('click', function(event) {
if (event.target.classList.contains('remove-btn')) {
event.target.closest('tr').remove();
}
});

document.getElementById('calculateBtn').addEventListener('click', function() {
let totalPoints = 0;
let totalCredits = 0;
const summaryTableBody = document.querySelector('#summaryTable tbody');
summaryTableBody.innerHTML = '';

const rows = document.querySelectorAll('#subjectTable tbody tr');


rows.forEach(row => {
const subject = row.querySelector('.subject').value;
const grade = row.querySelector('.grade').value.toUpperCase();
const credit = parseFloat(row.querySelector('.credit').value);

if (gradesToPoints[grade] !== undefined && !isNaN(credit)) {


const gradePoints = gradesToPoints[grade];
const score = gradePoints * credit;

totalPoints += score;
totalCredits += credit;

const summaryRow = document.createElement('tr');


summaryRow.innerHTML = `
<td>${subject}</td>
<td>${grade}</td>
<td>${credit}</td>
<td>${gradePoints}</td>
<td>${score.toFixed(2)}</td>
`;
summaryTableBody.appendChild(summaryRow);
}
});

if (totalCredits > 0) {
const cgpa = totalPoints / totalCredits;
document.getElementById('result').innerText = `Your CGPA is: ${cgpa.toFixed(2)}`;

Page No.
Bhilai Institute of Technology, Durg

CRN: Experiment No.: Date:

document.getElementById('summaryTable').style.display = 'table';
} else {
document.getElementById('result').innerText = 'Please enter valid grades and credits for all
subjects.';
}
});

document.getElementById('refresh-btn').addEventListener('click', function() {
location.reload();
});
});
</script>
</body>
</html>

Page No.
10-Question Quiz

Question 1

What is the capital of France?

O London
O Berin

Paris
O Madrid

Question 2

Which planet is known as the Red Planet?

Mars

O Jupiter
O Venus

O Satun

Question 3

Who painted the Mona Lisa?

O Vincent van Gogh


Leonardo da Vinci
O Pablo Picasso
O Michelangelo

Question 4

What is the largest ocean on Earth?


O Atlantic Ocean
O Indian Ocean
Question 5

Which element has the chemical symbol '0?


O Gold

O Silver
Oxygen
O Iron

Question 6
What is the largest mammal in the world?
O African Elephant
Blue Whale
O Giraffe

O Hippopotamus

Question 7

In which year did World War Il end?

O 1943

1944

O 1945
O 1946

Question 8

What is the capital of Japan?


O Seoul
O Beijing
O Shanghai
Tokyo
Question 9

Who wrote 'Romeo and Juliet?

O Charles Dickens

William Shakespeare
O Jane Austen
O Mark Twain

Question 10

What is the largest planet in our solar system?


O Earth
O Mars

Jupiter

O Saturn

You scored 9 out cof 10!

You might also like