mirror of https://github.com/01-edu/public.git
begin work on gossip-grid
This commit is contained in:
parent
9ce19db39f
commit
b019660f55
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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(()=>{})
|
||||
})
|
||||
|
||||
|
|
@ -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…
Reference in New Issue