Hacky responsiveness

HackGT · Apr 9, 2019 · b61a749 · b61a749
1 parent be1f0f9
commit b61a749
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -13,6 +13,8 @@ <h1>GPBearDecks</h1>
             <div class="col"></div>
             <div class="col"></div>
         </div>
+        <div class="duplicate">
+        </div>
 
         <footer>
             Built with &#128059; by Hack.GT

diff --git a/script.js b/script.js
@@ -1,23 +1,19 @@
 const bearFile = 'bears.json'
 const cols = document.getElementsByClassName('col')
+const duplicate = document.querySelector('.duplicate')
 
 fetch(bearFile).then(function(response) {
     return response.json()
 }).then(function(bearJSON) {
     bearJSON = bearJSON.reverse();
     addBears(bearJSON)
 });
-// fetch(bearFile)
-// .then(function(response) {
-//     addBears(response.json());
-// }).then(function(json) {
-//     console.log(json)
-// })
 
 function addBears(bearJSON) {
     for (var i = 0; i < bearJSON.length; i++) {
         var currentTemplate = createBearElement(bearJSON[i], bearJSON.length - i - 1)
-        cols[i % cols.length].append(currentTemplate)
+        cols[i % cols.length].append(currentTemplate.cloneNode(true))
+        duplicate.append(currentTemplate)
     }
 }
 

diff --git a/style.css b/style.css
@@ -49,10 +49,24 @@ body {
     max-width: 100%;
 }
 
+.duplicate {
+    display: none;
+}
+
+.duplicate .bear {
+    margin: 1em 0;
+}
+
 footer {
     text-align: center;
 }
 
 @media (max-width: 600px) {
-
+    .container {
+        display: none;
+    }
+
+    .duplicate {
+        display: initial;
+    }
 }