mirror of https://github.com/01-edu/public.git
Created the `pick and click` test and adjusted instructions + solution + css.
This commit is contained in:
parent
fe326c3a0f
commit
9e7c7c2ab8
|
@ -1,16 +1,16 @@
|
|||
const body = document.querySelector('body')
|
||||
|
||||
const count = document.createElement('div')
|
||||
count.className = 'count'
|
||||
count.textContent = 'hsl(0, 50%, 0%)'
|
||||
const hslValue = document.createElement('div')
|
||||
hslValue.className = 'hsl'
|
||||
hslValue.textContent = 'hsl(0, 50%, 0%)'
|
||||
|
||||
const hueText = document.createElement('div')
|
||||
hueText.className = 'text hue'
|
||||
hueText.textContent = 'hue'
|
||||
const hueValue = document.createElement('div')
|
||||
hueValue.className = 'text hue'
|
||||
hueValue.textContent = 'hue'
|
||||
|
||||
const luminosityText = document.createElement('div')
|
||||
luminosityText.className = 'text luminosity'
|
||||
luminosityText.textContent = 'luminosity'
|
||||
const luminosityValue = document.createElement('div')
|
||||
luminosityValue.className = 'text luminosity'
|
||||
luminosityValue.textContent = 'luminosity'
|
||||
|
||||
const origin = document.createElement('div')
|
||||
origin.className = 'text origin'
|
||||
|
@ -32,14 +32,16 @@ svg.setAttribute('viewBox', `0 0 ${window.innerWidth} ${window.innerHeight}`)
|
|||
const axisX = document.createElementNS('http://www.w3.org/2000/svg', 'line')
|
||||
axisX.setAttribute('y1', window.innerHeight)
|
||||
axisX.setAttribute('y2', 0)
|
||||
axisX.id = 'axisX'
|
||||
svg.append(axisX)
|
||||
|
||||
const axisY = document.createElementNS('http://www.w3.org/2000/svg', 'line')
|
||||
axisY.setAttribute('x1', window.innerWidth)
|
||||
axisY.setAttribute('x2', 0)
|
||||
axisY.id = 'axisY'
|
||||
svg.append(axisY)
|
||||
|
||||
body.append(count, hueText, luminosityText, origin, picked, svg)
|
||||
body.append(hslValue, hueValue, luminosityValue, origin, picked, svg)
|
||||
|
||||
export const pick = () => {
|
||||
document.addEventListener('mousemove', (e) => set(e))
|
||||
|
@ -58,7 +60,7 @@ export const pick = () => {
|
|||
const click = (e) => {
|
||||
document.execCommand('copy')
|
||||
const wave = document.createElement('div')
|
||||
wave.className = 'wave'
|
||||
wave.className = 'click-wave'
|
||||
wave.style.top = `${e.clientY - 10}px`
|
||||
wave.style.left = `${e.clientX - 10}px`
|
||||
body.append(wave)
|
||||
|
@ -68,7 +70,7 @@ const click = (e) => {
|
|||
const copy = (event) => {
|
||||
event.preventDefault()
|
||||
if (event.clipboardData) {
|
||||
event.clipboardData.setData('text/plain', count.textContent)
|
||||
event.clipboardData.setData('text/plain', hslValue.textContent)
|
||||
picked.classList.add('fade-in')
|
||||
setTimeout(() => picked.classList.remove('fade-in'), 1000)
|
||||
}
|
||||
|
@ -98,8 +100,8 @@ const set = ({ clientX, clientY }) => {
|
|||
body.style.color = color
|
||||
body.style.background = color
|
||||
origin.style.background = color
|
||||
count.textContent = color
|
||||
hslValue.textContent = color
|
||||
|
||||
hueText.textContent = `hue\n${hue}`
|
||||
luminosityText.textContent = `${luminosity}\nluminosity`
|
||||
hueValue.textContent = `hue\n${hue}`
|
||||
luminosityValue.textContent = `${luminosity}\nluminosity`
|
||||
}
|
||||
|
|
|
@ -0,0 +1,177 @@
|
|||
export const tests = []
|
||||
|
||||
const between = (expected, min, max) => expected >= min && expected <= max
|
||||
|
||||
const random = (min, max) => {
|
||||
if (!max) {
|
||||
max = min
|
||||
min = 0
|
||||
}
|
||||
min = Math.ceil(min)
|
||||
max = Math.floor(max)
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
|
||||
const rgbToHsl = (r, g, b) => {
|
||||
r = r / 255
|
||||
g = g / 255
|
||||
b = b / 255
|
||||
const max = Math.max(r, g, b)
|
||||
const min = Math.min(r, g, b)
|
||||
let h
|
||||
let s
|
||||
const l = (max + min) / 2
|
||||
|
||||
if (max === min) {
|
||||
h = s = 0 // achromatic
|
||||
} else {
|
||||
const d = max - min
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
|
||||
switch (max) {
|
||||
case r:
|
||||
h = (g - b) / d + (g < b ? 6 : 0)
|
||||
break
|
||||
case g:
|
||||
h = (b - r) / d + 2
|
||||
break
|
||||
case b:
|
||||
h = (r - g) / d + 4
|
||||
break
|
||||
}
|
||||
h /= 6
|
||||
}
|
||||
|
||||
return [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)]
|
||||
}
|
||||
|
||||
export const setup = async ({ page }) => {
|
||||
return {
|
||||
bodyBgRgb: async () =>
|
||||
(await page.$eval('body', (body) => body.style.background))
|
||||
.replace(/[^0-9,]+/g, '')
|
||||
.split(',')
|
||||
.map((e) => Number(e)),
|
||||
}
|
||||
}
|
||||
|
||||
tests.push(async ({ page, eq }) => {
|
||||
// check that the background color is changing on mouse move
|
||||
// by simulating 20 moves, so there must be 20 different background colors
|
||||
let move = 50
|
||||
let bgs = []
|
||||
while (move < 250) {
|
||||
move += 10
|
||||
const x = move
|
||||
const y = move * 2
|
||||
await page.mouse.move(x, y)
|
||||
const bodyBg = await page.$eval('body', (body) => body.style.background)
|
||||
const validColor = bodyBg.includes('rgb')
|
||||
if (!validColor) continue
|
||||
bgs.push(bodyBg)
|
||||
}
|
||||
const differentBgs = [...new Set(bgs)].length
|
||||
eq(differentBgs, 20)
|
||||
})
|
||||
|
||||
const coords = () => [
|
||||
[random(125, 500), random(125, 400)],
|
||||
[random(125, 500), random(125, 400)],
|
||||
[random(125, 500), random(125, 400)],
|
||||
]
|
||||
|
||||
tests.push(async ({ page, eq, bodyBgRgb }) => {
|
||||
// check that the hsl value displayed matches the current background color
|
||||
const moves = coords()
|
||||
let step = 0
|
||||
while (step < moves.length) {
|
||||
await page.mouse.move(...moves[step])
|
||||
const bgValue = rgbToHsl(...(await bodyBgRgb()))
|
||||
const hslValue = await page.$eval('.hsl', (hsl) =>
|
||||
hsl.textContent
|
||||
.replace(/[^0-9,]+/g, '')
|
||||
.split(',')
|
||||
.map((e) => Number(e)),
|
||||
)
|
||||
|
||||
const matching = hslValue.map((v, i) =>
|
||||
between(v, bgValue[i] - 2, bgValue[i] + 2) ? bgValue[i] : v,
|
||||
)
|
||||
eq(matching, bgValue)
|
||||
step++
|
||||
}
|
||||
})
|
||||
|
||||
tests.push(async ({ page, eq, bodyBgRgb }) => {
|
||||
// check that the hue value displayed matches the current background color
|
||||
const moves = coords()
|
||||
let step = 0
|
||||
while (step < moves.length) {
|
||||
await page.mouse.move(...moves[step])
|
||||
const bgValue = rgbToHsl(...(await bodyBgRgb()))
|
||||
const hueValue = await page.$eval('.hue', (hue) =>
|
||||
hue.textContent.replace(/[^0-9,]+/g, ''),
|
||||
)
|
||||
|
||||
const matching = between(hueValue, bgValue[0] - 2, bgValue[0] + 2)
|
||||
? bgValue[0]
|
||||
: Number(hueValue)
|
||||
eq(matching, bgValue[0])
|
||||
step++
|
||||
}
|
||||
})
|
||||
|
||||
tests.push(async ({ page, eq, bodyBgRgb }) => {
|
||||
// check that the luminosity value displayed matches the current background color
|
||||
const moves = coords()
|
||||
let step = 0
|
||||
while (step < moves.length) {
|
||||
await page.mouse.move(...moves[step])
|
||||
const bgValue = rgbToHsl(...(await bodyBgRgb()))
|
||||
const luminosityValue = await page.$eval('.luminosity', (luminosity) =>
|
||||
luminosity.textContent.replace(/[^0-9,]+/g, ''),
|
||||
)
|
||||
|
||||
const matching = between(luminosityValue, bgValue[2] - 2, bgValue[2] + 2)
|
||||
? bgValue[2]
|
||||
: Number(luminosityValue)
|
||||
eq(matching, bgValue[2])
|
||||
step++
|
||||
}
|
||||
})
|
||||
|
||||
tests.push(async ({ page, eq, bodyBgRgb }) => {
|
||||
// check that the hsl value is copied in the clipboard on click
|
||||
const moves = coords()
|
||||
let step = 0
|
||||
while (step < moves.length) {
|
||||
await page.mouse.click(...moves[step])
|
||||
const clipboard = await page.evaluate(() => navigator.clipboard.readText())
|
||||
const hslValue = await page.$eval('.hsl', (hsl) => hsl.textContent)
|
||||
eq(hslValue, clipboard)
|
||||
step++
|
||||
}
|
||||
})
|
||||
|
||||
tests.push(async ({ page, eq, bodyBgRgb }) => {
|
||||
// check that each svg axis is following the mouse
|
||||
const moves = coords()
|
||||
let step = 0
|
||||
while (step < 1) {
|
||||
const [mouseX, mouseY] = moves[step]
|
||||
await page.mouse.move(mouseX, mouseY)
|
||||
const axisX = await page.$eval('#axisX', (line) => [
|
||||
line.getAttribute('x1'),
|
||||
line.getAttribute('x2'),
|
||||
])
|
||||
const axisY = await page.$eval('#axisY', (line) => [
|
||||
line.getAttribute('y1'),
|
||||
line.getAttribute('y2'),
|
||||
])
|
||||
|
||||
const checkAxisCoords = (coords) => Number([...new Set(coords)].join())
|
||||
|
||||
eq(checkAxisCoords(axisX), mouseX)
|
||||
eq(checkAxisCoords(axisY), mouseY)
|
||||
step++
|
||||
}
|
||||
})
|
|
@ -4,13 +4,15 @@
|
|||
|
||||
Today, you're gonna create your own color picker.
|
||||
|
||||
Write the function `pick` which creates a `hsl` color picker varying the `hue` and `luminosity` according to the position of the mouse, which:
|
||||
Write the function `pick` which creates a `hsl` color picker varying the `hue` and `luminosity` of the according to the position of the mouse, which:
|
||||
|
||||
- displays the `hue` value in text
|
||||
- displays the `luminosity` value in text
|
||||
- displays the full `hsl` value in text
|
||||
- changes `background` of the `body`
|
||||
- displays those 3 values, using the `text` class:
|
||||
- the `hue` value in a `div` with the class `hue`
|
||||
- the `luminosity` value in a `div` with the class `luminosity`
|
||||
- the full `hsl` value
|
||||
- copies that value in the clipboard on click
|
||||
- displays two lines, for X and Y axis, following the cursor
|
||||
- displays two SVG lines, with respective ids `axisX` and `axisY`, following the cursor
|
||||
|
||||
### Notions
|
||||
|
||||
|
|
|
@ -47,11 +47,6 @@ svg line {
|
|||
stroke-width: 0.6px;
|
||||
}
|
||||
|
||||
.count {
|
||||
filter: invert(100%);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: fixed;
|
||||
filter: invert(100%);
|
||||
|
@ -60,6 +55,11 @@ svg line {
|
|||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.hsl {
|
||||
filter: invert(100%);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.hue {
|
||||
top: 100px;
|
||||
right: 100px;
|
||||
|
@ -71,6 +71,7 @@ svg line {
|
|||
left: 100px;
|
||||
}
|
||||
|
||||
/* optional elements */
|
||||
.origin {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
@ -86,7 +87,7 @@ svg line {
|
|||
right: 100px;
|
||||
}
|
||||
|
||||
.wave {
|
||||
.click-wave {
|
||||
background: white;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
Loading…
Reference in New Issue