├── .gitignore ├── vanilla-js-wheel-of-fortune-part2-FINISHED ├── wheel.png ├── button.png ├── marker.png ├── index.html ├── styles.css └── script.js └── vanilla-js-wheel-of-fortune-part2-STARTHERE ├── img ├── wheel.png ├── button.png └── marker.png ├── index.html ├── styles.css └── script.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-FINISHED/wheel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/wheel-of-fortune-part2/HEAD/vanilla-js-wheel-of-fortune-part2-FINISHED/wheel.png -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-FINISHED/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/wheel-of-fortune-part2/HEAD/vanilla-js-wheel-of-fortune-part2-FINISHED/button.png -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-FINISHED/marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/wheel-of-fortune-part2/HEAD/vanilla-js-wheel-of-fortune-part2-FINISHED/marker.png -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-STARTHERE/img/wheel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/wheel-of-fortune-part2/HEAD/vanilla-js-wheel-of-fortune-part2-STARTHERE/img/wheel.png -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-STARTHERE/img/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/wheel-of-fortune-part2/HEAD/vanilla-js-wheel-of-fortune-part2-STARTHERE/img/button.png -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-STARTHERE/img/marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/wheel-of-fortune-part2/HEAD/vanilla-js-wheel-of-fortune-part2-STARTHERE/img/marker.png -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-FINISHED/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Weiben - Wheel of fortune 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 |
-
15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-STARTHERE/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Weiben - Wheel of fortune 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 |
-
15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-FINISHED/styles.css: -------------------------------------------------------------------------------- 1 | #app { 2 | width: 400px; 3 | height: 400px; 4 | margin: 0 auto; 5 | position: relative; 6 | } 7 | 8 | .display { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | width: 200px; 13 | height: 50px; 14 | border: 1px solid black; 15 | border-radius: 20px; 16 | text-align: center; 17 | font-family: Arial, Helvetica, sans-serif; 18 | font-size: 2rem; 19 | margin: 20px auto; 20 | } 21 | 22 | .marker { 23 | position: absolute; 24 | width: 60px; 25 | left: 172px; 26 | top: -20px; 27 | z-index: 2; 28 | } 29 | 30 | .wheel { 31 | width: 100%; 32 | height: 100%; 33 | } 34 | 35 | .button { 36 | display: block; 37 | width: 250px; 38 | margin: 40px auto; 39 | cursor: pointer; 40 | } 41 | 42 | .button:hover { 43 | opacity: 0.8; 44 | } 45 | 46 | .blur { 47 | animation: blur 10s; 48 | } 49 | 50 | @keyframes blur { 51 | 0% { 52 | filter: blur(1.5px); 53 | } 54 | 80% { 55 | filter: blur(1.5px); 56 | } 57 | 100% { 58 | filter: blur(0px); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-STARTHERE/styles.css: -------------------------------------------------------------------------------- 1 | #app { 2 | width: 400px; 3 | height: 400px; 4 | margin: 0 auto; 5 | position: relative; 6 | } 7 | 8 | .display { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | width: 200px; 13 | height: 50px; 14 | border: 1px solid black; 15 | border-radius: 20px; 16 | text-align: center; 17 | font-family: Arial, Helvetica, sans-serif; 18 | font-size: 2rem; 19 | margin: 20px auto; 20 | } 21 | 22 | .marker { 23 | position: absolute; 24 | width: 60px; 25 | left: 172px; 26 | top: -20px; 27 | z-index: 2; 28 | } 29 | 30 | .wheel { 31 | width: 100%; 32 | height: 100%; 33 | } 34 | 35 | .button { 36 | display: block; 37 | width: 250px; 38 | margin: 40px auto; 39 | cursor: pointer; 40 | } 41 | 42 | .button:hover { 43 | opacity: 0.8; 44 | } 45 | 46 | .blur { 47 | animation: blur 10s; 48 | } 49 | 50 | @keyframes blur { 51 | 0% { 52 | filter: blur(1.5px); 53 | } 54 | 80% { 55 | filter: blur(1.5px); 56 | } 57 | 100% { 58 | filter: blur(0px); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-STARTHERE/script.js: -------------------------------------------------------------------------------- 1 | // Immediately invoked function expression 2 | // to not pollute the global scope 3 | (function() { 4 | const wheel = document.querySelector('.wheel'); 5 | const startButton = document.querySelector('.button'); 6 | 7 | let deg = 0; 8 | 9 | startButton.addEventListener('click', () => { 10 | // Disable button during spin 11 | startButton.style.pointerEvents = 'none'; 12 | // Calculate a new rotation between 5000 and 10 000 13 | deg = Math.floor(5000 + Math.random() * 5000); 14 | // Set the transition on the wheel 15 | wheel.style.transition = 'all 10s ease-out'; 16 | // Rotate the wheel 17 | wheel.style.transform = `rotate(${deg}deg)`; 18 | // Apply the blur 19 | wheel.classList.add('blur'); 20 | }); 21 | 22 | wheel.addEventListener('transitionend', () => { 23 | // Remove blur 24 | wheel.classList.remove('blur'); 25 | // Enable button when spin is over 26 | startButton.style.pointerEvents = 'auto'; 27 | // Need to set transition to none as we want to rotate instantly 28 | wheel.style.transition = 'none'; 29 | // Calculate degree on a 360 degree basis to get the "natural" real rotation 30 | // Important because we want to start the next spin from that one 31 | // Use modulus to get the rest value 32 | const actualDeg = deg % 360; 33 | // Set the real rotation instantly without animation 34 | wheel.style.transform = `rotate(${actualDeg}deg)`; 35 | }); 36 | })(); 37 | -------------------------------------------------------------------------------- /vanilla-js-wheel-of-fortune-part2-FINISHED/script.js: -------------------------------------------------------------------------------- 1 | // Immediately invoked function expression 2 | // to not pollute the global scope 3 | (function() { 4 | const wheel = document.querySelector('.wheel'); 5 | const startButton = document.querySelector('.button'); 6 | const display = document.querySelector('.display'); 7 | 8 | let deg = 0; 9 | let zoneSize = 45; // deg 10 | 11 | // Counter clockwise 12 | const symbolSegments = { 13 | 1: "Frog", 14 | 2: "Snail", 15 | 3: "Dolphin", 16 | 4: "Ladybug", 17 | 5: "Koala", 18 | 6: "Unicorn", 19 | 7: "Dragon", 20 | 8: "Snowman", 21 | } 22 | 23 | const handleWin = (actualDeg) => { 24 | const winningSymbolNr = Math.ceil(actualDeg / zoneSize); 25 | display.innerHTML = symbolSegments[winningSymbolNr]; 26 | } 27 | 28 | startButton.addEventListener('click', () => { 29 | // Reset display 30 | display.innerHTML = "-"; 31 | // Disable button during spin 32 | startButton.style.pointerEvents = 'none'; 33 | // Calculate a new rotation between 5000 and 10 000 34 | deg = Math.floor(5000 + Math.random() * 5000); 35 | // Set the transition on the wheel 36 | wheel.style.transition = 'all 10s ease-out'; 37 | // Rotate the wheel 38 | wheel.style.transform = `rotate(${deg}deg)`; 39 | // Apply the blur 40 | wheel.classList.add('blur'); 41 | }); 42 | 43 | wheel.addEventListener('transitionend', () => { 44 | // Remove blur 45 | wheel.classList.remove('blur'); 46 | // Enable button when spin is over 47 | startButton.style.pointerEvents = 'auto'; 48 | // Need to set transition to none as we want to rotate instantly 49 | wheel.style.transition = 'none'; 50 | // Calculate degree on a 360 degree basis to get the "natural" real rotation 51 | // Important because we want to start the next spin from that one 52 | // Use modulus to get the rest value 53 | const actualDeg = deg % 360; 54 | // Set the real rotation instantly without animation 55 | wheel.style.transform = `rotate(${actualDeg}deg)`; 56 | // Calculate and display the winning symbol 57 | handleWin(actualDeg); 58 | }); 59 | })(); 60 | --------------------------------------------------------------------------------