websites starter

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- add a title for the page -->

    <link rel="stylesheet" href="/style.css" />

    <!-- add an icon for the website -->


     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

 <!-- if the code does not work, remove the comment in the following line -->
 <!--  <script src="/script.js" defer></script> -->

</head>

<body>


    <div id="container">

 <!-- add an h1 header with the text: Evolution of gaming  -->


<!-- add an h2 header with the text: Game title   set: id="game-title" -->


        <div id="screenshot-panel">

<!-- add an image, set id="screenshot" -->


<!-- add a button that rotates the screenshot 🔄 and set id="button-rotate"  -->


        </div>

<!-- add a button that displays the next game, set id="button-next"  -->


    </div>

</body>

</html>


@import url('https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Lato&family=Press+Start+2P&display=swap');

body {
    background: #0F2027;
    background: -webkit-linear-gradient(bottom, #2C5364, #203A43, #0F2027);
    background: linear-gradient(to bottom, #2C5364, #203A43, #0F2027);
    font-family: 'Lato', sans-serif;
    color: white;
    text-align: center;
    overflow-x: hidden;
    height: 1000px;
}

/* set the font family for the h1 header to:     'Press Start 2P', cursive     */


/*optional task*/


#container {
    background-color: #1b2838;
    width: 1160px;
    /* position the game window in the centre of the page */

    padding: 10px;
    /* set the border  */

    /* round the corners of the border */

}


#screenshot {
    object-fit: cover;
}


#screenshot-panel {
    position: relative;
}


#button-rotate {

    background: none;
    opacity: 0.9;
    padding: 0;
    margin: 0;
    font-size: 30px;
    position: absolute;
    top: 0px;
    left: 230px;
/*remove the default border of the button*/

/*set the mouse cursor to a pointer when hovering over a button*/

}


#button-next {
/*add a margin from the top edge of the border*/

/*add border padding to the text in the button */

    border: none;
    cursor: pointer;
    background-color: #4ca2cd;
    opacity: 0.8;
    font-size: 30px;
    color: #ffffff;
}


/*optional task*/


const games = [


  // Game: Tomb Raider - 1996 / Shadow of the Tomb Raider - 2018
  {
    past_game_title: "Tomb Raider - 1996",
    past_screenshot: "https://cdn.glitch.global/577f7cfd-04b0-4201-b8cf-5a390d167fdd/tombraider-past.jpg?v=1684604067765",
    present_game_title: "Shadow of the Tomb Raider - 2018",
    present_screenshot: "https://cdn.glitch.global/577f7cfd-04b0-4201-b8cf-5a390d167fdd/tombraider-present.jpeg?v=1684604068402",

  },


  // Game: The Sims - 2000 / The Sims 4: High School Years

  {
    past_game_title: "The Sims - 2000",
    past_screenshot: "https://cdn.glitch.global/577f7cfd-04b0-4201-b8cf-5a390d167fdd/sims-past.jpg?v=1684604065316",
    present_game_title: "The Sims 4: High School Years - 2022",
    present_screenshot: "https://cdn.glitch.global/577f7cfd-04b0-4201-b8cf-5a390d167fdd/sims-present.png?v=1684604067025",

  },


   // Game: Grand Theft Auto 1 - 1997 / Grand Theft Auto V - 2013

  {
    past_game_title: "Grand Theft Auto 1 - 1997",
    past_screenshot: "https://cdn.glitch.global/577f7cfd-04b0-4201-b8cf-5a390d167fdd/gta-past.png?v=1684604071123",
    present_game_title: "Grand Theft Auto V - 2013",
    present_screenshot: "https://cdn.glitch.global/577f7cfd-04b0-4201-b8cf-5a390d167fdd/gta-present.jpg?v=1684604062887",

  },


// Game: The Need for speed - 1994 / Need for Speed Unbound - 2022

  {
    past_game_title: "The Need for speed - 1994",
    past_screenshot: "https://cdn.glitch.global/577f7cfd-04b0-4201-b8cf-5a390d167fdd/nfs-past.jpg?v=1684604063536",
    present_game_title: "Need for Speed Unbound - 2022",
    present_screenshot: "https://cdn.glitch.global/577f7cfd-04b0-4201-b8cf-5a390d167fdd/nfs-present.jpg?v=1684604064671",

  },


  //TODO  Game: FIFA International Soccer - 1994 / Fifa23 - 2022

  {
    past_game_title: "",
    past_screenshot: "",
    present_game_title: "",
    present_screenshot: "",

  },


];


let gamesCounter = 0;
let currentState=0;
const screenshot = document.querySelector("#screenshot");
const gameTitle = document.querySelector("#game-title");
const buttonRotate = document.querySelector("#button-rotate");


function newGame(){
  currentState=0
  screenshot.src=games[gamesCounter].present_screenshot;
  gameTitle.textContent = games[gamesCounter].present_game_title;

}


newGame();


document.querySelector("#button-rotate").addEventListener("click", function () {

  buttonRotate.style.visibility="hidden";


/*Editing the screenshot rotation animation*/
   screenshot.classList.add("animate__animated", "animate__flipInX");

if (currentState==0){
  currentState++;
  gameTitle.textContent = games[gamesCounter].past_game_title;
 screenshot.src=games[gamesCounter].past_screenshot;

}
else{
currentState--;
  gameTitle.textContent = games[gamesCounter].present_game_title;
screenshot.src=games[gamesCounter].present_screenshot;
}


});


screenshot.addEventListener('animationend', () => {
/*Editing the screenshot rotation animation*/
  screenshot.classList.remove("animate__animated", "animate__flipInX");
/*Editing the game transition animation*/
  screenshot.classList.remove("animate__animated", "animate__rubberBand");
  buttonRotate.style.visibility="visible";

});


document.querySelector("#button-next").addEventListener("click", function () {
gamesCounter++
 if (gamesCounter >= games.length){
   gamesCounter=0;

 }
buttonRotate.style.visibility="hidden";
/*Editing the game transition animation*/
  screenshot.classList.add("animate__animated", "animate__rubberBand");
 setTimeout(newGame,500);


});