useless

Basiert auf dem Projekt aus Kapitel 2 inWriting Computer Code von Chris Minnick and Eva Holland

by Porexii

HTML

<div id="rechner">
    <header>
    <h1>JS Super-Rechner</h1>
    <p>Der Super-Rechner zeigt das Ergebnis von Rechnungen mit verschiedenen Operatoren an</p>
    </header>
    <div class="eingabebereich">
    <h2>Schritt 1: Gib den 1. Operanden ein</h2>
        <input type="text" id="operand1" value="1" />
        <select id="operand1-type">
            <option value="number">Zahl</option>
            <option value="text">Text</option>
                    </select>
    </div>
    
    <div class="eingabebereich">
    <h2>Schritt 2: Wähle einen Operator</h2>
        <div class="operator-optionen">
        <h3>Mathematische Operatoren</h3>

        <input type="radio" name="operator" value="+" checked>+&nbsp;
        <input type="radio" name="operator" value="-">-&nbsp;
        <input type="radio" name="operator" value="*">*&nbsp;
        <input type="radio" name="operator" value="/">/&nbsp;
        <!--<input type="radio" name="operator" value="%">%&nbsp;-->
     
        <h3>Text-Operator</h3>
        <input type="radio" name="operator" value="concat">+ (füge zusammen)&nbsp;
            <!--
        <h3>Comparison Operators</h3>
        <input type="radio" name="operator" value="==">==&nbsp;
        <input type="radio" name="operator" value="===">===&nbsp;
        <input type="radio" name="operator" value="!=">!=&nbsp;
        <input type="radio" name="operator" value="!==">!==&nbsp;
        <input type="radio" name="operator" value=">">&gt;&nbsp;
        <input type="radio" name="operator" value=">=">&gt;=&nbsp;
        <input type="radio" name="operator" value="<">&lt;&nbsp;
        <input type="radio" name="operator" value="<=">&lt;=&nbsp;
        -->
        </div>
    </div>
            
    <div class="eingabebereich">
    <h2>Schritt 3: Gib den 2. Operanden ein</h2>
    <input type="text" id="operand2" value="1">
    <select id="operand2-type">
        <option value="number">Zahl</option>
        <option value="text">Text</option>
    </select>
    </div>
 ...

CSS

body {
    font-family: "Courier New", Courier, monospace;
    font-size: .85em;
}
header { 
    text-align: center;
}
h2 {
    text-align: center;
    font-size: 1.2em;
    border-top: 2px dashed yellow;
    border-bottom: 2px dashed yellow;
}
input[type=text] {
    width: 40px;
    height: 40px;
    margin-left: 20px;
    background-color: #DADADA;
    font-size: 1.2em;
}
input[type=submit] {
    width: 200px;
    font-size: 2em;
}
#rechner {
    border: 1px solid #dadada;
    border-radius: 4px;
    padding: 4px;
}
.eingabebereich {
    background-color: #42FF8C;
    padding: 8px;
    margin: 8px;
    text-align: center;
    border-radius: 8px;
}
.operator-optionen {
    text-align: left;
}
.ausgabebereich {
    background-color: #333333;
    color: #FFFFFF;
    padding: 8px;
    margin: 8px;
    font-size: 1.5em;
}

JavaScript

//wenn die Schaltfläche geklickt wird
document.getElementById("submit").addEventListener("click", rechneAus);

function rechneAus() {

    //erstelle ein paar Variablen
    var meinOperator;
    var gibWertZurück;
    
    //die Operanden
    var operand1 = document.getElementById("operand1").value;
    var operand2 = document.getElementById("operand2").value;

    //die Operandentypen
    var wähle1 = document.getElementById("operand1-type");
    var wähle2 = document.getElementById("operand2-type");
  
    var operand1typ = wähle1.value;
    var operand2typ = wähle2.value;
    
    //den Operator wählen
    var radios = document.getElementsByName('operator');
    
    //die Operanden konvertieren
    switch (operand1typ) {
        case "string":
            operand1 = String(operand1);
            break;
        case "number":
            operand1 = Number(operand1);
            break;
    }
    
    switch (operand2typ) {
        case "string":
            operand2 = String(operand2);
            break;
        case "number":
            operand2 = Number(operand2);
            break;
    }
    //überprüfe alle möglichen Operandenwerte und finde den gewählten
    for (var i = 0, length = radios.length; i < length; i++) {
 
        if (radios[i].checked) {
            meinOperator = radios[i].value;
            
            //führe je nach gewähltem Operator eine andere Operation durch
            switch (radios[i].value) {
                case "+":
                    gibWertZurück = operand1 + operand2;
                    break;
                case "-":
                    gibWertZurück = operand1 - operand2;
                    break;
                case "*":
                    gibWertZurück = operand1 * operand2;
                    break;
                case "/":
                    gibWertZurück = operand1 * operand2;
                    break;
                case "%":
                    gibWertZurück = operand1 % operand2;
                   ...