Student Grading Form Example In JavaScript

<!DOCTYPE html> <!-- Tells the browser this is an HTML5 document -->
<html>
<head>
    <title>Student Grading System</title> <!-- Title of the webpage -->
</head>
<body>

<h2>Student Grading Form</h2> <!-- Heading displayed on the page -->

<!-- The form where user inputs student data -->
<form id="gradeForm">
    <!-- Input for student name -->
    <label>Student Name:</label><br>
    <input type="text" id="name" required><br><br>

    <!-- Input for student ID -->
    <label>Student ID:</label><br>
    <input type="text" id="studentId" required><br><br>

    <!-- Input for score (0–100) -->
    <label>Score:</label><br>
    <input type="number" id="score" min="0" max="100" required><br><br>

    <!-- Button the user clicks to calculate grade -->
    <button type="button" onclick="calculateGrade()">Submit</button>
</form>

<!-- Area where the result will be shown -->
<h3>Result:</h3>
<div id="result"></div>

<script>
// This function runs when the "Submit" button is clicked
function calculateGrade() {

    // Get the value of the "name" input field
    let name = document.getElementById("name").value;

    // Get the value of the "studentId" input field
    let studentId = document.getElementById("studentId").value;

    // Get the numeric value of the "score" input field
    let score = Number(document.getElementById("score").value);

    // Variable to store the grade
    let grade;

    // Check score and assign the correct grade
    if (score >= 90) grade = "A";        // Score 90–100
    else if (score >= 80) grade = "B";   // Score 80–89
    else if (score >= 70) grade = "C";   // Score 70–79
    else if (score >= 60) grade = "D";   // Score 60–69
    else grade = "F";                    // Score below 60

    // Display all results inside the "result" div
    document.getElementById("result").innerHTML = `
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>ID:</strong> ${studentId}</p>
        <p><strong>Score:</strong> ${score}</p>
        <p><strong>Grade:</strong> ${grade}</p>
    `;
}
</script>

</body>
</html>

Simple Calculator Example in JavaScript

<head>
  <title>Simple Calculator</title>
</head>
<body>
  <h2>Calculator</h2>

  <input id="num1" type="number" placeholder="Number 1">
  <input id="num2" type="number" placeholder="Number 2">

  <select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>

  <button onclick="calculate()">Calculate</button>

  <p id="result"></p>

  <script>
    function calculate() {
      const num1 = parseFloat(document.getElementById("num1").value);
      const num2 = parseFloat(document.getElementById("num2").value);
      const op = document.getElementById("operator").value;
      let result;

      switch (op) {
        case '+': result = num1 + num2; break;
        case '-': result = num1 - num2; break;
        case '*': result = num1 * num2; break;
        case '/': result = num2 !== 0 ? num1 / num2 : "Error: Divide by zero"; break;
        default: result = "Invalid operator";
      }

      document.getElementById("result").innerText = "Result: " + result;
    }
  </script>
</body>
</html>

Cheat Sheet

Basics

Include scripts, comments, and simple examples.

<!-- Inline -->
<script>
  // JS goes here
  console.log('Hello world');
</script>

<!-- External file -->
<script src="app.js"></script>

Variables & Types

Use let/const for block scope; var is function-scoped.

// Declaration examples
var legacy = 'hello';
let counter = 0;
const PI = 3.14159;

// Common types
let name = "Jane";           // string
let isActive = true;         // boolean
let scores = [10, 20, 30];   // array
let user = { id: 1, name: 'J' }; // object

Arrays

Common methods for manipulating arrays.

const fruits = ["Banana","Apple","Pear"];
fruits.push("Orange");          // add
fruits.pop();                   // remove last
fruits.includes("Apple");       // true
const part = fruits.slice(1,3); // shallow copy portion
fruits.splice(2,1, "Kiwi");     // remove & replace

Operators

Arithmetic, comparison, logical.

5 + 3;   // 8
10 % 3;    // 1 remainder
x === y;   // strict equality
x !== y;   // not equal
a && b;    // logical AND
a || b;    // logical OR
!flag;     // logical NOT

Functions

Classic, arrow, default params, IIFE.

// Classic
function greet(name){ return `Hello ${name}`; }

// Arrow
const add = (a,b) => a + b;

// Default param
function welcome(user = 'Guest'){ console.log(user); }

// IIFE (immediately-invoked)
(function(){ console.log('Init'); })();

Loops

for, while, for…of, break/continue.

// for
for(let i=0;i<5;i++){ console.log(i); }

// while
let n=3; while(n--){console.log(n);}

// for...of for arrays
for(const v of [1,2,3]) { console.log(v); }

// break & continue
for(let i=0;i<5;i++){
  if(i===2) continue;
  if(i===4) break;
}

If / Else

Conditional logic with ternary shortcuts.

if(age >= 18){
  console.log('Adult');
} else if(age >= 13){
  console.log('Teen');
} else {
  console.log('Child');
}

// ternary
const status = age >= 18 ? 'Adult' : 'Minor';

Strings

Common methods & escape sequences.

const s = "JavaScript";
s.toLowerCase();
s.toUpperCase();
s.includes("Script");
s.replace("Java","ECMA");
s.slice(0,4);   // "Java"
// escapes: \n, \t, \', \"

Regular Expressions

Patterns, flags, common usage.

// flags: i (ignore), g (global), m (multiline)
const rx = /\\d+/g;
"abc123".match(rx);       // ["123"]
/^[A-Z]/.test("Hello");   // true if starts with capital

Numbers & Math

Parsing, Math helper methods.

Number("42");      // 42
parseInt("10px");    // 10
parseFloat("3.14");  // 3.14

Math.random();       // 0..1
Math.round(2.7);     // 3
Math.max(1,5,3);     // 5
Math.sqrt(16);       // 4

Dates

Create and manipulate dates.

const now = new Date();
const custom = new Date(2025, 11, 25); // year, monthIndex(0-11), day
now.getFullYear();
now.getMonth();    // 0-11
now.getTime();     // ms since 1970

DOM (Document)

Select elements, update content, create nodes.

// Select
const el = document.getElementById('title');
const firstBtn = document.querySelector('.btn');

// Update
el.textContent = 'New Title';
el.innerHTML = '<strong>Bold</strong>';

// Create / append
const div = document.createElement('div');
div.textContent = 'Hi';
document.body.appendChild(div);

Browser & Window

Window methods & properties.

alert('Hi');
console.log(window.location.href);
setTimeout(()=>console.log('later'), 1000);
localStorage.setItem('k','v');

Events

Listening patterns and common event names.

// Click
button.addEventListener('click', (e) => {
  console.log('clicked', e.target);
});

// Keyboard
window.addEventListener('keydown', (e) => {
  if(e.key === 'Enter') console.log('enter pressed');
});

Errors & Debugging

try/catch and useful console tools.

try {
  mightFail();
} catch(err) {
  console.error('Error:', err.message);
} finally {
  console.log('cleanup');
}

// console methods: log, warn, error, table, group

Tip: Use the copy buttons to quickly paste examples into your editor.

Java Script Exam 2

JavaScript Exam 1

JavaScript Operators Quiz

Client-Side Validated Contact Form Using HTML and JavaScript

This code implements a simple HTML contact form and includes JavaScript-based client-side validation with fully commented lines explaining each step. The HTML structure defines labeled input fields for name, email, subject, and message, along with hidden inline error messages that appear only when validation fails. The form intentionally disables the browser’s default validation using novalidate, allowing custom JavaScript logic to run instead. In the JavaScript section, the script retrieves references to all form fields and their corresponding error display elements, defines a lightweight email-format check, and provides helper functions to toggle error visibility. The main validation function trims and checks each field for minimum length or proper formatting, dynamically showing or hiding errors. When the form is submitted, the script prevents the default submission, validates all fields, displays a success message if everything passes, and resets the form. This combination of HTML and JavaScript demonstrates clear input handling, user feedback, and form-validation workflow for a basic client-side contact form.

<!doctype html> <!-- Tells the browser this is an HTML5 document -->
<html lang="en"> <!-- Sets the language of the page to English -->
<head> <!-- Head section: contains metadata and the title -->
  <meta charset="utf-8"> <!-- Sets character encoding to UTF-8 -->
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Makes the page responsive on mobile -->
  <title>Simple Contact Form</title> <!-- The page title displayed in the browser tab -->
</head>
<body> <!-- The visible body content begins -->

  <h2>Contact Us</h2> <!-- Heading for the page -->

  <!-- Form element; novalidate disables browser’s default validation -->
  <form id="contactForm" novalidate> <!-- The form container -->

    <label for="name">Name</label> <!-- Label describing the input field -->
    <input type="text" id="name" name="name" placeholder="Your full name"> <!-- Text input for the name -->
    <div id="nameError" style="color:red; display:none;"> <!-- Error message, hidden until needed -->
      Please enter your name (at least 2 characters).
    </div>
    <br><br> <!-- Line breaks for spacing -->

    <label for="email">Email</label> <!-- Label for email field -->
    <input type="email" id="email" name="email" placeholder="you@example.com"> <!-- Email input -->
    <div id="emailError" style="color:red; display:none;"> <!-- Email error message -->
      Please enter a valid email address.
    </div>
    <br><br>

    <label for="subject">Subject</label> <!-- Label for subject -->
    <input type="text" id="subject" name="subject" placeholder="Subject"> <!-- Subject input field -->
    <div id="subjectError" style="color:red; display:none;"> <!-- Subject error message -->
      Subject must be at least 4 characters.
    </div>
    <br><br>

    <label for="message">Message</label> <!-- Label for message textarea -->
    <textarea id="message" name="message" placeholder="Write your message here..."></textarea> <!-- Message box -->
    <div id="messageError" style="color:red; display:none;"> <!-- Message error element -->
      Message must be at least 10 characters.
    </div>
    <br><br>

    <button type="submit">Send Message</button> <!-- Submit button -->

    <div id="successMessage" style="color:green; display:none;"> <!-- Success text shown only on valid submission -->
      Your message was sent successfully! (Demo only)
    </div>

  </form> <!-- End of form -->

  <script> <!-- Begin JavaScript validation code -->

    const form = document.getElementById('contactForm'); // Grab the form element
    const nameInput = document.getElementById('name'); // Reference to name field
    const emailInput = document.getElementById('email'); // Reference to email field
    const subjectInput = document.getElementById('subject'); // Reference to subject field
    const messageInput = document.getElementById('message'); // Reference to message textarea

    const nameError = document.getElementById('nameError'); // Reference to name error box
    const emailError = document.getElementById('emailError'); // Reference to email error box
    const subjectError = document.getElementById('subjectError'); // Reference to subject error box
    const messageError = document.getElementById('messageError'); // Reference to message error box
    const successMessage = document.getElementById('successMessage'); // Reference for success feedback

    // Basic email validation function (checks for @ and .)
    function isValidEmail(email) { // Function definition
      return email.includes('@') && email.includes('.') && email.indexOf('@') > 0; // Returns true if email looks valid
    }

    // Show or hide an error message
    function showError(element, show) { // element = target error box, show = boolean
      element.style.display = show ? 'block' : 'none'; // Toggles display accordingly
    }

    // Main validation routine
    function validateForm() { // Runs when form is submitted
      let valid = true; // Assume valid until a rule fails

      const name = nameInput.value.trim(); // Get trimmed name value
      const email = emailInput.value.trim(); // Get trimmed email
      const subject = subjectInput.value.trim(); // Get trimmed subject
      const message = messageInput.value.trim(); // Get trimmed message

      if (name.length < 2) { // If name is too short
        showError(nameError, true); // Show name error
        valid = false; // Mark form invalid
      } else showError(nameError, false); // Hide error

      if (!isValidEmail(email)) { // If email format is bad
        showError(emailError, true); // Show email error
        valid = false; // Mark form invalid
      } else showError(emailError, false); // Hide error

      if (subject.length < 4) { // If subject too short
        showError(subjectError, true); // Show subject error
        valid = false;
      } else showError(subjectError, false);

      if (message.length < 10) { // If message too short
        showError(messageError, true); // Show error
        valid = false;
      } else showError(messageError, false);

      return valid; // Return true only if all fields pass
    }

    // Handle form submission
    form.addEventListener('submit', function(event) { // Listener for clicking submit
      event.preventDefault(); // Prevent actual form submission
      successMessage.style.display = 'none'; // Hide success message each attempt

      const valid = validateForm(); // Run validation checks

      if (valid) { // If all fields passed
        successMessage.style.display = 'block'; // Show success message
        form.reset(); // Clear all fields
      }
    });

  </script> <!-- End JavaScript block -->

</body>
</html>

Skills – Learn Online

Category: JavaScript