Browse Source

begin work on gossip-grid

pull/603/head
Clement Denis 4 years ago committed by Clément
parent
commit
b019660f55
  1. 37
      puppeteer/gossip-grid.js
  2. 41
      puppeteer/gossip-grid_test.js
  3. 6
      subjects/gossip-grid/README.md

37
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
}

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

6
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

Loading…
Cancel
Save