JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<button type="button" id="ClearLSBtn">clear LocalStorage</button>
<fieldset>
    <legend>Contacts</legend>
    <div>
        <label for="Name">Name:</label>
        <input type="text" id="Name" name="Name"/>
    </div>
    <div>
        <label for="Address">Address:</label>
        <input type="text" id="Address" name="Address"/>
    </div>
    <div>
        <label for="Phoneno">Phoneno:</label>
        <input type="text" id="Phoneno" name="Phoneno"/>
    </div>
    <div>
        <label for="EmailAddress">:</label>
        <input type="text" id="EmailAddress" name="EmailAddress"/>
    </div>
    <button type="button" id="saveBtn">Save</button>
    <div id="output"></div>
</fieldset>

CSS

fieldset{
    width:300px;
}
.Contacts{
    border:2px dotted blue;
    width:200px;
}
.hide{
    display:none;
}

JavaScript

window.onload = function () {
    var clearE1=document.getElementById('clearLSBtn').onclick;
}
window.onload = function () {
    var nameE1=document.getElementById('name').onclick;
}
window.onload = function () {
    var teamcolorE1=document.getElementById('teamcolor').onclick;
}
window.onload = function () {
    var countryE1=document.getElementById('country').onclick;
}
window.onload = function () {
    var typeofplayersE1=document.getElementById('typeofplayersE1').onclick;
}

var saveE1=document.getElementById('saveBtn').onclick;


//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();
//}
//function myFunction() {
//    document.getElementById("myForm").reset();
//}
var onReturnHandler=function(event) {
    if(event.keyCode==13) {
        getData();
   ...