JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<div id="keyboarddropdown">
    <p>Thank you <b><span></span></b>! Your fine name will be used later...</p>
</div>

CSS

#keyboarddropdown {
    display:none;
    width:33%;
    height:auto;
    text-align:center;
    margin:0 auto;
    float:none;
    clear:both;
    background: #21a97e;
}

JavaScript

$(function () {
    var acceptBtn = $("button.ui-keyboard-accept.ui-keyboard-valid-input").find("[name='accept']");
    $(acceptBtn).click(function () {
     //animate down to see the input
        $('html, body').animate({
            scrollTop: $("#keyboardsection").offset().top
        }, 2000);
        
    });
});

$('#save').click(function () {
    // save the item to browser cache
    var text_to_save = document.getElementById('keyboard').value;
    localStorage.setItem("text", text_to_save);
    
    // Push this to the contact form
    var texttopushtocontact = localStorage.getItem("text");
    $('input#nameinput').text() = texttopushtocontact;
    
    // Push to hidden div
    $('div#keyboarddropdown p b span').html(texttopushtocontact);
    
    // animate hidden div
        if ($("#keyboarddropdown").is(":hidden")) {
            $("#keyboarddropdown").slideDown("slow");
        } else {
            $("#keyboarddropdown").hide();
        }
    
});