add first working solution of tabs

pldvd · pldvd · commit dc7fb6f4b0ed · 2019-07-19T15:55:12.000+03:00
diff --git a/chapter_fifteen_tabs/index.html b/chapter_fifteen_tabs/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,16 +12,19 @@
     }
   </style>
 </head>
+
 <body>
   <tab-panel>
     <div data-tabname="one">Tab one</div>
     <div data-tabname="two">Tab two</div>
     <div data-tabname="three">Tab three</div>
   </tab-panel>
   <script>
-    
+
     function asTabs(node) {
       const children = Array.from(node.children);
+      const header = document.createElement('header');
+      document.body.insertBefore(header, document.querySelector('tab-panel'));
 
       function manageSelection(event) {
         if (document.querySelector('.selected')) {
@@ -33,7 +37,7 @@
           if (childNode.style.display === 'block') {
             childNode.style.display = 'none';
           }
-          if (childNode.getAttribute('data-tabname') === event.target.textContent ) {
+          if (childNode.getAttribute('data-tabname') === event.target.textContent) {
             childNode.style.display = 'block'
           }
         })
@@ -43,12 +47,13 @@
         const button = document.createElement('button');
         button.textContent = childNode.getAttribute('data-tabname');
         button.addEventListener('click', manageSelection)
-        document.body.appendChild(button);
+        document.querySelector('header').appendChild(button);
         childNode.style.display = 'none';
       })
 
     }
     asTabs(document.querySelector("tab-panel"));
   </script>
 </body>
+
 </html>
