stuff

index.html

@@ -55,7 +55,7 @@ <h1>Interests</h1>
             </div>
             <div class="interests-container">
                 <div class="interests-container-one">
-                    <div class="interests-item-one">
+                    <div class="interests-item-one" id="mlinterest">
                         <h2>Machine Learning</h2>
                     </div>
                     <div class="interests-item-one">
@@ -84,6 +84,15 @@ <h4>Music</h4>
             </div>
         </div>
         <hr>
+        <div>
+            <div class="titlechunk">
+                <h1>Education</h1>
+            </div>
+            <div>
+                <button type="button" id="education-anim-button">Click to see my journey!</button>
+            </div>
+        </div>
+        <hr>
         <div class="contactspage">
                 <div class="hi-and-pic">
                     <h1>Contact</h1>
@@ -109,5 +118,6 @@ <h1>Contact</h1>
     <div class="bottombar">
         <p>Go Bears!</p>
     </div>
+    <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -0,0 +1,58 @@
+// let a = 100;
+// var --> whole fxn, let --> within current block, const --> let but no change
+
+// for (let a in [1.1, 4, true, null]) {
+//     console.log(a)
+// }
+
+// === tests if value is equal plus type while == can coerce types so true==1 but true!==1
+// loops+iterations
+
+// function name(args) { stuff r}
+
+// objects --> { stuff: this { things}, "more stuff": this {} }
+// person.name gets name same as person["name"]
+// the formatting above is basically json pandas can read json etc 
+
+// DOM --> tree data structure with html elements
+// querySelector(___) looks for css selector like .red-square from class or #__ for id
+    // takes first matching item
+// can also get by class, id, tag names then add an index for which like getbytag("P")[1]
+    // for 2nd p tag thing
+// input tag in html makes a thing to type into then can give event listener w/fxn
+// keyup = global vs (element).onclick .onchange etc specific to some input/html element
+    // also specific to element if .addEvListener on that element same as onclick=Fxn in html
+
+let mlInterest = document.getElementById("mlinterest")
+
+mlInterest.addEventListener("click", function() {
+    let image = document.createElement("img")
+    image.src = "/Users/deepshikhakaul/Documents/GitHub/divijmuthu.github.io/mlimage.png"
+    image.width = 200
+    image.height = 150
+    mlInterest.appendChild(image)
+    let interests = document.getElementsByClassName("interestspage")
+    interests.height += 150
+})
+
+let educAnim = document.getElementById("education-anim-button")
+let educPics = ["/Users/deepshikhakaul/Documents/GitHub/divijmuthu.github.io/7DF5041B-51B9-42FA-9D6C-1F8866C40D2E_1_201_a-900x674.jpeg",
+    "/Users/deepshikhakaul/Documents/GitHub/divijmuthu.github.io/CA_Berkeley_UniversityOfCaliforniaAtBerkeley_byCharlieNguyen-Flickr_2008_001_Sig.jpg"
+]
+let educInfo = ["Dublin High School", "UC Berkeley"]
+let count = 0
+
+educAnim.addEventListener("click", function() {
+    if (count < educPics.length) {
+        let info = document.createElement("p")
+        info.textContent = educInfo[count]
+        info.style = "font-size: 20px";
+        educAnim.appendChild(info)
+        let image = document.createElement("img")
+        image.src = educPics[count]
+        image.width = 600
+        image.height = 400
+        educAnim.appendChild(image)
+        count++
+    } 
+})

styles.css

@@ -96,7 +96,7 @@ html {
     justify-content: start;
     gap: 3%;
     background-color: white;
-    height: 325px;
+    height: auto;
 }
 
 .interests-container-one {