Grade convertor.html

Replit Help
1 
<!DOCTYPE html>
<html>
<head>
  <title>Grade Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
    }
    h1 {
      text-align: center;
    }
    label {
      display: block;
      margin-bottom: 10px;
    }
    input[type="number"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    button {
      display: block;
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #result {
      margin-top: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Grade Converter</h1>
    <label for="marks">Enter Marks:</label>
    <input type="number" id="marks" placeholder="Enter marks">
    <button onclick="convertGrade()">Convert</button>
    <div id="result"></div>
  </div>

  <script>
    function convertGrade() {
      var marks = document.getElementById('marks').value;
      var grade;

      if (marks >= 90) {
        grade = 'A+';
      } else if (marks >= 80) {
        grade = 'A';
      } else if (marks >= 70) {
        grade = 'B';
      } else if (marks >= 60) {
        grade = 'C';
      } else if (marks >= 50) {
        grade = 'D';
      } else {
        grade = 'F';
      }

      document.getElementById('result').textContent = 'Grade: ' + grade;
    }
  </script>
</body>
</html>
2

Hi @LakshLahot , welcome to the forums! Could you provide more details on the problem you are facing?

3

@LakshLahot
If you are trying to say that the file does notrun, rename this grade converter file to index.html

4

@LakshLahot If you are encountering a problem that I have not listed, please feel free to tell me!

5

Sadly, I don’t believe it works like this for HTML, CSS, JS Repls.

3 Likes
6

Yes. So OP needs to rename Grade convertor.html to index.html

3 Likes