Create a hall of fame

2024-01-26 19:16:01 +11:00
parent ef21392930
commit 5ed0ba9bff
4 changed files with 0 additions and 0 deletions
--- a/hof/javascripttest/README.md
+++ b/hof/javascripttest/README.md
@@ -0,0 +1,7 @@
+[This fucking numpty](https://github.com/ilwoongchoi/javascripttest.git) asked ChatGPT to to generate a code for a webpage with a nav bar that has a slide down effect
+
+The result was complete fail.
+
+Gotta love the fucking lazy and entitled cunts that think programming is easy.
+
+If you want help on stackoverflow - you fucking do your part, and someone like me could probably help!
--- a/hof/javascripttest/index.html
+++ b/hof/javascripttest/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Navbar</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js" defer></script>
+</head>
+<body>
+
+<div class="navbar">
+    <div class="navbar-toggle" onclick="toggleNavbar()">
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+    <ul class="navbar-links" id="navbarLinks">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Services</a></li>
+        <li><a href="#">Contact</a></li>
+    </ul>
+</div>
+
+<div class="content">
+    <h1>Welcome to My Website</h1>
+    <p>This is a simple example of an interactive slide-down navbar using HTML, CSS, and JavaScript.</p>
+</div>
+
+</body>
+</html>
--- a/hof/javascripttest/script.js
+++ b/hof/javascripttest/script.js
@@ -0,0 +1,17 @@
+function toggleNavbar() {
+    var navbarLinks = document.getElementById("navbarLinks");
+    if (navbarLinks.style.display !== "none") {
+        navbarLinks.style.display = "none";
+    } else {
+        navbarLinks.style.display = "block";
+    }
+}
+
+window.addEventListener("resize", function () {
+    var navbarLinks = document.getElementById("navbarLinks");
+    if (window.innerWidth > 768) {
+        navbarLinks.style.display = "block";
+    } else {
+        navbarLinks.style.display = "none";
+    }
+});
--- a/hof/javascripttest/styles.css
+++ b/hof/javascripttest/styles.css
@@ -0,0 +1,67 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+.navbar {
+    background-color: #333;
+    overflow: hidden;
+    padding: 15px;
+}
+
+.navbar-toggle {
+    cursor: pointer;
+}
+
+.navbar-toggle span {
+    background-color: #fff;
+    display: block;
+    height: 3px;
+    margin: 6px 0;
+    transition: 0.4s;
+}
+
+.navbar-links {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.navbar-links li {
+    float: left;
+    margin-right: 20px;
+}
+
+.navbar-links a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+.content {
+    padding: 20px;
+}
+
+@media screen and (max-width: 768px) {
+    .navbar-links {
+        display: none;
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        top: 60px;
+        left: 0;
+        background-color: #333;
+    }
+
+    .navbar-links li {
+        float: none;
+        display: block;
+    }
+
+    .navbar-toggle {
+        display: block;
+    }
+}