Adds meta tags, favicon and little tweaks

ShivrajRath · ShivrajRath · commit 3bb31be015c3 · 2018-07-02T22:29:44.000-07:00
diff --git a/app.css b/app.css
@@ -10,6 +10,10 @@ body {
   text-align: center;
 }
 
+.h {
+  display: none;
+}
+
 a {
   color: #000;
   text-decoration: none;
@@ -18,7 +22,7 @@ a {
   cursor: pointer;
 }
 
-a.h{
+a.s{
   color: #e6a117;
   border-bottom: 1px solid #e6a117;
 }
@@ -31,7 +35,7 @@ a.h{
   padding: 1%;
   resize: none;
   outline: none;
-  font-size: 1em;
+  font-size: 0.8em;
   text-decoration: none;
   border: 1px solid #000;
   font-family: "Courier New", Courier, monospace;
@@ -47,11 +51,16 @@ a.h{
   border: 1px solid #000;
 }
 
+.d {
+  background-color: #fbfbfb;
+  padding: 20px;
+}
+
 pre{
   display: block;
   font-family: monospace;
   white-space: pre;
-  font-size: 12px;
+  font-size: 0.8em;
 }
 
 @media only screen and (max-width: 768px) {
diff --git a/bundle.js b/bundle.js
@@ -28,6 +28,7 @@ function diffDisplay(str1, str2) {
 
   display.appendChild(fragment);
 
+  display.classList.remove('h');
   location.hash = '#diff';
 }
 
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
 <html lang="en">
 
 <head>
-  <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="shortcut icon" href="./favicon.ico" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="description" content="JSON diff tool, which first sorts the JSON object and then compares them.">
+  <meta name="keywords" content="diff, compare, sort, json, alphabetically, sort json, sort and diff, sort and compare">
+
   <title>JSON sort and diff</title>
 
   <link rel="stylesheet" href="./app.css">
@@ -16,24 +20,23 @@
   <h1>JSON Sort and Diff</h1>
   <form onsubmit="appSort(event, 't1', 't2')">
     <div class="boxes">
-      <textarea id="t1" class="t" name="jsonabc1" placeholder="Paste your first unsorted JSON here" aria-label="Paste your first unsorted JSON here"
+      <textarea id="t1" class="t" name="jsonabc1" placeholder="Paste your first unsorted JSON here" aria-label="Paste your first JSON here"
         spellcheck="false" required aria-required="true"></textarea>
-      <textarea id="t2" class="t" name="jsonabc2" placeholder="Paste your second unsorted JSON here" aria-label="Paste your second unsorted JSON here"
+      <textarea id="t2" class="t" name="jsonabc2" placeholder="Paste your second unsorted JSON here" aria-label="Paste your second JSON here"
         spellcheck="false" required aria-required="true"></textarea>
     </div>
     <div>
       <input type="submit" class="b" value="SORT and DIFF" data-Was-onclick="sort()">
     </div>
   </form>
-  <p>
-    <pre id="diff"></pre>
-  </p>
-  <p>
-    <h3 class="c">
-      <a href="https://github.com/ShivrajRath/jsonsortdiff" target="_blank">Github</a>&nbsp;&nbsp;&nbsp;
-      <a class="h" target="_blank" href="https://www.buymeacoffee.com/rath">Buy me a coffee</a>&nbsp;&nbsp;&nbsp;
-    </h3>
-  </p>
+
+  <pre class="d h" id="diff">
+  </pre>
+
+  <h3 class="c">
+    <a href="https://github.com/ShivrajRath/jsonsortdiff" target="_blank">Github</a>&nbsp;&nbsp;&nbsp;
+    <a class="s" target="_blank" href="https://www.buymeacoffee.com/rath">Buy me a coffee</a>&nbsp;&nbsp;&nbsp;
+  </h3>
 </body>
 
 </html>
diff --git a/main.js b/main.js
@@ -27,6 +27,7 @@ function diffDisplay(str1, str2) {
 
   display.appendChild(fragment);
 
+  display.classList.remove('h');
   location.hash = '#diff';
 }
 

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@ function diffDisplay(str1, str2) {`
`28`	`28`
`29`	`29`	`display.appendChild(fragment);`
`30`	`30`
	`31`	`+ display.classList.remove('h');`
`31`	`32`	`location.hash = '#diff';`
`32`	`33`	`}`
`33`	`34`
Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,7 @@ function diffDisplay(str1, str2) {`
`27`	`27`
`28`	`28`	`display.appendChild(fragment);`
`29`	`29`
	`30`	`+ display.classList.remove('h');`
`30`	`31`	`location.hash = '#diff';`
`31`	`32`	`}`
`32`	`33`