Scribd
Upload
8 views

Student Mark List

The document outlines a student mark list project created using HTML, CSS, and JavaScript for a course on Internet and Web Technologies. It includes a form for entering student details and marks, along with a table to display the results, indicating whether each student has passed or failed based on their marks. The document also contains the necessary coding for the webpage's structure, styling, and functionality to add and display student information dynamically.

Uploaded by

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

Student Mark List

The document outlines a student mark list project created using HTML, CSS, and JavaScript for a course on Internet and Web Technologies. It includes a form for entering student details and marks, along with a table to display the results, indicating whether each student has passed or failed based on their marks. The document also contains the necessary coding for the webpage's structure, styling, and functionality to add and display student information dynamically.

Uploaded by

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

Assignment-I

Name : R.Ganesh
Roll no. : 22SBCA028
Class : III B.Com, (C.A) ‘A’
Title : Student Mark List -
HTML,CSS,JS
Subject : Fundamentals of Internet
and Web Technologies
Subject code : CCAJC63
Date : 22-01-2025
FUNDAMENTALS OF INTERNET & WEB TECHNOLOGIES
Student Mark List
Coding:

HTML (HyperText Markup Language):


// student.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Mark List</title>
<link rel="stylesheet" href="student styles.css">
</head>
<body>
<div class="container">
<h1>Student Mark List</h1>
<form id="studentForm">
<label for="name">Student Name:</label>
<input type="text" id="name" placeholder="Enter name" required>

<label for="roll">Roll Number:</label>


<input type="number" id="roll" placeholder="Enter roll number" required>

<label for="marks">Marks (out of 100):</label>


<input type="number" id="marks" placeholder="Enter marks" min="0" max="100"
required>

<button type="button" onclick="addStudent()">Add Student</button>


</form>

<h2>Mark List</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Roll Number</th>
<th>Marks</th>
<th>Result</th>
</tr>
</thead>
<tbody id="markList">
<!-- Student rows will be inserted here -->
</tbody>
</table>
</div>
<script src="student script.js"></script>
</body>
</html>

CSS (Cascading Style Sheet):


/*student styles *?
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #43e97b, #38f9d7);
margin: 0;
padding: 20px;
}

.container {
width: 500px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
}

h1, h2 {
text-align: center;
}

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

input {
width: 100%;
padding: 8px;
margin: 5px 0 15px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
width: 100%;
padding: 10px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background: #45a049;
}

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

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

th {
background-color: #f2f2f2;
}

.result-pass {
color: green;
}

.result-fail {
color: red;
}
JavaScript:
//Calendar Script
function addStudent() {
const name = document.getElementById('name').value.trim();
const roll = document.getElementById('roll').value.trim();
const marks = document.getElementById('marks').value.trim();

if (name === "" || roll === "" || marks === "") {


alert("All fields are required.");
return;
}

const marksInt = parseInt(marks);


if (isNaN(marksInt) || marksInt < 0 || marksInt > 100) {
alert("Please enter valid marks between 0 and 100.");
return;
}

const result = marksInt >= 40 ? 'Pass' : 'Fail';


const resultClass = marksInt >= 40 ? 'result-pass' : 'result-fail';

const row = `
<tr>
<td>${name}</td>
<td>${roll}</td>
<td>${marksInt}</td>
<td class="${resultClass}">${result}</td>
</tr>
`;

document.getElementById('markList').insertAdjacentHTML('beforeend', row);
clearInputs();
}

function clearInputs() {
document.getElementById('name').value = '';
document.getElementById('roll').value = '';
document.getElementById('marks').value = '';
}
Output:

You might also like