create a flash card game to help teach kids to spell. mobile friendly. css, js, html, etc.
c7c2767 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SpellFlash Fun Time!</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .card { | |
| perspective: 1000px; | |
| transition: all 0.3s ease; | |
| } | |
| .card-inner { | |
| transition: transform 0.8s; | |
| transform-style: preserve-3d; | |
| } | |
| .card.flipped .card-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .card-front, .card-back { | |
| backface-visibility: hidden; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| .card-back { | |
| transform: rotateY(180deg); | |
| } | |
| .bounce { | |
| animation: bounce 0.5s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .shake { | |
| animation: shake 0.5s; | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 25% { transform: translateX(-10px); } | |
| 75% { transform: translateX(10px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="max-w-md w-full"> | |
| <h1 class="text-4xl font-bold text-center mb-8 text-indigo-600">SpellFlash Fun Time! ✨</h1> | |
| <div class="card relative w-full h-64 mb-8 cursor-pointer" id="flashcard"> | |
| <div class="card-inner absolute w-full h-full"> | |
| <div class="card-front bg-white rounded-xl shadow-lg flex items-center justify-center text-6xl font-bold"> | |
| <span id="current-letter">A</span> | |
| </div> | |
| <div class="card-back bg-indigo-100 rounded-xl shadow-lg flex flex-col items-center justify-center p-4"> | |
| <p class="text-2xl mb-4">Words that start with:</p> | |
| <p class="text-4xl font-bold" id="word-example">Apple</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mb-8"> | |
| <button id="prev-btn" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg flex items-center"> | |
| <i data-feather="chevron-left" class="mr-2"></i> Previous | |
| </button> | |
| <button id="next-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg flex items-center"> | |
| Next <i data-feather="chevron-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-bold mb-4">Spell the word:</h2> | |
| <div class="flex items-center mb-4"> | |
| <input type="text" id="spelling-input" class="border-2 border-gray-300 rounded-lg py-2 px-4 w-full focus:outline-none focus:border-indigo-500" placeholder="Type the word here"> | |
| <button id="check-btn" class="ml-2 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg"> | |
| <i data-feather="check"></i> | |
| </button> | |
| </div> | |
| <p id="feedback" class="text-lg font-semibold"></p> | |
| </div> | |
| <div class="text-center"> | |
| <button id="flip-btn" class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-6 rounded-lg"> | |
| <i data-feather="rotate-cw" class="mr-2"></i> Flip Card | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Alphabet and word examples | |
| const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); | |
| const wordExamples = { | |
| 'A': 'Apple', 'B': 'Ball', 'C': 'Cat', 'D': 'Dog', 'E': 'Elephant', | |
| 'F': 'Fish', 'G': 'Giraffe', 'H': 'House', 'I': 'Ice', 'J': 'Jump', | |
| 'K': 'Kite', 'L': 'Lion', 'M': 'Monkey', 'N': 'Nest', 'O': 'Orange', | |
| 'P': 'Pizza', 'Q': 'Queen', 'R': 'Rainbow', 'S': 'Sun', 'T': 'Tree', | |
| 'U': 'Umbrella', 'V': 'Violin', 'W': 'Water', 'X': 'Xylophone', | |
| 'Y': 'Yellow', 'Z': 'Zebra' | |
| }; | |
| let currentIndex = 0; | |
| const flashcard = document.getElementById('flashcard'); | |
| const currentLetter = document.getElementById('current-letter'); | |
| const wordExample = document.getElementById('word-example'); | |
| const spellingInput = document.getElementById('spelling-input'); | |
| const feedback = document.getElementById('feedback'); | |
| // Initialize with first letter | |
| updateCard(); | |
| // Flip card event | |
| document.getElementById('flip-btn').addEventListener('click', function() { | |
| flashcard.classList.toggle('flipped'); | |
| }); | |
| // Next button event | |
| document.getElementById('next-btn').addEventListener('click', function() { | |
| currentIndex = (currentIndex + 1) % alphabet.length; | |
| updateCard(); | |
| flashcard.classList.remove('flipped'); | |
| spellingInput.value = ''; | |
| feedback.textContent = ''; | |
| }); | |
| // Previous button event | |
| document.getElementById('prev-btn').addEventListener('click', function() { | |
| currentIndex = (currentIndex - 1 + alphabet.length) % alphabet.length; | |
| updateCard(); | |
| flashcard.classList.remove('flipped'); | |
| spellingInput.value = ''; | |
| feedback.textContent = ''; | |
| }); | |
| // Check spelling event | |
| document.getElementById('check-btn').addEventListener('click', checkSpelling); | |
| spellingInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') checkSpelling(); | |
| }); | |
| function updateCard() { | |
| const letter = alphabet[currentIndex]; | |
| currentLetter.textContent = letter; | |
| wordExample.textContent = wordExamples[letter]; | |
| } | |
| function checkSpelling() { | |
| const userInput = spellingInput.value.trim().toLowerCase(); | |
| const correctWord = wordExamples[alphabet[currentIndex]].toLowerCase(); | |
| if (userInput === correctWord) { | |
| feedback.textContent = 'Correct! 🎉'; | |
| feedback.className = 'text-lg font-semibold text-green-600'; | |
| flashcard.classList.add('bounce'); | |
| setTimeout(() => flashcard.classList.remove('bounce'), 500); | |
| } else { | |
| feedback.textContent = 'Try again! The word starts with ' + alphabet[currentIndex]; | |
| feedback.className = 'text-lg font-semibold text-red-600'; | |
| flashcard.classList.add('shake'); | |
| setTimeout(() => flashcard.classList.remove('shake'), 500); | |
| } | |
| } | |
| // Touch events for mobile | |
| flashcard.addEventListener('touchstart', handleTouchStart, false); | |
| flashcard.addEventListener('touchmove', handleTouchMove, false); | |
| let xDown = null; | |
| function handleTouchStart(evt) { | |
| xDown = evt.touches[0].clientX; | |
| }; | |
| function handleTouchMove(evt) { | |
| if (!xDown) return; | |
| let xUp = evt.touches[0].clientX; | |
| let xDiff = xDown - xUp; | |
| if (xDiff > 50) { | |
| // Left swipe - next | |
| document.getElementById('next-btn').click(); | |
| } else if (xDiff < -50) { | |
| // Right swipe - previous | |
| document.getElementById('prev-btn').click(); | |
| } | |
| xDown = null; | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |