change click handling and add button business

index.html

@@ -27,13 +27,13 @@
     </section>
     <section class="shrimp-projects">
         <section class="shrimp-project-list">
-            <div onclick="getProjectData('biotama')">BIOTAMA</div>
-            <div onclick="getProjectData('htp')">HACK THE PLANET</div>
+            <div id='biotama'>BIOTAMA</div>
+            <div id='htp'>HACK THE PLANET</div>
         </section>
         <section id="shrimp-project-content">
                 <div class="upper">
                     <img id="image-left" class="smol-image"/>
-                    <div><p id="project-content"></p></div>
+                    <div id="project-content"></div>
                     <img id="image-right" class="smol-image"/>
                 </div>
                 <img id="image-central"/>
@@ -50,12 +50,12 @@
 Turn dive into seafood delights into a cookies bar popup? 
 
 todo list
-- style text in game descriptions
 - more shrimpy font
-- silly cookie bar (maybe)
 - shrimp profiles (about us)
 - menu i guess, hamburger, but the lines are waves
 - animations
 - shirmp cursor for hover
 - shrimp rain when button
+- clean up click handling
+- try it out into button
 -->

shrimple-functions.js

@@ -18,6 +18,10 @@ export function getProjectData(project){
     return;
 }
 
+export function clearSelectedProjectClass() {
+    document.getElementById("biotama").classList.remove("selected-project");
+    document.getElementById("htp").classList.remove("selected-project");
+}
 
 export function scrollToProjects(){
     const projects = document.getElementsByClassName("shrimp-projects")[0];

shrimply-the-best.js

@@ -1,8 +1,23 @@
-import {getProjectData, scrollToProjects, createShrimpFooter} from "./shrimple-functions.js";
+import {getProjectData, clearSelectedProjectClass, scrollToProjects, createShrimpFooter} from "./shrimple-functions.js";
+
+const biotamaBtn = document.getElementById("biotama");
+const htpBtn = document.getElementById("htp");
 
 document.addEventListener("DOMContentLoaded", function(event) { 
-  getProjectData("biotama");
+  biotamaBtn.click();
   createShrimpFooter();
 });
 
+biotamaBtn.addEventListener("click", function() {
+  clearSelectedProjectClass();
+  this.classList.add("selected-project");
+  getProjectData("biotama");
+});
+
+htpBtn.addEventListener("click", function() {
+  clearSelectedProjectClass();
+  this.classList.add("selected-project");
+  getProjectData("htp");
+});
+
 export {getProjectData, scrollToProjects}

shrimpy-styles.css

@@ -74,6 +74,14 @@ body {
     font-size: 24px;
 }
 
+.shrimp-project-list div:hover {
+    text-decoration: underline overline var(--ashy-shrimp);
+}
+
+.selected-project{
+    text-shadow: 4px 3px 0 var(--cherry-shrimp);
+}
+
 #shrimp-project-content {
     display: flex;
     flex-direction: column;
@@ -117,8 +125,9 @@ body {
 #project-content{
     display:flex;
     flex-flow:column;
-    margin: 0 auto;
-
+    margin-top: 0;
+    margin-bottom: 0;
+    justify-content: space-between;
 }
 
 @media screen and (orientation: portrait) {
@@ -139,7 +148,7 @@ body {
 /* buttons */
 
 .cta-wrapper{
-    margin-top:16px;
+    margin:16px 0;
     background-color: var(--space-shrimp-blue);
     border-radius: 5px;
     padding:15px;