vapidbabble/index.html

## index.html
<html>
  <head>
    <meta charset="utf-8">
    <title>Buster's Work History</title>
    <link href="https://fonts.googleapis.com/css?family=Anton|Josefin+Slab|Raleway" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Motherboy</a>
        </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="https://twitter.com/mrtonyhale?lang=en">Twitter</a></li>
          <li><a href="http://arresteddevelopment.wikia.com/wiki/The_One_Where_They_Build_a_House">Blog</a></li>
          <li><a href="http://arresteddevelopment.wikia.com/wiki/Buster_Bluth#Trivia">Trivia</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <div class="container">
    <div class="row">
      <div id="work-container" class="col-sm-8">
        <h1>Buster's Work History</h1>
        <article id="work-1" class="work-container">
          <header>
            <h3>Graduate Student</h3>
            <h5>Milford School</h5>
            <span><time datetime="2003">2003</time> - <time datetime="2017">Current</time></span>
          </header>
          <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </section>
        </article>
        <article id="work-2" class="work-container">
          <header>
            <h3>Soldier</h3>
            <h5>Army</h5>
            <span><time datetime="2004">2004</time> - <time datetime="2004">2004</time></span>
          </header>
          <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </section>
        </article>
        <article id="work-3" class="work-container">
          <header>
            <h3>Construction Worker</h3>
            <h5>Bluth Company</h5>
            <span><time datetime="2003">2004</time> - <time datetime="2017">Current</time></span>
          </header>
          <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </section>
        </article>
      </div>
      <div id="contact-me" class="col-sm-4">
        <h1>Busta Move</h1>
        <form name="contact-me">
          <input type="text" name="first_name" placeholder="NAME" required id="form-name">
          <input  type="email" name="email" placeholder="MAIL" required id="form-email">
          <textarea name="comments" placeholder="MESSAGE" required id="form-comments"></textarea>
          <p id="message-output" class="message-output"></p>
          <button name="send" class="submit" id="form-submit">SEND</button>
        </form>
      </div>
    </div>
      <div id="favorite-things">
        <h1>Buster's Best-Loved</h1>
        <div id="card-container">
          <div class="card">
            <div class="image-container">
              <img src="http://www.estately.com/blog/assets/tumblr_mi38zgests1qbuchfo1_400.jpg" alt="">
            </div>
            <div class="description-container">
              <h3>Lucille 2</h3>
            </div>
          </div>
          <div class="card">
            <div class="image-container">
              <img src="https://media.thetab.com/blogs.dir/187/files/2017/03/tumblr-mnbklayk0u1rodz1bo1-1280-1024x576.jpg" alt="">
            </div>
            <div class="description-container">
              <h3>Motherboy</h3>
            </div>
          </div>
          <div class="card">
            <div class="image-container">
              <img src="https://img.huffingtonpost.com/asset/570414551500002a000b41a5.jpeg" alt="">
            </div>
            <div class="description-container">
              <h3>Juice</h3>
            </div>
          </div>
          <div class="card">
            <div class="image-container">
              <img src="https://vignette2.wikia.nocookie.net/arresteddevelopment/images/2/27/1x11_Public_Relations_%2827%29.png/revision/latest/scale-to-width-down/670?cb=20120408205114" alt="">
            </div>
            <div class="description-container">
              <h3>School</h3>
            </div>
          </div>
          <div class="card">
            <div class="image-container">
              <img src="https://vignette4.wikia.nocookie.net/arresteddevelopment/images/8/88/S4_Lucille_%2801%29.jpg/revision/latest/scale-to-width-down/670?cb=20130502032638" alt="">
            </div>
            <div class="description-container">
              <h3>Mother</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="button-container">
        <button name="send" class="submit">See My Work History (In the console).</button>
      </div>
      <div id="places-holder">
        <form id="search-places">
          <label for="search-field">Search my places:
            <input type="text" id="search-field" name="search-field" placeholder="Search..."></label>
          <div id="radio-buttons">
            <label for="been">Places I've Been.
              <input type="radio" name="been-there" value="true" id="been"></label>
            <label for="been">Places I Want to Go.
              <input type="radio" name="been-there" value="false" id="havent-been"></label>
          </div>
          <button type="submit" name="button" class="submit">Show Me!</button>
        </form>
        <div id="place-card-holder">
        </div>
      </div>
  </div>
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

## lesson-8-exercise.markdown

      
    Raw
  

              lesson-8-exercise.markdown
            
          
    Lesson 8 Exercise

A Pen by John Wise on CodePen.
License.

  
## script.js
console.log("main.js");

$(document).ready(function() {
  console.log("document ready");


  var placeNames = ["Motherboy XXX", "A Boat", "The Hospital", "Jail", "The Moon", "The Ocean"];

  var placeImages = ["https://vignette3.wikia.nocookie.net/arresteddevelopment/images/e/e0/Arrested_Development_-_Motherboy_theme_tune/revision/latest/scale-to-width-down/600?cb=20141206202315", "http://completepr.net/wp-content/uploads/2016/04/buster_bluth.jpg", "http://vignette1.wikia.nocookie.net/arresteddevelopment/images/e/e7/2x12_Hand_to_God_%2817%29.png/revision/latest?cb=20130123233400", "https://m.popkey.co/afdd28/DD8r_f-maxage-0.gif", "https://i2.wp.com/upload.wikimedia.org/wikipedia/commons/0/09/Apollo_14_Shepard.jpg", "http://thesecondtake.com/wp-content/uploads/2013/05/ad-seal.jpg"];

  var haveIBeenThere = [true, true, true, true, false, true];

  var printCards = function() {
    var domHtmlString = "";
    for (var i = 0; i < placeNames.length; i++) {
      domHtmlString += '<div class="card places-card">';
      domHtmlString +=  '<div class="image-container">';
      domHtmlString +=    '<img src="' + placeImages[i] + '">';
      domHtmlString +=  '</div>';
      domHtmlString +=  '<div class="description-container">';
      domHtmlString +=    '<h3 class="place-title">' + placeNames[i] + '</h3>';
      if (haveIBeenThere[i]) {
        domHtmlString += '<p class="been-there">Been there!</p>';
      } else {
        domHtmlString += '<p class="been-there">Want to go there!</p>';
      }
      domHtmlString +=  '</div>';
      domHtmlString += '</div>';
    }

    $("#place-card-holder").append(domHtmlString);
  };

  printCards();


  $("#search-places").on("submit", function(event) {
    event.preventDefault();
    reset();

    $(".places-card").each(function(index) {
      var currentCard = $(".places-card")[index];
      console.log("currentCard", currentCard);
      filterCardsForBeenThere(currentCard);
      filterCardsForSearchPhrase(currentCard);
    })

    $(".place-card-holder").fadeOut(0);
    $(".place-card-holder").fadeIn(500);
  });

  var filterCardsForBeenThere = function(currentCard) {
    console.log("filterCardsForBeenThere");

    var beenThereFromSearch = $("input[name=been-there]:checked").val();

    var beenThereValue = $(currentCard).find(".been-there").html();
    var beenThereBooleanValue;

    if (beenThereValue === "Been there!") {
      beenThereBooleanValue = true;
    } else {
      beenThereBooleanValue = false;
    }

    if ((!(beenThereBooleanValue.toString() == beenThereFromSearch)) && beenThereFromSearch) {
      $(currentCard).hide();
    }

  }

  var filterCardsForSearchPhrase = function(currentCard) {
    console.log("filterCardsForSearchPhrase");

    var searchValue = $("#search-field").val().toLowerCase();

    if (!($(currentCard).find(".place-title").html().toLowerCase().includes(searchValue))) {
      $(currentCard).hide();
    }
  }

  var reset = function() {
    $(".places-card").each(function(card) {
      $($(".places-card")[card]).show();
    })
  }


});

## style.css
body {
  background: url(http://68.media.tumblr.com/de048c2d049429d429051aa7ab7ddce1/tumblr_o96nr94YTQ1qd9dz2o1_1280.jpg);
  margin: 0;
}

h1 {
  font-family: 'Josefin Slab', serif;
  text-align: center;
  color: #8BC34A;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}

.work-container {
  text-align: center;
  width: 90%;
  margin: 5%;
  border-color: #8BC34A;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

#work-2 {
  font-family: 'Anton', sans-serif;
  border-style: solid;
}

#work-1 {
  font-family: 'Josefin Slab', serif;
  border-style: dotted;
}

#work-3 {
  font-family: 'Raleway', sans-serif;
  border-style: double;
  border-width: 10px;
}

header {
  color: white;
}

header > * {
  margin: 0;
}

nav {
  margin: 0;
  padding: 0;
  background-color: #8BC34A;
  font-family: 'Raleway', sans-serif;
  color: black;
}

nav > ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  width: 30%;
  margin: 0;
}

nav > ul > li {
  padding: 5%;
}

nav a {
  text-decoration: none;
  color: black;
}

nav > ul > li:hover {
  background-color: black;
  color: white;
}

nav > ul > li:hover > a {
  color: white;
}

#contact-me {
  padding: 40px;
  background-color: rgba(0, 0, 0, 0.5);
}

form input,
form textarea {
  width:97.4%;
    height:30px;
    padding:5px 10px;
    font-size: 12px;
    color:#999;
    letter-spacing:1px;
    background: #FFF;
    border:2px solid #FFF;
    margin-bottom:25px;
}

form textarea {
  height:150px
}

.submit {
  width:100%;
    padding:5px 10px;
    font-size: 12px;
    letter-spacing:1px;
    background: #8BC34A;
    height:40px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#FFF;
    border:2px solid black;
}

form .message-output {
  color: white;
  font-weight: bold;
  text-align: center;
}

#card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  background-color: #8BC34A;
  width: 300px;
  margin: 2%;
  -webkit-box-shadow: 12px 12px 6px -10px rgba(0,0,0,0.45);
  -moz-box-shadow: 12px 12px 6px -10px rgba(0,0,0,0.45);
  box-shadow: 12px 12px 6px -10px rgba(0,0,0,0.45);
}

.image-container {
  max-width: 300px;
  max-height: 200px;
  overflow: none;
}

.image-container > img {
  width: 300px;
  height: 175px;
  object-fit: cover;
}

.description-container {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

.button-container {
  padding: 22px;
}

#places-holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#search-places {
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

#search-places > *{
  width: 33%;
}

#radio-buttons {
  padding: 0 3%;
}

#place-card-holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
	<html>
	<head>
	<meta charset="utf-8">
	<title>Buster's Work History</title>
	<link href="https://fonts.googleapis.com/css?family=Anton\|Josefin+Slab\|Raleway" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	</head>
	<body>
	<nav class="navbar navbar-default">
	<div class="container-fluid">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">Motherboy</a>
	</div>
	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul class="nav navbar-nav navbar-right">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="https://twitter.com/mrtonyhale?lang=en">Twitter</a></li>
	<li><a href="http://arresteddevelopment.wikia.com/wiki/The_One_Where_They_Build_a_House">Blog</a></li>
	<li><a href="http://arresteddevelopment.wikia.com/wiki/Buster_Bluth#Trivia">Trivia</a></li>
	</ul>
	</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
	</nav>
	<div class="container">
	<div class="row">
	<div id="work-container" class="col-sm-8">
	<h1>Buster's Work History</h1>
	<article id="work-1" class="work-container">
	<header>
	<h3>Graduate Student</h3>
	<h5>Milford School</h5>
	<span><time datetime="2003">2003</time> - <time datetime="2017">Current</time></span>
	</header>
	<section>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</section>
	</article>
	<article id="work-2" class="work-container">
	<header>
	<h3>Soldier</h3>
	<h5>Army</h5>
	<span><time datetime="2004">2004</time> - <time datetime="2004">2004</time></span>
	</header>
	<section>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</section>
	</article>
	<article id="work-3" class="work-container">
	<header>
	<h3>Construction Worker</h3>
	<h5>Bluth Company</h5>
	<span><time datetime="2003">2004</time> - <time datetime="2017">Current</time></span>
	</header>
	<section>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</section>
	</article>
	</div>
	<div id="contact-me" class="col-sm-4">
	<h1>Busta Move</h1>
	<form name="contact-me">
	<input type="text" name="first_name" placeholder="NAME" required id="form-name">
	<input type="email" name="email" placeholder="MAIL" required id="form-email">
	<textarea name="comments" placeholder="MESSAGE" required id="form-comments"></textarea>
	<p id="message-output" class="message-output"></p>
	<button name="send" class="submit" id="form-submit">SEND</button>
	</form>
	</div>
	</div>
	<div id="favorite-things">
	<h1>Buster's Best-Loved</h1>
	<div id="card-container">
	<div class="card">
	<div class="image-container">
	<img src="http://www.estately.com/blog/assets/tumblr_mi38zgests1qbuchfo1_400.jpg" alt="">
	</div>
	<div class="description-container">
	<h3>Lucille 2</h3>
	</div>
	</div>
	<div class="card">
	<div class="image-container">
	<img src="https://media.thetab.com/blogs.dir/187/files/2017/03/tumblr-mnbklayk0u1rodz1bo1-1280-1024x576.jpg" alt="">
	</div>
	<div class="description-container">
	<h3>Motherboy</h3>
	</div>
	</div>
	<div class="card">
	<div class="image-container">
	<img src="https://img.huffingtonpost.com/asset/570414551500002a000b41a5.jpeg" alt="">
	</div>
	<div class="description-container">
	<h3>Juice</h3>
	</div>
	</div>
	<div class="card">
	<div class="image-container">
	<img src="https://vignette2.wikia.nocookie.net/arresteddevelopment/images/2/27/1x11_Public_Relations_%2827%29.png/revision/latest/scale-to-width-down/670?cb=20120408205114" alt="">
	</div>
	<div class="description-container">
	<h3>School</h3>
	</div>
	</div>
	<div class="card">
	<div class="image-container">
	<img src="https://vignette4.wikia.nocookie.net/arresteddevelopment/images/8/88/S4_Lucille_%2801%29.jpg/revision/latest/scale-to-width-down/670?cb=20130502032638" alt="">
	</div>
	<div class="description-container">
	<h3>Mother</h3>
	</div>
	</div>
	</div>
	</div>
	<div class="button-container">
	<button name="send" class="submit">See My Work History (In the console).</button>
	</div>
	<div id="places-holder">
	<form id="search-places">
	<label for="search-field">Search my places:
	<input type="text" id="search-field" name="search-field" placeholder="Search..."></label>
	<div id="radio-buttons">
	<label for="been">Places I've Been.
	<input type="radio" name="been-there" value="true" id="been"></label>
	<label for="been">Places I Want to Go.
	<input type="radio" name="been-there" value="false" id="havent-been"></label>
	</div>
	<button type="submit" name="button" class="submit">Show Me!</button>
	</form>
	<div id="place-card-holder">
	</div>
	</div>
	</div>
	<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	</body>
	</html>
	console.log("main.js");

	$(document).ready(function() {
	console.log("document ready");


	var placeNames = ["Motherboy XXX", "A Boat", "The Hospital", "Jail", "The Moon", "The Ocean"];

	var placeImages = ["https://vignette3.wikia.nocookie.net/arresteddevelopment/images/e/e0/Arrested_Development_-_Motherboy_theme_tune/revision/latest/scale-to-width-down/600?cb=20141206202315", "http://completepr.net/wp-content/uploads/2016/04/buster_bluth.jpg", "http://vignette1.wikia.nocookie.net/arresteddevelopment/images/e/e7/2x12_Hand_to_God_%2817%29.png/revision/latest?cb=20130123233400", "https://m.popkey.co/afdd28/DD8r_f-maxage-0.gif", "https://i2.wp.com/upload.wikimedia.org/wikipedia/commons/0/09/Apollo_14_Shepard.jpg", "http://thesecondtake.com/wp-content/uploads/2013/05/ad-seal.jpg"];

	var haveIBeenThere = [true, true, true, true, false, true];

	var printCards = function() {
	var domHtmlString = "";
	for (var i = 0; i < placeNames.length; i++) {
	domHtmlString += '<div class="card places-card">';
	domHtmlString += '<div class="image-container">';
	domHtmlString += '<img src="' + placeImages[i] + '">';
	domHtmlString += '</div>';
	domHtmlString += '<div class="description-container">';
	domHtmlString += '<h3 class="place-title">' + placeNames[i] + '</h3>';
	if (haveIBeenThere[i]) {
	domHtmlString += '<p class="been-there">Been there!</p>';
	} else {
	domHtmlString += '<p class="been-there">Want to go there!</p>';
	}
	domHtmlString += '</div>';
	domHtmlString += '</div>';
	}

	$("#place-card-holder").append(domHtmlString);
	};

	printCards();


	$("#search-places").on("submit", function(event) {
	event.preventDefault();
	reset();

	$(".places-card").each(function(index) {
	var currentCard = $(".places-card")[index];
	console.log("currentCard", currentCard);
	filterCardsForBeenThere(currentCard);
	filterCardsForSearchPhrase(currentCard);
	})

	$(".place-card-holder").fadeOut(0);
	$(".place-card-holder").fadeIn(500);
	});

	var filterCardsForBeenThere = function(currentCard) {
	console.log("filterCardsForBeenThere");

	var beenThereFromSearch = $("input[name=been-there]:checked").val();

	var beenThereValue = $(currentCard).find(".been-there").html();
	var beenThereBooleanValue;

	if (beenThereValue === "Been there!") {
	beenThereBooleanValue = true;
	} else {
	beenThereBooleanValue = false;
	}

	if ((!(beenThereBooleanValue.toString() == beenThereFromSearch)) && beenThereFromSearch) {
	$(currentCard).hide();
	}

	}

	var filterCardsForSearchPhrase = function(currentCard) {
	console.log("filterCardsForSearchPhrase");

	var searchValue = $("#search-field").val().toLowerCase();

	if (!($(currentCard).find(".place-title").html().toLowerCase().includes(searchValue))) {
	$(currentCard).hide();
	}
	}

	var reset = function() {
	$(".places-card").each(function(card) {
	$($(".places-card")[card]).show();
	})
	}


	});
	body {
	background: url(http://68.media.tumblr.com/de048c2d049429d429051aa7ab7ddce1/tumblr_o96nr94YTQ1qd9dz2o1_1280.jpg);
	margin: 0;
	}

	h1 {
	font-family: 'Josefin Slab', serif;
	text-align: center;
	color: #8BC34A;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10px;
	}

	.work-container {
	text-align: center;
	width: 90%;
	margin: 5%;
	border-color: #8BC34A;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	}

	#work-2 {
	font-family: 'Anton', sans-serif;
	border-style: solid;
	}

	#work-1 {
	font-family: 'Josefin Slab', serif;
	border-style: dotted;
	}

	#work-3 {
	font-family: 'Raleway', sans-serif;
	border-style: double;
	border-width: 10px;
	}

	header {
	color: white;
	}

	header > * {
	margin: 0;
	}

	nav {
	margin: 0;
	padding: 0;
	background-color: #8BC34A;
	font-family: 'Raleway', sans-serif;
	color: black;
	}

	nav > ul {
	display: flex;
	justify-content: space-around;
	list-style: none;
	width: 30%;
	margin: 0;
	}

	nav > ul > li {
	padding: 5%;
	}

	nav a {
	text-decoration: none;
	color: black;
	}

	nav > ul > li:hover {
	background-color: black;
	color: white;
	}

	nav > ul > li:hover > a {
	color: white;
	}

	#contact-me {
	padding: 40px;
	background-color: rgba(0, 0, 0, 0.5);
	}

	form input,
	form textarea {
	width:97.4%;
	height:30px;
	padding:5px 10px;
	font-size: 12px;
	color:#999;
	letter-spacing:1px;
	background: #FFF;
	border:2px solid #FFF;
	margin-bottom:25px;
	}

	form textarea {
	height:150px
	}

	.submit {
	width:100%;
	padding:5px 10px;
	font-size: 12px;
	letter-spacing:1px;
	background: #8BC34A;
	height:40px;
	text-transform:uppercase;
	letter-spacing:1px;
	color:#FFF;
	border:2px solid black;
	}

	form .message-output {
	color: white;
	font-weight: bold;
	text-align: center;
	}

	#card-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

	.card {
	background-color: #8BC34A;
	width: 300px;
	margin: 2%;
	-webkit-box-shadow: 12px 12px 6px -10px rgba(0,0,0,0.45);
	-moz-box-shadow: 12px 12px 6px -10px rgba(0,0,0,0.45);
	box-shadow: 12px 12px 6px -10px rgba(0,0,0,0.45);
	}

	.image-container {
	max-width: 300px;
	max-height: 200px;
	overflow: none;
	}

	.image-container > img {
	width: 300px;
	height: 175px;
	object-fit: cover;
	}

	.description-container {
	text-align: center;
	font-family: 'Raleway', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	}

	.button-container {
	padding: 22px;
	}

	#places-holder {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

	#search-places {
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	}

	#search-places > *{
	width: 33%;
	}

	#radio-buttons {
	padding: 0 3%;
	}

	#place-card-holder {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}