Write html applets with ChatGPT

In the process of numerical simulation, it is often necessary to repeatedly calculate some parameters, such as the common dimensionless parameters Reynolds number and Rayleigh number, etc.
Their expressions are as follows:
$$Ra=\frac{g\beta \Delta T{H}^{3}P}{n^2}$$
In order to determine this parameter, it is necessary to give $$g,b,\Delta T,H,Pr,The\; six\; quantities\; of\; \nu$$ are very inconvenient.
In order to ensure the change of Rayleigh number, we only need to change one of the six values, which is often chosen as$H.$ _ Other parameters are generally fixed, depending on the fluid, for example, for air, its physical parameters are basically determined, and, due to the Busineske assumption,$The\; selection\; of$$\Delta T$ is generally relatively fixed, often around 0-10. So, at$In\; addition\; to\; H$ , other parameters can basically be given by the following table:

$g$	9.81
$b$	3.36e-3
$\Delta T$	10
$n$	1.58e-5
$Pr$	0.71

The following functions can be realized by using the html applet:
1. Automatically preset the value, and you can input and modify it later
2. Calculate H according to Ra
3. Calculate Ra according to H

Very convenient.
The details of the page are as follows: It can be seen that some preset values ​​have been automatically completed. The

above program is completed with the help of ChatGPT, mainly modified by the code given by ChatGPT, which is very efficient.
It involves some html programming knowledge, which is recorded as follows:
There are two calculation programs, which are two form types.
The specific format can be modified in style:

form {
    
    
        float: left;
        margin-left: 350px;
      }

In order to distinguish the two forms, you can add id to the second form

<form id="form2">

Then

#form2 {
    
    
        float: right;
        margin-right: 350px;
      }

This allows one on the left and one on the right. But this is still not clear enough, we can continue to add titles to each form

      <fieldset>
        <legend>1、计算瑞利数</legend>
         <!-- <button type="submit">Submit</button> -->
      </fieldset>

It can also be formatted

 legend {
    
    
        font-size: 24px;
      }

The calculation part of the program is mainly in the script part

function addNumbers_Ra() {
    
    
        let g = document.getElementById("g").value;
        let beta = document.getElementById("beta").value;
        let deltaT = document.getElementById("deltaT").value;
        let H = document.getElementById("H").value;
        let Pr = document.getElementById("Pr").value;
        let nu = document.getElementById("nu").value;

        let result = Number(g)*Number(beta)*Number(deltaT)*Number(H)*Number(H)*Number(H)*Number(Pr) / Number(nu) / Number(nu)  ;
        document.getElementById("result").value = result;
      }

It is a very simple calculation program. At the same time, you need to pay attention to how to open the script in the script, and you need to call the math function

 let H2 = Math.pow(Number(Ra)*Number(nu2)*Number(nu2)/(Number(g2)*Number(beta2)*Number(deltaT2)*Number(Pr2)),1/3)  ;

In the input function, the preset value is set as follows, and it can be initialized in value

<label for="g">g（重力加速度）:</label>
<input type="number" id="g" name="g" value=9.81><br><br>

At the same time, the Greek letters in the code are pasted from what I found online, and there seems to be no problem.

In this part of the output result, call the function of the script to get the final result according to the value of the input

<input style="width: 150px; height: 50px;" type="button" id="myInput" value="calclate"  onclick="addNumbers_Ra()"><br><br>     
<label for="result">Ra(瑞利数)：</label>
<input type="text" id="result" name="result" readonly>

This is roughly the process. I don’t have any html foundation. If I learn from the Internet from scratch, it may take several days, but with the help of ChatGPT, it only took about two hours to get it done. It’s a magic tool.