08/09/2025
HTML Code ⚡
Student Registration
:root{
--bg: ; --card: ; --muted: ; --accent: ; --danger: ;
--success: ; --glass: rgba(37,99,235,0.06);
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:linear-gradient(180deg,var(--bg), ); color: }
.container{max-width:1100px; margin:28px auto; padding:20px}
header{display:flex; align-items:center; justify-content:space-between; gap:16px}
h1{font-size:1.4rem; margin:0}
.card{background:var(--card); border-radius:12px; box-shadow:0 6px 18px rgba(15,23,42,0.06); padding:18px}
/* form layout */
form .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
label{display:block; font-size:0.85rem; color:var(--muted); margin-bottom:6px}
input[type=text], input[type=email], input[type=date], input[type=tel], select, textarea{width:100%; padding:10px 12px; border:1px solid ; border-radius:8px; background: ; font-size:0.95rem}
textarea{min-height:80px; resize:vertical}
.full{grid-column:1/-1}
.actions{display:flex; gap:8px; margin-top:12px}
button{border:0; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:600}
.btn-primary{background:var(--accent); color:white}
.btn-ghost{background:transparent; border:1px solid }
.btn-danger{background:var(--danger); color:white}
/* table */
.toolbar{display:flex; justify-content:space-between; gap:12px; margin-top:16px; align-items:center}
.search{display:flex; gap:8px; align-items:center}
.table-wrap{overflow:auto; margin-top:12px}
table{width:100%; border-collapse:collapse; min-width:800px}
th, td{padding:10px 12px; text-align:left; border-bottom:1px solid }
th{font-size:0.85rem; color:var(--muted); position:sticky; top:0; background:linear-gradient(transparent, rgba(255,255,255,0.6))}
td small{display:block; color:var(--muted); font-size:0.85rem}
.pill{display:inline-block; padding:6px 8px; border-radius:999px; font-size:0.8rem}
.edit, .del{background:transparent; border:1px solid ; padding:6px 8px; border-radius:8px; cursor:pointer}
/* responsive */
(max-width:800px){
form .grid{grid-template-columns:1fr}
.container{padding:12px}
}
/* small helpers */
.muted{color:var(--muted); font-size:0.9rem}
.empty{padding:28px; text-align:center; color:var(--muted)}
/* simple modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(2,6,23,0.45); display:none; align-items:center; justify-content:center}
.modal{background:var(--card); width:720px; max-width:95%; border-radius:12px; padding:18px}
.row{display:flex; gap:8px}
Student Registration
Register students and manage the registry (stored locally in your browser)
Export CSV
Import CSV
First name *
Last name *
Student ID *
Email *
Date of birth
Phone
Course *
Choose course
BSc Computer Science
BSc Information Systems
Diploma in IT
Higher National Diploma
Year *
Choose year
1
2
3
4
Address
Register Student
Clear
Show entries:
10
25
50
Clear
Total students: 0
#
Student ID
Name
Email
Course / Year
Phone
Actions
No students registered yet.
Edit Student
First name
Last name
Student ID
Email
Course
BSc Computer Science
BSc Information Systems
Diploma in IT
Higher National Diploma
Year
1
2
3
4
Address
Cancel
Save
// Simple client-side "student registry" using localStorage
const STORAGE_KEY = 'students_registry_v1';
// elements
const form = document.getElementById('regForm');
const tbody = document.getElementById('tbody');
const totalEl = document.getElementById('total');
const searchInput = document.getElementById('search');
const clearSearch = document.getElementById('clearSearch');
const pageSizeSelect = document.getElementById('pageSize');
let students = load();
let editingIndex = null;
function load(){
try{
const raw = localStorage.getItem(STORAGE_KEY);
return raw ? JSON.parse(raw) : [];
}catch(e){
console.error('Failed to load students', e);
return [];
}
}
function save(){
localStorage.setItem(STORAGE_KEY, JSON.stringify(students));
render();
}
function validateUniqueStudentId(id, ignoreIndex = -1){
return students.findIndex((s,i)=> s.studentId.toLowerCase()===id.toLowerCase() && i!==ignoreIndex) === -1;
}
form.addEventListener('submit', e=>{
e.preventDefault();
const data = new FormData(form);
const student = Object.fromEntries(data.entries());
student.firstName = student.firstName.trim();
student.lastName = student.lastName.trim();
student.studentId = student.studentId.trim();
student.email = student.email.trim();
student.address = student.address.trim();
if(!validateUniqueStudentId(student.studentId)){
alert('Student ID already exists. Use a unique ID.');
return;
}
student.createdAt = new Date().toISOString();
students.unshift(student); // newest first
save();
form.reset();
alert('Student registered successfully.');
});
function render(){
// filter
const q = searchInput.value.trim().toLowerCase();
const filtered = students.filter(s=>{
if(!q) return true;
return (s.firstName + ' ' + s.lastName + ' ' + s.studentId + ' ' + s.email + ' ' + s.course).toLowerCase().includes(q);
});
totalEl.textContent = filtered.length;
// pagination (simple)
const pageSize = parseInt(pageSizeSelect.value,10) || 10;
const rows = filtered.slice(0, pageSize);
if(rows.length===0){
tbody.innerHTML = 'No students found.'
return;
}
tbody.innerHTML = rows.map((s, idx)=>{
const fullName = s.firstName + ' ' + s.lastName;
return `
${idx+1}
${escapeHtml(s.studentId)}${new Date(s.createdAt).toLocaleString()}
${escapeHtml(fullName)}
${escapeHtml(s.email)}
${escapeHtml(s.course)} Year ${escapeHtml(s.year)}
${escapeHtml(s.phone||'—')}
Edit
Delete
`
}).join('\n');
// attach handlers
Array.from(document.querySelectorAll('.edit')).forEach(b=>b.addEventListener('click', onEdit));
Array.from(document.querySelectorAll('.del')).forEach(b=>b.addEventListener('click', onDelete));
}
function getGlobalIndex(item){
// find index in students array (global index)
return students.findIndex(s=> s.studentId === item.studentId && s.email === item.email && s.createdAt === item.createdAt);
}
function onEdit(e){
const idx = Number(e.currentTarget.dataset.index);
if(idx showModal(false));
function showModal(v){
modal.style.display = v ? 'flex' : 'none';
}
editForm.addEventListener('submit', e=>{
e.preventDefault();
if(editingIndex === null) return;
const updated = {
...students[editingIndex],
firstName: document.getElementById('e_firstName').value.trim(),
lastName: document.getElementById('e_lastName').value.trim(),
studentId: document.getElementById('e_studentId').value.trim(),
email: document.getElementById('e_email').value.trim(),
course: document.getElementById('e_course').value,
year: document.getElementById('e_year').value,
address: document.getElementById('e_address').value.trim()
};
// ensure unique id
if(!validateUniqueStudentId(updated.studentId, editingIndex)){
alert('Student ID conflicts with another record. Use a unique ID.');
return;
}
students[editingIndex] = updated;
save();
showModal(false);
alert('Saved.');
});
// search handlers
searchInput.addEventListener('input', ()=> render());
clearSearch.addEventListener('click', ()=>{ searchInput.value=''; render(); });
pageSizeSelect.addEventListener('change', ()=> render());
// export csv
document.getElementById('exportCsv').addEventListener('click', ()=>{
if(students.length===0){ alert('No students to export.'); return; }
const headings = ['studentId','firstName','lastName','email','dob','phone','course','year','address','createdAt'];
const rows = students.map(s=> headings.map(h=> csvSafe(s[h]||'')).join(','));
const csv = [headings.join(','), ...rows].join('\n');
const blob = new Blob([csv], {type:'text/csv'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a'); a.href = url; a.download = 'students.csv'; a.click(); URL.revokeObjectURL(url);
});
// import csv (very forgiving)
document.getElementById('importCsvBtn').addEventListener('click', ()=> document.getElementById('importCsv').click());
document.getElementById('importCsv').addEventListener('change', async (ev)=>{
const file = ev.target.files[0];
if(!file) return;
const text = await file.text();
const lines = text.split(/\r?\n/).filter(Boolean);
if(lines.lengthh.trim());
const newStudents = lines.slice(1).map(l=>{
const vals = l.split(',');
const obj = {};
headers.forEach((h,i)=> obj[h]= vals[i] ? vals[i].trim() : '');
// normalize
obj.firstName = obj.firstName || '';
obj.lastName = obj.lastName || '';
obj.studentId = obj.studentId || ('imp-' + Math.random().toString(36).slice(2,8));
obj.email = obj.email || '';
obj.createdAt = obj.createdAt || new Date().toISOString();
return obj;
});
// avoid duplicates by studentId
const existingIds = new Set(students.map(s=>s.studentId.toLowerCase()));
const inserted = [];
for(const s of newStudents){
if(existingIds.has(s.studentId.toLowerCase())) continue;
students.unshift(s); existingIds.add(s.studentId.toLowerCase()); inserted.push(s);
}
save();
alert(`Imported ${inserted.length} records (duplicates skipped).`);
ev.target.value = null;
});
// utilities
function csvSafe(val){
const s = String(val||'');
if(s.includes(',') || s.includes('"') || s.includes('\n')) return '"' + s.replace(/"/g,'""') + '"';
return s;
}
function escapeHtml(unsafe){
if(!unsafe) return '';
return String(unsafe)
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, '& #039;');
}
// initial render
render();
// expose functions for debugging in console
window._students = students;
window._saveStudents = save;
( Done - I created a complete, single-file HTML app called student-registration.html in the canvas. It’s a fully functional, client-side student registration system with these features:
Responsive registration form (fields: first/last name, student ID, email, DOB, phone, course, year, address).
Client-side validation + unique-student-ID check.
Local persistence using localStorage so data remains in your browser.
List view with search, page-size limit, edit and delete (edit uses a modal).
CSV export and CSV import (duplicates skipped).
Simple, clean UI and accessible HTML.
How to use:
Open the file in your browser (double-click the HTML file or drag it into the browser).
Register students using the form - they’ll appear in the table below.
Use Export/Import buttons to move data as CSV.
If you want, I can:
Add server-side submission example (Node/Express) or show how to connect it to Firebase.
Convert the UI into React/Tailwind.
Add role-based fields, ID auto-generation, more validation rules, or printable reports.
Which of those would you like next? )
