Skip to content

Instantly share code, notes, and snippets.

View WesleySmits's full-sized avatar

Wesley Smits WesleySmits

View GitHub Profile
@WesleySmits
WesleySmits / accessible-accordion-accordion.js
Last active May 1, 2022 08:21
Accessible Accordion: Custom Accordion Element
View accessible-accordion-accordion.js
import { getAbsoluteHeight } from './utils.js';
class Curtain extends HTMLDetailsElement {
#summary = this.querySelector('summary');
#content = this.querySelector('.curtain__content');
#animation = null;
connectedCallback() {
@WesleySmits
WesleySmits / web-component-polyfill.html
Created May 1, 2022 07:49
Accessible Accordion: Polyfill for custom elements
View web-component-polyfill.html
<script src="//unpkg.com/@ungap/custom-elements/es.js"></script>
@WesleySmits
WesleySmits / accessible-accordion-basic-accordion-styling.css
Last active May 1, 2022 09:49
Accessible Accordion: Basic accordion styling
View accessible-accordion-basic-accordion-styling.css
details {
--curtain-border-color: #334455;
--curtain-background-color: #223344;
--curtain-color: #ffffff;
max-width: 30rem;
border: 1px solid var(--curtain-border-color);
color: var(--curtain-color);
overflow: hidden;
}
@WesleySmits
WesleySmits / accessible-accordion-basic-styles.css
Last active May 1, 2022 07:47
Basic styles for accordion
View accessible-accordion-basic-styles.css
body {
background: #001122;
}
p {
margin: 1rem 0;
}
p:first-child {
margin-top: 0;
View index.js
function sum(num1, num2) {
return num1 + num2;
}
module.exports = sum;
View clone-project.bash
cd projects
git clone git@github.com:YourUserName/ws-my-first-package.git
cd ws-my-first-package
npm init