JSFiddle - React, Tailwind, and code Playground

by Please_Reply

HTML

<body>
<div class="container">
    <div class="header">
    	<span id="name"></span><div id="trolley" class="trolley" onmouseover="tabDisplay('block')" onmouseout="tabDisplay('none')"><center>Shopping Cart <span style='font-family:webdings'>&#164;</span> <span id="NOI" style="background-color:red; border-radius:360px; color:white; padding-left:5px;padding-right:5px">0</span></center>
        	<div id="shoppingTab">You have selected <span id="NOI2">0</span> items. Your total is $<span id="totalPrice">0</span><br/><span id="itemsList"></span></div>
        </div>
    </div>
    <div class="shop" style="font-size:28px">Welcome, <span id="name2"></span>.<hr /><br/>Products<br/><hr />
    
    <div class="product" onclick="addToCart('sunglasses', 0, 70)">Pair of sunglasses ($70)<br /><br /><span onclick="change(1)">Click to add to cart</span></div>
    <div class="product" onclick="addToCart('shoes', 1, 180)">Pair of shoes ($180)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
    <div class="product" onclick="addToCart('belt', 2, 20)">A belt ($20)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
    </div>
    
</div>
</body>

CSS

.container{
	width:960px;
	margin:auto;
}
.header{
	width:960px;
	height:100px;
	background-color:#06F;
	float:left;
}
.trolley{
	width:150px;
	height:30px;
	background-color:white;
	float:right;
	border-radius:10px;
	color:black;
	border:1px solid black;
	line-height:30px;
	font-family:"Calibri";
	cursor: pointer;
}
.shop{
	width:960px;
	height:700px;
	background-color:white;
	float:left;
	font-family:"Calibri Light";
	padding:20px;
}
#shoppingTab{
	display:none;
	height:400px;
	width:400px;
	background-color:#CCC;
	color:black;
	position:relative;
	margin-top:1px;
	border-radius:10px;
	color:black;
	border:1px solid black;
	padding-left:10px;
	float:right;
}
html{
	background-color:#00F;
}
.product{
	height:200px;
	width:150px;
	float:left;
	border: 1px solid black;
	border-radius:10px;
	margin-right:20px;
	font-size:16px;
	text-align:center;
	cursor:pointer;
}
.product:hover{
	border:1px solid blue;
}

JavaScript

var customerName = "";
var numberOfItems = 0;
var total = 0;
var items = [];
var stat = []

for(var a = 1; a <= 3; a++){
	stat[a] = false;
}

function update(){
	document.getElementById("NOI").innerHTML = numberOfItems;
	document.getElementById("NOI2").innerHTML = numberOfItems;
	document.getElementById("totalPrice").innerHTML = total;
	document.getElementById("itemsList").innerHTML = items.join("<br />");
}
function tabDisplay(displayStatus){
	shoppingTab.style.display = displayStatus;
}

function addToCart(productName, productID, price){
	items[productID] = productName;
	total += price;
	numberOfItems++;
	update();
}

function removeFromCart(productName, productID, price){
	items.splice(productID, 1);
	total -= price;
	if(stat[productID]){
	numberOfItems--;
	}
	update();
}

function change(i){
	if(stat[i] == false){
		stat[i] = true;
	}else{
		stat[i] = false;
	}
}

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function checkCookie() {
    var user = getCookie("customer");
    if (user != "") {
		customerName = getCookie("customer");
		document.getElementById("name").innerHTML = customerName;
		alert("Welcome again, " + user + ".");
    } else {
		document.getElementById("name").innerHTML = "please set up an account";
       user = prompt("Please enter your name:","");
       if (user != "" && user != null) {
           setCookie("customer", user, 30);
		   document.getElementById("name").innerHTML = user;
       }
    }
}

function changeCookie(){
	var user...