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-size: 1rem;
    font-family: Helvetica, sans-serif;
    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: 1rem;
    font-size: 2rem;
    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