JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Displays -->
<input type="text" name="display" id="display" value="0" class="display">
<input type="text" name="subdisplay" id="subdisplay" class="subdisplay" readonly>
<!-- Calculating operations -->
<input type="button" onclick="print_equal()" id="equal" value="=">
<input type="button" onclick="num_add()" id="plus" value="+">
<!-- Reset -->
<input type="button" value="C" onClick="reset()" class="reset">
JavaScript
var number = 0; //the result
var operation = ' '; //the chosen calculating operation
var temp_Val = 0; //the last entered value (for the subdisplay)
var print_equal = function () {
var displayVal = document.getElementById("display");
displayVal.value = number;
};
var num_add = function () {
var displayVal = document.getElementById("display");
temp_Val = displayVal.value; //saves the value of the display (for the subdisplay)
console.log(temp_Val); //schreibt den Wert des Displays auf die Konsole
number += parseFloat(displayVal.value); //calculates the result
operation = '+'; //saves the used operation (for the subdisplay)
print_subdisplay(); //runs the function that's building the value of the subdisplay
displayVal.value = ""; //resets the main display
};
var print_subdisplay = function () {
var subdisplayVal = document.getElementById("subdisplay");
subdisplayVal.value = temp_Val + operation; //creates a String with both the first entered value and the operation
};
function reset() {
number = 0;
operation = ' ';
var displayVal = document.getElementById("display");
displayVal.value = "";
}