SonyaMoisset/Create Your Meme.markdown

## Create Your Meme.markdown

      
    Raw
  

              Create Your Meme.markdown
            
          
    Create Your Meme

Meme generator

From Codecademy jQuery Project

A Pen by Sonya Moisset on CodePen.
License.

  
## index.html
<html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="header">
    <div class="container">
      <img src="http://vignette3.wikia.nocookie.net/fantendo/images/d/dc/Nyancat.png/revision/latest?cb=20130215170144">
      <h1>Nyan Meme</h1>
    </div>
  </div>
  <div class="main">
    <div class="container">
      <div class="row">
        <div class="col-md-6">

          <div class="meme thumbnail">
            <img id="meme" src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg">
            <h1 class="top-caption">Miou Miou</h1>
            <h1 class="bottom-caption">Miou</h1>
          </div>

        </div>
        <div class="col-md-6">

          <div class="tool">
            <h2>Create your meme</h2>
            <form role="form">
              <div class="form-group">
                <label>Enter an Image URL</label>
                <input id="image-url" type="text" class="form-control">
              </div>
              <div class="form-group">
                <label> Enter Top text</label>
                <input id="top-text" type="text" class="form-control">
              </div>
              <div class="form-group">
                <label>Enter Bottom text</label>
                <input id="bottom-text" type="text" class="form-control">
              </div>
            </form>
          </div>

        </div>
      </div>
    </div>
  </div>

  <script src="app.js"></script>
</body>

</html>

## script.js
var main = function() {

  $('#top-text').keyup(function() {
    var top = $(this).val();
    $('.top-caption').text(top);
  });

  $('#bottom-text').keyup(function() {
    var bottom = $(this).val();
    $('.bottom-caption').text(bottom);
  });

  $('#image-url').keyup(function() {
    var image = $(this).val();
    $('#meme').attr('src', image);
  });

};

$(document).ready(main);

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

.header {
  background: #74d795;
  margin-bottom: 40px;
  padding: 10px 0;
}

.header img {
  width: 90px;
  margin: -10px 10px 0 0;
}

.header h1 {
  color: #fff;
  text-transform: uppercase;
  display: inline-block;
}

.tool h2 {
  font-size: 25px;
  text-transform: uppercase;
  text-align: center;
  padding-top: 15px;
}

.meme {
  position: relative;
}

.top-caption,
.bottom-caption {
  font-family: Impact, sans-serif;
  color: #fff;
  text-shadow: #000 0px 0px 6px;
  text-transform: uppercase;
  text-align: center;
  font-size: 50px;
}

.top-caption {
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
}

.bottom-caption {
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
}

.tool h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 25px;
}

.tool form label {
  margin-bottom: 10px;
}

.tool input {
  border-radius: 0;
  border: 0;
  border-bottom: 5px solid #74d795;
  box-shadow: none;
}

input[type="text"]:focus {
  border: 0;
  border-bottom: 5px solid #1a7171;
  outline: 0;
  box-shadow: none;
}

## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<html>

	<head>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
	<div class="header">
	<div class="container">
	<img src="http://vignette3.wikia.nocookie.net/fantendo/images/d/dc/Nyancat.png/revision/latest?cb=20130215170144">
	<h1>Nyan Meme</h1>
	</div>
	</div>
	<div class="main">
	<div class="container">
	<div class="row">
	<div class="col-md-6">

	<div class="meme thumbnail">
	<img id="meme" src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg">
	<h1 class="top-caption">Miou Miou</h1>
	<h1 class="bottom-caption">Miou</h1>
	</div>

	</div>
	<div class="col-md-6">

	<div class="tool">
	<h2>Create your meme</h2>
	<form role="form">
	<div class="form-group">
	<label>Enter an Image URL</label>
	<input id="image-url" type="text" class="form-control">
	</div>
	<div class="form-group">
	<label> Enter Top text</label>
	<input id="top-text" type="text" class="form-control">
	</div>
	<div class="form-group">
	<label>Enter Bottom text</label>
	<input id="bottom-text" type="text" class="form-control">
	</div>
	</form>
	</div>

	</div>
	</div>
	</div>
	</div>

	<script src="app.js"></script>
	</body>

	</html>
	var main = function() {

	$('#top-text').keyup(function() {
	var top = $(this).val();
	$('.top-caption').text(top);
	});

	$('#bottom-text').keyup(function() {
	var bottom = $(this).val();
	$('.bottom-caption').text(bottom);
	});

	$('#image-url').keyup(function() {
	var image = $(this).val();
	$('#meme').attr('src', image);
	});

	};

	$(document).ready(main);
	html,
	body {
	margin: 0;
	padding: 0;
	font-family: "Open Sans", sans-serif;
	}

	.header {
	background: #74d795;
	margin-bottom: 40px;
	padding: 10px 0;
	}

	.header img {
	width: 90px;
	margin: -10px 10px 0 0;
	}

	.header h1 {
	color: #fff;
	text-transform: uppercase;
	display: inline-block;
	}

	.tool h2 {
	font-size: 25px;
	text-transform: uppercase;
	text-align: center;
	padding-top: 15px;
	}

	.meme {
	position: relative;
	}

	.top-caption,
	.bottom-caption {
	font-family: Impact, sans-serif;
	color: #fff;
	text-shadow: #000 0px 0px 6px;
	text-transform: uppercase;
	text-align: center;
	font-size: 50px;
	}

	.top-caption {
	top: 10px;
	left: 0;
	right: 0;
	margin: 0 auto;
	position: absolute;
	}

	.bottom-caption {
	bottom: 10px;
	left: 0;
	right: 0;
	margin: 0 auto;
	position: absolute;
	}

	.tool h2 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 25px;
	}

	.tool form label {
	margin-bottom: 10px;
	}

	.tool input {
	border-radius: 0;
	border: 0;
	border-bottom: 5px solid #74d795;
	box-shadow: none;
	}

	input[type="text"]:focus {
	border: 0;
	border-bottom: 5px solid #1a7171;
	outline: 0;
	box-shadow: none;
	}