Swimburger/app.js

## app.js
/**
 * Created by Niels on 7/10/2014.
 */
(function init(isTest){
    var form=document.getElementById('personForm'),
        inputName=document.getElementById('inputName'),
        inputLastName=document.getElementById('inputLastName'),
        inputAge=document.getElementById('inputAge'),
        inputImage=document.getElementById('inputImage'),
        persons=document.getElementById('persons');
    form.addEventListener('submit',function(event){
        event.preventDefault();
        onPersonSubmit();
        form.reset();
        return false;
    });
    if(isTest){
        addTestData();
    }
    function onPersonSubmit(){
        var name=inputName.value,
            lastName=inputLastName.value,
            age=Number(inputAge.value),
            image=inputImage.value;
        addPerson(name,lastName,age,image);
    }
    function addPerson(name,lastName,age,image){
        var htmlBuilder='',
            htmlClass,
            li;
        if(age>=18){
            htmlClass='success';
        }else{
            htmlClass='danger';
        }
        li = document.createElement('li');
        li.className="col-md-4 col-sm-6 col-xs-12 animated fadeInUp";
        htmlBuilder +=   '  <figure class="'+ htmlClass +'">';
        htmlBuilder +=   '      <img class="img-responsive" src="'+ image +'">';
        htmlBuilder +=   '      <figcaption>'+ name + ' ' + lastName + ' ' + age +'j' + '</figcaption>';
        htmlBuilder +=   '  </figure>';
        li.innerHTML=htmlBuilder;

        persons.appendChild(li);
    }
    function addTestData(){
        var persons=[
            {name:"Emma",lastName:"Watson",age:24,image:'http://www.phootoscelebrities.com/wp-content/uploads/2014/08/Emma-Watson-images.jpg'},
            {name:"Ygritte",lastName:"Wildling",age:25,image:'http://img2.wikia.nocookie.net/__cb20120323182527/gameofthrones/images/8/89/Ygritte_Promotional.jpg'},
            {name:"Hayden",lastName:"Penettiere",age:25,image:'http://img2.wikia.nocookie.net/__cb20110715161214/scream/images/f/fc/Hayden_Panettiere_Gallery_6.png'},
            {name:"Sophie",lastName:"Turner",age:18,image:'http://img1.wikia.nocookie.net/__cb20140620211636/gameofthrones/images/e/e3/Sophie-turner-1387741738.jpg'},
            {name:"Maisie",lastName:"Williams",age:17,image:'http://img3.wikia.nocookie.net/__cb20140505224634/gameofthrones/images/1/1e/Arya_Stark-First_of_his_Name.jpg'}
        ];
        var i= 0,l=persons.length;
        var intervalId =setInterval(function() {
            var person = persons[i];
            addPerson(person.name,person.lastName,person.age,person.image);
            i++;
            if(i==l){
                clearInterval(intervalId);
            }
        },200);
    }
})(true);

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Oefening 2</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <form id="personForm">
        <div class="form-group">
            <label for="inputName">Name</label>
            <input class="form-control" id="inputName" type="text" required/>
        </div>
        <div class="form-group">
            <label for="inputLastName">Last name</label>
            <input class="form-control" id="inputLastName" type="text" required/>
        </div>
        <div class="form-group">
            <label for="inputAge">Age</label>
            <input class="form-control" id="inputAge" type="number" required/>
        </div>
        <div class="form-group">
            <label for="inputImage">Image</label>
            <input class="form-control" id="inputImage" type="url" required/>
        </div>
        <button type="submit" class="btn btn-primary btn-lg pull-right"><i class="glyphicon glyphicon-floppy-disk"></i> Save</button>
    </form>
    <div class="container-fluid">
        <ul id="persons">

        </ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

## style.scss
html,body{
  min-height: 100%;
}
body{
  background: #eee;
}
#personForm{
  position: fixed;
  left: 0;
  top:0;
  padding: 30px;
  width:300px;
  height: 100%;
  box-shadow: 0 0 10px #aaa;
  background: #fff;
  z-index: 1;
}

.container-fluid{
  margin: 0 0 0 300px;
}

#persons{
  list-style: none;
  li{
    margin-top: 30px;
  }
  figcaption{
    text-align: center;
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 28px;
  }
  img{
    width: 100%;
  }
  figure{
    overflow: hidden;
    border: solid 1px #888;
    border-radius: 6px;
    box-shadow: 0 3px 10px #aaa;
    color: #fff;
    max-height: 340px;
    position: relative;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  figure:hover{
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
    box-shadow: 0 7px 15px #888;
  }
  .success{
    border-color: #159749;
  }
  .danger{
    border-color: #8f3729;
  }
}

.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
	/**
	* Created by Niels on 7/10/2014.
	*/
	(function init(isTest){
	var form=document.getElementById('personForm'),
	inputName=document.getElementById('inputName'),
	inputLastName=document.getElementById('inputLastName'),
	inputAge=document.getElementById('inputAge'),
	inputImage=document.getElementById('inputImage'),
	persons=document.getElementById('persons');
	form.addEventListener('submit',function(event){
	event.preventDefault();
	onPersonSubmit();
	form.reset();
	return false;
	});
	if(isTest){
	addTestData();
	}
	function onPersonSubmit(){
	var name=inputName.value,
	lastName=inputLastName.value,
	age=Number(inputAge.value),
	image=inputImage.value;
	addPerson(name,lastName,age,image);
	}
	function addPerson(name,lastName,age,image){
	var htmlBuilder='',
	htmlClass,
	li;
	if(age>=18){
	htmlClass='success';
	}else{
	htmlClass='danger';
	}
	li = document.createElement('li');
	li.className="col-md-4 col-sm-6 col-xs-12 animated fadeInUp";
	htmlBuilder += ' <figure class="'+ htmlClass +'">';
	htmlBuilder += ' <img class="img-responsive" src="'+ image +'">';
	htmlBuilder += ' <figcaption>'+ name + ' ' + lastName + ' ' + age +'j' + '</figcaption>';
	htmlBuilder += ' </figure>';
	li.innerHTML=htmlBuilder;

	persons.appendChild(li);
	}
	function addTestData(){
	var persons=[
	{name:"Emma",lastName:"Watson",age:24,image:'http://www.phootoscelebrities.com/wp-content/uploads/2014/08/Emma-Watson-images.jpg'},
	{name:"Ygritte",lastName:"Wildling",age:25,image:'http://img2.wikia.nocookie.net/__cb20120323182527/gameofthrones/images/8/89/Ygritte_Promotional.jpg'},
	{name:"Hayden",lastName:"Penettiere",age:25,image:'http://img2.wikia.nocookie.net/__cb20110715161214/scream/images/f/fc/Hayden_Panettiere_Gallery_6.png'},
	{name:"Sophie",lastName:"Turner",age:18,image:'http://img1.wikia.nocookie.net/__cb20140620211636/gameofthrones/images/e/e3/Sophie-turner-1387741738.jpg'},
	{name:"Maisie",lastName:"Williams",age:17,image:'http://img3.wikia.nocookie.net/__cb20140505224634/gameofthrones/images/1/1e/Arya_Stark-First_of_his_Name.jpg'}
	];
	var i= 0,l=persons.length;
	var intervalId =setInterval(function() {
	var person = persons[i];
	addPerson(person.name,person.lastName,person.age,person.image);
	i++;
	if(i==l){
	clearInterval(intervalId);
	}
	},200);
	}
	})(true);
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Oefening 2</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css"/>
	</head>
	<body>
	<form id="personForm">
	<div class="form-group">
	<label for="inputName">Name</label>
	<input class="form-control" id="inputName" type="text" required/>
	</div>
	<div class="form-group">
	<label for="inputLastName">Last name</label>
	<input class="form-control" id="inputLastName" type="text" required/>
	</div>
	<div class="form-group">
	<label for="inputAge">Age</label>
	<input class="form-control" id="inputAge" type="number" required/>
	</div>
	<div class="form-group">
	<label for="inputImage">Image</label>
	<input class="form-control" id="inputImage" type="url" required/>
	</div>
	<button type="submit" class="btn btn-primary btn-lg pull-right"><i class="glyphicon glyphicon-floppy-disk"></i> Save</button>
	</form>
	<div class="container-fluid">
	<ul id="persons">

	</ul>
	</div>
	<script src="app.js"></script>
	</body>
	</html>
	html,body{
	min-height: 100%;
	}
	body{
	background: #eee;
	}
	#personForm{
	position: fixed;
	left: 0;
	top:0;
	padding: 30px;
	width:300px;
	height: 100%;
	box-shadow: 0 0 10px #aaa;
	background: #fff;
	z-index: 1;
	}

	.container-fluid{
	margin: 0 0 0 300px;
	}

	#persons{
	list-style: none;
	li{
	margin-top: 30px;
	}
	figcaption{
	text-align: center;
	padding: 10px;
	position: absolute;
	bottom: 0;
	width: 100%;
	font-size: 28px;
	}
	img{
	width: 100%;
	}
	figure{
	overflow: hidden;
	border: solid 1px #888;
	border-radius: 6px;
	box-shadow: 0 3px 10px #aaa;
	color: #fff;
	max-height: 340px;
	position: relative;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	}

	figure:hover{
	-webkit-transform: scale(1.02);
	-moz-transform: scale(1.02);
	-ms-transform: scale(1.02);
	-o-transform: scale(1.02);
	transform: scale(1.02);
	box-shadow: 0 7px 15px #888;
	}
	.success{
	border-color: #159749;
	}
	.danger{
	border-color: #8f3729;
	}
	}

	.animated {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}

	@-webkit-keyframes fadeInUp {
	0% {
	opacity: 0;
	-webkit-transform: translateY(20px);
	}
	100% {
	opacity: 1;
	-webkit-transform: translateY(0);
	}
	}

	@keyframes fadeInUp {
	0% {
	opacity: 0;
	transform: translateY(20px);
	}
	100% {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	}