JSFiddle - React, Tailwind, and code Playground

by Sub Taper

HTML

<h1>Calculator</h1>
<form class="form-horizontal center1">
	<div class="control-group">
		<label for="num1" class="control-label">Number1</label>
		<div class="controls">
			<input id="num1" type="number" placeholder="Enter an Integer">
		</div>
	</div>
	<div class="control-group">

		<label for="num2" class="control-label">Number2</label>
		<div class="controls">
			<input id="num2" type="number" placeholder="Enter an Integer">
		</div>
		<div class="control-group">

			<label for="options" class="control-label">Options</label>
			<div class="controls">
				<br>
				<select id="options"><option value="+">+</option>
					<option value="-">-</option>
					<option value="*">*</option>
					<option value="/">/</option></select>
			</div>
		</div>
		<div class="control-group">
			<div class="controls">
				<br>
				<button id="subm" type="submit" class="btn">Calculate</button>
			</div>

		</div>
		<div class="control-group">
			<div class="controls">
				<input id="cal" type="text" placeholder="Calculator output" disabled="true">
			</div>
		</div>
	</div>
</form>

JavaScript

window.onload = function(){
    console.log(document.getElementById("subm"))
    document.getElementById("subm").onclick=function(){
        alert("Hello WOrld");
        return false;
    }
}