diff --git a/puppeteer/harder-bigger-bolder-stronger.js b/puppeteer/harder-bigger-bolder-stronger.js index 18c0102a2..cd2d40e8f 100644 --- a/puppeteer/harder-bigger-bolder-stronger.js +++ b/puppeteer/harder-bigger-bolder-stronger.js @@ -1,25 +1,14 @@ const body = document.querySelector('body') -const shapes = [...Array(100).keys()] - -const random = (min, max) => { - min = Math.ceil(min) - max = Math.floor(max) - return Math.floor(Math.random() * (max - min + 1)) + min -} - -const alphabet = 'abcdefghijklmnopqrstuvwxyz' +const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' export const generateLetters = () => { - shapes.forEach((c) => { + body.append(...[...Array(120).keys()].map((c) => { const shape = document.createElement('div') - const third = shapes.length / 3 - const firstThird = c < third - const secondThird = c > third && c < third * 2 - shape.textContent = alphabet[random(0, alphabet.length - 1)] - shape.style.fontSize = `${c + 10 * 2}px` - shape.style.fontWeight = (firstThird && 300) || (secondThird && 400) || 600 - body.append(shape) - }) + shape.textContent = alphabet[Math.floor(Math.random() * alphabet.length)] + shape.style.fontSize = `${c + 11}px` + shape.style.fontWeight = [300,400,600][Math.floor(c / 40)] + return shape + })) } diff --git a/puppeteer/harder-bigger-bolder-stronger_test.js b/puppeteer/harder-bigger-bolder-stronger_test.js new file mode 100644 index 000000000..ea2d923ea --- /dev/null +++ b/puppeteer/harder-bigger-bolder-stronger_test.js @@ -0,0 +1,67 @@ +export const tests = [] + +export const setup = async ({ page }) => ({ + content: await page.$$eval('div', nodes => nodes.map(n => ({ + text: n.textContent, + size: Number((n.style.fontSize || '').slice(0, -2)), + weight: Number(n.style.fontWeight), + }))) +}) + +tests.push(({ eq, content }) => { + // should contain 120 items + eq(content.length, 120) +}) + +tests.push(({ eq, content }) => { + // content should only be one letter long + eq(content.reduce((total, { text }) => total + text.length, 0), 120) +}) + +tests.push(({ eq, content }) => { + // we expect random to yield at least 10 different letters + eq(new Set(content).size > 10, true) +}) + +tests.push(({ eq, content }) => { + // only letters from 'A' to 'Z' + eq(content.every(({ text }) => text >= 'A' && text <= 'Z'), true) +}) + +tests.push(({ eq, content }) => { + // letter size should grow + + // first should be 11 + eq(content[0].size, 11) + + // last should be 120 + eq(content[119].size, 130) + + // each letter should be bigger than the previous + let prev = 0 + for (const { size } of content) { + if (prev >= size) { + throw Error('Letters should grow') + } + } +}) + +tests.push(({ eq, content }) => { + // letter weight should increase in thirds + const third = n => ({ weight }) => weight === n + + // first third should be 300 + eq(content[0].weight, 300) + eq(content[39].weight, 300) + eq(content.slice(0, 40).every(third(300)), true) + + // second third should be 400 + eq(content[40].weight, 400) + eq(content[79].weight, 400) + eq(content.slice(40, 80).every(third(400)), true) + + // last third should be 600 + eq(content[80].weight, 600) + eq(content[119].weight, 600) + eq(content.slice(80).every(third(600)), true) +}) diff --git a/subjects/harder-bigger-bolder-stronger/README.md b/subjects/harder-bigger-bolder-stronger/README.md index d8824a408..f54d051b1 100644 --- a/subjects/harder-bigger-bolder-stronger/README.md +++ b/subjects/harder-bigger-bolder-stronger/README.md @@ -6,9 +6,9 @@ Being stuck at home, bored, desperate and coming up with a lot of weird ideas, a Generate a board where each new letter is harder, bigger, bolder and stronger! -Write the function `generateLetters` which creates 100 `div`, each containing a letter randomly picked through the alphabet, and whose style properties have to be increased: +Write the function `generateLetters` which creates 120 `div`, each containing a letter randomly picked through the **uppercase** alphabet, and whose style properties have to be increased: -- `font-size` has to grow from `20` to at least `100` pixels +- each letter `font-size` has to grow from `11` to `130` pixels - `font-weigth` has to be `300` for the first third of the letters, `400` for the second third, and `600` for the last third ### Provided files