<div class="container">
<a id="reset" href="#" onclick="reset()">Reset</a>
<p>Write your own...</p>
<form name="windingroad" id="windingroad" onsubmit="return yes(this);">
<!-- When form is submitted, run the js to post the poem -->
<div class="above"></div>
<!-- Name needed for the form submit js; class for styling,
id and onkeyUP for jumping to next field -->
<input
name="one"
class="field"
id="one"
type="text"
maxlength="30"
onkeyUP="moveOnMax(this,'two')"
placeholder="Walking down..."
autofocus
>
<input
name="two"
class="field"
id="two"
type="text"
maxlength="30"
onkeyUP="moveOnMax(this,'three')"
placeholder="Tidy up..."
>
<input
name="three"
class="field"
id="three"
type="text"
maxlength="30"
onkeyUP="moveOnMax(this,'four')"
placeholder="Temples crumbling..."
>
<input
name="four"
class="field"
id="four"
type="text"
maxlength="30"
onkeyUP="moveOnMax(this,'go')"
placeholder="That's enough."
>
<div class="below"><input id="go" type="submit" value="Yes"></div>
<div class="clear"></div>
</form>
<!-- Where your lonely words will appear -->
<p id="your-words"></p>
</div>
/* ------------------- */
/* TEMPLATE -- */
/* ----------------- */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
body {
min-height: 100vh; width: 100%;
xoverflow: hidden;
color: whitesmoke;
font-size: 16px;
font-family: 'Lato';
/* Background gradient courtesy of draGGradients:
https://elrumordelaluz.github.io/draGGradients/
"Cheer Up Emo Kid" */
background:
radial-gradient(circle at 1.98% 14.97%, #556270, transparent 100%),
radial-gradient(circle at 98.02% 52.96%, #FF6B6B, transparent 100%),
radial-gradient(circle at 50% 50%, #4a2735, #4a2735 100%);
}
p { margin: 15px 0; line-height: 24px; color: gainsboro; }
a { color: dodgerblue; text-decoration: none; border-bottom: 1px dotted; }
a:hover { color: tomato; }
.container {
max-width: 960px;
height: 100%;
margin: 0 auto;
padding: 20px;
}
.clear { clear: both; }
/* ------------------- */
/* PEN STYLES -- */
/* ----------------- */
form { width: 300px; margin: 50px auto; padding-left: 12.5px;}
input:focus { outline: none; }
.field {
display: block;
box-sizing: border-box;
width: 300px; height: 50px;
margin-top: -1px;
text-align: center;
color: tomato;
background-color: rgba(0,0,0,0.5);
background-color: transparent;
border: 1px solid tomato;
}
.field::-webkit-input-placeholder { color: tomato; opacity: 0.75; }
.field:-moz-placeholder { color: tomato; opacity: 0.75; }
.field::-moz-placeholder { color: tomato; opacity: 0.75; }
.field:-ms-input-placeholder { color: tomato; opacity: 0.75; }
/* I am eschewing DRY for organization of concept */
/* Corners -------- */
#one, #three {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
#two, #four {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
/* Borders -------- */
#one, #three { border-width: 1px 1px 1px 0; }
#two, #four { border-width: 1px 0 1px 1px; }
/* Offset -------- */
#one, #three { padding-right: 25px; }
#two, #four { margin-left: -25px; padding-left: 25px; }
/* Above & Below --------- */
.above, .below {
width: 150px; height: 50px;
margin-top: -1px;
border: 1px solid tomato;
}
.above {
margin-left: -25px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-width: 0 0 1px 0;
}
.below {
position: relative;
float: right;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-width: 1px 0 0 0;
}
/* Go -------- */
#go {
height: 50px; width: 50px;
position: absolute;
top: 35px; right: -25px;
color: tomato;
background-color: transparent;
border: 1px solid tomato;
border-radius: 50%;
cursor: pointer;
transition: all 0.5s ease;
}
#go:focus, #go:hover { color: white; background-color: rgba(255, 99, 71, 0.25); }
/* Your Words ----- */
#your-words {
width: 300px;
margin: 100px auto 20px auto;
clear: both;
color: tomato;
font-size: 18px;
line-height: 26px;
font-weight: 300;
opacity: 0;
transition: all 0.5s ease;
}
/* Reset ------ */
a#reset {
float: right;
color: white;
border: 1px solid white;
padding: 5px;
transition: all 0.5s ease;
}
a#reset:hover { color: tomato; border-color: tomato;}
// Jump to the next field once you hit max characters
function moveOnMax(field,nextFieldID){
if(field.value.length >= field.maxLength){
document.getElementById(nextFieldID).focus();
}
};
// Upon form submit, insert form values into the page
function yes(form) {
var one = document.forms.windingroad.one.value;
var two = document.forms.windingroad.two.value;
var three = document.forms.windingroad.three.value;
var four = document.forms.windingroad.four.value;
document.getElementById('your-words').innerHTML = one + "<br>" + two + "<br>" + three + "<br>" + four;
// Use CSS to fade it in
document.getElementById('your-words').style.opacity = "1";
// Doesn't actually submit the form
return false;
};
// Reset the form with the reset button
function reset() {
document.getElementById('windingroad').reset();
document.getElementById('your-words').innerHTML = '';
}
This Pen doesn't use any external CSS resources.