feat(index.html): added first draft of show/hide code and copy.

index.html

@@ -44,14 +44,14 @@
 
     <section class="nes-container with-title">
       <h2 class="title">Buttons</h2>
-      <div>
+      <div id="buttons">
         <button type="button" class="nes-btn">Normal</button>
         <button type="button" class="nes-btn is-primary">Primary</button>
         <button type="button" class="nes-btn is-success">Success</button>
         <button type="button" class="nes-btn is-warning">Warning</button>
         <button type="button" class="nes-btn is-error">Error</button>
         <button type="button" class="nes-btn is-disabled">Disabled</button>
-        <button type="button" class="nes-btn is-primary show-code" id="show-buttons-code">Show Code</button>
+        <button type="button" class="nes-btn is-error show-code" id="show-buttons-code"><></button>
       </div>
     </section>
     <section class="nes-container code" id="code-buttons">
@@ -62,6 +62,7 @@
         <p><span><</span>button type="button" class="nes-btn is-warning">Warning<span><</span>/button></p>
         <p><span><</span>button type="button" class="nes-btn is-error">Error<span><</span>/button></p>
         <p><span><</span>button type="button" class="nes-btn is-disabled">Disabled<span><</span>/button></p>
+        <button type="button" class="nes-btn show-code copy" id="copy-buttons" onClick="copyToClipboard('buttons')">Copy</button>
       </code>
     </section>
 
@@ -465,6 +466,20 @@
     </footer>
   </body>
   <script>
+    function copyToClipboard(element) {
+      var divToClipboard = document.querySelector('#' + element);
+      const el = document.createElement('textarea');
+      el.value = divToClipboard.innerHTML;
+      el.setAttribute('readonly', '');
+      el.style.position = 'absolute';
+      el.style.left = '-9999px';
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand('copy');
+      document.body.removeChild(el);
+    }
+
+    window.onload = function() {
       var link = document.querySelector("a.github-link");
       var octocat = document.querySelector("a.github-link > i.nes-octocat");
       link.addEventListener("mouseover", function() {
@@ -474,83 +489,11 @@
         octocat.classList.remove("animate");
       });
 
-    window.onload = function() {
       var buttons = document.querySelector("#show-buttons-code");
       var codeButtons = document.querySelector("#code-buttons");
-
       buttons.addEventListener("click", function() {
-        console.log('test')
+        codeButtons.style.display = codeButtons.style.display === 'block' ? 'none' : 'block';
       });
-
-      // var containers = document.querySelector("#show-containers-code");
-      // container.addEventListener("click", function() {
-      //   console.log('oi2')
-      // });
-
-      // var radios = document.querySelector("#show-radios-code");
-      // radios.addEventListener("click", function() {
-      //   console.log('oi3')
-      // });
-
-      // var checkboxes = document.querySelector("#show-checkboxes-code");
-      // checkboxes.addEventListener("click", function() {
-      //   console.log('oi4')
-      // });
-
-      // var avatars = document.querySelector("#show-avatars-code");
-      // avatars.addEventListener("click", function() {
-      //   console.log('oi5')
-      // });
-
-      // var forms = document.querySelector("#show-forms-code");
-      // forms.addEventListener("click", function() {
-      //   console.log('oi6')
-      // });
-
-      // var ballons = document.querySelector("#show-ballons-code");
-      // ballons.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var lists = document.querySelector("#show-lists-code");
-      // lists.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var table = document.querySelector("#show-table-code");
-      // table.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var progress = document.querySelector("#show-progress-code");
-      // progress.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var badges = document.querySelector("#show-badges-code");
-      // badges.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var reactions = document.querySelector("#show-icons-reactions-code");
-      // reactions.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var sns = document.querySelector("#show-icons-sns-code");
-      // sns.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var others = document.querySelector("#show-icons-others-code");
-      // others.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var controllers = document.querySelector("#show-icons-controllers-code");
-      // controllers.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
     }
   </script>
 </html>

style.css

@@ -104,17 +104,22 @@ div.containers > .nes-container {
 .show-code {
   font-size: .7em;
   height: 34px;
-  width: 128px;
+  width: 43px;
   position: absolute;
-  right: 5px;
+  right: -5px;
-  top: 5px;
+  top: -5px;
+}
+
+.copy {
+  height: 34px;
+  width: 58px;
 }
 
 .code {
   display: none;
   font-size: .8em;
-  color: white;
+  color: #e76e55;
-  background-color: #ce372b;
+  background-color: rgba(45, 45, 45, .9);
   padding: 15px 0 0px 10px;
   margin-top: -20px;
 }