#      
## Overview

In HTML, the `min` and `max` attributes are used to set the range of values for the `<input>` element. The **`min` attribute** sets the minimum value for the `<input>` element, while the **`max` attribute** sets the maximum value for the `<input>` element. 

> We can use the min/max attribute with the following data types:
> - Data
> - Time
> - Week
> - Range
> - Number
> - Month

## Syntax

---
```html
<input max="number|date">
<input min="number|date">
```
---
## Parameters

- **`number`**: This is used to specify the maximum/minimum number that is allowed.

- **`date`**: This is used to specify the maximum/minimum date that is allowed.

## Code example

The basic HTML code to demonstrate the use of the `min`/`max` attribute is as follows:

<html>
   <body>
      <form action = "" method = "get">
         Select any number between 1 to 50
         <input type = "number" name="num" min = "1" max = "50"><br>
         <input type = "submit" value = "Submit">
      </form>
   </body>
</html>

document.addEventListener("DOMContentLoaded", function () {
  pTag = document.querySelector("div");
  newVal = document.createElement("p");
  newVal.innerHTML = 'Hello, Hello';
  pTag.appendChild(newVal);
});

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

var TestResult = function() {
  this.succeeded = false;
  this.reason = "";
  this.input = "";
  this.expected_output = "";
  this.actual_output = "";
};

var executeTests = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];

  const jsdom = require("jsdom");
  const { JSDOM } = jsdom;
  const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

  const pTag = dom2.window.document.querySelector("p");

  const result = new TestResult();
  result.expected_output = "Hello World";
  result.input = "Html page";

  if (!pTag) {
    result.actual_output = "null";
    result.succeeded = false;
    result.reason = "No p tag found";
  } else {
    const pTagText = pTag ? pTag.textContent : "";
    result.actual_output = pTagText;
    if (pTagText.trim() != "Hello World") {
      result.reason = "Expected output (Hello World in a p tag) did not match";
      result.succeeded = false;
    } else {
      result.succeeded = true;
      result.reason = "Found p tag with Hello World";
    }
  }

  results.push(result);

  return results;
};

// Async Tests Example
/*
var executeTestsAsync = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];
  return new Promise(resolve => {

    const jsdom = require("jsdom");
    const { JSDOM } = jsdom;
    const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

    if (!dom2.window.onModulesLoaded) {
      console.log("window.onModulesLoaded not found!");
    	resolve(results);
    }
    dom2.window.onModulesLoaded.then(()=>{
      const pTag = dom2.window.document.querySelector("p");

      const result = new TestResult();
      result.expected_output = "Hello World";
      result.input = "Html page";

      if (!pTag) {
        result.actual_output = "null";
        result.succeeded = false;
        result.reason = "No p tag found";
      } else {
        const pTagText = pTag ? pTag.textContent : "";
        result.actual_output = pTagText;
        if (pTagText.trim() != "Hello World") {
          result.reason = "Expected output (Hello World in a p tag) did not match";
          result.succeeded = false;
        } else {
          result.succeeded = true;
          result.reason = "Found p tag with Hello World";
        }
      }

      results.push(result);
      resolve(results);
    });
  });
};
*/

codemirror

## Code explanation

In the example above, we can see that we specified the minimum and maximum range between 1 to 50 on **line 5** under the "HTML" tab. Hence, we can see in the "Output" tab that the numbers allowed are only between the given range. We can also define the range according to our own choice. 

What are the min/max attributes in HTML?

Overview

Syntax

Parameters

Code example

Code explanation