JSFiddle - React, Tailwind, and code Playground

by BenjaminDietrich

HTML

<!DATATYPE html>
  <html>

    <body>
      <center>
        <h1>
          Manual Control Drone
        </h1>

         <input type="button" value="Take Over" onclick="process()">
        <h3>--------Roll--------</h3>
        <form name=Roll>
          <input type="button" value="Left↪" onclick="process1()">


          <input type="button" value="↩Right" onclick="process2()">
          <script type="text/javascript">

            }
            system.out.prntln(bRoll)

          </script>
					
        </form>

        <h3>----Front Pitch---- </h3>
        <form name="Altitude">
          <input type="button" value="Up" onclick="process3()">
					
          <h3> </h3>
          <input type="button" value="Down" onclick="process4()">
					<script type=text/javascript>
					
					</script>
        </form>
				<h3>
				--------Yaw--------
				</h3>
				<form name=Yaw>
				<input type="button" value="Left" onclick="process5()">
          <input type="button" value="Right" onclick="process6()">
					<script type=text/javascript>

					
					
					</script>
				</form>
      </center>
    </body>

  </html>

CSS

h1{
  color:white;
  background:darkblue;
}
h3{
  color:white;
  background:darkgreen;
}
button{
  font:12px;
}

JavaScript

function process(){
						var vtrue = true;
						}
						function process1() {
						if(vtrue == true)
						{
						var bRoll = 1;
						}
						}
						function process2() {
						if(vtrue == true)
						{
						bRoll = 2;
						}
						}
						function process3()
						{
						if(vtrue == true)
						{
						var altitude = 1;
						}
						}
						function process4()
						{
						if(vtrue == true)
						{
						altitude = 2;
						}
						}
						function process5()
						{
						if(vtrue == true)
						{
						var Yaw = 1;
						}
						}
						function process6()
						{
						if(vtrue == true)
						{
						Yaw = 2;
						}
						}
						var phonetiltverticle = 0;
						var droneMotorRR = 0; 
						var droneMotorRL = 0;
						var droneMotorFR = 0;
						var droneMotorFL = 0;
						if (phonetiltverticle == 1)
						{
							droneMotorRR = droneMotorRR + 10;
							droneMotorRL = droneMotorRL + 10;
							droneMotorFR = droneMotorFR - 10;
							droneMotorFL = droneMotorFL - 10;
						}
						if (phonetiltverticle == -1)
						{
							droneMotorFR = droneMotorFR + 10;
							droneMotorFL = droneMotorFL + 10;
							droneMotorRR = droneMotorRR - 10;
							droneMotorRL = droneMotorRL - 10;
						}
						if (phonetilthorizontal == -1)
						{
							droneMotorFR = droneMotorFR -10;
							droneMotorFL = droneMotorFL + 10;
							droneMotorRR = droneMotorRR - 10;
							droneMotorRL = droneMotorRL + 10;
						}
						if (droneMotorF == 1)
						{
							droneMotorRR = droneMotorRR + 10;
							droneMotorRL = droneMotorRL - 10;
							droneMotorFR = droneMotorFR + 10;
							droneMotorFL = droneMotorFL - 10;
						}
						if (droneMotorRL == -1)
						{
							droneMotorFR = 50;
							droneMotorFL = 50;
							droneMotorRR = 50;
							droneMotorRL = 50;
						}
						if(droneMotorRR == 0)
						{
							droneMotorRR = 50;
							droneMotorRL = 50;
							droneMotorFR = 50;
							droneMotorFL = 50;
						}
						if(droneMotorFR ==...