Completing assignment 11

jacobalpowers · May 21, 2024 · 40ae278 · 40ae278
1 parent 2aec34d
commit 40ae278
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 10 deletions.
diff --git a/Summer2024/assignments/assignment11/index.html b/Summer2024/assignments/assignment11/index.html
@@ -4,17 +4,21 @@
     <head>
         <title></title>
         <link rel="stylesheet" href="styles.css">
+        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
         <script src="script.js"></script>
     </head>
 
     <body>
         <h1>Assignment 11</h1>
         <h2>Classes</h2>
-        <section id="composer-items">
-            <div class="composer">
-                <h3>Bach</h3>
-                <img src="images/bach.jpg">
+        <section id="composer-items"></section>
+        <div id="id01" class="w3-modal">
+            <div class="w3-modal-content">
+                <div class="w3-container">
+                    <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
+                    <section id="main-modal-content"></section>
+                </div>
             </div>
-        </section>
+        </div>
     </body>
 </html>
diff --git a/Summer2024/assignments/assignment11/script.js b/Summer2024/assignments/assignment11/script.js
@@ -11,7 +11,62 @@ class Composer {
     }
 
     get details () {
-
+        const composerItem = document.createElement("section");
+        composerItem.classList.add("composer");
+
+        //add basic items to composer
+        const name = document.createElement("h3");
+        name.innerHTML = this.name;
+        composerItem.append(name);
+
+        const img = document.createElement("img");
+        img.src = "images/" + this.img;
+        composerItem.append(img);
+
+        composerItem.onclick = () => {
+            document.getElementById("id01").style.display = "block";
+            const content = document.getElementById("main-modal-content");
+            content.innerHTML = "";
+            content.append(this.expandedSection());
+        }
+
+        return composerItem;
+    }
+
+    expandedSection () {
+        const moreInfo = document.createElement("section");
+
+        //seperating expanded into two flex items
+        const left = document.createElement("div");
+        left.classList.add("flexItem");
+        moreInfo.append(left);
+        const right = document.createElement("div");
+        right.classList.add("flexItem");
+        moreInfo.append(right);
+
+        //populating left section
+        const title = document.createElement("h3");
+        title.innerHTML = this.name;
+        left.append(title);
+
+        left.append(this.populateData("Birth Place", this.birth_place));
+        left.append(this.populateData("Birth Date", this.birth_date));
+        left.append(this.populateData("Death Date", this.death_date));
+        left.append(this.populateData("Age", this.age));
+        left.append(this.populateData("Famous Works", this.famous_work));
+        left.append(this.populateData("Description", this.description));
+
+        //populating right section
+        const img = document.createElement("img");
+        img.src = "images/" + this.img;
+        right.append(img);
+        return moreInfo;
+    }
+
+    populateData (sectionTitle, data) {
+        const p = document.createElement("p");
+        p.innerHTML = `<strong>${sectionTitle}: </strong>${data}`;
+        return p;
     }
 }
 
@@ -24,4 +79,12 @@ composers.push(new Composer("Ludwig van Beethoven", "beethoven.jpg", "Bonn", "56
 composers.push(new Composer("Johann Sebastian Bach", "bach.jpg", "Eisenach", "65", "31 March 1685", "28 July 1750", "Air on the G String", "Johann Sebastian Bach was a German composer and musician of the late Baroque period."));
 composers.push(new Composer("Frederic Chopin", "chopin.jpeg", "Zelazowa Wola", "39", "31 March 1810", "17 October 1849", "Nocturnes, Op. 9", "Frédéric François Chopin was a Polish composer and virtuoso pianist of the Romantic period, who wrote primarily for solo piano. He has maintained worldwide renown as a leading musician of his era, one whose \"poetic genius was based on a professional technique that was without equal in his generation\"."));
 composers.push(new Composer("Pyotr Ilyich Tchaikovsky", "tchaikovsky.jpg", "Votkinsk", "53", "7 May 1840", "6 November 1893", "Swan Lake", "Pyotr Ilyich Tchaikovsky was a Russian composer of the Romantic period. He was the first Russian composer whose music would make a lasting impression internationally."));
-composers.push(new Composer("John Williams", "williams.jpg", "New York City", "92", "February 8, 1932", "Alive", "Jurassic Park", "John Towner Williams is an American composer and conductor. In a career that has spanned seven decades, he has composed some of the most popular, recognizable and critically acclaimed film scores in cinema history. He has a very distinct sound that mixes romanticism, impressionism and atonal music with complex orchestration."));
+composers.push(new Composer("John Williams", "williams.jpg", "New York City", "92", "February 8, 1932", "Alive", "Jurassic Park", "John Towner Williams is an American composer and conductor. In a career that has spanned seven decades, he has composed some of the most popular, recognizable and critically acclaimed film scores in cinema history. He has a very distinct sound that mixes romanticism, impressionism and atonal music with complex orchestration."));
+
+
+//Really unsure as to why this wasn't working outside of the onload. This was the only solution I found.
+window.onload = () => {
+    composers.forEach((item) => {
+        document.getElementById("composer-items").append(item.details);
+    });
+}
diff --git a/Summer2024/assignments/assignment11/styles.css b/Summer2024/assignments/assignment11/styles.css
@@ -24,22 +24,53 @@ h1 {
 #composer-items {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     margin-left: 5%;
     margin-right: 5%;
 }
 
 .composer {
     background-color: var(--secondary-color);
     flex: 1;
-    max-width: 24%;
+    margin-left: 1%;
+    margin-right: 1%;
+    margin-bottom: 2%;
+    padding-bottom: 1%;
+    min-width: 23%;
+    max-width: 23%;
+    text-align: center;
+
+}
+.composer img {
+    max-width: 80%;
 }
 
+#main-modal-content section {
+    display: flex;
+    flex-direction: row;
+}
+.flexItem {
+    flex: 1;
+}
+.flexItem img {
+    position: absolute;
+    bottom: 3%;
+    right: 3%;
+}
 /* Typography */
 
 
 
 
 /* Larger Resolutions */
-@media only screen and (min-width: 720px) {
-
+@media only screen and (max-width: 616px) {
+    #composer-items {
+        flex-direction: column;
+    }
+    .composer {
+        max-width: 100%;
+    }
+    .composer img {
+        max-width: 100%;
+    }
 }
diff --git a/Summer2024/images/assignment11.png b/Summer2024/images/assignment11.png
diff --git a/Summer2024/script.js b/Summer2024/script.js
@@ -118,6 +118,11 @@ window.onload = () => {
         "assignments/assignment10/index.html", 
         "assignment10.png", 
         "Messing with arrays and assigning item-specific onclicks."));
+    assignments.push(new Assignment(
+        "Assignment 11 - Classes", 
+        "assignments/assignment11/index.html", 
+        "assignment11.png", 
+        "Learning to manipulate classes and class functions as well as assigning anonymous onclick functions to items."));
 
 
     projects.push(new Project(