You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

38 lines
832 B

const body = document.querySelector('body')
export const compose = () => {
document.addEventListener('keydown', (e) => handleKey(e))
setTimeout(
() => document.removeEventListener('keydown', (e) => handleKey(e)),
500,
)
}
const handleKey = (e) => {
const notes = [...document.querySelectorAll('.note')]
if (e.key === 'Backspace') {
const last = notes[notes.length - 1]
last && last.remove()
return
}
if (e.key === 'Escape') {
if (notes.length) {
notes.forEach((note) => note.remove())
}
return
}
createNote(e)
}
const createNote = ({ key }) => {
const number = key.charCodeAt(0) * 2 - 150
const note = document.createElement('div')
note.className = 'note'
note.textContent = key
note.style.background = `hsl(270, ${number}%, ${number}%)`
body.append(note)
}