feat(index.html): initial developments tests on show/hide code doc

nostalgic-css · Feb 6, 2019 · f1f73f9 · f1f73f9
1 parent d200527
commit f1f73f9
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     <title>NES.css - NES-style CSS Framework</title>
 
     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
-    <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
+    <link href="./css/nes.min.css" rel="stylesheet" />
     <link href="./style.css" rel="stylesheet" />
 
     <meta property="og:type" content="website" />
@@ -51,8 +51,19 @@ <h2 class="title">Buttons</h2>
         <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>
       </div>
     </section>
+    <section class="nes-container code" id="code-buttons">
+      <code>
+        <p><span><</span>button type="button" class="nes-btn">Normal<span><</span>/button></p>
+        <p><span><</span>button type="button" class="nes-btn is-primary">Primary<span><</span>/button></p>
+        <p><span><</span>button type="button" class="nes-btn is-success">Success<span><</span>/button></p>
+        <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>
+      </code>
+    </section>
 
     <section class="nes-container with-title">
       <h2 class="title">Containers</h2>
@@ -462,5 +473,84 @@ <h3 class="title">Controllers</h3>
     link.addEventListener("mouseout", function() {
       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')
+      });
+
+      // 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>
diff --git a/style.css b/style.css
@@ -100,3 +100,21 @@ div.containers > .nes-container {
     display: none;
   }
 }
+
+.show-code {
+  font-size: .7em;
+  height: 34px;
+  width: 128px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
+
+.code {
+  display: none;
+  font-size: .8em;
+  color: white;
+  background-color: #ce372b;
+  padding: 15px 0 0px 10px;
+  margin-top: -20px;
+}