css Question posted in
Some basic documentation can be found here.

Css – im trying to make an app where it will generate a random video game and show the games cover when its generated

i cant get the video game cover image from my html document to be displayed when the game title is displayed using my javascript function. im not sure what to do and couldnt find anything similar enough to my problem when googling for help.

here is my Html:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Game Generator</title>
  </head>
  <body>
    <header id="header">
      <div id="title">Video Game Generator</div>
    </header>
    <section>
      <div id="container">
        <img src="images/helldivers2-cover.avif" id="game0" />
        <img src="images/skyrim-cover.jpg" id="game1" />
        <img src="images/cyberpunk2077-cover.png" id="game2" />
        <img src="images/witcher3-cover.jpg" id="game3" />
        <img src="images/gtav-cover.png" id="game4" />
        <img src="images/starfield-cover.webp" id="game5" />
        <img src="images/dbd-cover.avif" id="game6" />
        <img src="images/arkse-cover.jpg" id="game7" />
        <img src="images/acv-cover.jpg" id="game8" />
        <img src="images/rdr2-cover.jpg" id="game9" />
        <ul id="game"></ul>
      </div>
      <div id="btn">
        <button onclick="generateGames()">Generate</button>
      </div>
    </section>

    <script src="script.js"></script>
  </body>
</html>

here is my Css:

    @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: rgb(37, 37, 37);
}

#header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

#title {
  color: white;
  font-size: 50px;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 550px;
}

#game0 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game1 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game2 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game3 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game4 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game5 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game6 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game7 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game8 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game9 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game {
  color: white;
  font-size: 25px;
  padding: 50px;
}

#btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 250px;
} 

button {
  height: 100px;
  width: 300px;
  font-size: 35px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid black;
  border-radius: 25px;
}

here is my Javascript:

   //list of games to generate//

const games = [
  'Helldivers 2',
  'The Elder Scrolls V: Skyrim Special Edition',
  'Cyberpunk 2077',
  'The Witcher 3: Wild Hunt',
  'Grand Theft Auto V',
  'Starfield',
  'Dead By Daylight',
  'Ark: Survival Evolved',
  'Assassins Creed Valhalla',
  'Red Dead Redemption 2',
];

//list of games are stored in this//

const usedGames = new Set();

//getting the game element//

const gameElement = document.getElementById('game');

//function to make the games generate randomly//

function generateGames() {

  //if the index of the listed games exceeds the length of the set, then clear the set and start again//

  if (usedGames.size >= games.length) {
    usedGames.clear();
  }

   //if the set still has a game left, continue to generate//

   while (true) {
    const randomGame = Math.floor(Math.random() * games.length);
    if (usedGames.has(randomGame)) continue;

    //set the html element of game to = the value of a random game//

    const game = games[randomGame];
    gameElement.innerHTML = game;
    usedGames.add(randomGame);
    break;
  }
}

//function to set the cover of the game to be visible when = to the title of the game//

function cover() {
  const game0 = document.getElementById('game0');
  if (games == games[0]) {
    game0.style.display = '';
  }
}

at the moment i only have the first game in the array set up to be displayed but it wont show the cover when the title is generated. any ideas as to what im doing wrong?

its supposed to display the video game cover when the randomGame index is equal to game0 which is the first game in the array. so when the button is clicked and it finally gets to index 0, it should display ‘Helldivers 2’ and the games cover image.

Tags:

2

Answers


  1. 0

    For starters, you forgot to ever call your cover() function. But even if you do, it won’t do anything meaningful. You also need to:

    • Tell it what cover to show
    • Hide the other covers before showing the one you want
    • Set the display style to something that will show it

    For example, consider this function:

    function cover(randomGame) {
  document.querySelectorAll('img').forEach(i => i.style.display = '');
  document.getElementById(`game${randomGame}`).style.display = 'block';
}

    What this will do is first set the display style of all of the <img> elements to an empty string, so they inherit the display style from their CSS rules. Which is currently set to none.

    Then it will find the specific <img> you’re looking for by its id and set its display style to block so it will be displayed.

    Then just call the function from generateGames():

    const game = games[randomGame];
gameElement.innerHTML = game;
usedGames.add(randomGame);
cover(randomGame); // <--- here
break;
    Login or Signup to reply.
  2. 0

    Creating an app that generates a random video game and displays its cover is an excellent idea for gaming enthusiasts! This app could be a fun tool for users who are indecisive about what to play next. By including filters such as genres, platforms, or release years, it could cater to different gaming preferences. Adding features like game descriptions, reviews, or links to stores could make it even more engaging and useful. With a polished interface and a touch of creativity, this app could become a go-to resource for discovering hidden gems in the gaming world.

    While exploring gaming ideas, don’t miss out on the engaging simplicity of Money Rush, a game that’s perfect for a quick, entertaining break. In Money Rush, players strategize to grow their wealth by navigating obstacles and making the right choices, all while enjoying its fast-paced and addictive gameplay. Similarly, your app could offer a quick and exciting way for users to explore new games, just like Money Rush delivers instant fun. Whether it’s discovering random games through your app or diving into the thrilling mechanics of Money Rush, both provide unique and enjoyable gaming experiences!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search