Merge branch 'main' of https://git.levimclean.me/Levi/IWD2-01

2025-11-06 11:35:20 -05:00
parent b9e47e15f6 9649d56257
commit 74d73ee8b1
30 changed files with 454 additions and 12 deletions
--- a/Dev)/Labs/Lab-4.zip
+++ b/Dev)/Labs/Lab-4.zip
--- a/Dev)/Labs/Lab-4/images/dinner.jpg
+++ b/Dev)/Labs/Lab-4/images/dinner.jpg
--- a/Dev)/Labs/Lab-4/images/dinnerparty.jpg
+++ b/Dev)/Labs/Lab-4/images/dinnerparty.jpg
--- a/Dev)/Labs/Lab-4/images/nachos.jpg
+++ b/Dev)/Labs/Lab-4/images/nachos.jpg
--- a/Dev)/Labs/Lab-4/images/smileyface.png
+++ b/Dev)/Labs/Lab-4/images/smileyface.png
--- a/Dev)/Labs/Lab-4/images/squares_bg.png
+++ b/Dev)/Labs/Lab-4/images/squares_bg.png
--- a/Dev)/Labs/Lab-4/index.html
+++ b/Dev)/Labs/Lab-4/index.html
--- a/Dev)/Labs/Lab-4/styles/styles.css
+++ b/Dev)/Labs/Lab-4/styles/styles.css
@@ -1,12 +1,12 @@
 /* Beginner elements */
 * {
-    font-size: 62.5%;
-    padding: 0;
    margin: 0;
 }

 body {
    background: url(../images/squares_bg.png);
+    font-family: Helvetica, sans-serif;
+    font-size: 1rem;
 }

 /* Header and logo */
@@ -20,13 +20,13 @@ h1,
 h2 {
    font-family: "Dancing Script", cursive;
    color: teal;
-    font-size: 3rem;
+    font-size: 2rem;
    text-shadow: 2px 2px 4px grey;
-    margin: 2rem auto;
+    margin-left: 1.2rem;
 }

 .main-heading {
-    font-size: 4rem;
+    font-size: 2.2rem;
    text-align: center;
 }

@@ -38,8 +38,9 @@ nav {
    margin: 2rem 0;
 }

+ul,
 a {
-    font-size: 2rem;
+    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    display: block;
@@ -53,8 +54,7 @@ a {
 /* Recipe card styling */
 .recipe-card {
    margin: 2rem 1rem;
-    font-size: 3rem;
-    font-family: Helvetica, sans-serif;
+    font-size: 1rem;
    border: 2px solid grey;
    background-color: white;
    border-radius: 5px;
@@ -71,32 +71,56 @@ a {
    text-align: left;
    line-height: 25px;
    margin: 2rem;
+    color: grey;
+    font-weight: bold;
+    font-family: Helvetica, sans-serif;
 }

 .author {
    text-align: right;
+    margin-right: 1rem;
+    color: grey;
 }

 .publish-date {
    text-align: right;
+    color: rgba(75, 75, 75, 0.507);
+    margin-right: 1rem;
 }

 /* About section styling */
 .about-sandy {
    background-color: grey;
    background-image: url(../images/squares_bg.png);
+    padding-bottom: 1rem;
+    margin-bottom: 0.3rem;
+}
+
+.about-sandy p {
+    text-align: left;
+    line-height: 1.6rem;
+    margin: 2rem;
+    color: lightgrey;
+    font-weight: bold;
+}
+
+.about-sandy h2 {
+    color: white;
+    font-size: 3rem;
+    text-shadow: 2px 2px 4px black;
 }

 /* Footer styling */
 footer {
    background: teal;
-    border-top: 2px solid white;
-    font-size: 2rem;
+    font-size: 1rem;
    color: lightgrey;
-    margin: 2rem auto;
+    padding: 2rem;
+    text-align: center;
+    line-height: 1.6;
 }

+
 footer strong {
    color: white;
-    font-size: 2rem;
 }
--- a/Dev)/Labs/Lab-5/Lab
+++ b/Dev)/Labs/Lab-5/Lab
--- a/Dev)/Labs/Lab-5/Lab
+++ b/Dev)/Labs/Lab-5/Lab
--- a/Dev)/Labs/Lab-5/Lab
+++ b/Dev)/Labs/Lab-5/Lab
--- a/Dev)/Labs/Lab-5/images/dinner.jpg
+++ b/Dev)/Labs/Lab-5/images/dinner.jpg
--- a/Dev)/Labs/Lab-5/images/dinnerparty.jpg
+++ b/Dev)/Labs/Lab-5/images/dinnerparty.jpg
--- a/Dev)/Labs/Lab-5/images/nachos.jpg
+++ b/Dev)/Labs/Lab-5/images/nachos.jpg
--- a/Dev)/Labs/Lab-5/images/photo-small.jpg
+++ b/Dev)/Labs/Lab-5/images/photo-small.jpg
--- a/Dev)/Labs/Lab-5/images/photo.jpg
+++ b/Dev)/Labs/Lab-5/images/photo.jpg
--- a/Dev)/Labs/Lab-5/images/smileyface.png
+++ b/Dev)/Labs/Lab-5/images/smileyface.png
--- a/Dev)/Labs/Lab-5/images/squares_bg.png
+++ b/Dev)/Labs/Lab-5/images/squares_bg.png
--- a/Dev)/Labs/Lab-5/index.html
+++ b/Dev)/Labs/Lab-5/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Sandy's Cooking Blog</title>
+  <link rel="stylesheet" href="styles/main.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Roboto:wght@100;400;500;700&display=swap"
+    rel="stylesheet" />
+  <link rel="stylesheet" href="main.css" />
+</head>
+
+<body>
+  <!-- Header -->
+  <header class="header">
+    <img class="header-logo" src="images/smileyface.png" />
+    <h1 class="header-title">Sandy's Cooking Blog</h1>
+
+    <nav class="header-nav">
+      <ul class="header-nav-list">
+        <li class="header-nav-list-item"><a href="#">Home</a></li>
+        <li class="header-nav-list-item"><a href="#">Categories</a></li>
+        <li class="header-nav-list-item"><a href="#">About Sandy</a></li>
+        <li class="header-nav-list-item"><a href="#">Recipe Index</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <!-- Main Page-->
+  <main>
+    <!-- Recipes -->
+    <section class="recipes">
+      <article class="recipe">
+        <h2 class="recipe-title">Dinner Party Ideas</h2>
+        <div class="recipe-by">By: <strong>John</strong></div>
+        <div class="recipe-date">Jan 11, 2022</div>
+        <img class="recipe-image" src="images/dinnerparty.jpg" alt="dinner party food" />
+        <p class="recipe-desc">
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
+          mollis, nulla non elementum tincidunt, felis ligula sodales lectus,
+          sit amet dignissim quam massa sit amet lorem. Aenean lorem risus,
+          tempus nec, gravida eu.
+        </p>
+      </article>
+
+      <article class="recipe">
+        <h2 class="recipe-title">Weeknight Meals</h2>
+        <div class="recipe-by">By: <strong>Mary</strong></div>
+        <div class="recipe-date">Jan 07, 2022</div>
+        <img class="recipe-image" src="images/dinner.jpg" alt="nice dinner" />
+        <p class="recipe-desc">
+          Donec cursus faucibus turpis. Quisque auctor est at magna. In
+          sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus
+          elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer
+          non, leo. Phasellus suscipit felis non est.
+        </p>
+      </article>
+
+      <article class="recipe">
+        <h2 class="recipe-title">Superbowl Snacks</h2>
+        <div class="recipe-by">By: <strong>Sandy</strong></div>
+        <div class="recipe-date">Jan 06, 2022</div>
+        <img class="recipe-image" src="images/nachos.jpg" alt="plate of nachos" />
+        <p class="recipe-desc">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada
+          fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet
+          adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus
+          quis libero. Vivamus quam.
+        </p>
+      </article>
+    </section>
+
+    <!-- About -->
+    <section class="about">
+      <h2 class="about-title">About Sandy</h2>
+      <img class="about-logo" src="images/smileyface.png" />
+      <p class="about-text">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+        gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus.
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent
+        taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+        himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas
+        elementum, augue at vulputate ornare, ipsum enim lacinia orci, id
+        elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac
+        habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis
+        condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus
+        nec efficitur sagittis. Aliquam sed nunc ligula.
+      </p>
+      <p class="about-text">
+        Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed
+        interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit
+        amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet
+        sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla.
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est.
+        Maecenas quis hendrerit dui, tincidunt maximus velit.
+      </p>
+    </section>
+  </main>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <p>Copyright <strong>&copy;</strong> 2025.</p>
+    <p>Developed by <strong class="footer-name">Levi McLean</strong>.</p>
+  </footer>
+</body>
+
+</html>
--- a/Dev)/Labs/Lab-5/notes.txt
+++ b/Dev)/Labs/Lab-5/notes.txt
@@ -0,0 +1,22 @@
+  This project has all the css code in one giant file and there are 
+  pros and cons of doing this.
+
+  pros: 
+    slightly faster webpage load times and less network traffic.
+  cons: 
+    you have one big giant css file which can be hard to maintain if the
+    project is just a little bit larger than this.
+  
+  In the industry, we separate the css codes into multiple files. 
+  The css code can easily be thousands of lines in a small real-world projects
+  and we have no choice but to separate the codes. 
+  By doing this we get the benefit of maintainability.
+
+  When the code is actually sent to the clients/users there are tools
+  to combine the css(and JavaScript) code into less css file. 
+  By doing this we get the benefit of less network traffic and slightly 
+  faster load times.
+
+  Do not worry about it for now if this does not make sense.
+  Try different approaches and see how you like it.
+  You will learn/experience more about this throughout the journey of IWD.
--- a/Dev)/Labs/Lab-5/styles/main.css
+++ b/Dev)/Labs/Lab-5/styles/main.css
@@ -0,0 +1,192 @@
+/* global settings */
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 62.5%;
+  line-height: 1.6;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  background: url(../images/squares_bg.png);
+  color: #686868;
+}
+
+li {
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* Header */
+.header-logo {
+  display: block;
+  margin: 2rem auto;
+  opacity: 30%;
+  width: 50%;
+}
+
+.header-title {
+  font-family: "Dancing script";
+  font-size: 4.2rem;
+  text-align: center;
+  color: teal;
+}
+
+.header-nav {
+  background-color: #fff;
+  text-align: center;
+  border-top: 5px solid teal;
+  border-bottom: 5px solid teal;
+  padding: 0.4rem 0;
+  margin-top: 2.4rem;
+}
+
+.header-nav-list-item {
+  margin: 0.8rem 0;
+}
+
+.header-nav-list-item a:link,
+.header-nav-list-item a:visited {
+  font-size: 2.4rem;
+  color: #686868;
+}
+
+.header-nav-list-item a:hover,
+.header-nav-list-item a:active {
+  color: teal;
+  font-weight: 600;
+}
+
+/* Main */
+.recipes {
+  margin-top: 2.4rem;
+}
+
+.recipe {
+  margin: 2rem 1rem;
+  border: 1px solid grey;
+  background-color: white;
+  border-radius: 20px;
+  padding: 2.4rem 1.2rem;
+}
+
+.recipe:hover {
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
+  transform: translateY(-10px);
+  /* we will learn this later. Don't worry about this line*/
+}
+
+.recipe-title {
+  font-family: "Dancing script";
+  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+  font-size: 3.6rem;
+  color: teal;
+  margin-bottom: 2.4rem;
+}
+
+.recipe-by,
+.recipe-by strong,
+.recipe-date {
+  text-align: right;
+  font-size: 1.6rem;
+}
+
+.recipe-image {
+  width: 80%;
+  border-radius: 50%;
+  display: block;
+  margin: 1rem auto;
+}
+
+.recipe-desc {
+  font-size: 1.8rem;
+  margin-top: 2.4rem;
+  padding: 0 1.2rem;
+}
+
+/* About */
+.about {
+  padding: 2.4rem;
+  background-color: rgb(82, 82, 82);
+  opacity: 70%;
+}
+
+.about-title {
+  font-family: "Dancing script";
+  font-size: 4.8rem;
+  color: #fff;
+  margin-top: 2rem;
+  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75);
+}
+
+.about-text {
+  /* use white colour + opacity or grey font color to achieve this result*/
+  color: #fff;
+  opacity: 0.75;
+  font-size: 1.8rem;
+  margin: 2rem 0;
+  text-shadow: 1px 1px 0 black;
+}
+
+.about-logo {
+  display: none;
+}
+
+/* Footer */
+.footer {
+  background-color: teal;
+  color: rgb(207, 207, 207);
+  text-align: center;
+  padding: 3.6rem 0;
+  font-size: 2.4rem;
+}
+
+.footer-name {
+  color: #fff;
+  font-size: 2.4rem;
+}
+
+@media (min-width: 820px) {
+  .header {
+    position: relative;
+  }
+
+  .header-logo {
+    position: absolute;
+    left: 5%;
+    top: 33%;
+    transform: translateY(-50%);
+    width: 15%;
+    opacity: 0.3;
+    z-index: 0;
+  }
+
+  .header-nav {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .header-nav-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4rem;
+    width: 100%;
+  }
+}
+
+@media (min-width: 1200px) {}
--- a/1)/Labs/Lab
+++ b/1)/Labs/Lab
--- a/5/Levi_Lab5.html
+++ b/5/Levi_Lab5.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Lab 5</title>
+    <meta charset="utf-8" lang="en">
+</head>
+
+<body>
+    <h1>Lab 5</h1>
+    <script>
+        // Get number of students in class
+        var numStudents = parseInt(window.prompt("How many students are in the class?"));
+        var studentNames = [];
+        var studentGrades = [];
+
+        // Run grade analytics once so theres something to display
+        gradeAnalyzer();
+        calculateAverage(studentGrades);
+        findMinMax(studentGrades);
+
+        // Ask user if they want to review the results
+        do {
+            displayResults();
+            var viewAgain = window.confirm("Would you like to view the results again?");
+        } while (viewAgain);
+
+        // Thank user and end loop
+        alert("Thank you for using the Grade Analyzer!");
+
+        // Function Definitions from here on
+
+        // Gets names, grades and inserts into respective arrays
+        function gradeAnalyzer() {
+            for (var i = 0; i <= numStudents - 1; i++) {
+                var studentName = window.prompt("Enter students name:");
+                var studentGrade = parseFloat(window.prompt("Enter student grade:"));
+                if (studentGrade > 0 && studentGrade <= 100) {
+                    studentNames.push(studentName);
+                    studentGrades.push(studentGrade);
+                } else {
+                    alert("Invalid grade entered, skipping entry");
+                }
+                console.log("Student " + (i + 1) + ": " + studentName + " - Grade: " + studentGrade);
+            }
+        }
+
+        // Calculates the average of a given array
+        function calculateAverage(arr) {
+            var totalGrades = 0;
+            for (var i = 0; i < arr.length; i++) {
+                totalGrades += arr[i];
+            }
+            var average = totalGrades / arr.length;
+            console.log("Class average: " + average.toFixed(2));
+        }
+
+        // Finds the minimum and maximum value of an array by looping through it
+        function findMinMax(arr) {
+            if (arr.length === 0) {
+                return
+            }
+
+            var min = arr[0];
+            var max = arr[0];
+
+            for (var i = 1; i < arr.length; i++) {
+                var grade = arr[i];
+                if (grade < min) {
+                    min = grade;
+                }
+                if (grade > max) {
+                    max = grade;
+                }
+            }
+
+            console.log("Min: " + min + " Max: " + max);
+        }
+
+        // Helper function to display results cleanly
+        function displayResults() {
+            console.clear();
+            console.log("Student List:");
+            for (var i = 0; i < studentNames.length; i++) {
+                console.log("Student " + i + ": " + studentNames[i] + " Grade: " + studentGrades[i]);
+            }
+            calculateAverage(studentGrades);
+            findMinMax(studentGrades);
+        }
+    </script>
+</body>
+
+</html>
--- a/5/Levi_Lab5.zip
+++ b/5/Levi_Lab5.zip
--- a/Design)/Projects/Project
+++ b/Design)/Projects/Project
--- a/Design)/Projects/Project
+++ b/Design)/Projects/Project
--- a/Design)/Projects/Project
+++ b/Design)/Projects/Project
--- a/1/McLean_DesignJustification.pdf
+++ b/1/McLean_DesignJustification.pdf
--- a/1/McLean_Project1_displayAds.psd
+++ b/1/McLean_Project1_displayAds.psd
--- a/1/McLean_Project1_website.psd
+++ b/1/McLean_Project1_website.psd