Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/hero-patterns. Use patterns from heropatterns.com in your JavaScript lowm.es/hero-patterns
Something went wrong. Try again.
2.0 kB · 53 lines
JavaScript
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354import { version } from 'package.json'import * as hero from 'hero-patterns'import colors from './colors'
import 'tachyons'import './main.css'
// Add version number to headerdocument.querySelector('.version').innerHTML = `v${version}`
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)const roundTo = (increment, number) => Math.round(number / increment) * incrementconst genAlpha = () => { // using 102 instead of 100 for the upper range // gives us a slightly larger chance of returning 1 // the same holds true for using 23 for the lower range return roundTo(5, random(23, 102)) / 100}
const markup = name => { // generate random color combination and opacity value let [c1, c2] = colors[random(1, colors.length) - 1] if (random(1, 2) === 1) [c1, c2] = [c2, c1] const alpha = genAlpha()
// create strings from function name const id = name.replace(/([A-Z])/g, '-$1').toLowerCase() const formatName = name.replace(/([A-Z])/g, ' $1')
// generate code example const params = alpha === 1 ? `'${c2}'` : `'${c2}', ${alpha}` const functionCode = `${name}(${params})`
// generate actual markup const style = `background-position: center; background-color: ${c1}; background-image: ${hero[name](c2, alpha)}` const html = ` <div class="hero" id="${id}" role="presentation"> <div class="hide-child aspect-ratio aspect-ratio--16x9" style="${style}"> <div class="child aspect-ratio--object bg-black-70 flex flex-column items-center justify-center pa3"> <span class="white f5 f4-ns f3-l fw4 ttu tracked tc mt0 mb2">${formatName}</span> <code class="mt2 pv2 ph3 ba b--white br2 code white f6 f5-ns">${functionCode}</code> </div> </div> </div>` const template = document.createElement('template') template.innerHTML = html return template.content.firstElementChild}
const heroes = document.querySelector('.heroes')for (const pattern in hero) { heroes.appendChild(markup(pattern))}