getcodr: Html & javascript Projects

Showing posts with label Html & javascript Projects. Show all posts

Saturday, 17 June 2023

How to Make a Bulb Effect Using JavaScript || JavaScript Projects

   
              <!DOCTYPE html>
             <html lang="en">

            <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>light-blub </title>
   
            </head>

            <body>
    
            <button id="turnon" onclick="document.getElementById('bulb')
           .src='/light-blub/img/on-bulb.jpg' ">Turn on</button>
            <img id="bulb" src="/light-blub/img/off-bulb.jpg" alt="" class="center">
            <button id="turnoff"  onclick="document.getElementById('bulb')
             .src = '/light-blub/img/off-bulb.jpg' ">Turn Off</button>
            </body>
            </html>

Saturday, 3 June 2023

CodeQuest: The JavaScript Journey || A JavaScript Game

                           Create a Simple Game using javascript
 <!DOCTYPE html>
<html>
  <head>
    <title>Simple JavaScript Game</title>
    <style>
      #game-container {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: relative;
      }
      #player {
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="player"></div>
    </div>
    <script >
            
// Get the player and game container elements
const player = document.getElementById("player");
const gameContainer = document.getElementById("game-container");

// Set the initial position of the player
let playerX = 0;
let playerY = 0;

// Function to handle keyboard arrow key events
function handleArrowKey(event) {
  const key = event.key;
  if (key === "ArrowUp" && playerY > 0) {
    playerY -= 10;
  } else if (key === "ArrowDown" && playerY < gameContainer.offsetHeight - 
        player.offsetHeight) {
    playerY += 10;
  } else if (key === "ArrowLeft" && playerX > 0) {
    playerX -= 10;
  } else if (key === "ArrowRight" && playerX < gameContainer.offsetWidth - 
        player.offsetWidth) {
    playerX += 10;
  }

  // Update the player's position
  player.style.left = playerX + "px";
  player.style.top = playerY + "px";
}

// Add event listener for arrow key events
document.addEventListener("keydown", handleArrowKey);

</script>
  </body>
</html>

Monday, 29 May 2023

Guess a number between 1 and 100 Game using HTML & JAVASCRIPT By getcodr

 <!DOCTYPE html>
<html>
<head>
  <title>Number Guessing Game</title>
</head>
<body>
  <h1>Number Guessing Game</h1>
  <p>Guess a number between 1 and 100:</p>
  <input type="text" id="guessInput">
  <button onclick="checkGuess()">Submit</button>
  <p id="message"></p>

  <script>
    // Generate a random number between 1 and 100
    var randomNumber = Math.floor(Math.random() * 100) + 1;
    var message = document.getElementById("message");

    function checkGuess() {
      var guessInput = document.getElementById("guessInput");
      var guess = parseInt(guessInput.value);

      if (isNaN(guess)) {
        message.textContent = "Invalid guess. Please enter a number.";
      } else if (guess < 1 || guess > 100) {
        message.textContent = "Please enter a number between 1 and 100.";
      } else {
        if (guess === randomNumber) {
          message.textContent = "Congratulations! You guessed the correct number.";
        } else if (guess < randomNumber) {
          message.textContent = "Too low. Try again.";
        } else {
          message.textContent = "Too high. Try again.";
        }
      }

      guessInput.value = ""; // Clear the input field
      guessInput.focus(); // Set focus back to the input field
    }
  </script>
</body>
</html>

                                  My YouTube Channel 
                                        getcodr      

Saturday, 17 June 2023

How to Make a Bulb Effect Using JavaScript || JavaScript Projects

Saturday, 3 June 2023

CodeQuest: The JavaScript Journey || A JavaScript Game

Monday, 29 May 2023

Guess a number between 1 and 100 Game using HTML & JAVASCRIPT By getcodr

This is me