Updates with formatting changes and UI improvements

Author: ShivrajRath

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-npm-debug.log
+npm-debug.log
+NOTES.md

app.css

@@ -27,8 +27,8 @@ a.h{
 .t:focus,
 .t:active {
   width: 45%;
-  height: 200px;
-  padding: 2%;
+  height: 350px;
+  padding: 1%;
   resize: none;
   outline: none;
   font-size: 1em;
@@ -39,14 +39,21 @@ a.h{
 
 .b {
   font-size: 1em;
-  margin: 0 auto;
+  margin: 20px auto;
   display: block;
   cursor: pointer;
   background: none;
-  padding: 1%;
+  padding: 0.5%;
   border: 1px solid #000;
 }
 
+pre{
+  display: block;
+  font-family: monospace;
+  white-space: pre;
+  font-size: 12px;
+}
+
 @media only screen and (max-width: 768px) {
   .t {
     width: 100%;

bundle.js

@@ -27,6 +27,8 @@ function diffDisplay(str1, str2) {
   });
 
   display.appendChild(fragment);
+
+  location.hash = '#diff';
 }
 
 // app sorting
@@ -43,7 +45,7 @@ function appSort(ev, tid1, tid2) {
     sortStr2 = jsonabc.sort(inputStr2);
 
     document.getElementById(tid1).value = sortStr1;
-    document.getElementById(tid1).value = sortStr2;
+    document.getElementById(tid2).value = sortStr2;
 
     diffDisplay(sortStr1, sortStr2);
   } catch (ex) {

index.html

@@ -16,9 +16,9 @@
   <h1>JSON Sort and Diff</h1>
   <form onsubmit="appSort(event, 't1', 't2')">
     <div class="boxes">
-      <textarea id="t1" class="t left" 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 unsorted JSON here"
         spellcheck="false" required aria-required="true"></textarea>
-      <textarea id="t2" class="t right" 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 unsorted JSON here"
         spellcheck="false" required aria-required="true"></textarea>
     </div>
     <div>

main.js

@@ -26,6 +26,8 @@ function diffDisplay(str1, str2) {
   });
 
   display.appendChild(fragment);
+
+  location.hash = '#diff';
 }
 
 // app sorting