JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<fieldset>

<legend>FavoriteCricketPlayers</legend>

<div>
<label for="Name">Name:</label>
<input type="text"id="Name"name="Name"/>
</div>

<div>
<label for="Team Color">Team Color:</label>
<input type="text"id="Team Color"name="Team Color"/>
</div>

<div>
<label for="Country">Country:</label>
<input type="text"id="Country"name="Country"/>
</div>

<div>
<label for="Type of Player"> Type of Player:</label>
<input type="text"id="Type of Player" name="Type of Player"/>
</div>

<button type="button"id="saveBtn">Save</button>

<div id="output"></div>

</fieldset>

CSS

fieldset{
    width:200px;
}
.CricketPlayers{
    border:1px dotted green;
    width:100px;
}
.hide{
    display:none;
}

JavaScript

var nameEl=document.getElementById("name");
var teamcolorEl=document.getElementById("teamcolor");
var countryEl=document.getElementById("country");
var typeofplayersEl=document.getElementById("typeofplayers");
var saveEl=document.getElementById("saveBtn");
var clearEl=document.getElementById("clearLSBtn");

console.log(window.localStorage);

var data=[];

var favoritecricketplayers = function(name,teamcolor,country,typeofplayers)
{
    this.name=name;
    this.teamcolor=teamcolor;
    this.country=country;
    this.typeofplayers=typeofplayers;
};

favoritecricketplayers.prototype.createDiv = function() {
    
     var div=document.createElement("div");
     div.style.backgroundcolor=green;
     var nameNode=document.createTextNode(this.name);
     div.appendChild(nameNode);
     return(div);
}    

var getData=function() {
var name=nameEl.value;
var teamcolor=teamcolorEl.value;
var country=countryEl.value;
var typeofplayers=typeofplayersEl.value;
var favoritecricketplayers = new favoritecricketplayers(name,teamcolor,country,typeofplayers);

data.push(favoritecricketplayers);
updateOutput();
updateLs();
clearInputs();
};

//clearEl.onclick=function() {
    window.localStorage.clear();
//}

var onReturnHandler=function(event) {
    if(event.keyCode==13) {
        getData();
    }
};

saveEl.onclick=getData;
nameEl.onkeyup=onReturnHandler;
teamcolorEl.onkeyup=onReturnHandler;
countryEl.onkeyup=onReturnHandler;
typeofplayer.onkeyup=onReturnHanlder;
    
      
var updateLS=function() {
    window.localStorage.setItem("favoritecricketplayers",JSON.stringify(data));
}

var initLS=function() {
    data=JSON.parse(window.localStorage.getItem("favoritecricketplayers"));
    for(i in dataLS) {
    var obj=dataLs[i];
    var favoritecricketplayer= new favoritecricketplayer(obj.name,obj.teamcolor,obj.country,obj.typeofplayers);
            data.push(favoritecricketplayers);
    }
        updateOutput();
    }
    
var clearInputs=function() {
    nameEl.value='';
   ...