HTML/CSS/JAVA Can't figure out how to make questions and answers

Hi, my name is Maripo, I’m learing Front-end developement, I’m currently working on a project called WhatsWorthMore ( it’s a web game where you click on an image you think is worth more, if you guess right your score goes up, if you guess wrong you get a screen for play again)
Ok to get the gist of it, I’ve been trying for atleast 1 week to try and make the java work so the code functional, but no matter how much I tried nothing worked, I even tried chatgpt and some other sites and have no idea how to make:

  1. A const that holds all my items and text,
  2. A function that gives random items and the same text ( for the items(imgs))
  3. A working score
  4. When clicking on an item(img) that is worth more to, to load in another 2 random items(imgs) and on and on, if you guess wrong it gives you a screen to play again or exit.

Here is the HTML/CSS/JAVA:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Whats Worth More</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
    <main>
        <div id="main-page">
            <header class="navbar">
                <h1><a href="#">WWM</a></h1>
                <nav class="nav">
                    <ul>
                        <li>
                            <a href="#">Play</a>
                            <a href="#">Categories</a>
                        </li>
                    </ul>
                </nav>
            </header>
        </div>
        <section class="main">
            <div class="wwm">
                <h2 class="title">Whats Worth More</h2>
                <button class="play">Play</button>
            </div>
        </section>
        <div class="popup" id="popup">
            <div class="popup-content">
                <h2>Select a Category</h2>
                <div class="categories">
                    <button class="category">Random</button>
                    <button class="category">Boats & Planes</button>
                    <button class="category">Watches</button>
                    <button class="category">Houses</button>
                    <button class="category">Cars</button>
                    <button class="category">Drinks</button>
                    <button class="category">Food</button>
                    <button class="category">Companies</button>
                    <button class="category">Art</button>
                    <button class="category">Clothing</button>
                    <button class="category">Technology</button>
                    <button class="category">Electronics</button>
                    <button class="category">Jewelry</button>
                    <button class="category">Collectibles</button>
                </div>
                <button class="close-popup" id="close-popup">Close</button>
            </div>
        </div>
    </main>
    <div class="gameStarted">
            <h2 id="question-text" class="question-text">Whats Worth More?:</h2>
            <div class="the-images">
                <img id="item1" class="item" src="https://lh3.googleusercontent.com/pw/ADCreHcCjus21gcwf_7ZWtWnI1C8VF6il_oIJ5L0yCIuR-I5YOr_ZGzZLL14BeTxWL4TfNr1nwJqkdsQiIUjeTOrj9RNKSN-05eq91gQP4fWrPSKlqOeXcXdkZtKd1F0UlLruAfupEnybDoKx7BnduYLYM32LEZPy_qJqJoABqE4lhytYWFyo-uMbZ8GlV3IjTl4fWwRNT1hKMiQoX2J0marXDA5CrtrRq9nJQE0nH2rtSCSwZmJnCQc0PrEmeA_Rg5Ss6gDzvpwWr7dQmH0IfUCXxZiJl1HFNYGCoSr2Rm79hKdVJPlLWeaevPgwDJ7Yy9igO6IdMc77QNax3jA93bMYqkChm2wa40ev8HPs7h2Q_nteXUFq_b1r2I7ap866gONYBdE0qeZcd0uSudyzTgIyz9VTsiDKxIItR7aljYE_BfL2QZHKYWmqSvuxLx0FM85qczVPcH1BI-T3goi5EvvUOcKeTUJt3sUdZsr_LQoMPlYEa2bvQcTGlypCMI7hcTYOLwNPsKV1RFCJu4MxlcnLEO6S8S9dB6CkSPZQhijU_gxXehMkj64EdCVcOlzIda1r5HegE7KaHEEoxAv8XbhM0qpnjeQrMs1an8jNqAR6IL3LW-tcQlsGljFCf_XNp0adrHsLSlvablMdiRokWnYlU3dton4yw5-3KXPdr8G-EVSrTLf1C8HAZvRx0eoSTHEJD-hxjRbieVyzhHeSjBJ6mZGIHbfnwuhudLyxYlEPZkqWRAUin-oh_iQcNXSs_wLko-XCoDt0gllXM27oa5tdvfJk4PiUKBO-fa25MCxF0G4P8aKOh_WKPkIddRswVhUh3aTPNI6O9JbDJpgeA6n-pGx8vf1lS_e79wxFjcFJAoPtvxl423aB4Oe-xCZbZlVrVMJZPQAkOhFtOQOcNSZ1yq5XH9H6bz2G9q-g_I2BkCb1KwKJ5cftOR7vg=w707-h353-s-no?authuser=0" alt="Item 1">
                <img id="item2" class="item" src="https://lh3.googleusercontent.com/pw/ADCreHdP1_Kf_n02AGb882NS26oo4NnFmqUylj7ww8ecIoHje6Zl4z_uQ8_z8KpfF126leO4l_TImfWiy0dTE0CYApw_dekxeH6XedeRv3iMrrBfCm0Ds2BhakRUXStwNm8_YyNN4fcl3NnlLpN1jMls1ixO0-WG0hmshnuFgygug-qvuMyd8hpQW1HKwslTr-zPBn2M6t_odmoQUQAWQseNysVvrCo7me-9lnfmumG17oFie0S6Pj7mEE_q4BwiYk4fQ8iYxfiuDyGdbLlR6VmRdvkf7BlbZqA417AAdzyWohLSZoU2aY_K0EP0b-7oZF76AQYc6kQE-nd2QU9nhBT9Ij6SLNLdavFUQck4uqZzVSgUXPo81hGPpeywq_FF3ll37TlEMWnQSgSEm80xgmGP7KkWK-OIVpF_-CHrCqB-18d5LnRcut48HXjqPeJRXzxRntB0HVCFvq0nZWbI2OiMF3ILJWp09gyQWr3zLsM5CfDm3NWmVLy4LUg3BNNfJ9BdBNH0TdyFzEH6vxlQkaEtVY86K9eMJVc9tqt1T6LeBXxh55YtK0XVO7Kq7Wk0JUAh6J_OqqSMtZNBYEDPOge0FXLuGLXXlZ-hDxYQjlOA4-J6ALAEY6qlcKdQu_iG6sDToC0nBlbAUmq0JYk194q8ojYxfHps-HoYCZxFeauawiC2mY49omlR_YEslegwi79DMOttecI56CdqWK6Syd_mOsd57lM9eJJ4_r2U3BUC1YHfL8bEVIAqqYQJCwkMP1wa8UYbc3gjDpmQBNNZ_dMvT2rnlYBH-S46BCeYnJH_WHPzK0NXLY5p7Qtk41o2EFoyX0843UySheVz_oRAWzQdY0-nt4DNIPOeNo7WSBqtRF9e00UevzidggdRcgZgLU4xacjkkpy6k7YhY9xsFlwUfuXvm6uuBVSAtJN3m9Gg630Jn6QgX1lb7LOn7A=w654-h381-s-no?authuser=0" alt="Item 2">
                
             </div>
             <div class="imgtxt">
                <p class="item-text">Lambo 123</p>
                <p class="item-text">Lambo 1234</p>
             </div>
             <div class="line"><p class="vs">VS</p></div>
        <div id="score-container" class="score-container">
            <p id="score-text" class="score-text">Score: 0</p>
        </div>
    </div>

    <script src="questions.js"></script>
</body>
</html>
*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: Ink Free;
}
/*SET THE NAVIGATION BAR AT THE TOP OF THE SCREEN, REMOVE BACKGROUND COLOR AND BOX SHADOW LATER ON*/
.navbar{
    
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
 

  
}
/*SETTING THE LOGO COLOR AND ANIMATION*/
h1{
    color: white;
    font-size: 2rem;
    margin-left: 2rem;
   
}
h1>a:hover{
    margin-left: 2rem;
    transition: 0.5s ease-out;
  
}
/*SETTING THE NAVBAR*/
li>a{
    text-decoration: none;
    color: white;
    font-size: 1.4rem;
    margin-left: 0.6rem;
    margin-right: 3rem;
}
li>a:hover{
    color:bisque;
    opacity: 0.8;
    transition: 0.25s ease-out;
}
h1>a{
    text-decoration: none;
    color: white;
}
ul{
    list-style-type: none;
}

/*BACKGROUND IMAGE SET TO FIT, CHANGE THE WIDTH AND HEIGHT VH IF NEEDED, OPACITY TO 1 OR REMOVE*/
body{
    background-image: url('https://wallpapercave.com/wp/BW3DgZD.jpg');
  background-size: cover; 
    width: 100vh;
    height: 100vh;
    opacity: 0.96;
}
/*THE MAIN TEXT AT THE MIDDLE OF THE SCREEN*/
.wwm{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.title{
    font-size: 5rem;
}
/*PLAY BUTTON NEEDS JAVASCRIPT*/
.play{
    margin-top: 1rem;
font-size: 3rem;
padding: 0rem 3rem;
background-color: rgb(122, 64, 72);
color: white;
}
.play:hover{
    opacity: 0.8;
    transition: .20s ease-in-out;
}


/*chatgpt*/
.popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.popup-content {
    background: white;
    width: 60%;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.category {
    margin: 5px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5rem
}

.close-popup {
    margin-top: 20px;
    background-color: #DC3545;
    font-size: 1.5rem;
}



.gameStarted {
    display: none;
}

.gameStarted.acive{
    display: flex;
    padding: 30rem;
}


.divv{
    flex-direction: row;
    border: 2px solid red;
}

.the-images {
    display: flex;
}

.body.active{
    background-image: url('https://images.hdqwalls.com/download/black-gradient-b9-1920x1080.jpg');
    transition: 1s ease;
}
/* Style the game container */
.gameStarted {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}



/* Style the item images */
.item {
display: flex;
grid-template-columns: 2 1 repeat();

justify-content: center;

}


.gameStarted{
    display: none;
}

#item1{
position: absolute;
display: flex;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
}
#item2{
    position: absolute;
display: flex;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
}
.line{
    position: absolute;
display: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 0.01rem solid grey;
height: 100vh;
background-color: grey;
opacity: 0.9;
}
.vs{
    display: flex;
    align-items: center;
    font-size: 3rem;
    border-radius: 50%;
}

.imgtxt
{
    position: absolute;
    color: white;
    font-size: 3rem;

    display:  flex;
    justify-content: space-around;
    top: 69%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160rem;
}*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: Ink Free;
}
/*SET THE NAVIGATION BAR AT THE TOP OF THE SCREEN, REMOVE BACKGROUND COLOR AND BOX SHADOW LATER ON*/
.navbar{
    
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
 

  
}
/*SETTING THE LOGO COLOR AND ANIMATION*/
h1{
    color: white;
    font-size: 2rem;
    margin-left: 2rem;
   
}
h1>a:hover{
    margin-left: 2rem;
    transition: 0.5s ease-out;
  
}
/*SETTING THE NAVBAR*/
li>a{
    text-decoration: none;
    color: white;
    font-size: 1.4rem;
    margin-left: 0.6rem;
    margin-right: 3rem;
}
li>a:hover{
    color:bisque;
    opacity: 0.8;
    transition: 0.25s ease-out;
}
h1>a{
    text-decoration: none;
    color: white;
}
ul{
    list-style-type: none;
}

/*BACKGROUND IMAGE SET TO FIT, CHANGE THE WIDTH AND HEIGHT VH IF NEEDED, OPACITY TO 1 OR REMOVE*/
body{
    background-image: url('https://wallpapercave.com/wp/BW3DgZD.jpg');
  background-size: cover; 
    width: 100vh;
    height: 100vh;
    opacity: 0.96;
}
/*THE MAIN TEXT AT THE MIDDLE OF THE SCREEN*/
.wwm{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.title{
    font-size: 5rem;
}
/*PLAY BUTTON NEEDS JAVASCRIPT*/
.play{
    margin-top: 1rem;
font-size: 3rem;
padding: 0rem 3rem;
background-color: rgb(122, 64, 72);
color: white;
}
.play:hover{
    opacity: 0.8;
    transition: .20s ease-in-out;
}


/*chatgpt*/
.popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.popup-content {
    background: white;
    width: 60%;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.category {
    margin: 5px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5rem
}

.close-popup {
    margin-top: 20px;
    background-color: #DC3545;
    font-size: 1.5rem;
}



.gameStarted {
    display: none;
}

.gameStarted.acive{
    display: flex;
    padding: 30rem;
}


.divv{
    flex-direction: row;
    border: 2px solid red;
}

.the-images {
    display: flex;
}

.body.active{
    background-image: url('https://images.hdqwalls.com/download/black-gradient-b9-1920x1080.jpg');
    transition: 1s ease;
}
/* Style the game container */
.gameStarted {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}



/* Style the item images */
.item {
display: flex;
grid-template-columns: 2 1 repeat();

justify-content: center;

}


.gameStarted{
    display: none;
}

#item1{
position: absolute;
display: flex;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
}
#item2{
    position: absolute;
display: flex;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
}
.line{
    position: absolute;
display: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 0.01rem solid grey;
height: 100vh;
background-color: grey;
opacity: 0.9;
}
.vs{
    display: flex;
    align-items: center;
    font-size: 3rem;
    border-radius: 50%;
}

.imgtxt
{
    position: absolute;
    color: white;
    font-size: 3rem;

    display:  flex;
    justify-content: space-around;
    top: 69%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160rem;
}
document.addEventListener("DOMContentLoaded", function() {
    const playButton = document.querySelector(".play");
    const popup = document.getElementById("popup");
    const closePopupButton = document.getElementById("close-popup");
    const categoryButtons = document.querySelectorAll(".category");
    const gameStarted = document.querySelector(".gameStarted");
    const mainPage = document.getElementById("main-page");
    const main = document.querySelector("main");
    const body = document.querySelector(".body");

    playButton.addEventListener("click", function() {
        popup.style.display = "block";
    });

    closePopupButton.addEventListener("click", function() {
        popup.style.display = "none";
    });

    // Add click event listeners to all category buttons
    categoryButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            // Close the popup
            popup.style.display = "none";

            // Hide the entire page
            mainPage.style.display = "none";

            // Start the game
            gameStarted.style.display = "block";

            main.style.display = "none";

           gameStarted.classList.add('active');
           body.classList.add('active');
           
        
         

        });
    });
});


Hello, You have omitted !DOCTYPE html your browser will go into quirk mode without this. Just a suggestion, good luck.

i forgot to paste it, sorry

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.