<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1><img src="https://app.bsd.education/res/3804b3ad-f5b8-470c-849a-e52399612aed/Halloweentitle.png" /></h1> <div class="container"> <div class="one">Pumpkin</div> <div class="two">Owl</div> <div class="three">Black cat</div> <div class="four">Broomstick</div> <div class="five">Wand</div> <div class="six">Bat</div> <div class="seven">Sword</div> </div> <span class="mid"></span> <button id="spin">FIND THE PUMPKIN</button> <div class="stoper"></div> <script src="script.js"></script> </body> </html>
*{ padding: 0; margin: 0; box-sizing:border-box; } body{ display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 100vh; background: linear-gradient(#FCB2BF, #CF56A1, #8B2F97); } h1 { font-size: 50px; align-content: center; position:fixed; top: -20px; } .container{ height: 350px; width: 350px; background: #91091E; position: relative; border-radius: 50%; overflow: hidden; box-shadow: 0 0 10px gray; transition: 3s all; } .container div{ height: 50%; width: 200px; clip-path: polygon(100% 0,50% 100%, 0 0); transform: translateX(-50%); transform-origin: bottom; position: absolute; left: 21%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-family: monospace; font-weight: 1000; color: black; writing-mode: vertical-rl; } .container .one{ background: red; left: 50%; } .container .two{ background: green; transform: rotate(51deg); } .container .three{ background: blue; transform: rotate(103deg); } .container .four{ background: cyan; transform: rotate(154deg); } .container .five{ background: yellow; transform: rotate(206deg); } .container .six{ background: orange; transform: rotate(257deg); } .container .seven{ background: pink; transform: rotate(309deg); } .mid{ height: 25px; width: 25px; border-radius: 50%; position: absolute; background: #008276; } #spin{ height: 60px; width: 400px; background: #AA2B1D; position: absolute; margin-top: 500px; font-size: 30px; color: #FFEFCF; font-weight: 1000; letter-spacing: 4px; border: 1px solid white; cursor: pointer; box-shadow: 0 5px 10px gray; transition: 0.2s all; } #spin:hover{ box-shadow: none; } .stoper{ height: 50px; width: 40px; background: #ffd600; position: absolute; clip-path: polygon(100% 0,50% 100%, 0 0); margin-top: -350px; }
let container = document.querySelector(".container"); let btn = document.getElementById("spin"); let number = Math.ceil(Math.random() * 10000); let flash = document.querySelector(".container div"); btn.onclick = function () { container.style.transform = "rotate(" + number + "deg)"; number += Math.ceil(Math.random() * 10000); //container.style.transform = "rotate(" + Math.ceil(Math.random() * 100) * 360 + "deg)"; }