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

Merge laptop and PC files

INFO-1251 (Web Server)/Labs/Lab 1/Home Network Diagram.drawio

@@ -0,0 +1,111 @@
+<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36" version="28.2.0">
+  <diagram name="Page-1" id="MXtnp-5i5y2cCr6l2GsA">
+    <mxGraphModel dx="1042" dy="534" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;endArrow=none;endFill=0;" edge="1" parent="1" source="EjGk1gJt4pWiwggd2_OH-1" target="EjGk1gJt4pWiwggd2_OH-5">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="350" y="200" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;endArrow=none;endFill=0;curved=1;" edge="1" parent="1" source="EjGk1gJt4pWiwggd2_OH-1" target="EjGk1gJt4pWiwggd2_OH-17">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;endArrow=none;endFill=0;dashed=1;curved=1;" edge="1" parent="1" source="EjGk1gJt4pWiwggd2_OH-1" target="EjGk1gJt4pWiwggd2_OH-16">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;endArrow=none;endFill=0;curved=1;" edge="1" parent="1" source="EjGk1gJt4pWiwggd2_OH-1" target="EjGk1gJt4pWiwggd2_OH-15">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;endArrow=none;endFill=0;curved=1;" edge="1" parent="1" source="EjGk1gJt4pWiwggd2_OH-1" target="EjGk1gJt4pWiwggd2_OH-28">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-1" value="Modem/Router combo" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="380" y="160" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;endArrow=none;endFill=0;exitX=0.49;exitY=0.933;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1" source="EjGk1gJt4pWiwggd2_OH-2" target="EjGk1gJt4pWiwggd2_OH-1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="420" y="75" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-2" value="Bell ISP (internet)" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="360" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;endArrow=none;endFill=0;" edge="1" parent="1" source="EjGk1gJt4pWiwggd2_OH-5" target="EjGk1gJt4pWiwggd2_OH-13">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;endArrow=none;endFill=0;" edge="1" parent="1" source="EjGk1gJt4pWiwggd2_OH-5" target="EjGk1gJt4pWiwggd2_OH-21">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-5" value="" style="rhombus;whiteSpace=wrap;html=1;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="190" y="160" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;endArrow=none;endFill=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="EjGk1gJt4pWiwggd2_OH-5" target="EjGk1gJt4pWiwggd2_OH-22">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="180" y="200" as="sourcePoint" />
+            <Array as="points">
+              <mxPoint x="155" y="200" />
+              <mxPoint x="155" y="170" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;endArrow=none;endFill=0;" edge="1" parent="1" target="EjGk1gJt4pWiwggd2_OH-26">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="190" y="200" as="sourcePoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-12" value="Cisco Switch" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="200" y="185" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-13" value="Desktop PC" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="240" y="420" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-15" value="TV" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="680" y="320" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-16" value="iPhone" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="710" y="185" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-17" value="iPhone" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="700" y="30" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-21" value="Camera" style="triangle;whiteSpace=wrap;html=1;direction=north;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="160" y="10" width="80" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-22" value="Camera" style="triangle;whiteSpace=wrap;html=1;direction=north;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="30" y="140" width="80" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-26" value="Camera" style="triangle;whiteSpace=wrap;html=1;direction=north;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="70" y="280" width="80" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-28" value="Laptop" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="590" y="430" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-30" value="Legend" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="30" y="400" width="140" height="90" as="geometry">
+            <mxRectangle x="30" y="400" width="60" height="30" as="alternateBounds" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-34" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;dashed=1;" edge="1" parent="EjGk1gJt4pWiwggd2_OH-30" source="EjGk1gJt4pWiwggd2_OH-31">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="190" y="45" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-31" value="Wireless connection" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="EjGk1gJt4pWiwggd2_OH-30">
+          <mxGeometry y="30" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-35" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;rounded=0;curved=0;" edge="1" parent="EjGk1gJt4pWiwggd2_OH-30" source="EjGk1gJt4pWiwggd2_OH-33">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="190" y="75" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EjGk1gJt4pWiwggd2_OH-33" value="Wired connection" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="EjGk1gJt4pWiwggd2_OH-30">
+          <mxGeometry y="60" width="140" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

INFO-1252 (Front End Dev)/Labs/Lab-1/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>My First Sample Site</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+
+    <body>
+        <h1>Heading One</h1>
+        <ul>
+            <li><a href=#>Contact Us</a></li>
+            <li><a href=#>Call Us</a></li>
+            <li><a href=#>More Info</a></li>
+        </ul>
+        <hr>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quidem explicabo animi accusamus temporibus ex error odit porro dolore in quasi nulla <b>voluptatem consectetur labore, quis, autem, voluptates</b> id natus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, nesciunt deleniti, exercitationem totam amet a laudantium ut tenetur itaque quos similique in molestiae eligendi ipsam voluptatibus repellendus vitae sequi consequatur.</p>
+        <b><i>This is a smaller paragraph!</i></b>
+
+        <h2>Heading Two</h2>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde illo ratione culpa nisi. Repellat, at! Eaque quasi, sequi, quo exercitationem similique provident incidunt, temporibus nam repellendus dolores vero dolor sed? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti deserunt quaerat quas, non ipsa pariatur? Nulla cum ullam, dolore autem repellat voluptatum est modi fuga a odit at repudiandae dolor!</p>
+        <img src="img/brick.jpg" alt="A picture of bricks" height="150">
+        <img src="img/rust.jpg" alt="A picture of rust" height="150">
+        <img src="img/wood.jpg" alt="A picture of wood" height="150">
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quidem rem, autem deserunt pariatur ex quos ab excepturi quasi odit veritatis labore vitae animi fugit dicta, totam commodi. Cumque, expedita! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores cum illum, tempore nisi maxime est aut delectus exercitationem sapiente veritatis id vero enim, reiciendis blanditiis quis temporibus voluptate dolorum dignissimos?</p>
+        <ol>
+            <li>First item</li>
+            <li>Second item</li>
+            <li>Third item</li>
+            <li>Fouth item</li>
+        </ol>
+    </body>
+
+    <footer>
+        <hr>
+        <p>&copy; 2025 | IWD2-01 INFO-1252 Lab 1 Test Website | Made by Levi McLean</p>
+    </footer>
+</html>

INFO-1252 (Front End Dev)/Labs/Lab-1/style.css

@@ -0,0 +1,22 @@
+body {
+    text-align: center;
+    background: #333;
+    color: white;
+}
+
+ul, ol {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    text-align: left;
+}
+
+ul li {
+    list-style: none;
+}
+
+a {
+    color: deepskyblue;
+    text-align: center;
+    margin: auto;
+}

INFO-1252 (Front End Dev)/Labs/Lab-2/about.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta lang="en-CA">
+        <link rel="stylesheet" href="style.css">
+        <title>About Page - Travel Spot</title>
+    </head>
+
+    <body>
+        <img src="/img/logo.jpg" alt="Company logo">
+        <ul class="mainNav">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About Us</a></li>
+            <li><a href="contact.html">Contact Us</a></li>
+        </ul>
+        <hr>
+        <h1>About the Travel Spot</h1>
+        <img src="./img/paris.jpg" alt="The eiffel tower">
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente laborum non voluptatibus ad dignissimos culpa labore vitae quae nostrum in ullam officia, nobis quis tempora corporis repellendus suscipit quo nisi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eum officia provident cumque rem earum perferendis similique expedita quos ipsa! Ipsum cumque illum eius reprehenderit harum minus, deserunt <b>iusto fugiat!</b></p>
+        <h2>Satisfaction Guaranteed!</h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti libero commodi, nesciunt sed non a necessitatibus iste illum architecto eum cumque quo nemo, praesentium magni vero facilis iusto. Quaerat, nulla! Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat eveniet dicta, similique facilis impedit corporis repellat aliquid autem veritatis eaque eos, velit cupiditate ratione enim vel dolorum, laborum ut. Ipsum.</p>
+        <p>Four Reasons to travel with us</p>
+        <ol>
+            <li>customer service</li>
+            <li>prices</li>
+            <li>variety</li>
+            <li>experience</li>
+        </ol>
+        <hr>
+        <p>Copyright &copy; 2022. Travel Spot.</p>
+    </body>
+</html>

INFO-1252 (Front End Dev)/Labs/Lab-2/contact.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta lang="en-CA">
+        <link rel="stylesheet" href="style.css">
+        <title>Contact Page - Travel Spot</title>
+    </head>
+
+    <body>
+        <img src="/img/logo.jpg" alt="Company logo">
+        <ul class="mainNav">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About Us</a></li>
+            <li><a href="contact.html">Contact Us</a></li>
+        </ul>
+        <hr>
+        <h1>Contact the Travel Spot</h1>
+        <p>152 King Street <br> London, Ontario N6R 4T5 
+        <br>
+        <b>tel: </b><a href="tel:5195559045">519 555-9045</a>
+        <br>
+        <b>email: </b><a href="mailto:info@travel.com">info@travel.com</a>
+        </p>
+        <h2>Special Prices</h2>
+        <table class="priceTable">
+            <caption style="caption-side: bottom; text-align: left;">
+                <br>
+                <b>Note: </b><p>Meals are not included.</p>
+            </caption>
+            <tr>
+                <th>Destination</th>
+                <th>1 Week</th>
+                <th>2 Weeks</th>
+                <th>3 Weeks</th>
+            </tr>
+            <tr>
+                <th>Paris</th>
+                <td>$850</td>
+                <td>$1,250</td>
+                <td>$1,990</td>
+            </tr>
+            <tr>
+                <th>Italy</th>
+                <td>$750</td>
+                <td>$1,000</td>
+                <td>$1,500</td>
+            </tr>
+            <tr>
+                <th>Brazil</th>
+                <td>$900</td>
+                <td>$1,300</td>
+                <td>$2,100</td>
+            </tr>
+        </table>
+        <hr>
+        <p>Copyright &copy; 2022. Travel Spot.</p>
+    </body>
+</html>

INFO-1252 (Front End Dev)/Labs/Lab-2/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta lang="en-CA">
+        <link rel="stylesheet" href="style.css">
+        <title>Home Page - Travel Spot</title>
+    </head>
+
+    <body>
+        <img src="/img/logo.jpg" alt="Company logo">
+        <ul class="mainNav">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About Us</a></li>
+            <li><a href="contact.html">Contact Us</a></li>
+        </ul>
+        <hr>
+        <h1>Welcome to the Travel Spot</h1>
+        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum autem odio voluptas similique quae quam totam, est sapiente neque omnis veniam pariatur sint, culpa mollitia, porro facilis deserunt eum dicta! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque provident cum, est iusto, a suscipit beatae expedita voluptatem dignissimos harum porro sint eveniet tempore. Et itaque dolorum recusandae quis soluta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas quidem voluptatibus amet, reiciendis sit eligendi nihil! Ducimus praesentium delectus at itaque quaerat blanditiis rem asperiores adipisci facilis aliquam? Error, libero!</p>
+        <img src="./img/barbados.jpg" alt="A beach in Barbados">
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente laborum non voluptatibus ad dignissimos culpa labore vitae quae nostrum in ullam officia, nobis quis tempora corporis repellendus suscipit quo nisi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eum officia provident cumque rem earum perferendis similique expedita quos ipsa! Ipsum cumque illum eius reprehenderit harum minus, deserunt iusto fugiat!</p>
+        <hr>
+        <p>Copyright &copy; 2022. Travel Spot.</p>
+    </body>
+</html>

INFO-1252 (Front End Dev)/Labs/Lab-2/style.css

@@ -0,0 +1,29 @@
+.mainNav {
+    text-align: center;
+    list-style: none;
+}
+
+img {
+    display: block;
+    margin: auto;
+}
+
+body {
+    text-align: center;
+}
+
+ul, ol {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    text-align: left;
+}
+
+.priceTable {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+caption p {
+    display: inline;
+}

INFO-1252 (Front End Dev)/Labs/Lab-3/index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Registration - Travel Spot</title>
+        <meta charset="UTF-8">
+        <meta lang="EN">
+        <link rel="stylesheet" href="style.css">
+    </head>
+
+    <body>
+        <img src="img/logo.jpg" alt="Company logo">
+        <hr>
+        <h1>Sign Up</h1>
+        <h2>Your next travel starts here!</h2>
+        <p>Fill in the form below:</p>
+
+        <label for="regDate">Registration date:</label>
+        <input type="datetime-local" id="regDate" name="regDate">
+        <br><br>
+
+        <!--Personal Information form-->
+        <form>
+            <fieldset>
+                <legend>Personal Information</legend>
+
+                <label for="name">Name:</label>
+                <input type="text" id="name" name="name"><br>
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email"><br>
+                <label for="telephone">Phone:</label>
+                <input type="tel" id="telephone" name="telephone"><br>
+                <label for="passport" name="passport">Passport:</label>
+                <input type="file" id="passport" name="passport"><br>
+                <label for="stress">What is your stress level?</label>
+                <input type="range" id="stress" name="stress">
+            </fieldset>
+        </form><br>
+
+        <!--Travel Destination form-->
+        <form>
+            <fieldset>
+                <legend>Travel Destination</legend>
+                <p>Tell us where you want to go:</p>
+                <label for="pplTravelling">How many people will be travelling?</label>
+                <input type="text" id="pplTravelling" name="pplTravelling"><br>
+                <label for="period">Preferred Travel Period:</label>
+                <select id="period" name="period" required>
+                    <option value="select">-Select-</option>
+                    <option value="summer">Summer</option>
+                    <option value="winter">Winter</option>
+                </select><br>
+                <label for="destination">Destination:</label>
+                <input type="text" id="destination" name="destination"><br>
+                <label for="departDate">Date of Departure:</label>
+                <input type="date" id="departDate" name="departDate"><br>
+                <label for="returnDate">Date of Return:</label>
+                <input type="date" id="returnDate" name="returnDate"><br>
+                <label for="includeFlight">Include Flight</label>
+                <input type="checkbox" id="includeFlight" name="includeFlight"><br>
+                <label for="includeHotel">Include Hotel</label>
+                <input type="checkbox" id="includeHotel" name="includeHotel"><br>
+                <label for="includeMeals">Include Meals</label>
+                <input type="checkbox" id="includeMeals" name="includeMeals"><br>
+            </fieldset>
+        </form><br>
+
+        <!--Travel Experience field-->
+        <form>
+            <fieldset>
+                <legend>Travel Experience</legend>
+                <p>Tell us about your last travel experience (leave this section empty if you have never travelled before):</p>
+                <label for="lastDest">Last Destination:</label>
+                <input type="text" id="lastDest" name="lastDest"><br>
+
+                <!--First radio button group-->
+                <label>How do you rate the flight?</label>
+                <input type="radio" id="fightRateGood" name="flightRateGood" value="Good">
+                <label for="flightRateGood">Good</label>
+                <input type="radio" id="fightRateNorm" name="flightRateNorm" value="Normal">
+                <label for="flightRateNorm">Normal</label>
+                <input type="radio" id="fightRateBad" name="flightRateBad" value="Bad">
+                <label for="flightRateBad">Bad</label><br>
+
+                <!--Second radio button group-->
+                <label>How do you rate the hotel?</label>
+                <input type="radio" id="hotelRateGood" name="hotelRateGood" value="Good">
+                <label for="hotelRateGood">Good</label>
+                <input type="radio" id="hotelRateNorm" name="hotelRateNorm" value="Normal">
+                <label for="hotelRateNorm">Normal</label>
+                <input type="radio" id="hotelRateBad" name="hotelRateBad" value="Bad">
+                <label for="hotelRateBad">Bad</label><br>
+
+                <!--Third radio button group-->
+                <label>How do you rate the meal?</label>
+                <input type="radio" id="mealRateGood" name="mealRateGood" value="Good">
+                <label for="mealRateGood">Good</label>
+                <input type="radio" id="mealRateNorm" name="mealRateNorm" value="Normal">
+                <label for="mealRateNorm">Normal</label>
+                <input type="radio" id="fightRateBad" name="mealRateBad" value="Bad">
+                <label for="mealRateBad">Bad</label><br>
+
+                <label for="experienceText">Describe your experience:</label><br>
+                <textarea id="experienceText" name="experienceText" cols="40" rows="5"></textarea>
+            </fieldset>
+        </form><br>
+
+        <button type="submit">Submit</button>
+        <button type="reset">Reset</button>
+
+        <footer>
+            <hr>
+            <p>Copyright &copy; 2025. Travel Spot.</p>
+        </footer>
+    </body>
+</html>

INFO-1252 (Front End Dev)/Labs/Lab-3/style.css

@@ -0,0 +1,85 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+    background-color: #f9fafc;
+    color: #333;
+}
+
+img {
+    display: block;
+    margin: 0 auto 10px auto;
+    border-radius: 8px;
+}
+
+h1 {
+    text-align: center;
+    color: #2a6ebb;
+    margin-bottom: 5px;
+}
+
+h2 {
+    text-align: center;
+    color: #555;
+}   
+
+fieldset {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 20px;
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+legend {
+    font-weight: bold;
+    color: #2a6ebb;
+}
+
+label {
+    display: inline-block;
+    width: 180px;
+    margin: 6px 0;
+}
+
+input, select, textarea {
+    padding: 6px;
+    margin: 4px 0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    padding: 8px 16px;
+    margin: 5px;
+    border: none;
+    border-radius: 6px;
+    background-color: #2a6ebb;
+    color: #fff;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color:  #1d4f88;
+}
+
+footer {
+    text-align: center;
+    margin-top: 30px;
+    font-size: 0.9em;
+    color: #777;
+}
+
+@media (max-width: 880px) {
+    input[type="radio"] + label {
+        display: inline-block;
+        margin-right: 10px;
+        width: auto;
+        white-space: nowrap;
+    }
+
+    input[type="radio"] {
+        display: inline-block;
+        margin-right: 4px;   
+    }
+}

INFO-1272 (JS 1)/Labs/Lab 1/Levi_Lab1.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Lab 2</title>
+</head>
+
+<body>
+    <h1>Lab 2</h1>
+    <script>
+        /*
+        * Name: Levi McLean
+        * Project: Lab 1
+        * Submission date: September 18th, 2025
+        */
+
+        var studentName; //unassigned variable
+        do {
+            studentName = prompt("Enter the student's name: "); //prompt for name, assign variable with value
+            if (studentName === null || studentName.trim() === "") {
+                alert("Please enter a student name");
+            }
+        } while (studentName === null || studentName.trim() === "");
+        alert("Thank you for your entry!"); //Pop up message alert
+        sessionStorage.setItem("Student Name", studentName);
+
+        const welcomeText = "Welcome to INFO-1272 Fall 2025 "; //set const welcomeText
+        const nameText = `You are ${sessionStorage.getItem("Student Name")}`;
+        document.write(welcomeText); //write const welcomeText
+        document.write("<br>");
+        document.write(nameText);
+    </script>
+</body>
+
+</html>

INFO-1272 (JS 1)/Labs/Lab 3/Levi_Lab3.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Lab 3</title>
+        <meta charset="UTF-8">
+    </head>
+
+    <body>
+        <h1>Lab 3</h1>
+        <script>
+            /*
+             * I have decided to declare my fortune messages in order of
+             * most-to-least positive
+            */
+            var fortune1 = "You will have a great day";
+            var fortune2 = "Success if around the corner";
+            var fortune3 = "Happiness comes from within";
+            var fortune4 = "Today will be okay";
+            var fortune5 = "Keep an eye on the details";
+            var fortune6 = "Patience will be tested";
+            var fortune7 = "You will step on LEGO soon";
+            var fortune8 = "Beware of pigeons, they have attitude";
+            var fortune9 = "Your WIFI will mysteriously stop working";
+
+            // Prompt user for numCookies
+            var numCookies = window.prompt("How many cookies do you want to open?");
+
+            // Loop starting at 1, stoping at numCookies
+            for (var i = 1; i <=numCookies; i++) {
+
+                // Generate random number from 1 - 9 inclusive
+                var randNum = Math.floor(Math.random() * 9) + 1;
+
+                // Assign messge and cateogry to blank for now
+                var message = ""
+                var category = ""
+
+                // Determine message and category from randNum
+                if (randNum <= 3) {
+                    if (randNum === 1) message = fortune1;
+                    else if (randNum === 2) message = fortune2;
+                    else message = fortune3;
+                    category = "Positive"; // Positive if 1-3
+                } else if (randNum <= 6) {
+                    if (randNum === 4) message = fortune4;
+                    else if (randNum === 5) message = fortune5;
+                    else message = fortune6;
+                    category = "Neutral"; // Neutral if 4-6
+                } else {
+                    if (randNum === 7) message = fortune7;
+                    else if (randNum === 8) message = fortune8;
+                    else message = fortune9;
+                    category = "Funny" // Funny if 7-9
+                }
+                
+                // Display fortune cookie details
+                console.log("Cookie #" + i + "\nMessage: " + message + "\nCategory: " + category);
+            }
+        </script>
+    </body>
+</html>

INFO-1272 (JS 1)/Notes/Week 1/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Week 1 Class 1</title>
+    </head>
+    <body>
+        <h1>Javascript test</h1>
+        <script>
+            document.write("Hello Class, Welcome to JavaScript <br>");
+            document.write("I love JavaScript");
+
+            document.write("Hello Class, Welcome to JavaScript")
+            document.write("<br>");
+            document.write("I love JavaScript <br>");
+
+            window.alert("ALERT ALERT ALERT ALERT");
+            window.confirm("CONFIRM PLEASE CONFIRM PLEASE");
+            window.prompt("PROMPT HERE PROMPT HERE");
+        </script>
+        <button type="submit" id="testButton" onclick="testButton()">
+        <p>Press me!</p>
+        </button>
+        <p id="buttonLabel">Button pressed!</p>
+        <hr>
+        <h2>Form example</h2>
+        <input type="text" id="firstName" placeholder="First name">
+        <input type="text" id="lastName" placeholder="Last name">
+        <input type="email" id="email" placeholder="Email">
+        <input type="text" id="phone" placeholder="Phone number">
+        <p id="formLabel">You entered: </p>
+        <button type="submit" id="repeatButton" onclick="repeatInfo()">Repeat Info</button>
+        <script src="index.js"></script>
+    </body>
+</html>

INFO-1272 (JS 1)/Notes/Week 1/index.js

@@ -0,0 +1,19 @@
+document.getElementById("buttonLabel").style.display = "none";
+
+function testButton() {
+    const buttonLabel = document.getElementById("buttonLabel");
+    if (buttonLabel.style.display === "block") {
+        buttonLabel.style.display = "none";
+    } else {
+        buttonLabel.style.display = "block";
+    }
+}
+
+function repeatInfo() {
+    const formLabel = document.getElementById("formLabel");
+    const firstName = document.getElementById("firstName").value;
+    const lastName = document.getElementById("lastName").value;
+    const email = document.getElementById("email").value;
+    const phone = Number(document.getElementById("phone").value);
+    formLabel.innerHTML += `${firstName} ${lastName}, ${email}, ${phone}`
+}

INFO-1272 (JS 1)/Notes/Week 2/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Week 3 Class 1</title>
+    </head>
+
+    <body>
+        <h1>Week 3 Class 1</h1>
+        <p>Enter some details</p>
+        <input id="firstNameBox" type="text" placeholder="First Name">
+        <input id="lastNameBox" type="text" placeholder="Last Name">
+        <input id="ageBox" type="number" placeholder="Age">
+        <input id="passwordBox" type="password" placeholder="Password">
+        <button type="submit" onclick="showDetails()">Submit</button>
+        <p id="detailsLabel">Entered Details: </p>
+        <script src="index.js"></script>
+    </body>
+</html>

INFO-1272 (JS 1)/Notes/Week 2/index.js

@@ -0,0 +1,14 @@
+function showDetails() {
+    var firstName = document.getElementById("firstNameBox").value;
+    var lastName = document.getElementById("lastNameBox").value;
+    var age = Number(document.getElementById("ageBox").value);
+    var password = document.getElementById("passwordBox").value;
+    console.log(`You entered: ${firstName}, ${lastName}, ${age}, ${password}`);
+    document.getElementById("detailsLabel").innerHTML += `${firstName}, ${lastName}, ${age}, ${password}`;
+
+    console.log(10 + 10);
+    console.log(10 * 10);
+    console.log(10 - 3);
+    console.log(100 / 25);
+    console.log(100 % 3);
+}