JSFiddle - React, Tailwind, and code Playground

by maganthro

HTML

<h1 style="font-family:arial, sans-serif; color: green; font-size: 1.7em; text-decoration: underline; font-variant:small-caps; text-shadow:2px 2px #ff0000;">
My Story
</h1>
<p style="text-align:right">
My friend Pablo has a <em style="color:red; font-weight:700">pet <span>dog</span></em> called <span>Sam</span> who likes to have his <span>tummy</span> scratched. When they go to the park, <strong>he likes to chase a <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home.
</p>
<p style="text-indent:50px">
On Sundays they drive to the <sup>mountains</sup> where he runs around <span>smelling</span> the grass and <span style="color:blue;">wagging his tail</span>. He gets so tired that he sleeps all the way home.
</p>

JavaScript

// make background black to hide existing text
document.body.style.backgroundColor = "black";

// collect input from user
//animal = prompt("Give me an animal");
//name = prompt("Give me a name");
//bodypart = prompt("Give me a body part");
//noun = prompt("Give me a noun");
//place = prompt("Give me a place");
//action = prompt("Give me an action ending in 'ing'");

// show input in story
document.getElementsByTagName('span')[0].innerHTML = animal;
document.getElementsByTagName('span')[1].innerHTML = name;
document.getElementsByTagName('span')[2].innerHTML = bodypart;
document.getElementsByTagName('em')[1].innerHTML = noun;
document.getElementsByTagName('sup')[0].innerHTML = place;
document.getElementsByTagName('span')[4].innerHTML = action;

// make background white to show text again
document.body.style.backgroundColor = "white";