hackclub · Abdoaref739 · Apr 18, 2025
diff --git a/submissions/hackclub browser buddy/hello.html b/submissions/hackclub browser buddy/hello.html
@@ -0,0 +1,20 @@
+<html>
+  <body>
+    <link rel="stylesheet" href="style.css">
+    <div id="main-div">
+    <h1 class="title">Welcome to the<br> <span class="title-name"> FunHacks! </span></h1>
+    <span class="funhacks-descrbtion">Have fun while waiting!</span>
+    <button id="start-button">Start Hacking!</button>
+    <span class="footer-text">Made with <span>&#129505;</span> by Abdelrahman Aref (Panda)</span>
+
+    </div>
+    <div id="content-div">
+      <span id="category-name">category: <span id="category">Hackclub!</span></span>
+      <span id="fact-number-text">FunHacks no. <span id="fact-number"></span>
+      <span id="fact-content">Teens have made things that launched into space! &#128640;
+        In 2022, Hack Club partnered with SpaceX to send student-made projects into orbit.</span>
+        <button id="next-button">Next!</button>
+    </div>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/submissions/hackclub browser buddy/hello_extensions.png b/submissions/hackclub browser buddy/hello_extensions.png
diff --git a/submissions/hackclub browser buddy/icon-rounded.png b/submissions/hackclub browser buddy/icon-rounded.png
diff --git a/submissions/hackclub browser buddy/manifest.json b/submissions/hackclub browser buddy/manifest.json
@@ -0,0 +1,10 @@
+{
+  "name": "FunHacks",
+  "description": "A memes generator and fun facts for the hackclub",
+  "version": "1.0",
+  "manifest_version": 3,
+  "action": {
+    "default_popup": "hello.html",
+    "default_icon": "./hello_extensions.png"
+  }
+}
diff --git a/submissions/hackclub browser buddy/popup.js b/submissions/hackclub browser buddy/popup.js
@@ -0,0 +1,21 @@
+let start_button = document.getElementById("start-button");
+let next_button = document.getElementById("next-button");
+let content_div = document.getElementById("content-div");
+let main_div = document.getElementById("main-div");
+let facts_content = document.getElementById("fact-content");
+let fact_number = document.getElementById("fact-number");
+let i = 0;
+let facts_list = ["Hack Club welcomes beginners. Many students start with zero experience and learn everything with the help of others.", "Hack Club is for high school students only! It’s a global community where teenagers learn coding together — no adults running the show.", "Everything is open source — you can see and edit real code. Even Hack Club’s own website and tools are public on GitHub, so you can learn by looking at real projects.", "You can build real websites, games, and apps with others. Hack Club has tutorials like Workshops that teach you how to make your first site, game, or app.", "Hack Club helps you host real hackathons (for free!). They’ll even help you get sponsors and manage money legally through something called Hack Club Bank."]
+start_button.onclick = function(){
+    content_div.style.display = "block";
+    main_div.style.display = "none";
+
+}
+next_button.onclick = function(){
+
+    facts_content.innerHTML = facts_list[i];
+    i++;
+    if(i == 5){
+        i = 0;
+    }
+}
diff --git a/submissions/hackclub browser buddy/style.css b/submissions/hackclub browser buddy/style.css
@@ -0,0 +1,101 @@
+body{
+    width: 300px;
+    height: 300px;
+}
+.title{
+    position: absolute;
+    font-size: 25px;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-weight: 500;
+    margin-top: 80px;
+    margin-left: 50px;
+}
+.title-name{
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: 800;
+    font-size: 28px;
+    color: orangered;
+    margin-left: 80px;
+}
+#start-button{
+    position: absolute;
+    width: 180px;
+    height: 45px;
+    background-color: transparent;
+    border: 2px solid black;
+    margin-top: 185px;
+    margin-left: 60px;
+    border-radius: 15px;
+    transition: 0.7s ease;
+    cursor: pointer;
+}
+#start-button:hover{
+    background-color: orangered;
+    color: whitesmoke;
+    border-color: rgb(187, 50, 0);
+}
+.funhacks-descrbtion{
+    position: absolute;
+    margin-top: 160px;
+    margin-left: 50px;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 15px;
+    font-weight: 700;
+}
+#content-div{
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+#category-name{
+    position: absolute;
+    margin-top: 10px;
+    margin-left: 10px;
+    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-size: 15px;
+}
+#fact-number-text{
+    position: absolute;
+    margin-top: 50px;
+    margin-left: 100px;
+    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-size: 15px;
+}
+#fact-number{
+    position: absolute;
+}
+#fact-content{
+    position: absolute;
+    width: 300px;
+    height: 100%;
+    margin-top: 50px;
+    margin-left: -185px;
+    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-size: 15px;
+    font-weight: 50;
+}
+#next-button{
+    position: absolute ;
+   width: 180px;
+    height: 45px;
+    background-color: transparent;
+    border: 2px solid black;
+    margin-top: 165px;
+    margin-left: -125px;
+    border-radius: 15px;
+    transition: 0.7s ease;
+    cursor: pointer;
+}
+#next-button:hover{
+    background-color: orangered;
+    color: whitesmoke;
+    border-color: rgb(187, 50, 0);
+}
+.footer-text{
+    position: absolute;
+    margin-top: 260px;
+    margin-left: 30px;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 10px;
+}