Create One HTML File index.html Using Sublime Text 4 then copy this code and paste into index.html file
Code Examples
HTML5 + CSS + JS + JQuery + AJAX
<!DOCTYPE html>
<html>
<head>
<title>Student Academic Profile</title>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body style="margin:0; padding:0; font-family:Arial, sans-serif; background:#f3f6fa;">
<!-- Header Section -->
<div style="background:#1f3b57; color:white; text-align:center; padding:20px;">
<h1 style="margin:0; font-size:34px;">Student Academic Profile</h1>
</div>
<!-- Main Container -->
<div style="width:90%; max-width:650px; margin:35px auto; background:white; padding:28px; border-radius:14px; box-shadow:0 8px 25px rgba(0,0,0,0.15);">
<!-- Student Input Form -->
<form id="studentForm" style="border:1px solid #e0e0e0; padding:25px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.08);">
<label style="font-size:20px; font-weight:bold; display:block; margin-bottom:8px;">Student Name:</label>
<input type="text" id="studentName" style="width:100%; padding:14px; font-size:18px; border:1px solid #ccc; border-radius:8px; margin-bottom:18px; box-sizing:border-box;">
<label style="font-size:20px; font-weight:bold; display:block; margin-bottom:8px;">Roll Number:</label>
<input type="text" id="rollNumber" style="width:100%; padding:14px; font-size:18px; border:1px solid #ccc; border-radius:8px; margin-bottom:18px; box-sizing:border-box;">
<label style="font-size:20px; font-weight:bold; display:block; margin-bottom:8px;">Course Name:</label>
<input type="text" id="courseName" style="width:100%; padding:14px; font-size:18px; border:1px solid #ccc; border-radius:8px; margin-bottom:20px; box-sizing:border-box;">
<button type="button" id="searchBtn" style="width:100%; padding:15px; font-size:20px; font-weight:bold; color:white; background:#3498db; border:none; border-radius:8px; cursor:pointer;">
Search
</button>
</form>
<!-- AJAX Simulation Loading Section -->
<div id="loadingMsg" style="display:none; text-align:center; margin-top:22px; font-size:22px; font-weight:bold; color:#e67e22;">
Loading student data...
</div>
<!-- Output Display Section -->
<div id="outputSection" style="display:none; margin-top:25px; background:#eafaf1; border-left:6px solid #2ecc71; padding:22px; border-radius:8px; font-size:18px; line-height:1.7;">
<h2 style="margin-top:0; color:#000;">Student Details</h2>
<p style="margin:8px 0;"><b>Name:</b> <span id="showName"></span></p>
<p style="margin:8px 0;"><b>Roll Number:</b> <span id="showRoll"></span></p>
<p style="margin:8px 0;"><b>Course:</b> <span id="showCourse"></span></p>
<p style="margin:8px 0;"><b>Date & Time:</b> <span id="showDateTime"></span></p>
</div>
</div>
<!-- JavaScript and jQuery -->
<script>
$(document).ready(function () {
$("#searchBtn").click(function () {
var studentName = $("#studentName").val().trim();
var rollNumber = $("#rollNumber").val().trim();
var courseName = $("#courseName").val().trim();
if (studentName === "" || rollNumber === "" || courseName === "") {
alert("Please fill all fields");
return;
}
$("#outputSection").hide();
$("#loadingMsg").show();
setTimeout(function () {
var currentDateTime = new Date();
$("#showName").text(studentName);
$("#showRoll").text(rollNumber);
$("#showCourse").text(courseName);
$("#showDateTime").text(currentDateTime.toString());
$("#loadingMsg").hide();
$("#outputSection").fadeIn(1000);
$("#outputSection").children("p").css({
"font-size": "19px",
"color": "#000"
});
$("#outputSection").find("b").css({
"font-weight": "bold"
});
}, 2000);
});
});
</script>
</body>
</html>