JSFiddle - React, Tailwind, and code Playground

by hadimsm

HTML

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href='style.css' />
    <title>Front-End Portfolio Project</title>
</head>
<body>
    <h1>Donate Food 2 Me</h1>
    <p id="container"></p>
    <p id='caption'>food quantity</p>
    <button id="donate">Donate</button>
    <button id="undonate">Un-Donate</button>
    <script type="text/javascript" src='main.js'></script>
</body>
</html>

JavaScript

const donateButton = document.getElementById("donate");
const unDonateButton = document.getElementById("undonate");
const tracker = document.getElementById("container");
var i = 0;

tracker.innerHTML = i;

donate = function(){
    donateButton.style.backgroundColor = 'red';
    tracker.innerHTML = ++i;
}

undonate = function(){
    if (i > 0) {
    	unDonateButton.style.backgroundColor = 'blue';
    	tracker.innerHTML = --i;
    }
}

donateButton.addEventListener("click", donate);

unDonateButton.addEventListener("click", undonate);