Tomorrow is valentines day, so what could be more fitting than making a custom valentine-hearts element for your web page? Coding might be for work, but sometimes it should just be for fun. Lets create a custom element that can be added to a page like this: ```html ...

Lorem, ipsum dolor sit amet consectetur adipisicing elit. ...

``` Time for some fun! ```javascript class ValentineHearts extends HTMLElement { #shadowRoot; constructor() { super(); this.#createShadowRoot(); } #createShadowRoot() { this.#shadowRoot = this.attachShadow({ mode: 'open' }); this.#shadowRoot.innerHTML = ` `; } connectedCallback() { setInterval(() => this.#spawnHeart(), 1000); for (let i = 0; i < 20; i++) { this.#spawnHeart(Math.round(Math.random() * 100)); } this.addEventListener('resize', () => this.#resize()); this.#resize(); } #resize() { this.style.width = `${window.clientWidth}px`; this.style.height = `${document.body.clientHeight}px`; } #spawnHeart(top) { const heart = document.createElement('heart'); heart.style.top = `${top || Math.round(Math.random() * 25 + 75)}%`; heart.style.setProperty('--heart-x-offset', `${Math.random() * 100}%`); const brightness = Math.random(); heart.style.setProperty( '--heart-color', `rgb(255, ${Math.round(brightness * 150)}, ${Math.round(brightness * 50)})` ); this.#shadowRoot.appendChild(heart); setTimeout(() => { heart.style.animationName = 'sway'; }, Math.random() * 3000); setTimeout(() => { heart.style.top = '-2%'; heart.style.opacity = 0.5; heart.style.transform = `rotate(45deg) scale(${Math.random() * 0.4 + 0.8})`; function removeHeart(event) { if (event.propertyName === 'top') { heart.parentNode.removeChild(heart); heart.removeEventListener('transitionend', removeHeart); } } heart.addEventListener('transitionend', removeHeart); }, 100); } } customElements.define('valentine-hearts', ValentineHearts); ``` Happy Valentine's Day!

tirithen

Custom element hearts for Valentine's Day

Join Our Newsletter. No Spam, Only the good stuff.