JSFiddle - React, Tailwind, and code Playground

by Anshuman Dwibhashi

HTML

<section id="left">
    <form>
        <p><input id="box1" placeholder="Enter the key here"></p>
        <p><input id="box2" placeholder="Enter the val here"></p>
        <p><input id="submit" type="button" value="Submit"></p>
    </form>
</section>
<section id="right">
    You'll see some keys and values here if you add them!
</section>

CSS

#left{
    float:left;
    border:3px solid red;
    padding:20px;
}

#right{
    float:left;
    border:3px solid blue;
    padding:20px;
    width:250px;
    margin-left:20px;
}

JavaScript

function init(){
    var button = document.getElementById("submit");
    button.addEventListener("click", save); 
    // So we'll call the save function when the button is clicked...
}

function save(){
    var key = document.getElementById("box1").value;
    var value = document.getElementById("box2").value;

    sessionStorage.setItem(key, value);
    disp(key);
}

function disp(key){
    var box = document.getElementById("right");
    var val = sessionStorage.getItem(key);
    box.innerHTML = "Key: "+key+"<br/>Val: "+val;
}

init();