Watch Video Now

Introduction

Welcome to Sarfaraz Coding Club, where we explore various programming concepts and create awesome practical applications. That can help you to polish your concepts and hands on practice.  In this post, we will guide you through the process of creating a result checking system using HTML, CSS, and JavaScript. By the way for large amount of Data we can create Result Checking System with PHP. But today i will tell you how you can create this on low scale means less data.  By following this tutorial, you will be able to build a simple web-based application that allows users to check their results by entering their names. You can also change the input  Let's dive in!

If you are learning code and you are beginner then join our Challenge and perform tasks to polish your coding knowledge. Visit Now

Setting Up the HTML Structure

To begin, let's set up the basic HTML structure for our result checking system. Copy the code below into an HTML file:



<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Check Result</title>
</head>
<body>
 <div class="container">
  <h3>Check Result Now</h3>
   <p>Enter your name to get result</p>
   <input type="text" id="sname" placeholder="Enter your name...">
   <button onclick="resultshow()">&#x2714;</button>
    <div class="resultcontainer">
  </div>
 </div>
</body>
</html>


Styling the Result Checking Interface

In the <style> section of the HTML code, you can see the CSS styles that will be applied to our result checking interface. These styles define the appearance of different elements such as the container, heading, input field, and result display area. Feel free to modify these styles according to your preferences you can also add Bootstrap to make it awesome!



*{
   margin:  0px;
   padding: 0px;
}
  .container{
     width: 800px;
     height: 300px;
     margin: auto;
     margin-top: 200px;
     padding: 15px;
     border: none;
     border-radius: 10px;
     box-shadow: 0px 0px 10px 2x gray;
     background-color: black;
}
   .container h3{
     font-size: 25px;
     color: white;
     font-weight: bold;
     text-transform: uppercase;
     font-family: Verdana;
     text-align: center;
     margin-top: 10px;
}
   .container p{
     font-size: 13px;
     color:aliceblue;
     text-transform: capitalize;
     font-family: verdana;
     margin-top: -3px;
     text-align: center;
}
   .container input{
      width: 90%;
      height: 20px;
      padding: 10px;
      margin-top: 20px;
      background-color: azure;
      color: black;
      font-weight: bold;
      font-size: 18px;
      margin-left: 15px;
      border: none;
      border-radius: 50px;
}
   .container input::placeholder{
      font-weight: 300;
}
   .container button{
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 100px;
      background-color: white;
      color: green;
      font-size: 20px;
      font-weight: bold;
}
   .container button:hover{
       color: white;
       background-color: black;
       border: 3px solid green;
}
   .resultcontainer{
       margin-top: 20px;
       color: white;
       font-size: 18px;
       text-align: center;
       font-family: verdana;
   }


Implementing the JavaScript Logic

Now let's move on to the JavaScript part of our code. Inside the <script> tags, paste the following code:


function resultshow() {
  var students = {
    SARFARAZ: {
      Bio: "98",
      Physics: "99",
      Chemistry: "78"
    },
    RIZWAN: {
      Bio: "70",
      Physics: "89",
      Chemistry: "64"
    },
    HAIDER: {
      Bio: "100",
      Physics: "68",
      Chemistry: "78"
    }
  };

  var sname = document.getElementById("sname").value;
  var input = sname.toUpperCase();
  var show = students[input];
  var showresult = document.getElementsByClassName("resultcontainer")[0];

  if (show == undefined) {
    showresult.innerHTML = "No Record Found!";
  } else {
    showresult.innerHTML = "Your Marks in Bio is " + show.Bio + "<br />";
    showresult.innerHTML += "Your Marks in Physics is " + show.Physics + "<br />";
    showresult.innerHTML += "Your Marks in Chemistry is " + show.Chemistry + "<br />";
  }
}
}

The JavaScript code defines a function called resultshow() that is triggered when the user clicks the result button. Inside this function, we have a predefined object named students that contains the records of different students and their corresponding marks in subjects such as Biology, Physics, and Chemistry you can replace student names by their Roll Numbers and add name with subjects and display it separately.

The function retrieves the input value entered by the user, converts it to uppercase for case-insensitive searching, and then searches for the input name within the students object. If a matching record is found, the function displays the marks of the student in the respective subjects. Otherwise, it displays a "No Record Found" message.

Conclusion

Congratulations! You have successfully created a result checking system using HTML, CSS, and JavaScript. This simple application allows users to enter their names and view their marks in various subjects. You can further enhance this system by integrating it with a backend database or adding more features based on your requirements.

Feel free to explore more projects and tutorials at Sarfaraz Coding Club to expand your coding skills. Please  Subscribe, Follow like, and share our content. Happy coding!