begin work on gossip-grid

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
 }

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(()=>{})
+})
+
+

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