JSFiddle - React, Tailwind, and code Playground

by path411

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular.min.js"></script>
<body ng-app="">
        <!--[if lt IE 10]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-3 border fix-height">
          <img src="/images/mad-lib-happy-face.png" id="face">
        </div>
        <div class="col-xs-9 border fix-height">
          <img src="/images/ng-mad-libs-logo.png" id="logo">
          <span id="automate">Automate This!</span>
        </div>
      </div>
    </div>
        <form id="fields">
          <div class="row middle">
            <div class="col-xs-4">
              <input type="text" placeholder="Male Name" ng-model="maleName" name="first-name">
              <input type="text" placeholder="Job Title" ng-model="jobTitle" name="job-title">
              <input type="text" placeholder="Tedious Task" ng-model="tediousTask">
            </div>
            <div class="col-xs-4">
              <input type="text" placeholder="Dirty Task" ng-model="dirtyTask">
              <input type="text" placeholder="Celebrity" ng-model="celebrity">
              <input type="text" placeholder="Useless Skill" ng-model="uselessSkill">
            </div>
            <div class="col-xs-4">
              <input type="text" placeholder="Obnoxious Celebrity" ng-model="obnoxiousCeleb">
              <input type="text" placeholder="Huge Number" ng-model="hugeNumber">
              <input type="text" placeholder="Adjective" ng-model="adjective">
            </div>
          </div>
        </form>
     <div class="row last">
      <div class="col-xs-8 col-xs-offset-2">
       <p id="hidden-until">
         <span class="bold-under">{{maleName}}</span> was a <span class="bold-under">{{jobTitle}}</span> who loved technology....

CSS

input{
    display: block;
    text-align: center;
    margin: 20px auto;
}
#face{
    display: block;
    margin: auto;
}
#logo{
    display: block;
    margin: 0 auto;
    width: 80%;
    max-height: 150px;
}
.border{
    border: 2px solid black;
}
#automate{
    font-weight: bold;
    display: block;
    text-align: center;
    font-size: 36px;
}
.fix-height{
    height: 200px;
}
#hidden-until {
    margin-top: 40px;   
}
.bold-under{
    font-weight: bolder;
    text-decoration: underline;
    font-size: 1.7em;
}
p{
    display:none;
    font-size: 1.5em;
    font-weight: normal;
}
.middle{
    margin-top: 40px;
    border-bottom: 2px solid black;
    padding-bottom: 40px;
}

JavaScript

$(function(){
	$('input').focusout(function(){
		var allInput = $('input')
		var inArr = []
		for (var i = 0; i < allInput.length; i++) {
			inArr.push($('input:eq('+i+')').val().length)
		}
		console.log(inArr);
		if(inArr.sort()[0]===0){

		} else {
			$('p').fadeIn(750)
		}
	});
});