index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Useless</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Madimi+One&display=swap" rel="stylesheet">
    
    <style>
        
        
        body{
            background-color:black;
            font-family: "Madimi One", sans-serif;
            
        }
        h1{
            color: aliceblue;
        }
        img{
            width: 200px;
        }
        button{
            width: 90px;
            height: 30px;
            position: absolute;
            top:auto;
            left: 10rem;
        }
        h3{
            color: aliceblue;
        }
        a{
            color: red;
        }
        p{
            color: aliceblue;
            position: absolute;
            top: 27rem;
        }
    </style>
</head>
<body>
    <h1 id="title">Useless Website Says Hello!</h1>
    <img class="img" id="img" src="">
    <h3 id="ator">author here</h3>
    <a id="post" href="">Reddit Post</a>
    
    
    <form>
        <button type="button" onclick="fetchImage()">Click Me</button>
    </form>

    
    <script>
        function fetchImage() {
            fetch('https://meme-api.com/gimme')
                .then(response => {
                    if (response.ok) {
                        return response.json(); // Parse the response data as JSON
                    } else {
                        throw new Error('API request failed');
                    }
                })
                .then(data => {
                    const imgElement = document.getElementById('img');
                    const title = document.getElementById('title')
                    console.log(data)

                    if (imgElement) {
                        // Set the src attribute of img element from the first preview URL
                        imgElement.src = data.preview[0];
                        document.getElementById('ator').textContent = "Author: " + data.author;
                        title.textContent =  data.title;
                        document.getElementById('post').href = data.postLink;
                        console.log(data)


                    }
                })
                .catch(error => {
                    console.error('Error fetching image:', error);
                });
        }
    </script>
   <p>Made by &copy; Smart Lizard</p>
</body>
</html>