Scribd
Upload
14 views

Script

Uploaded by

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

Script

Uploaded by

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

<script>

</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Attendance </title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f7f6;
color: #333;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
background-color: #3498db;
color: white;
padding: 15px;
margin: 0;
}
h2 {
text-align: center;
background-color: #3498db;
color: white;
padding: 15px;
margin: 0;
}

.container {
max-width: 900px;
margin: 30px auto;
padding: 20px;
background-color: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

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

th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}

th {
background-color: #2c3e50;
color: white;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

input[type="radio"] {
margin: 0 8px;
}

input[type="date"], input[type="text"] {
padding: 8px;
margin-bottom: 20px;
width: 100%;
max-width: 250px;
}

button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
display: block;
margin: 20px auto;
}

button:hover {
background-color: #2980b9;
}
.summary {
margin-top: 30px;
text-align: center;
}

.summary h3 {
color: #2c3e50;
}

.summary p {
font-size: 16px;
}

.summary-list {
list-style-type: none;
padding: 0;
}

.summary-list li {
padding: 5px;
font-size: 16px;
border-bottom: 1px solid #ddd;
}

.print-btn {
margin-top: 20px;
background-color: #27ae60;
}

canvas {
max-width: 400px;
margin: 20px auto;
display: block;
}

@media print {
body * {
visibility: hidden;
}
.container, .container * {
visibility: visible;
}
.container {
position: absolute;
left: 0;
top: 0;
}
.print-btn {
display: none;
}
}
</style>
</head>
<body>

<h1>Student Attendance by Ur Engineering Friend</h1><br>


<h2>Client Side Scripting Micro Project</h2>

<div class="container">

<!-- Input to Add New Student -->


<input type="text" id="newStudentName" placeholder="Enter Student Name">
<button type="button" onclick="addStudent()">Add Student</button>

<!-- Date Selector -->


<label for="attendanceDate">Select Date:</label>
<input type="date" id="attendanceDate" required>

<form id="attendanceForm">
<table>
<thead>
<tr>
<th>Student Name</th>
<th>Attendance</th>
</tr>
</thead>
<tbody id="studentTable">
<!-- Students will be dynamically added here -->
</tbody>
</table>

<button type="button" onclick="submitAttendance()">Submit Attendance</button>


</form>

<div class="summary">
<h3>Attendance Summary</h3>
<p id="dateSummary"></p>
<ul id="attendanceSummary" class="summary-list"></ul>
<p id="result"></p>
</div>

<!-- Chart for attendance -->


<canvas id="attendanceChart"></canvas>

<!-- Print Button -->


<button class="print-btn" onclick="window.print()">Print Attendance</button>

</div>

<!-- Chart.js Library -->


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js"></script>

<script>
let studentCount = 0;
let attendanceChart;

// Function to add new student


function addStudent() {
const newStudentName = document.getElementById('newStudentName').value;
if (newStudentName === '') {
alert("Please enter a student name.");
return;
}

studentCount++;
const studentTable = document.getElementById('studentTable');

// Add new row to the table for the new student


const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>${newStudentName}</td>
<td>
<input type="radio" name="student${studentCount}" value="present"> Present
<input type="radio" name="student${studentCount}" value="absent"> Absent
</td>
`;
studentTable.appendChild(newRow);

// Clear the input field


document.getElementById('newStudentName').value = '';
}
function submitAttendance() {
const dateInput = document.getElementById('attendanceDate');
if (!dateInput.value) {
alert("Please select a date before submitting attendance.");
return;
}

let presentCount = 0;
let absentCount = 0;
let dateValue = new Date(dateInput.value).toLocaleDateString();

const form = document.getElementById('attendanceForm');


const formData = new FormData(form);

const students = [];

// Loop through each student added dynamically


for (let i = 1; i <= studentCount; i++) {
let studentName = document.querySelector(`#studentTable tr:nth-child(${i}) td:first-
child`).textContent;
let attendanceStatus = formData.get(`student${i}`);
if (attendanceStatus) {
students.push({ name: studentName, status: attendanceStatus });
if (attendanceStatus === 'present') {
presentCount++;
} else {
absentCount++;
}
}
}

// Clear previous summary


const summaryList = document.getElementById('attendanceSummary');
summaryList.innerHTML = '';

students.forEach(student => {
let attendanceStatus = student.status === 'present' ? 'Present' : 'Absent';
summaryList.innerHTML += `<li>${student.name}: ${attendanceStatus}</li>`;
});

// Display attendance summary


document.getElementById('result').innerHTML = `Total Present: ${presentCount}, Total Absent:
${absentCount}`;
document.getElementById('dateSummary').innerHTML = `Date: ${dateValue}`;

// Update the chart with the data


updateChart(presentCount, absentCount);
}

function updateChart(presentCount, absentCount) {


const ctx = document.getElementById('attendanceChart').getContext('2d');

// Destroy the existing chart if it exists


if (attendanceChart) {
attendanceChart.destroy();
}

attendanceChart = new Chart(ctx, {


type: 'pie',
data: {
labels: ['Present', 'Absent'],
datasets: [{
data: [presentCount, absentCount],
backgroundColor: ['#2ecc71', '#e74c3c']
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
}
</script>

</body>
</html>
Output of Microproject
Description
A Student Management System (SMS) is comprehensive software designed to streamline and automate
the management of student-related processes in educational institutions. It simplifies tasks such as
enrollment, attendance tracking, grading, communication, and record-keeping, enabling administrators,
teachers, and parents to access critical information efficiently.

The system typically includes features such as student registration, which captures personal and
academic details during admission. It manages class schedules, course assignments, and ensures that
each student is placed in the appropriate academic programs. Attendance tracking is automated and can
integrate with biometric or card-based systems for accuracy. Additionally, the software provides tools for
grading and assessments, allowing teachers to record and analyze student performance with ease.

An SMS also serves as a communication hub, offering portals for parents, students, and teachers to
interact. Notifications, progress reports, and updates can be shared instantly, fostering better
engagement and transparency. The system often includes fee management tools to handle payments,
track dues, and generate receipts, reducing manual errors in financial transactions.

The software is usually web-based or available as a mobile application, making it accessible from
anywhere. It offers customization options to adapt to the specific needs of schools, colleges, or
universities. By integrating with learning management systems (LMS), it can further enhance the learning
experience by providing access to educational materials and online assessments.

The Student Management System delivers numerous benefits, such as improved efficiency, reduced
administrative workload, and real-time data availability. It enhances decision-making through analytics
and reporting tools while ensuring compliance with educational regulations. Scalable and secure, this
software is an essential tool for modern educational institutions aiming to provide a seamless and
effective management experience.
AIM OF MICRO-PROJECT
The aim of the microproject on a Student Management System
is to design and develop a simplified software solution that
efficiently manages student-related information and processes
within an educational institution.

Resources Required
Sr.no Name of Specification Qty Remarks
Resources
1 Computer 500 Gb HDD 1
4gb RAM
AMD
Processor
Windows 7
os

You might also like