March 7, 2017 09:48 · Mar 7, 2017
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<h2>Metadata:</h2>
+<label for="url">URL:</label>
+    <input type="url" name="url" id="url" onkeyup="setUrl();">
+    <br>
+<label for="title">SEO Title:</label>
+    <input type="text" name="title" id="title" onkeyup="setTitle();">
+    <br>
+<label for="title">Meta Description:</label>
+    <input type="text" name="description" id="description" onkeyup="setDescription();">
+    <br>
+
+<h2>Google SERP Preview:</h2>
+<div class="serp-preview">
+    <div id="serp-title">No title to preview</div>
+    <div id="serp-url">https://no.url.to.preview/<span class="serp-arrow"></span></div>
+    <div id="serp-description">No description to preview</div>
+</div>
diff --git a/script.js b/script.js
@@ -0,0 +1,35 @@
+function setTitle() {
+    var inputBox = document.getElementById('title');
+    var title = inputBox.value;
+    if(title.length > 70) {
+        title = inputBox.value.substring(0, 70) + ' ...';
+    }
+    previewTitle(title);
+}
+
+function setDescription() {
+    var inputBox = document.getElementById('description');
+    var description = inputBox.value;
+    if(description.length > 150) {
+        description = inputBox.value.substring(0, 150) + ' ...';
+    }
+    previewDescription(description);
+}
+
+function setUrl() {
+    var inputBox = document.getElementById('url');
+    var url = inputBox.value + '<span class="serp-arrow"></span>'
+    previewUrl(url);
+}
+
+function previewDescription(description) {
+  document.getElementById('serp-description').innerHTML = description;
+}
+
+function previewUrl(url) {
+  document.getElementById('serp-url').innerHTML = url;
+}
+
+function previewTitle(title) {
+  document.getElementById('serp-title').innerHTML = title;
+}
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
diff --git a/serp-preview.markdown b/serp-preview.markdown
@@ -0,0 +1,7 @@
+SERP Preview
+------------
+
+
+A [Pen](http://codepen.io/micalm/pen/wJzojB) by [Mateusz Micał](http://codepen.io/micalm) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/micalm/pen/wJzojB/license).
diff --git a/style.css b/style.css
@@ -0,0 +1,79 @@
+    body {
+      font-family: Lato;
+    }
+
+    label {
+      display: inline-block;
+      width: 180px;
+      margin-bottom: .625em;
+    }
+
+    .serp-preview {
+      width: 600px;
+    }
+
+    .serp-arrow {
+      border-bottom-color: rgb(0, 102, 33);
+      border-bottom-style: solid;
+      border-bottom-width: 0px;
+      border-left-color: rgba(0, 0, 0, 0);
+      border-left-style: solid;
+      border-left-width: 4px;
+      border-right-color: rgba(0, 0, 0, 0);
+      border-right-style: solid;
+      border-right-width: 4px;
+      border-top-color: rgb(0, 102, 33);
+      border-top-style: solid;
+      border-top-width: 5px;
+      color: rgb(128, 128, 128);
+      cursor: default;
+      font-family: arial, sans-serif;
+      font-size: 11px;
+      font-weight: bold;
+      height: 0px;
+      position: absolute;
+      line-height: 27px;
+      margin-left: 3px;
+      margin-top: 6px;
+      text-align: center;
+      user-select: none;
+      visibility: visible;
+      white-space: nowrap;
+      width: 0px;
+    }
+
+    #serp-title {
+      color: rgb(26, 13, 171);
+      cursor: pointer;
+      font-family: arial, sans-serif;
+      font-size: 18px;
+      font-weight: normal;
+      line-height: 21.6px;
+      text-align: left;
+      text-decoration: none;
+      visibility: visible;
+      white-space: nowrap;
+    }
+
+    #serp-url {
+      color: rgb(0, 102, 33);
+      font-family: arial, sans-serif;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: normal;
+      line-height: 16px;
+      text-align: left;
+      visibility: visible;
+      white-space: nowrap;
+    }
+
+    #serp-description {
+      color: rgb(84, 84, 84);
+      font-family: arial, sans-serif;
+      font-size: 13px;
+      font-weight: normal;
+      line-height: 18.2px;
+      text-align: left;
+      visibility: visible;
+      word-wrap: break-word;
+    }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>