Last active
September 28, 2017 19:35
-
-
Save imparvez/a2bd24b70538dda5cf9366cdd13156ba to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Color Quotes</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="tab-container"> | |
| <div class="_tab" data-key='1'>BOX 1</div> | |
| <div class="_tab" data-key='2'>BOX 2</div> | |
| <div class="_tab-all">ALL</div> | |
| </div> | |
| <div class="box emerald" data-key='1'>BOX 1</div> | |
| <div class="box peter-river" data-key='2'>BOX 2</div> | |
| <div class="box emerald" data-key='1'>BOX 1</div> | |
| <div class="box peter-river" data-key='2'>BOX 2</div> | |
| <div class="box emerald" data-key='1'>BOX 1</div> | |
| <div class="box peter-river" data-key='2'>BOX 2</div> | |
| </div> | |
| <script src='./script.js'></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var _tab = document.querySelectorAll('._tab'); | |
| var _tabAll = document.querySelector('._tab-all'); | |
| var boxAll = document.querySelectorAll('.box'); | |
| _tab.forEach((key) => { | |
| key.addEventListener('click', getQuotes); | |
| }) | |
| _tabAll.addEventListener('click', function(){ | |
| boxAll.forEach((box) => { | |
| if(hasClass(box, 'hide')) { | |
| box.classList.remove('hide'); | |
| } | |
| }) | |
| }) | |
| function getQuotes(e) { | |
| boxAll.forEach((box) => { | |
| box.classList.add('hide'); | |
| if(box.dataset.key === e.target.dataset.key && hasClass(box, 'hide')) { | |
| box.classList.remove('hide'); | |
| } else { | |
| box.classList.add('hide'); | |
| } | |
| }) | |
| } | |
| function hasClass(element, classes) { | |
| return (' ' + element.className + ' ').indexOf(' ' + classes + ' ') > -1; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| font-family: 'Roboto', sans-serif; | |
| box-sizing: border-box; | |
| } | |
| .wrapper { | |
| text-align: center; | |
| } | |
| .tab-container { | |
| width: 80%; | |
| margin: 0 auto; | |
| padding: 2em; | |
| } | |
| ._tab, | |
| ._tab-all { | |
| width: 25%; | |
| display: inline-block; | |
| padding: 10px 15px; | |
| background: #34495e; | |
| border: 1px solid #fff; | |
| color: #fff; | |
| font-family: Roboto; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| } | |
| .box { | |
| width: 100px; | |
| height: 50px; | |
| line-height: 50px; | |
| text-align: center; | |
| border-radius: 5px; | |
| display: inline-block; | |
| } | |
| .emerald { | |
| background-color: #2ecc71; | |
| color: #fff; | |
| } | |
| .peter-river { | |
| background-color: #3498db; | |
| color: #fff; | |
| } | |
| .box.hide { | |
| display: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment