JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<div id = "top">
    <label id = "a">90</label>
    <label id = "b">85</label>
</div>
<div id = "main">
    <span id = "sumA">Suma A</span>
    <span id = "sumB">Suma B</span>
</div>

CSS

#top{
    width: 13em;
    height: 4em;
    background: lightyellow;
    text-align: center;
    line-height: 4em;
}

#main{
    width: 13em;
    height: 4em;
    background: lightpink;   
    text-align: center;
    line-height: 4em;
}

label{
    background: white;
    font-size: 2em;
}

span{
    background: lightcyan;
    font-size: 2em;
    color: skyblue;
    cursor: pointer;
}

span:active{
    background: skyblue;
    color: lightcyan;
}

JavaScript

var a = document.getElementById("a"),
    b = document.getElementById("b"),
    sumA = document.getElementById("sumA"),
    sumB = document.getElementById("sumB");

sumA.addEventListener("click", function(){
    if (a.innerHTML < 100) a.innerHTML = Number(a.innerHTML) + 1;
}, false);

sumB.addEventListener("click", function(){
    if (b.innerHTML < 100) b.innerHTML = Number(b.innerHTML) + 1;
}, false);