Meme/Untitled-1.html at main · HarshitWaldia/Meme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <title>Meme Categories</title>
    <script>
        function showMemes(category) {
            var memeContainer = document.getElementById("meme-container");

            // Clear the existing memes
            memeContainer.innerHTML = "";

            // Show memes based on the selected category
            switch (category) {
                case "sad":
                    // Display sad memes
                    memeContainer.innerHTML = "<img src='/C:/Users/harsh/mini_project_2/memes/img1.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img2.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img3.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img4.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img5.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img6.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img7.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img8.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img9.jpg' height='500' width='500'>";
                    break;
                case "happy":
                    // Display happy memes
                    memeContainer.innerHTML = "<img src='/C:/Users/harsh/mini_project_2/memes/img1.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img2.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img3.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img4.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img5.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img6.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img7.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img8.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img9.jpg' height='500' width='500'>";
                    break;
                case "gaming":
                    // Display gaming memes
                    memeContainer.innerHTML = "<img src='/C:/Users/harsh/mini_project_2/memes/img1.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img2.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img3.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img4.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img5.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img6.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img7.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img8.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img9.jpg' height='500' width='500'>";
                    break;
                case "foody":
                    // Display foody memes
                    memeContainer.innerHTML = "<img src='/C:/Users/harsh/mini_project_2/memes/img1.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img2.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img3.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img4.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img5.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img6.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img7.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img8.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img9.jpg' height='500' width='500'>";
                    break;
                case "angry":
                    // Display angry memes
                    memeContainer.innerHTML = "<img src='/C:/Users/harsh/mini_project_2/memes/img1.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img2.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img3.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img4.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img5.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img6.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img7.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img8.jpg' height='500' width='500'><br><img src='/C:/Users/harsh/mini_project_2/memes/img9.jpg' height='500' width='500'>";
                    break;
                default:
                    // Invalid category selected
                    memeContainer.innerHTML = "Invalid category";
                    break;
            }
        }
    </script>
</head>
<body>
    <h1>Meme Categories</h1>

    <div>
        <label for="category-select">Select a category:</label>
        <select id="category-select" onchange="showMemes(this.value)">
            <option value="">Select</option>
            <option value="sad">Sad</option>
            <option value="happy">Happy</option>
            <option value="gaming">Gaming</option>
            <option value="foody">Foody</option>
            <option value="angry">Angry</option>
        </select>
    </div>

    <div id="meme-container"></div>
</body>
</html>