Skip to content

Commit

Permalink
feat(index.html): added radios, checkboxes and refactored copy/events
Browse files Browse the repository at this point in the history
  • Loading branch information
@guastallaigor
guastallaigor committed Feb 6, 2019
1 parent 1f6d222 commit a90c9c8
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 13 deletions.
60 changes: 49 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ <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-error show-code" id="show-buttons-code"><></button>
</div>
<button type="button" class="nes-btn is-error show-code" id="show-buttons-code"><></button>
</section>
<section class="nes-container code" id="code-buttons">
<code>
Expand All @@ -62,13 +62,13 @@ <h2 class="title">Buttons</h2>
<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>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
</code>
</section>

<section class="nes-container with-title">
<h2 class="title">Containers</h2>
<div class="containers">
<div class="containers" id="containers">
<div class="nes-container with-title is-centered">
<p class="title">Container.is-centered</p>
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
Expand All @@ -84,11 +84,30 @@ <h2 class="title">Containers</h2>
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>
</div>
<button type="button" class="nes-btn is-error show-code" id="show-containers-code"><></button>
</section>
<section class="nes-container code" id="code-containers">
<code>
<p><span><</span>div class="nes-container with-title is-centered">
<span><</span>p class="title">Container.is-centered<span><</span>/p>
<span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
<span><</span>/div></p>
<p><span><</span>div class="nes-container is-dark with-title">
<span><</span>p class="title">Container.is-dark<span><</span>/p>
<span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
<span><</span>/div></p>
<p><span><</span>div class="nes-container is-rounded">
<span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
<span><</span>/div>
<p><span><</span>div class="nes-container is-rounded is-dark">
<span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
<span><</span>/div>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
</code>
</section>

<section class="nes-container with-title">
<h2 class="title">Radios</h2>
<div>
<div id="radios">
<label>
<input type="radio" class="nes-radio" name="answer" checked />
<span>Yes</span>
Expand All @@ -98,6 +117,20 @@ <h2 class="title">Radios</h2>
<span>No</span>
</label>
</div>
<button type="button" class="nes-btn is-error show-code" id="show-radios-code"><></button>
</section>
<section class="nes-container code" id="code-radios">
<code>
<p><span><</span>label>
<span><</span>input type="radio" class="nes-radio" name="answer" checked />
<span><</span>span>Yes<span><</span>/span>
<span><</span>/label></p>
<p><span><</span>label>
<span><</span>input type="radio" class="nes-radio" name="answer" />
<span><</span>span>No<span><</span>/span>
<span><</span>/label></p>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('radios')">Copy</button>
</code>
</section>

<section class="nes-container with-title">
Expand All @@ -106,6 +139,7 @@ <h2 class="title">Checkboxes</h2>
<input type="checkbox" class="nes-checkbox" checked />
<span>Enable</span>
</label>
<button type="button" class="nes-btn is-error show-code" id="show-checkboxes-code"><></button>
</section>

<section class="nes-container with-title">
Expand All @@ -120,6 +154,7 @@ <h2 class="title">Avatars</h2>
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded">
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded">
</div>
<button type="button" class="nes-btn is-error show-code" id="show-avatars-code"><></button>
</section>

<section class="form nes-container with-title">
Expand Down Expand Up @@ -468,7 +503,7 @@ <h3 class="title">Controllers</h3>
<script>
function copyToClipboard(element) {
var divToClipboard = document.querySelector('#' + element);
const el = document.createElement('textarea');
var el = document.createElement('textarea');
el.value = divToClipboard.innerHTML;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
Expand All @@ -489,11 +524,14 @@ <h3 class="title">Controllers</h3>
octocat.classList.remove("animate");
});

var buttons = document.querySelector("#show-buttons-code");
var codeButtons = document.querySelector("#code-buttons");
buttons.addEventListener("click", function() {
codeButtons.style.display = codeButtons.style.display === 'block' ? 'none' : 'block';
});
var elements = ['buttons', 'containers', 'radios'];
for (var i = 0; i < elements.length; i++) {
let showEl = document.querySelector("#show-" + elements[i] + "-code");
let codeEl = document.querySelector("#code-" + elements[i]);
showEl.addEventListener("click", function() {
codeEl.style.display = codeEl.style.display === 'block' ? 'none' : 'block';
}, false);
}
}
</script>
</html>
4 changes: 2 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,8 @@ div.containers > .nes-container {
height: 34px;
width: 43px;
position: absolute;
right: -5px;
top: -5px;
right: -4px;
top: -4px;
}

.copy {
Expand Down

0 comments on commit a90c9c8

Please sign in to comment.