Scribd
Upload
6 views

Webdev_merged

pan cad code

Uploaded by

shitijyadav56
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Webdev_merged

pan cad code

Uploaded by

shitijyadav56
Copyright
© © All Rights Reserved
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