JSFiddle - React, Tailwind, and code Playground

by Joanna Sobańska

HTML

Liczba 1:<input id="liczba1" type="text"><br>
Liczba 2:<input id="liczba2" type="text"><br>
<button id="dodawanie">Dodaj</button>
<button id="odejmowanie">Odejmij</button>
<button id="mnozenie">Pomnóż</button>
<button id="dzielenei">Podziel</button>
<ul id="wyniki"></ul>

CSS

.alert {
    color: red;
}

ul li button {
    display: block;
    margin: 1em 0;
}

JavaScript

$("#dodawanie").click(function() {
	var liczba1 = parseInt( $("#liczba1").val() );
    var liczba2 = parseInt( $("#liczba2").val() );
    if (!isNaN(liczba1) && !isNaN(liczba2)) {
        var newBtn = $("<button>zaznacz</button>");
    	var sum = liczba1 + liczba2;
    	var li = $("<li>").text(liczba1 + " + " + liczba2 + " = " + sum);
        li.on("click", "button", function() {
        	$(this).parent().toggleClass("alert");
        });
        li.append(newBtn);
    	$("#wyniki").append(li);
    } else {
   		alert("wprowadź liczbę młotku!");
    }
});