RandomMemeWebsite/index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Meme Website</title>
    <link href="style.css" rel="stylesheet">
</head>

<body>
        <div class="container">
            <div class="memeImage">
                <a class="memeLink">
                    <img id= "meme" src="https://media.sproutsocial.com/uploads/meme-example.jpg" alt="move on idiot">
                </a>
            </div>
            <h1>The funny thing about meme is....</h1>
            <button type="button" class="generateButton">Generate Meme</button>
        </div>
    
    <script>
        const genbutton = document.querySelector(".generateButton");
        const memeImage = document.getElementById("meme");
        const headingMeme = document.querySelector(".container h1");
        const memeLink = document.querySelector(".memeLink");


        genbutton.addEventListener(
            "click", generateMeme
        )

        async function generateMeme() {
            const response = await fetch("https://meme-api.com/gimme");
            var data = await response.json();
            console.log(data);

            headingMeme.innerHTML = data.title;
            memeImage.src = data.url;
            memeLink.href = data.postLink;


        }

    </script>
</body>

</html>