Building a JEE Rank Calculator: A Step-by-Step Guide

Are you preparing for the Joint Entrance Examination (JEE) Mains? Wondering how to estimate your rank based on your score? Look no further! In this article, we'll break down the process of creating a simple yet effective JEE Rank Calculator using HTML, CSS, and JavaScript. This tool will help aspiring engineers gauge their performance and set realistic goals for their exam preparation.

Let's dive into the code and explore how this calculator works.

1. HTML Structure

First, let's look at the HTML structure of our calculator:

<!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>Jee Rank calculator | Calculate Your Jee Ranks in 2024 with Marks Obtained | Skytup Project</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <a href="https://www.skytup.com" target="_blank" style="text-decoration:none;">
            <h1>Calculate your Rank in JEE Mains 2024</h1>
        </a>
        <h5 class="nta-result">Your estimated Rank:</h5>
        <h3 id="result" class="nta-result"></h3>
        <form id="jee-form">
            <input type='tel' class="jee-score" placeholder='Number of candidates appeared in exam' value="1410700" pattern="^[0-9]{1,10}$" required>
            <input type='tel' class="jee-score" maxlength="10" placeholder='Enter your NTA score or Percentile' pattern="^[\.0-9]{1,10}$" required>
            <button type="submit">Calculate</button>
            <p>According to approx 14 lakh students appeared in JEE Mains 2024, Skytup is calculating your rank.</p>
        </form>
    </div>
    <a href="https://www.skytup.com" target="_blank" style="text-decoration:none;">
        <h3 style="text-align:center;margin:1rem; color:green">Made by Skytup</h3>
        <i> This was my NTA score in 2024 Jee Mains Exam</i><br>
        <img src="https://i.postimg.cc/fWVxCWGQ/image.png" style="max-width:100%;" />
    </a>
</body>
</html>

This HTML structure creates a simple form with two input fields: one for the total number of candidates and another for the user's NTA score or percentile. The form is wrapped in a container div for styling purposes.

2. CSS Styling

        * {
            box-sizing: border-box;
        }

        body {
            font-family: "Arial", sans-serif;
            text-align: center;
            background: #f9f9f9;
            /* overflow: hidden; */
            margin: 0;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            margin-top: 50px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
            font-family: sky-font-FiraSansCondensed-Black;
        }

        .nta-result {
            color: green;
            font-size: 18px;
            text-align: center;
            margin-bottom: 10px;
        }

        input,
        button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        p {
            font-size: 14px;
            color: #777;
            text-align: center;
            margin-top: 10px;
        }

Now, let's add some style to make our calculator visually appealing:

This CSS creates a clean, modern look for our calculator. The container is centered on the page with a white background and subtle box shadow. Input fields and buttons are styled for better usability.

3. JavaScript Logic

Finally, let's implement the calculation logic using JavaScript:

        document.getElementById('jee-form').addEventListener('submit', (event) => {
            event.preventDefault();
            let score = document.querySelectorAll('.jee-score');
            let ans = (100 - score[1].value) * (score[0].value / 100);
            let cutOff = 250000;
            ans = ans.toFixed(0);
            let result = document.getElementById('result');
            if (ans == 0)
                ans++;
            if (ans > cutOff) {
                result.style.color = 'red';
                result.innerHTML = ans + '<br><p style="font-size:17px">You haven\'t qualified for JEE Advanced </p>';
            } else if (ans < 0) {
                result.style.color = 'gold';
                result.innerHTML = "Invalid NTA score";
                score[1].focus();
            } else if (ans >= 0 && ans <= 500) {
                result.style.color = 'green';
                result.innerHTML = ans + '<br><p style="font-size:22px;"> Congratulations!</p><p class="sky-font-RubikGemstones" style="color:blue; font-size:25px;"> साले टाॅपर ! </p>';
                alert(' कंही तू ही तो नहीं है शर्मा जी का लौंडा!');
            } else if (ans > 500 && ans < 10000) {
                result.style.color = 'green';
                result.innerHTML = ans + '<br><p style="font-size:22px;"> Congratulations!<br> </p><p style="font-size:18px;">  पार्टी तो बनती है मेरे दोस्त </p>';
            } else {
                result.style.color = 'green';
                result.innerHTML = ans + '<br><p style="font-size:22px;"> Congratulations!</p><p style="font-size:16px;"> 😎 आज तो BOTTLE खुलेगी 😎 </p>';
            }
        });

This JavaScript code handles the form submission and calculates the estimated rank based on the user's input. It also provides different messages based on the calculated rank, adding a touch of humor to the results.

Here is my Nta Score in 2024 Jee Mains Exam

मेरी रैंक आई 2 लाख कुछ

How this Calculator Works:

The user enters the total number of candidates and their NTA score or percentile.
The script calculates the rank using the formula: (100 - score) * (total candidates / 100).
The result is then displayed with a congratulatory message or advice based on the calculated rank.
If the rank is above the cutoff (250,000), it indicates that the user hasn't qualified for JEE Advanced.

This JEE Rank Calculator is a fun and useful tool for students preparing for the JEE Mains exam. It provides a quick estimate of their potential rank, helping them gauge their performance and set goals for improvement.

Remember, while this calculator can give you a rough idea of your standing, it's important to focus on consistent preparation and give your best effort in the actual exam. Good luck to all JEE aspirants!

Lets Make a JEE Rank Calculator: Estimate Your 2024 JEE Mains Rank with HTML, CSS, and JavaScript

Comments