JUSTINSPIRE

by kthornbloom

HTML

<div id="photo">
  
</div>

<div id="message">
We've <div class="item" id="verb">1</div> <div class="item" id="adjective">2</div> <div class="item" id="noun">3</div> with <div class="item" id="adjective2">4</div> <div class="item" id="noun2">5</div>.
</div>

<button>More Inspiration</button>

CSS

*{
  box-sizing:border-box;
}

body {
  font-family:sans-serif;
  background:#000;
  color:#fff;
}

#photo {
  width:90vw;
  height:90vh;
  position:absolute;
  top:5vw;
  left:5vh;
  background-size:cover;
  background-position:center;
}

#message {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:1em;
  background:#000;
  text-align:center;
}

.item {
  display:inline;
}

button {
  position:absolute;
  top:5vh;
  background:tomato;
  outline:none;
  border-radius:30px;
  border:0;
  padding:1em 2em;
  color:#fff;
  left:50%;
  transform:translateX(-50%);
}

JavaScript

var words = [
// past-tense verb
["chopped","pulled","wrapped","alphabetized","smashed","found","destroyed"],
// "greater" adjective
["larger","heavier","chunkier","wider","bigger","rounder","weirder","longer"],
// plural noun
["trees","donuts","toes","chickens","avocados","ants","cities","people","rules"],
// "lesser" adjective
["smaller","tinier","less","fewer"],
// plural noun
["bolts","potatoes","branches","shovels","employees","screwdrivers","monkies"]
];

function buildPhrase(){
	$('.item').each(function(){
  	var whichWord = $(this).index();
    var newWord = words[whichWord][Math.floor(Math.random()*words[whichWord].length)];
    $(this).html(newWord);
    var noun = $('#noun').html();
    $('#photo').attr('style','background-image:url("https://source.unsplash.com/featured/?'+ noun +'")')
  })
}

$('button').on('click',function(){
	buildPhrase();
})

buildPhrase();