Fine on Mac/Win but not on iOS
-
Code Embed is wonderful to the point of seeming like magic. And so simple to use. I have one bit of a bug, however. I have a Guess My Number game to go with a blog post. It show up and works exactly as expected on both Mac and Windows, but does not show up—and greatly extends the window—on iOS/iPadOS.
I have included the code. Is there anything you can see that does not play nicely with iOS/iPadOS, something I should leave out or add? It is vanilla HTML/CSS/JS.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Number Guessing</title> <style> .lastResult { color: black; padding: 7px; } .guesses { color: #000000; padding: 4px; } button { background-color: #fbfaf6; color: #fbfaf6; width: 144px; height: 36px; border-radius: .25em; font-size: 18px; border-style: none; } #subt { background-color: #00ff0d; color: #000; width: 200px; height: 48px; border-radius: .75em; font-size: 16px; border-style: solid; margin-top: 24px; } #guessField { color: #000; width: 200px; height: 48px; font-size: 24px; border-style: none; margin-top: 24px; border: 5px solid #a1abc8; text-align: center; } #guess { font-size: 18px; margin-top: 20px; color: #263048; } #wrapper { width: 400px; height: 440px; text-align: center; font-size: 24px; color: #000000; background-color: #fbfaf6; box-sizing: border-box; border:0; overflow: hidden; margin: 0 auto; display:block; } </style> </head> <body> <div id="wrapper"> <form class="form"> <label2 for="guessField" id="guess">Guess My Number 1 to 100</label> <br> <input type="text" id="guessField" class="guessField"> <br> <input type="submit" id="subt" value="Submit Guess" class="guessSubmit"> </form> <div class="resultParas"> <br> <p>Numbers Tried: <span class="guesses"></span></p> <p>Tries Remaining: <span class="lastResult">7</span></p> <p class="lowOrHi"></p> </div> </div> <script> // Generate a random number from 1 to 100 let randomNumber = parseInt((Math.random() * 100) + 1); const submit = document.querySelector('#subt'); const userInput = document.querySelector('#guessField'); const guessSlot = document.querySelector('.guesses'); const remaining = document.querySelector('.lastResult'); const startOver = document.querySelector('.resultParas'); const lowOrHi = document.querySelector('.lowOrHi'); const p = document.createElement('p'); let previousGuesses = []; let numGuesses = 1; let playGame = true; if(playGame) { subt.addEventListener('click', function(e) { e.preventDefault(); //Grab guess from user const guess = parseInt(userInput.value); validateGuess(guess); }); } function validateGuess(guess) { if(isNaN(guess)) { alert('enter a valid number'); } else if(guess < 1) { alert('enter a number, 1 or more'); } else if(guess > 100) { alert('enter a number, 100 or less') } else { //Keep record of number of attempted guesses previousGuesses.push(guess); //Check to see if game is over if(numGuesses === 8) { displayGuesses(guess); displayMessage(<code>Game Over. My number was ${randomNumber}</code>); endGame(); } else { //Display previous guessed numbers displayGuesses(guess); //Check guess and display if wrong checkGuess(guess); } } } function checkGuess(guess) { // Display clue if guess is too high or too low if(guess === randomNumber) { displayMessage(<code>CORRECT</code>); endGame(); } else if(guess < randomNumber) { displayMessage(<code>Too low. Try again.</code>); } else if(guess > randomNumber) { displayMessage(<code>Too High. Try again.</code>); } } function displayGuesses(guess) { userInput.value = ''; guessSlot.innerHTML += <code>${guess}</code>; numGuesses++ remaining.innerHTML = <code>${8 - numGuesses}</code>; } function displayMessage(message) { lowOrHi.innerHTML = <code><h6>${message}</h6></code> } function endGame() { // Clear user input userInput.value = ''; // Disable user input button userInput.setAttribute('disabled', ''); // Display Start new Game Button p.classList.add('button'); p.innerHTML = <code><h6 id="newGame">Start New Game</h6></code> startOver.appendChild(p); playGame = false; newGame(); } function newGame() { const newGameButton = document.querySelector('#newGame'); newGameButton.addEventListener('click', function() { // Pick a new random number randomNumber = parseInt((Math.random() * 100) + 1); previousGuesses = []; numGuesses = 1; guessSlot.innerHTML = ''; lowOrHi.innerHTML = ''; remaining.innerHTML = <code>${11 - numGuesses}</code>; userInput.removeAttribute('disabled'); startOver.removeChild(p); playGame = true; }) } </script> </body> </html>The page I need help with: [log in to see the link]
Viewing 7 replies - 1 through 7 (of 7 total)
Viewing 7 replies - 1 through 7 (of 7 total)
The topic ‘Fine on Mac/Win but not on iOS’ is closed to new replies.
