JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<script src="https://www.allmydomain.com/ramana/wp-content/gallery/sri-ramana-maharshi-pictures/Bhagavan-Sri-Ramana-Maharshi-25.jpg"></script>
<script src="&lt;link href=&#39;https://fonts.googleapis.com/css?family=News+Cycle&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<div>
    <input type="text" />
</div>
<div>
     <h3></h3>

</div>
<button>clear</button>

CSS

img {
    height: 200px;
    width: 50%;
}
h3 {
    font-family:'News Cycle';
}

input {
    width: 100%;
}

JavaScript

$("input").keypress(function (event) {
    var key = String.fromCharCode(event.which);
    $('h3').append(key);
});

$("input").keyup(function (event) {
    var key = event.keyCode;
    if (key === 8) {
        $('h3').text(function (_,txt) {
        	return txt.slice(0,-1);
        });
    }
});

$('button').click(function () {
    $('h3').empty();
    $('input').val('');
});

WebFontConfig = {
    google: {
        families: ['News+Cycle::latin']
    }
};
(function () {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();