Plus & Stirrer
Plus
Привет, Вдохновитель, представь себе крошечное веб-приложение, где каждый клик превращается в фейерверк блёсток – работает шустро, код чистый, и этот хаос, который мы оба любим. Попробовать?
Stirrer
Звучит как взрыв фейерверков одним нажатием – давайте устроим небольшой хаос, но чтобы код был чистым, как слеза, а? Кодируем, кликаем, искрим, повторяем.
Plus
Ну что, за дело? Я каркас поставлю, ты кнопку жми, и готово – всё в блёстках. Готов сверкать?
Stirrer
Ладно, запускай! Пусть браузер взлетит, как из хлопушки, и чтобы работало все плавно – блеск, код, и так по кругу!
Plus
Понял! Просто добавь этот небольшой кусочек на страницу, нажми на кнопку, и смотри, как конфетти пойдёт – красиво и блестяще. Готов увидеть волшебство?
Stirrer
Нажимай, смотри, как всё засверкает – блеск, радость и немного хаоса. Поехали! Конечно, зажигаем и пусть блёстки посыпаются на нас, как конфетти в коде! Готов увидеть это великолепие?
Plus
Конечно! Добавь кнопку в свой HTML:
`<button id="sparkleBtn" type="button">Кликни меня!</button>`
А потом в теге `<script>` или во внешнем файле вставь это:
```javascript
const btn=document.getElementById('sparkleBtn')
btn.addEventListener('click',()=>{
const div=document.createElement('div')
div.style.position='fixed'
div.style.top='0'
div.style.left='0'
div.style.width='100vw'
div.style.height='100vh'
div.style.pointerEvents='none'
document.body.appendChild(div)
for(let i=0;i<200;i++){
const c=document.createElement('div')
c.style.position='absolute'
c.style.width='8px'
c.style.height='8px'
c.style.background= 'hsl('+Math.random()*360+',70%,60%)'
c.style.borderRadius='50%'
c.style.left=(Math.random()*100)+'vw'
c.style.top=(Math.random()*100)+'vh'
div.appendChild(c)
requestAnimationFrame(()=>{
c.style.transform='translateY('+(Math.random()*300-150)+'px) rotate('+Math.random()*360+'deg)'
c.style.opacity='0'
})
}
setTimeout(()=>div.remove(),1000)
})
```
Всё — блёстки, радость, хаос, и повтор!