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()">
        <h2>--------Roll--------</h2>
    
          <input type="button" value="Left↪" onclick="process1()">


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

            }
            system.out.prntln(bRoll)

          </script>
					
    

        <h2>----Front Pitch---- </h2>
  
          <input type="button" value="Up" onclick="process3()">
					
          <h1> </h1>
          <input type="button" value="Down" onclick="process4()">
					<script type=text/javascript>
					
					</script>

				<h2>
				--------Yaw--------
				</h2>

				<input type="button" value="Yaw Left" onclick="process5()">
          <input type="button" value="Yaw Right" onclick="process6()">
					<script type=text/javascript>
console.log(Yaw);
					
					</script>
      </center>
    </body>

  </html>

CSS

h1{
  size: 90px;
  color: white;
  background: darkred;
}
h2{
  color: white;
  background: darkgreen;
}
input{
  background: darkblue;
  color: white;
  
}
script{
   color: black;
}

JavaScript 1.7

var vtrue = true;
            var bRoll = 0;
						var altitude = 0;
						var Yaw = 0;
						
						function process1(){
						if(vtrue == true)
						{
						bRoll = 1;
            
						}
						}
						function process2() {
						if(vtrue == true)
						{
						bRoll = 2;
            
						}
						}
						function process3()
						{
						if(vtrue == true)
						{
						altitude = 1;
						}
						}
						function process4()
						{
						if(vtrue == true)
            
						{
						altitude = 2;
						}
						}
						function process5()
						{
						if(vtrue == true)
						{
						Yaw = 1;
            console.log(Yaw);
						}
						}
						function process6()
						{
						if(vtrue == true)
						{
						Yaw = 2;
            
						}
						}
						var phonetiltverticle = 0;
            var phonetilthorizontal = 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 ==...