Scribd
Upload
4 views

SIMS HTML

Sims

Uploaded by

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

SIMS HTML

Sims

Uploaded by

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

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Student Information Management System</title>

<style>

/* CSS - Styling for SIMS */

body {

font-family: Arial, sans-serif;

background-color: #f4f4f9;

margin: 0;

padding: 0;

.container {

max-width: 900px;

margin: 0 auto;

padding: 20px;

background-color: white;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

h1 {
text-align: center;

color: #333;

h2 {

margin-bottom: 10px;

color: #444;

.form-container, .search-container, .student-list {

margin-bottom: 20px;

input {

width: 100%;

padding: 10px;

margin: 5px 0;

border: 1px solid #ddd;

border-radius: 4px;

button {

padding: 10px 20px;

border: none;

background-color: #5c6bc0;
color: white;

font-size: 16px;

cursor: pointer;

border-radius: 4px;

button:hover {

background-color: #3f4f88;

ul {

list-style-type: none;

padding: 0;

li {

background-color: #fafafa;

margin: 10px 0;

padding: 15px;

border: 1px solid #ddd;

border-radius: 4px;

display: flex;

justify-content: space-between;

align-items: center;

}
li button {

background-color: #f44336;

border: none;

padding: 5px 10px;

cursor: pointer;

border-radius: 4px;

li button:hover {

background-color: #e53935;

li .edit-button {

background-color: #4caf50;

li .edit-button:hover {

background-color: #45a049;

input[type="text"]:focus, input[type="number"]:focus {

border-color: #5c6bc0;

outline: none;

}
</style>

</head>

<body>

<div class="container">

<h1>Student Information Management System</h1>

<!-- Add Student Form -->

<div class="form-container">

<h2>Add New Student</h2>

<form id="student-form">

<input type="text" id="student-name" placeholder="Student Name" required>

<input type="number" id="student-age" placeholder="Age" required>

<input type="text" id="student-class" placeholder="Class" required>

<button type="submit">Add Student</button>

</form>

</div>

<!-- Search Students -->

<div class="search-container">

<input type="text" id="search-input" placeholder="Search by Name"


onkeyup="searchStudent()">

</div>

<!-- Student List -->

<div class="student-list">
<h2>Students List</h2>

<ul id="students-list"></ul>

</div>

</div>

<script>

// JavaScript - Functionality for SIMS

let students = [];

const form = document.getElementById('student-form');

const studentList = document.getElementById('students-list');

const searchInput = document.getElementById('search-input');

form.addEventListener('submit', addStudent);

// Add Student

function addStudent(e) {

e.preventDefault();

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

const age = document.getElementById('student-age').value;

const studentClass = document.getElementById('student-class').value;

const newStudent = {

id: Date.now(),
name: name,

age: age,

class: studentClass,

};

students.push(newStudent);

renderStudentList();

form.reset();

// Render Students List

function renderStudentList() {

studentList.innerHTML = '';

students.forEach(student => {

const li = document.createElement('li');

li.innerHTML = `

<span>${student.name} (${student.age} years old, Class: ${student.class})</span>

<div>

<button class="edit-button" onclick="editStudent(${student.id})">Edit</button>

<button onclick="deleteStudent(${student.id})">Delete</button>

</div>

`;

studentList.appendChild(li);

});

}
// Delete Student

function deleteStudent(id) {

students = students.filter(student => student.id !== id);

renderStudentList();

// Edit Student

function editStudent(id) {

const student = students.find(student => student.id === id);

if (student) {

document.getElementById('student-name').value = student.name;

document.getElementById('student-age').value = student.age;

document.getElementById('student-class').value = student.class;

deleteStudent(id); // Remove student first, then add edited version

// Search Functionality

function searchStudent() {

const searchTerm = searchInput.value.toLowerCase();

const filteredStudents = students.filter(student =>

student.name.toLowerCase().includes(searchTerm)

);
renderFilteredList(filteredStudents);

// Render Filtered List

function renderFilteredList(filteredStudents) {

studentList.innerHTML = '';

filteredStudents.forEach(student => {

const li = document.createElement('li');

li.innerHTML = `

<span>${student.name} (${student.age} years old, Class: ${student.class})</span>

<div>

<button class="edit-button" onclick="editStudent(${student.id})">Edit</button>

<button onclick="deleteStudent(${student.id})">Delete</button>

</div>

`;

studentList.appendChild(li);

});

// Initial Render

renderStudentList();

</script>

</body>

</html>

You might also like