Could you please comment this part of your code !

Thank you so much !

client.println("<script> function setMode(value) { var xhr = new XMLHttpRequest();"); 
client.println("xhr.open('GET', \"/?mode=\" + value + \"&\", true);"); 
client.println("xhr.send(); location.reload(true); } ");
client.println("function setTimer(value) { var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?timer=\" + value + \"&\", true);"); 
client.println("xhr.send(); location.reload(true); } ");
client.println("function setThreshold(value) { var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?ldrthreshold=\" + value + \"&\", true);"); 
client.println("xhr.send(); location.reload(true); } ");*/
client.println("function outputOn() { var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?state=on\", true);"); 
client.println("xhr.send(); location.reload(true); } ");
client.println("function outputOff() { var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?state=off\", true);"); 
client.println("xhr.send(); location.reload(true); } ");
client.println("function updateSensorReadings() { var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?sensor\", true);"); 
client.println("xhr.send(); location.reload(true); }</script></body></html>");

Hi Yves.

It is easier to understand if we get those lines of JavaScript out of the client.println commands and format it adequately.

So, we end up with something like this:

<script> 
  function setMode(value) { 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "/?mode=" + value + "&", true); 
    xhr.send(); location.reload(true);
  }
  function setTimer(value) { 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "/?timer=" + value + "&", true);
    xhr.send(); location.reload(true); 
  }
  function setThreshold(value) { 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "/?ldrthreshold=" + value + "&", true);
    xhr.send(); location.reload(true); 
  } 
  function outputOn() { var xhr = new XMLHttpRequest();
    xhr.open('GET', "/?state=on", true); 
    xhr.send(); location.reload(true); 
  }
  function outputOff() { var xhr = new XMLHttpRequest();
    xhr.open('GET', "/?state=off", true); 
    xhr.send(); location.reload(true); 
  } 
  function updateSensorReadings() { 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "/?sensor", true);   
    xhr.send(); location.reload(true); 
  }
</script>

Basically, we have JavaScript code that goes between the <script> and </script> tags in your HTML text.
What we’re doing here is creating Javascript functions that will be automatically executed when we do something on our page.
For example, when you select your mode, it will call the setMode() JavaScript function and pass as argument the mode you select. See it here:

client.println("<p><strong>Mode selected:</strong> " + modes[selectedMode] + "</p>");
client.println("<select id=\"mySelect\" onchange=\"setMode(this.value)\">");
client.println("<option>Change mode");
client.println("<option value=\"0\">Manual");
client.println("<option value=\"1\">Auto PIR");
client.println("<option value=\"2\">Auto LDR");
client.println("<option value=\"3\">Auto PIR and LDR</select>");

The function is this one:

function setMode(value) { 
  var xhr = new XMLHttpRequest(); 
  xhr.open('GET', "/?mode=" + value + "&", true); 
  xhr.send(); location.reload(true);
}

It basically sends a request to your ESP32 on the ?mode=value&true URL, so that the ESP32 knows you need to change mode.

Another example. When you set up your timer, it will call the setTimer() function and pass as argument whatever value you typed:

else if(selectedMode == 1) {
  client.println("<p>Timer (0 and 255 in seconds): <input type=\"number\" name=\"txt\" value=\"" + 
  String(EEPROM.read(2)) + "\" onchange=\"setTimer(this.value)\" min=\"0\" max=\"255\"></p>");
}

The function is this one:

function setTimer(value) { 
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "/?timer=" + value + "&", true);
  xhr.send(); location.reload(true); 
}

And it sends a request on the /?timer=value&true URL, so that the ESP32 knows, we need to change the timer.

The other functions work similarly.

I hope this is clear.

Regards,
Sara