JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<h1>Mad Libs</h1>
<div id="result"></div>
<div id="story">
One day a
<input type="text" id="noun" placeholder="noun">
attacked a
<input type="text" id="nounTwo" placeholder="noun">
,but was defeated by a
<input type="text" id="name" placeholder="Famous Person">!
<button id="generate">generate</button>
</div>
</body>
JavaScript
function lib() {
var storyDiv = document.getElementById("story");
var nounTwo = document.getElementById("nounTwo").value;
var noun = document.getElementById("noun").value;
var name = document.getElementById("name").value;
var story = "One day a " + noun + " attacked a " + nounTwo + ", and was defeated by " + name + "!";
storyDiv.innerHTML = story;
localStorage.setItem('laststory', story);
}
var libBtn = document.getElementById('generate');
libBtn.addEventListener('click', lib);
if(localStorage.getItem('laststory')) {
document.getElementById('result').innerHTML = localStorage.getItem('laststory');
}