Scribd
Upload
4 views

code2

The document outlines a Student Management System with three main functionalities: inputting data via a form, managing that data (save, update, delete, etc.), and displaying the inputted data. It includes requirements for the layout and responsiveness of the HTML, CSS, and JavaScript code provided. Specific styling and positioning adjustments are requested for the form and data display sections.

Uploaded by

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

code2

The document outlines a Student Management System with three main functionalities: inputting data via a form, managing that data (save, update, delete, etc.), and displaying the inputted data. It includes requirements for the layout and responsiveness of the HTML, CSS, and JavaScript code provided. Specific styling and positioning adjustments are requested for the form and data display sections.

Uploaded by

faiyaz815300
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

**ye image me three main functionality he jisme.

1-> First functionality form se face ke sath data input karna he, isme pehle data
input hoke save hoga or fir iske bad photo sample lena he
2-> Second functionality form ke data ko SAVE,UPDATE,DELETE,RESET,ADD PHOTO
SAMPLE,
UPDATE PHOTO SAMPLE
3-> Third functionality form se input kiye gaye data ko show karna he

Note : image ke andar upar di gayi three requirenment ko cover karna he or sabse
top me jo image dikhai derahi he ise nahi jahiye to apko ise HTML,CSS,Javascript me
conver karna he or top me image ko display nahi karna he or ye pura page responsive
hona chahiye

Requirement-1: Niche diye gaye code Student information form ki height or width set
karna he.
Requirement-2: Niche diye gaye code me form ko left side display karna he
Requirement-3: Niche diye gaye code me View student details ko right side display
karna he isme scrollbar bhi add kar sakte ho

**HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Face Recognition Attendance System</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div class="container">
<header>
<h1>Student Management System</h1>
<p id="datetime"></p>
</header>

<main>
<!-- Form Section -->
<section class="form-section">
<h2>Student Information</h2>
<form id="studentForm">
<fieldset>
<legend>Current Course Information</legend>
<label for="department">Department:</label>
<select id="department" required>
<option value="">Select Department</option>
<option value="Computer">Computer</option>
<option value="IT">IT</option>
<option value="Mechanical">Mechanical</option>
</select>

<label for="course">Course:</label>
<select id="course" required>
<option value="">Select Course</option>
<option value="BE">BE</option>
<option value="TE">TE</option>
<option value="SE">SE</option>
</select>

<label for="year">Year:</label>
<select id="year" required>
<option value="">Select Year</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>

<label for="semester">Semester:</label>
<select id="semester" required>
<option value="">Select Semester</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</fieldset>

<fieldset>
<legend>Student Class Information</legend>
<label for="studentID">Student ID:</label>
<input type="text" id="studentID" placeholder="Enter
Student ID" required>

<label for="studentName">Student Name:</label>


<input type="text" id="studentName" placeholder="Enter
Student Name" required>

<label for="division">Class Division:</label>


<select id="division" required>
<option value="">Select Division</option>
<option value="A">A</option>
<option value="B">B</option>
</select>

<label for="rollNo">Roll No:</label>


<input type="number" id="rollNo" placeholder="Enter Roll
No" required>

<label for="gender">Gender:</label>
<select id="gender" required>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>

<label for="dob">DOB:</label>
<input type="date" id="dob" required>

<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter Email"
required>

<label for="phone">Phone No:</label>


<input type="text" id="phone" placeholder="Enter Phone
Number" required>

<label for="address">Address:</label>
<textarea id="address" placeholder="Enter
Address"></textarea>

<label for="teacherName">Teacher Name:</label>


<input type="text" id="teacherName" placeholder="Enter
Teacher Name" required>

<div class="photo-sample">
<input type="radio" name="photoSample" id="takePhoto"
value="take" required>
<label for="takePhoto">Take Photo Sample</label>

<input type="radio" name="photoSample" id="noPhoto"


value="noPhoto" required>
<label for="noPhoto">No Photo Sample</label>
</div>
</fieldset>

<div class="form-buttons">
<button type="button" id="saveBtn">Save</button>
<button type="button" id="updateBtn">Update</button>
<button type="button" id="deleteBtn">Delete</button>
<button type="reset" id="resetBtn">Reset</button>
<button type="button" id="addPhotoBtn">Add Photo
Sample</button>
<button type="button" id="updatePhotoBtn">Update Photo
Sample</button>
</div>
</form>
</section>

<!-- Data Display Section -->


<section class="data-section">
<h2>View Student Details</h2>
<div class="search-container">
<label for="searchBy">Search By:</label>
<select id="searchBy">
<option value="name">Name</option>
<option value="studentID">Student ID</option>
<option value="course">Course</option>
</select>
<input type="text" id="searchInput" placeholder="Enter search
keyword">
<button id="searchBtn">Search</button>
<button id="showAllBtn">Show All</button>
</div>
<table>
<thead>
<tr>
<th>Department</th>
<th>Course</th>
<th>Year</th>
<th>Semester</th>
<th>Student ID</th>
<th>Name</th>
<th>Class Div</th>
<th>Roll No</th>
</tr>
</thead>
<tbody id="dataDisplay">
<!-- Data will be dynamically added here -->
</tbody>
</table>
</section>
</main>
</div>

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

**CSS code

/* General Styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}

.container {
width: 90%;
margin: auto;
}

header {
text-align: center;
margin: 20px 0;
}

header h1 {
color: #4CAF50;
}

main {
display: flex;
flex-direction: column;
}

.form-section, .data-section {
margin: 20px 0;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

fieldset {
margin: 20px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}

input, select, textarea {


width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

textarea {
resize: none;
}

.form-buttons button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
margin: 5px;
cursor: pointer;
border-radius: 5px;
}

.form-buttons button:hover {
background-color: #45a049;
}

table {
width: 100%;
border-collapse: collapse;
}

table th, table td {


border: 1px solid #ddd;
padding: 8px;
}

table th {
background-color: #4CAF50;
color: white;
text-align: left;
}

.search-container {
margin-bottom: 20px;
}

@media (max-width: 768px) {


input, select, textarea {
width: 100%;
}
}
**Javascript code

document.addEventListener('DOMContentLoaded', function () {
function updateDateTime() {
const now = new Date();
document.getElementById('datetime').textContent = now.toLocaleString();
}
updateDateTime();
setInterval(updateDateTime, 1000);

// Button functionality placeholders


document.getElementById('saveBtn').onclick = () => alert('Save functionality
triggered');
document.getElementById('updateBtn').onclick = () => alert('Update
functionality triggered');
document.getElementById('deleteBtn').onclick = () => alert('Delete
functionality triggered');
document.getElementById('resetBtn').onclick = () => alert('Form reset');
document.getElementById('addPhotoBtn').onclick = () => alert('Add Photo Sample
triggered');
document.getElementById('updatePhotoBtn').onclick = () => alert('Update Photo
Sample triggered');
document.getElementById('searchBtn').onclick = () => alert('Search triggered');
document.getElementById('showAllBtn').onclick = () => alert('Show all data');
});

You might also like