diff --git a/puppeteer/gossip-grid.js b/puppeteer/gossip-grid.js index f8ca06932..f4cd675b6 100644 --- a/puppeteer/gossip-grid.js +++ b/puppeteer/gossip-grid.js @@ -1,4 +1,4 @@ -import { gossips as archived } from './data.js' +import { gossips } from './data.js' const body = document.querySelector('body') @@ -12,14 +12,6 @@ const inputs = [ { props: ['background'], min: 20, max: 75, value: 60 }, ] -let gossips = new Proxy(archived, { - set: (target, prop, value) => { - target[prop] = value - createGossip(value, true) - return true - }, -}) - export const grid = () => { inputs.forEach((input) => createInput(input)) createAddGossip() @@ -45,16 +37,17 @@ const createGossip = (g, isNew = false) => { } const createAddGossip = () => { - const addGossip = document.createElement('div') + const addGossip = document.createElement('form') addGossip.className = 'gossip' addGossip.id = 'add-gossip' + addGossip.onsubmit = () => false const newInput = document.createElement('textarea') newInput.autofocus = true newInput.placeholder = 'Got a gossip to share ?' newInput.addEventListener('keyup', (e) => addNewGossip(newInput, e)) - const button = document.createElement('div') + const button = document.createElement('button') button.className = 'button' button.textContent = 'Share gossip!' button.addEventListener('click', (e) => addNewGossip(newInput)) @@ -64,13 +57,11 @@ const createAddGossip = () => { } const addNewGossip = (input, event) => { - const noValue = !input.value + const noValue = !input.value.trim() const notEnterKey = event && event.keyCode !== 13 - if (notEnterKey || noValue) { - input.focus() - return - } - gossips[gossips.length] = input.value + if (notEnterKey || noValue) return + createGossip(input.value, true) + gossips.push(input.value) input.value = '' input.focus() } @@ -97,16 +88,16 @@ const createInput = ({ props, min, max, value }) => { } const customize = ({ target }, ...props) => { - const gossips = [...document.querySelectorAll('.gossip')] - gossips.forEach((gossip) => { - props.forEach((prop) => { + for (const card of [...document.querySelectorAll('.gossip')]) { + for (const prop of props) { const updatedValue = (prop === 'lineHeight' && `${Number(target.value) * 1.5}px`) || (prop === 'background' && `hsl(280, 50%, ${target.value}%)`) || `${target.value}px` - gossip.style[prop] = updatedValue - }) - }) + card.style[prop] = updatedValue + } + } + const valueLabel = target.nextElementSibling valueLabel.textContent = target.value } diff --git a/puppeteer/gossip-grid_test.js b/puppeteer/gossip-grid_test.js new file mode 100644 index 000000000..2889edd63 --- /dev/null +++ b/puppeteer/gossip-grid_test.js @@ -0,0 +1,41 @@ +import { gossips } from './subjects/gossip-grid/data.js' + +export const tests = [] + +tests.push(async ({ page, eq }) => { + // test that the grid is properly generated + + const content = await page.$$eval('.gossip', nodes => nodes.map(n => n.textContent)) + + eq(content, ['Share gossip!', ...gossips]) +}) + + +tests.push(async ({ page, eq }) => { + // test that you can add a gossip + + return new Promise(()=>{}) +}) + + +tests.push(async ({ page, eq }) => { + // test that you can change the width + + return new Promise(()=>{}) +}) + + +tests.push(async ({ page, eq }) => { + // test that you can change the font-size + + return new Promise(()=>{}) +}) + + +tests.push(async ({ page, eq }) => { + // test that you can change the background + + return new Promise(()=>{}) +}) + + diff --git a/subjects/gossip-grid/README.md b/subjects/gossip-grid/README.md index 5c8890624..f4777610d 100644 --- a/subjects/gossip-grid/README.md +++ b/subjects/gossip-grid/README.md @@ -4,9 +4,11 @@ Good information is the pillar of society, that's why you've decided to dedicate your time to reveal the powerful truth to the world and deliver essential and strong news: you're launching a gossip grid. -Create the function `grid` which displays all the `gossips`, provided in the data file below, as cards on a grid, and allows the user to: +Create the function `grid` which displays all the `gossips`, provided in the data file below, as cards on a grid (in the same order). +They must be `div` with the `gossip` class. + +The first `gossip` card must be a form with a `textarea` and a submit button that allows to add a new gossip to the list -- add a new gossip to the list - customize the width, font size and background of each card with `range` inputs. ### Notions