First Commit
0
.gitignore
vendored
Normal file
111
INFO-1251 (Web Server)/Labs/Lab 1/Home Network Diagram.drawio
Normal file
@@ -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>
|
||||
BIN
INFO-1251 (Web Server)/Labs/Lab 1/Ping.png
Normal file
|
After Width: | Height: | Size: 82 KiB |
BIN
INFO-1251 (Web Server)/Labs/Lab 1/Wifi Properties.png
Normal file
|
After Width: | Height: | Size: 163 KiB |
BIN
INFO-1251 (Web Server)/Labs/Lab 1/ipconfig.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
INFO-1251 (Web Server)/Labs/Lab 2/McLean Lab2.docx
Normal file
BIN
INFO-1251 (Web Server)/Labs/Lab 3/Mclean_lab3.docx
Normal file
BIN
INFO-1251 (Web Server)/Labs/Lab 4/McLean_Lab4.docx
Normal file
BIN
INFO-1251 (Web Server)/Labs/Lab 5/McLean_Lab5.pdf
Normal file
BIN
INFO-1251 (Web Server)/Labs/Lab 6/INFO2151 Lab #06 -CMS1.pdf
Normal file
BIN
INFO-1251 (Web Server)/Labs/Lab 6/McLean_Lab6.pdf
Normal file
BIN
INFO-1252 (Front End Dev)/Labs/Lab-1.zip
Normal file
BIN
INFO-1252 (Front End Dev)/Labs/Lab-1/img/brick.jpg
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-1/img/rust.jpg
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-1/img/wood.jpg
Normal file
|
After Width: | Height: | Size: 13 KiB |
37
INFO-1252 (Front End Dev)/Labs/Lab-1/index.html
Normal file
@@ -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>© 2025 | IWD2-01 INFO-1252 Lab 1 Test Website | Made by Levi McLean</p>
|
||||
</footer>
|
||||
</html>
|
||||
22
INFO-1252 (Front End Dev)/Labs/Lab-1/style.css
Normal file
@@ -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;
|
||||
}
|
||||
BIN
INFO-1252 (Front End Dev)/Labs/Lab-2.zip
Normal file
33
INFO-1252 (Front End Dev)/Labs/Lab-2/about.html
Normal file
@@ -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 © 2022. Travel Spot.</p>
|
||||
</body>
|
||||
</html>
|
||||
59
INFO-1252 (Front End Dev)/Labs/Lab-2/contact.html
Normal file
@@ -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 © 2022. Travel Spot.</p>
|
||||
</body>
|
||||
</html>
|
||||
BIN
INFO-1252 (Front End Dev)/Labs/Lab-2/img/barbados.jpg
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-2/img/logo.jpg
Normal file
|
After Width: | Height: | Size: 95 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-2/img/paris.jpg
Normal file
|
After Width: | Height: | Size: 35 KiB |
25
INFO-1252 (Front End Dev)/Labs/Lab-2/index.html
Normal file
@@ -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 © 2022. Travel Spot.</p>
|
||||
</body>
|
||||
</html>
|
||||
29
INFO-1252 (Front End Dev)/Labs/Lab-2/style.css
Normal file
@@ -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;
|
||||
}
|
||||
BIN
INFO-1252 (Front End Dev)/Labs/Lab-3.zip
Normal file
BIN
INFO-1252 (Front End Dev)/Labs/Lab-3/img/logo.jpg
Normal file
|
After Width: | Height: | Size: 95 KiB |
115
INFO-1252 (Front End Dev)/Labs/Lab-3/index.html
Normal file
@@ -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 © 2025. Travel Spot.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
85
INFO-1252 (Front End Dev)/Labs/Lab-3/style.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
BIN
INFO-1252 (Front End Dev)/Labs/Lab-4.zip
Normal file
BIN
INFO-1252 (Front End Dev)/Labs/Lab-4/images/dinner.jpg
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-4/images/dinnerparty.jpg
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-4/images/nachos.jpg
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-4/images/smileyface.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-4/images/squares_bg.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
111
INFO-1252 (Front End Dev)/Labs/Lab-4/index.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="./styles/styles.css">
|
||||
<title>Sandy's Cooking Blog</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<img class="logo" src="images/smileyface.png" alt="smily face" />
|
||||
<h1 class="main-heading">Sandy's Cooking Blog</h1>
|
||||
</header>
|
||||
|
||||
<!-- Main Menu-->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Categories</a></li>
|
||||
<li><a href="#">About Sandy</a></li>
|
||||
<li><a href="#">Recipe Index</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Main Page-->
|
||||
<main>
|
||||
<!-- Recipes -->
|
||||
<section>
|
||||
<div class="recipe-card">
|
||||
<h2>Dinner Party Ideas</h2>
|
||||
<div class="author">By: <strong>John</strong></div>
|
||||
<div class="publish-date">Jan 11, 2022</div>
|
||||
<img src="images/dinnerparty.jpg" alt="Dinner party food" />
|
||||
<p>
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="recipe-card">
|
||||
<h2>Weeknight Meals</h2>
|
||||
<div class="author">By: <strong>Mary</strong></div>
|
||||
<div class="publish-date">Jan 07, 2022</div>
|
||||
<img src="images/dinner.jpg" alt="Nice dinner" />
|
||||
<p>
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="recipe-card">
|
||||
<h2>Superbowl Snacks</h2>
|
||||
<div class="author">By: <strong>Sandy</strong></div>
|
||||
<div class="publish-date">Jan 06, 2022</div>
|
||||
<img src="images/nachos.jpg" alt="Plate of nachos" />
|
||||
<p>
|
||||
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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section class="about-sandy">
|
||||
<h2>About Sandy</h2>
|
||||
|
||||
<img src="images/smileyface.png" class="logo" alt="smiley face" />
|
||||
|
||||
<p>
|
||||
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>
|
||||
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>
|
||||
Copyright <strong>©</strong> 2025. Developed by
|
||||
<strong>Levi McLean</strong>.
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
126
INFO-1252 (Front End Dev)/Labs/Lab-4/styles/styles.css
Normal file
@@ -0,0 +1,126 @@
|
||||
/* Beginner elements */
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url(../images/squares_bg.png);
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Header and logo */
|
||||
.logo {
|
||||
opacity: 30%;
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: "Dancing Script", cursive;
|
||||
color: teal;
|
||||
font-size: 2rem;
|
||||
text-shadow: 2px 2px 4px grey;
|
||||
margin-left: 1.2rem;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Navbar styling */
|
||||
nav {
|
||||
background-color: white;
|
||||
border-top: 5px solid teal;
|
||||
border-bottom: 5px solid teal;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
a {
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 1.5rem 0;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* Recipe card styling */
|
||||
.recipe-card {
|
||||
margin: 2rem 1rem;
|
||||
font-size: 1rem;
|
||||
border: 2px solid grey;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 2px 4px grey;
|
||||
}
|
||||
|
||||
.recipe-card img {
|
||||
display: block;
|
||||
margin: 1.5rem auto;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.recipe-card p {
|
||||
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;
|
||||
font-size: 1rem;
|
||||
color: lightgrey;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
footer strong {
|
||||
color: white;
|
||||
}
|
||||
BIN
INFO-1252 (Front End Dev)/Labs/Lab-5.zip
Normal file
|
After Width: | Height: | Size: 915 KiB |
|
After Width: | Height: | Size: 819 KiB |
|
After Width: | Height: | Size: 467 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinner.jpg
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinnerparty.jpg
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-5/images/nachos.jpg
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-5/images/photo-small.jpg
Normal file
|
After Width: | Height: | Size: 2.1 MiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-5/images/photo.jpg
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-5/images/smileyface.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
INFO-1252 (Front End Dev)/Labs/Lab-5/images/squares_bg.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
111
INFO-1252 (Front End Dev)/Labs/Lab-5/index.html
Normal file
@@ -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>©</strong> 2025.</p>
|
||||
<p>Developed by <strong class="footer-name">Levi McLean</strong>.</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
22
INFO-1252 (Front End Dev)/Labs/Lab-5/notes.txt
Normal file
@@ -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.
|
||||
303
INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css
Normal file
@@ -0,0 +1,303 @@
|
||||
/* 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 only screen and (min-width: 820px) {
|
||||
/* Header */
|
||||
.header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
top: 33%;
|
||||
transform: translateY(-50%);
|
||||
width: 25%;
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
/* Recipe cards */
|
||||
.recipe {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.recipe-image {
|
||||
display: block;
|
||||
width: 30%;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
|
||||
.recipe-desc {
|
||||
display: inline-block;
|
||||
width: 65%;
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* About Sandy */
|
||||
.about-logo {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-top: 2rem;
|
||||
margin-right: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
/* Footer needs no changes */
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
/* Header */
|
||||
.header-logo {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
/* Recipe cards */
|
||||
.recipes {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.recipe-image {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-size: 8rem;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.recipe-by {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.recipe-date {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.recipe-desc {
|
||||
width: 95%;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* About Sandy */
|
||||
.about-title {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
.about-logo {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
margin-top: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 3.6rem 2rem;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-name {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
BIN
INFO-1272 (JS 1)/JavaScript.pdf
Normal file
BIN
INFO-1272 (JS 1)/Labs/Lab 1/Lab1.pdf
Normal file
35
INFO-1272 (JS 1)/Labs/Lab 1/Levi_Lab1.html
Normal file
@@ -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>
|
||||
BIN
INFO-1272 (JS 1)/Labs/Lab 1/Levi_Lab1.zip
Normal file
BIN
INFO-1272 (JS 1)/Labs/Lab 2/Lab2.pdf
Normal file
81
INFO-1272 (JS 1)/Labs/Lab 2/levi_lab2.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Lab 2</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Theme Park Tickets</h1>
|
||||
<script>
|
||||
// Constant values
|
||||
const CHILD_TICKET_PRICE = 9.99;
|
||||
const ADULT_TICKET_PRICE = 19.99;
|
||||
const SENIOR_TICKET_PRICE = 14.99;
|
||||
const HST_TAX = 0.13;
|
||||
|
||||
// Unassigned for now, assign later
|
||||
var ticketType;
|
||||
var ticketPrice;
|
||||
var userAge;
|
||||
var firstName;
|
||||
var lastName;
|
||||
var email;
|
||||
var phone;
|
||||
var tax;
|
||||
var total;
|
||||
var freeRides;
|
||||
|
||||
// Ask for user details
|
||||
firstName = prompt("First Name:");
|
||||
lastName = prompt("Last Name:");
|
||||
email = prompt("Email:");
|
||||
phone = prompt("Phone:");
|
||||
userAge = prompt("Enter your age:");
|
||||
|
||||
// Determine ticket price
|
||||
if (userAge < 12) {
|
||||
ticketPrice = CHILD_TICKET_PRICE;
|
||||
ticketType = "Child";
|
||||
} else if (userAge <= 59) {
|
||||
ticketPrice = ADULT_TICKET_PRICE;
|
||||
ticketType = "Adult";
|
||||
} else {
|
||||
ticketPrice = SENIOR_TICKET_PRICE;
|
||||
ticketType = "Senior";
|
||||
}
|
||||
|
||||
// Determine free ride coupons
|
||||
if (ticketType === "Child") {
|
||||
freeRides = 0;
|
||||
} else if (ticketType === "Adult") {
|
||||
freeRides = 2;
|
||||
} else {
|
||||
freeRides = 1;
|
||||
}
|
||||
|
||||
// Caluclate tax and total
|
||||
tax = ticketPrice * HST_TAX;
|
||||
total = ticketPrice + tax;
|
||||
|
||||
// Display to console
|
||||
console.log("==========================================");
|
||||
console.log(" Theme Park Ticket Receipt ");
|
||||
console.log("==========================================");
|
||||
console.log("Customer Name: ", firstName, lastName);
|
||||
console.log("Email: ", email);
|
||||
console.log("Phone: ", phone);
|
||||
console.log("------------------------------------------");
|
||||
console.log("Ticket Type: ", ticketType);
|
||||
console.log("Base Price: $", ticketPrice.toFixed(2));
|
||||
console.log("Tax (13%): $", tax.toFixed(2));
|
||||
console.log("TOTAL: $", total.toFixed(2));
|
||||
console.log("------------------------------------------");
|
||||
console.log("Free Ride Coupons Earned: ", freeRides);
|
||||
console.log("==========================================");
|
||||
console.log(" Have a fun and safe day at the park! ");
|
||||
console.log("==========================================");
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
INFO-1272 (JS 1)/Labs/Lab 2/levi_lab2.zip
Normal file
BIN
INFO-1272 (JS 1)/Labs/Lab 3/Lab 3.pdf
Normal file
61
INFO-1272 (JS 1)/Labs/Lab 3/Levi_Lab3.html
Normal file
@@ -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>
|
||||
BIN
INFO-1272 (JS 1)/Labs/Lab 3/Levi_Lab3.zip
Normal file
BIN
INFO-1272 (JS 1)/Labs/Lab 5/Lab 5.pdf
Normal file
93
INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.html
Normal file
@@ -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>
|
||||
BIN
INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.zip
Normal file
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Levi McLean Midterm Part B</title>
|
||||
<meta charset="utf-8" lang="en-us">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Levi McLean Midterm Part B</h1>
|
||||
<script>
|
||||
const TAX_RATE = 0.13;
|
||||
const DISCOUNT_RATE = 0.1;
|
||||
|
||||
var item1 = {
|
||||
name: "apple",
|
||||
price: 1.1,
|
||||
qty: 4
|
||||
};
|
||||
|
||||
var item2 = {
|
||||
name: "banana",
|
||||
price: 0.59,
|
||||
qty: 2
|
||||
};
|
||||
|
||||
var item3 = {
|
||||
name: "pear",
|
||||
price: 1.25,
|
||||
qty: 6
|
||||
};
|
||||
|
||||
var item4 = {
|
||||
name: "grapes",
|
||||
price: 2.25,
|
||||
qty: 8
|
||||
};
|
||||
|
||||
var item5 = {
|
||||
name: "kiwi",
|
||||
price: 3,
|
||||
qty: 1
|
||||
};
|
||||
|
||||
var cart = [item1, item2, item3, item4, item5];
|
||||
|
||||
function searchItem() {
|
||||
var itemName = window.prompt("Enter an item name: ").toLowerCase();
|
||||
var foundItem;
|
||||
|
||||
if (itemName == null) {
|
||||
window.alert("Item name cannot be null.");
|
||||
}
|
||||
|
||||
for (var i=0; i < cart.length; i++) {
|
||||
if (cart[i].name === itemName) {
|
||||
window.alert("Item(s) found.");
|
||||
foundItem = cart[i];
|
||||
return foundItem;
|
||||
}
|
||||
}
|
||||
window.alert("Item(s) not found.");
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function updateItemQuantity() {
|
||||
var updateItem = window.prompt("Enter item name to update: ").toLowerCase();
|
||||
|
||||
if (updateItem == null) {
|
||||
window.alert("Invalid item name.");
|
||||
}
|
||||
|
||||
for (var i=0; i < cart.length; i++) {
|
||||
if (cart[i].name === updateItem) {
|
||||
var updateQty = parseInt(window.prompt("How many items do we add? "), 10);
|
||||
cart[i].qty += updateQty;
|
||||
console.log(cart);
|
||||
return updateItem;
|
||||
}
|
||||
}
|
||||
window.alert("Item does not exist in cart.");
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function clearCart() {
|
||||
for (var i = 0; i < cart.length; i++) {
|
||||
cart[i].name = "";
|
||||
cart[i].qty = 0;
|
||||
}
|
||||
console.log(cart);
|
||||
window.alert("Cart has been cleared!");
|
||||
}
|
||||
|
||||
function calulateFinalPriceWithDiscount() {
|
||||
var subtotal = 0;
|
||||
for (var i = 0; i < cart.length; i++) {
|
||||
subtotal += cart[i].price * cart[i].qty;
|
||||
}
|
||||
var tax = subtotal * TAX_RATE;
|
||||
var discount = subtotal * DISCOUNT_RATE;
|
||||
var total = subtotal - discount + tax;
|
||||
window.alert(
|
||||
"Subtotal: $" + subtotal.toFixed(2) + "\n" +
|
||||
"Tax: $" + tax.toFixed(2) + "\n" +
|
||||
"Discount: $" + discount.toFixed(2) + "\n" +
|
||||
"Total: $" + total.toFixed(2)
|
||||
);
|
||||
}
|
||||
|
||||
var notDone = true;
|
||||
while(notDone === true) {
|
||||
var userChoice = window.prompt("Please make a selection (s)earch, (u)pdate, (c)lear, (d)iscount: ").toLowerCase();
|
||||
if (userChoice === "s") {
|
||||
searchItem();
|
||||
notDone = window.confirm("Do you wish to continue?");
|
||||
} else if (userChoice === "u") {
|
||||
updateItemQuantity();
|
||||
notDone = window.confirm("Do you wish to continue?");
|
||||
} else if (userChoice === "c") {
|
||||
clearCart();
|
||||
notDone = window.confirm("Do you wish to continue?");
|
||||
} else if (userChoice === "d") {
|
||||
calulateFinalPriceWithDiscount();
|
||||
notDone = window.confirm("Do you wish to continue?");
|
||||
} else {
|
||||
window.alert("Invalid selection, try again.");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Levi McLean Midterm Part B</title>
|
||||
<meta charset="utf-8" lang="en-us">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Levi McLean Midterm Part B</h1>
|
||||
<script>
|
||||
const TAX_RATE = 0.13;
|
||||
const DISCOUNT_RATE = 0.1;
|
||||
|
||||
var item1 = {
|
||||
name: "apple",
|
||||
price: 1.1,
|
||||
qty: 4
|
||||
};
|
||||
|
||||
var item2 = {
|
||||
name: "banana",
|
||||
price: 0.59,
|
||||
qty: 2
|
||||
};
|
||||
|
||||
var item3 = {
|
||||
name: "pear",
|
||||
price: 1.25,
|
||||
qty: 6
|
||||
};
|
||||
|
||||
var item4 = {
|
||||
name: "grapes",
|
||||
price: 2.25,
|
||||
qty: 8
|
||||
};
|
||||
|
||||
var item5 = {
|
||||
name: "kiwi",
|
||||
price: 3,
|
||||
qty: 1
|
||||
};
|
||||
|
||||
var cart = [item1, item2, item3, item4, item5];
|
||||
|
||||
function searchItem() {
|
||||
var itemName = window.prompt("Enter an item name: ").toLowerCase();
|
||||
var foundItem;
|
||||
|
||||
if (itemName == null) {
|
||||
window.alert("Item name cannot be null.");
|
||||
}
|
||||
|
||||
for (var i=0; i <= cart.length; i++) {
|
||||
if (cart[i].name === itemName) {
|
||||
window.alert("Item(s) found.");
|
||||
foundItem = cart[i];
|
||||
return foundItem;
|
||||
}
|
||||
}
|
||||
window.alert("Item(s) not found.");
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function updateItemQuantity() {
|
||||
var updateItem = window.prompt("Enter item name to update: ").toLowerCase();
|
||||
|
||||
if (updateItem == null) {
|
||||
window.alert("Invalid item name.");
|
||||
}
|
||||
|
||||
for (var i=0; i <= cart.length; i++) {
|
||||
if (cart[i].name === updateItem) {
|
||||
var updateQty = parseInt(window.prompt("How many items do we add? "), 10);
|
||||
cart[i].qty += updateQty;
|
||||
console.log(cart);
|
||||
return updateItem;
|
||||
}
|
||||
window.alert("Item does not exist in cart.");
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function clearCart() {
|
||||
cart[0].name = "";
|
||||
cart[0].qty = 0;
|
||||
cart[1].name = "";
|
||||
cart[1].qty = 0;
|
||||
cart[2].name = "";
|
||||
cart[2].qty = 0;
|
||||
cart[3].name = "";
|
||||
cart[3].qty = 0;
|
||||
cart[4].name = "";
|
||||
cart[4].qty = 0;
|
||||
console.log(cart);
|
||||
window.alert("Cart has been cleared!");
|
||||
}
|
||||
|
||||
function calulateFinalPriceWithDiscount() {
|
||||
var subtotal = 0;
|
||||
var tax = 0;
|
||||
var total = 0;
|
||||
// for (var i = 0; i <= cart.length; i++) {
|
||||
// subtotal += cart[i].price;
|
||||
// }
|
||||
subtotal += cart[0].price;
|
||||
subtotal += cart[1].price;
|
||||
subtotal += cart[2].price;
|
||||
subtotal += cart[3].price;
|
||||
subtotal += cart[4].price;
|
||||
tax = subtotal * TAX_RATE;
|
||||
discount = subtotal * DISCOUNT_RATE;
|
||||
total = subtotal - discount + tax;
|
||||
window.alert("Subtotal: $" + subtotal + " Tax: $" + tax + " Total: $" + total);
|
||||
}
|
||||
|
||||
var notDone = true;
|
||||
while(notDone === true) {
|
||||
var userChoice = window.prompt("Please make a selection (s)earch, (u)pdate, (c)lear, (d)iscount: ").toLowerCase();
|
||||
if (userChoice === "s") {
|
||||
searchItem();
|
||||
notDone = window.confirm("Do you wish to continue?");
|
||||
} else if (userChoice === "u") {
|
||||
updateItemQuantity();
|
||||
notDone = window.confirm("Do you wish to continue?");
|
||||
} else if (userChoice === "c") {
|
||||
clearCart();
|
||||
notDone = window.confirm("Do you wish to continue?");
|
||||
} else if (userChoice === "d") {
|
||||
calulateFinalPriceWithDiscount();
|
||||
notDone = window.confirm("Do you wish to continue?");
|
||||
} else {
|
||||
window.alert("Invalid selection, try again.");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
INFO-1272 (JS 1)/Labs/Midterm Part B/Levi_McLean_MidtermTest.zip
Normal file
BIN
INFO-1272 (JS 1)/Labs/Midterm Part B/MidTerm Part B.pdf
Normal file
35
INFO-1272 (JS 1)/Notes/Final/index.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>INFO-1272 Final Notes</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>INFO-1272 Final Notes</h1>
|
||||
|
||||
<fieldset>
|
||||
<legend>Setup Quiz</legend>
|
||||
<label for="studentName">Student Name:</label><br>
|
||||
<input type="text" name="studentName" id="studentName" placeholder="Enter your name"><br>
|
||||
|
||||
<label for="numQuestions">Number of questions:</label><br>
|
||||
<input type="number" name="numQuestions" id="numQuestions" placeholder="Number of questions"><br>
|
||||
|
||||
<button id="startBtn">Start</button>
|
||||
</fieldset>
|
||||
|
||||
<div id="quizArea" style="display: none;">
|
||||
<p id="currentStudent"></p>
|
||||
<p id="question"></p>
|
||||
<input type="text" id="answerInput">
|
||||
<button id="submitAnswer">Submit</button>
|
||||
<p id="feedback"></p>
|
||||
</div>
|
||||
<div id="results"></div>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
239
INFO-1272 (JS 1)/Notes/Final/index.js
Normal file
@@ -0,0 +1,239 @@
|
||||
// for (var count = 0; count <= 5; count++) {
|
||||
// console.log("This is count: " + count);
|
||||
// }
|
||||
|
||||
// for (var count = 0; count < 7; count += 2) {
|
||||
// console.log("This is count: " + count);
|
||||
// }
|
||||
|
||||
// for (var count = 10; count >= 0; count--) {
|
||||
// console.log("This is count: " + count);
|
||||
// }
|
||||
|
||||
// console.log(Math.round(4.6666666));
|
||||
// console.log(Math.ceil(4.6666666));
|
||||
// console.log(Math.min(0, 100));
|
||||
|
||||
// function sumArray(arr) {
|
||||
// var sum = 0;
|
||||
// for (var i = 0; i < arr.length; i++) {
|
||||
// sum += arr[i];
|
||||
// }
|
||||
// return sum;
|
||||
// }
|
||||
|
||||
// function reverseString(inString) {
|
||||
// var outString = "";
|
||||
// for (var i = inString.length - 1; i >= 0; i--) {
|
||||
// outString += inString[i];
|
||||
// }
|
||||
// return outString;
|
||||
// }
|
||||
|
||||
// function printMessage() {
|
||||
// var userInput = document.getElementById("textInput").value;
|
||||
// console.log("You entered: ", userInput);
|
||||
// }
|
||||
|
||||
// function currentTime() {
|
||||
// var now = new Date();
|
||||
// console.log(now.toLocaleDateString());
|
||||
// }
|
||||
|
||||
// function randomArray(arr) {
|
||||
// var numElements = 10;
|
||||
// for (var i = 0; i < numElements; i++) {
|
||||
// arr.push(Math.floor(Math.random() * 100) + 1);
|
||||
// }
|
||||
// return arr;
|
||||
// }
|
||||
|
||||
// var testArr = [1,2,3,4,5];
|
||||
// var total = sumArray(testArr);
|
||||
// console.log(total);
|
||||
|
||||
// console.log(reverseString("Penis"));
|
||||
|
||||
// // printMessage();
|
||||
// currentTime();
|
||||
// console.log(randomArray(testArr));
|
||||
|
||||
// var testDate = new Date();
|
||||
// console.log(testDate.getDate()); // DAY OF MONTH
|
||||
// console.log(testDate.getDay()); // DAY OF WEEK
|
||||
// console.log(testDate.getFullYear());
|
||||
// console.log(testDate.getMonth()); // STARTS AT 0
|
||||
// console.log(testDate.getTime());
|
||||
// console.log(testDate.getHours());
|
||||
|
||||
// function dateSlashes() {
|
||||
// var date = new Date();
|
||||
// var day = date.getDate();
|
||||
// var month = date.getMonth() + 1;
|
||||
// var year = date.getFullYear()
|
||||
// console.log(month + "/" + day + "/" + year);
|
||||
// }
|
||||
|
||||
// function dateSlashesReverse() {
|
||||
// var date = new Date();
|
||||
// var day = date.getDate();
|
||||
// var month = date.getMonth() + 1;
|
||||
// var year = date.getFullYear()
|
||||
// console.log(year + "/" + month + "/" + day);
|
||||
// }
|
||||
|
||||
// function monthWords () {
|
||||
// var date = new Date();
|
||||
// var day = date.getDate();
|
||||
// var monthNames = [
|
||||
// "January", "February", "March", "April", "May", "June",
|
||||
// "July", "August", "September", "October", "November", "December"
|
||||
// ]
|
||||
// var month = monthNames[date.getMonth()];
|
||||
// var year = date.getFullYear();
|
||||
// console.log(month + " " + day + ", " + year);
|
||||
// }
|
||||
|
||||
// function monthWordsLong () {
|
||||
// var date = new Date();
|
||||
// var dayNames = [
|
||||
// "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"
|
||||
// ]
|
||||
// var weekDay = dayNames[date.getDay()];
|
||||
// var day = date.getDate();
|
||||
// var monthNames = [
|
||||
// "January", "February", "March", "April", "May", "June",
|
||||
// "July", "August", "September", "October", "November", "December"
|
||||
// ]
|
||||
// var month = monthNames[date.getMonth()];
|
||||
// var year = date.getFullYear();
|
||||
// console.log(weekDay + ", " + month + " " + day + ", " + year);
|
||||
// }
|
||||
|
||||
// function printTime() {
|
||||
// var date = new Date();
|
||||
// var hour = date.getHours();
|
||||
// var minutes = date.getMinutes();
|
||||
// if (minutes < 10) {
|
||||
// minutes = "0" + date.getMinutes();
|
||||
// }
|
||||
// console.log(hour + ":" + minutes);
|
||||
// }
|
||||
|
||||
// function printTime12Hr() {
|
||||
// var date = new Date();
|
||||
// var hour = date.getHours();
|
||||
// var minutes = date.getMinutes();
|
||||
// if (minutes < 10) {
|
||||
// minutes = "0" + minutes;
|
||||
// }
|
||||
// var half = hour < 12 ? "AM" : "PM";
|
||||
|
||||
// hour = hour % 12;
|
||||
// if (hour === 0) {
|
||||
// hour = 12;
|
||||
// }
|
||||
|
||||
// console.log(hour + ":" + minutes + " " + half);
|
||||
// }
|
||||
|
||||
// dateSlashes();
|
||||
// dateSlashesReverse();
|
||||
// monthWords();
|
||||
// monthWordsLong();
|
||||
// printTime();
|
||||
// printTime12Hr();
|
||||
|
||||
// switch(expression) {
|
||||
// case x: // can be anything really
|
||||
// //thing to do
|
||||
// break;
|
||||
// case y:
|
||||
// //different thing to do
|
||||
// break;
|
||||
// default:
|
||||
// //default behaviour
|
||||
// break; // without break, the program will execute the following cases
|
||||
// }
|
||||
|
||||
// person = {
|
||||
// name: "Undefined",
|
||||
// age: 0
|
||||
// };
|
||||
|
||||
// function Person(name, age) {
|
||||
// this.name = name;
|
||||
// this.age = age;
|
||||
// }
|
||||
|
||||
// console.log(person);
|
||||
// var people = [new Person("Levi", 20), new Person("Tyler", 20), new Person("Stu", 19), new Person("Andrew", 21)]
|
||||
// console.log(people);
|
||||
|
||||
function Student(name) {
|
||||
this.name = name;
|
||||
this.score = 0;
|
||||
}
|
||||
|
||||
function generateQuestions() {
|
||||
for (let i = 0; i < numQuestions; i++) {
|
||||
const q = generateRandomQuestion();
|
||||
console.log(q.question, q.answer);
|
||||
document.getElementById("question").textContent = q.question;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function generateRandomQuestion() {
|
||||
const operators = ["+", "-", "*", "/"];
|
||||
const operator = operators[Math.floor(Math.random() * operators.length)];
|
||||
var num1 = Math.floor(Math.random() * 20) + 1;
|
||||
var num2 = Math.floor(Math.random() * 20) + 1;
|
||||
|
||||
if (operator === "/") {
|
||||
num1 = num1 * num2;
|
||||
}
|
||||
|
||||
const questionStr = `${num1} ${operator} ${num2}`;
|
||||
var answer;
|
||||
|
||||
switch(operator) {
|
||||
case "+":
|
||||
answer = num1 + num2;
|
||||
break;
|
||||
case "-":
|
||||
answer = num1 - num2;
|
||||
break;
|
||||
case "*":
|
||||
answer = num1 * num2;
|
||||
break;
|
||||
case "/":
|
||||
answer = num1 / num2;
|
||||
break;
|
||||
}
|
||||
|
||||
return { question: questionStr, answer: answer };
|
||||
}
|
||||
|
||||
var currentStudent = null;
|
||||
var numQuestions = 0;
|
||||
var currentQuestion = 0;
|
||||
|
||||
document.getElementById("startBtn").addEventListener("click", function() {
|
||||
const nameInput = document.getElementById("studentName").value.trim();
|
||||
const numInput = parseInt(document.getElementById("numQuestions").value);
|
||||
|
||||
if (nameInput === "" || isNaN(numInput) || numInput <= 0) {
|
||||
alert("Please enter a valid name and a number of questions above 0.");
|
||||
return;
|
||||
}
|
||||
|
||||
currentStudent = new Student(nameInput);
|
||||
numQuestions = numInput;
|
||||
currentQuestion = 1;
|
||||
|
||||
document.getElementById("quizArea").style.display = "block";
|
||||
document.getElementById("currentStudent").textContent = "Student: " + currentStudent.name;
|
||||
|
||||
generateQuestions();
|
||||
});
|
||||
9
INFO-1272 (JS 1)/Notes/Final/index2.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Index 2 Final Notes</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Index 2 Final Notes</h1>
|
||||
<script src="index2.js"></script>
|
||||
</body>
|
||||
97
INFO-1272 (JS 1)/Notes/Final/index2.js
Normal file
@@ -0,0 +1,97 @@
|
||||
function Student(name, age, grade) {
|
||||
this.name = name,
|
||||
this.age = age,
|
||||
this.grade = grade
|
||||
};
|
||||
|
||||
function Car(brand, model, year, isElectric) {
|
||||
this.brand = brand,
|
||||
this.model = model,
|
||||
this.year = year,
|
||||
this.isElectric = isElectric,
|
||||
this.describe = function() {
|
||||
console.log(`This is a ${this.year} ${this.brand} ${this.model}`);
|
||||
}
|
||||
};
|
||||
|
||||
function House(type, bedrooms, price) {
|
||||
this.type = type;
|
||||
this.bedrooms = bedrooms;
|
||||
this.price = price;
|
||||
}
|
||||
|
||||
function Employee(name, position, salary) {
|
||||
this.name = name,
|
||||
this.position = position,
|
||||
this.salary = salary,
|
||||
this.increaseSalary = function(amount) {
|
||||
this.salary += amount;
|
||||
}
|
||||
}
|
||||
|
||||
function Movie(title, genre, rating) {
|
||||
this.title = title,
|
||||
this.genre = genre,
|
||||
this.rating = rating,
|
||||
this.rateMovie = function(newRating) {
|
||||
this.rating = newRating;
|
||||
}
|
||||
}
|
||||
|
||||
function Course(courseName, instructor, schedule) {
|
||||
this.courseName = courseName;
|
||||
this.instructor = instructor;
|
||||
this.schedule = schedule;
|
||||
}
|
||||
|
||||
var student1 = new Student("Levi McLean", 20, 99);
|
||||
var student2 = new Student("Tyler Hird", 19, 88);
|
||||
var student3 = new Student("Joe Jefferson", 21, 75);
|
||||
|
||||
var car1 = new Car("Tesla", "Model 3", 2025, true);
|
||||
var car2 = new Car("Ford", "F-150", 2020, false);
|
||||
|
||||
var house1 = new House("Bungalow", 2, 250000);
|
||||
var house2 = new House("Town House", 3, 375000);
|
||||
|
||||
var employee1 = new Employee("Jimmy Joe", "Manager", 80000);
|
||||
|
||||
var movie1 = new Movie("Kill Bill", "Action", 4.4);
|
||||
var movie2 = new Movie("Star Wars", "Action", 3.7);
|
||||
|
||||
console.log(student1.name + " " + student1.grade);
|
||||
console.log(student2.name + " " + student2.grade);
|
||||
console.log(student3.name + " " + student3.grade);
|
||||
|
||||
if (car1.isElectric === true) {
|
||||
console.log(`${car1.brand} ${car1.model} is an electric car!`)
|
||||
} if (car2.isElectric === true) {
|
||||
console.log(`${car2.brand} ${car2.model} is an electric car!`)
|
||||
}
|
||||
|
||||
car1.describe();
|
||||
car2.describe();
|
||||
|
||||
console.log(`The ${house1.type} has ${house1.bedrooms} bedrooms and costs $${house1.price}`);
|
||||
console.log(`The ${house2.type} has ${house2.bedrooms} bedrooms and costs $${house2.price}`);
|
||||
|
||||
console.log(`Previous ${employee1.position} salary: $${employee1.salary}.`);
|
||||
console.log("Increasing salary by $1000000");
|
||||
employee1.increaseSalary(1000000);
|
||||
console.log(`New ${employee1.position} salary: $${employee1.salary}.`);
|
||||
|
||||
console.log(`Previous rating for ${movie1.title}: ${movie1.rating}`);
|
||||
console.log(`Previous rating for ${movie2.title}: ${movie2.rating}`);
|
||||
movie1.rateMovie(5);
|
||||
console.log(`New rating for ${movie1.title}: ${movie1.rating}`);
|
||||
console.log(`New rating for ${movie2.title}: ${movie2.rating}`);
|
||||
|
||||
var courseSchedule = {
|
||||
day: "Monday",
|
||||
time: "10:00 AM",
|
||||
location: "Room 101"
|
||||
};
|
||||
|
||||
var course1 = new Course("JavaScript 1", "Mr. Smith", courseSchedule);
|
||||
|
||||
console.log(`The ${course1.courseName} course is taught by ${course1.instructor} on ${course1.schedule.day} at ${course1.schedule.time} in ${course1.schedule.location}`)
|
||||
176
INFO-1272 (JS 1)/Notes/Midterm/index.html
Normal file
@@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Midterm Study</title>
|
||||
<meta charset="utf-8" lang="en-us">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Midterm Study</h1>
|
||||
<h2>Introduction to Web Pages</h2>
|
||||
<ol>
|
||||
<li>A web page is a container for the following three technologies. Describe the purpose of each for a web page:
|
||||
</li>
|
||||
<ul>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>JavaScript</li>
|
||||
</ul>
|
||||
</ol>
|
||||
<p>Answers:</p>
|
||||
<ul>
|
||||
<li>HTML is used for defining web elements and the rough layout of a website</li>
|
||||
<li>CSS is used to style the default HTML elements</li>
|
||||
<li>JavaScript is used for data input, manipulation and other logical components</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
||||
<h2>Introduction to javascript</h2>
|
||||
<ol>
|
||||
<li>Browser pop-up dialogue box functions</li>
|
||||
<ul>
|
||||
<li>alert()</li>
|
||||
<li>prompt()</li>
|
||||
<li>confirm()</li>
|
||||
</ul>
|
||||
</ol>
|
||||
<p>Answers:</p>
|
||||
<ul>
|
||||
<li>Reload webpage to see examples</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
||||
<h2>Data Types and Variables</h2>
|
||||
<ol>
|
||||
<li>Name JavaScript's three data types. Describe the types of data they store</li>
|
||||
<li>JavaScript is a weakly-typed language. Describe what this means.</li>
|
||||
<li>What are the naming rules for a variables name? What are naming conventions?</li>
|
||||
<li>What is a constant in JavaScript? Describe how you would declare a JavaScript constant.</li>
|
||||
</ol>
|
||||
<p>Answers:</p>
|
||||
<ol>
|
||||
<li>Number, String and Boolean</li>
|
||||
<li>weakly-typed language implies that data types do not need to be defined at initialization, the compiler will
|
||||
decide, cast and convert the data type unless explicitly cast</li>
|
||||
<li>A naming convention is a recommended way of naming variables to ensure readability and organize code.
|
||||
JavaScript uses camelCase for variables and classes and UPPER_SNAKE_CASE for constants</li>
|
||||
<code>
|
||||
let customerAge = 23;<br>
|
||||
const ONT_TAX_RATE = 0.13;
|
||||
</code>
|
||||
<li>A constant is a variable whose value cannot be changed once initialized, making it constant. To define a
|
||||
constant, use the "const" keyword.</li>
|
||||
</ol>
|
||||
<hr>
|
||||
|
||||
<h2>Operators</h2>
|
||||
<ol>
|
||||
<li>Explain the following binary operators: + - * / %</li>
|
||||
<li>Explain the multiple uses of the + operator.</li>
|
||||
<li>Describe how the increment/decrement operators (++ and --) work.</li>
|
||||
</ol>
|
||||
<p>Answers:</p>
|
||||
<ol>
|
||||
<li>The + operator is used to get the sum, the - operator is to get the difference, the * operator multiplies,
|
||||
the / operator divides and the % (modulus) operator determines if two numbers divided have a remainder and
|
||||
how much of one</li>
|
||||
<li>The + operator can be used to add two numbers together to find their sum, or you can use it to concatenate
|
||||
multiple Strings together.</li>
|
||||
<li>The ++ (increment) operator is used to increase the value of a variable by exactly one. The -- (decrement)
|
||||
operator is used to decrease the value of a variable by exactly 1.</li>
|
||||
</ol>
|
||||
<hr>
|
||||
|
||||
<h2>The JavaScript Math object</h2>
|
||||
<ol>
|
||||
<li>Describe the operation and the return for the following Math methods:</li>
|
||||
<ul>
|
||||
<li>Math.PI</li>
|
||||
<li>Math.abs(x)</li>
|
||||
<li>Math.pow(x,2)</li>
|
||||
<li>Math.round(x)</li>
|
||||
<li>Math.ceil(x)</li>
|
||||
<li>Math.floor(x)</li>
|
||||
<li>Math.trunc(x)</li>
|
||||
<li>Math.random()</li>
|
||||
<li>Math.min(x,y)</li>
|
||||
<li>Math.max(x,y)</li>
|
||||
</ul>
|
||||
</ol>
|
||||
<p>Answers:</p>
|
||||
<ul>
|
||||
<li>Math.PI is a constant value for PI</li>
|
||||
<li>Math.abs(x) returns the absolute value of X (makes a negative positive)</li>
|
||||
<li>Math.pow(x,2) returns the value of x to the power of y (in this case 2)</li>
|
||||
<li>Math.round(x) returns x rounded to the nearest whole. Below 0.5 is rounded down, above 0.5 is rouded up.
|
||||
</li>
|
||||
<li>Math.ceil(x) returns the "ceiling" of x, which is the next highest whole integer.</li>
|
||||
<li>Math.floor(x) returns the "floor" of x, which is the next lowest whole integer.</li>
|
||||
<li>Math.trunc(x) returns x truncated, which means it cuts off the decimal places regardless of what they are.
|
||||
</li>
|
||||
<li>Math.random() returns a random number between 0 and 1, can be manipulated to return in between any range
|
||||
</li>
|
||||
<li>Math.min(x,y) returns the minimum of two numbers. The smaller of the two</li>
|
||||
<li>Math.max(x,y) returns the maximum of two numbers. The larger of the two</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
||||
<h2>JavaScript Number Methods</h2>
|
||||
<ol>
|
||||
<li>Describe the operation and the return for the following Number methods:</li>
|
||||
<ul>
|
||||
<li>toFixed()</li>
|
||||
<li>toPrecision()</li>
|
||||
</ul>
|
||||
</ol>
|
||||
<p>Answers:</p>
|
||||
<ul>
|
||||
<li>toFixed() returns x but at a fixed number of decimal places, defined by y</li>
|
||||
<li>toPrecision() returns x but at a fixed number of significant digits. This means it may round deicimal places
|
||||
before dropping them.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
||||
<h2>JavaScript Global Functions</h2>
|
||||
<ol>
|
||||
<li>Describe the operation and the return for the following global functions:</li>
|
||||
<ul>
|
||||
<li>parseInt(number)</li>
|
||||
<li>parseFloat(number)</li>
|
||||
</ul>
|
||||
</ol>
|
||||
<p>Answers:</p>
|
||||
<ul>
|
||||
<li>parseInt(number) takes a string as input and returns the first integer in the string. Can also accept a
|
||||
radix option</li>
|
||||
<li>parseFloat(number) takes a string as input and returns the first float value in the string.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
||||
<h2>JavaScript String Methods</h2>
|
||||
<ol>
|
||||
<li>Describe the operation and the return for the following String methods.</li>
|
||||
<ul>
|
||||
<li>length</li>
|
||||
<li>toLowerCase()</li>
|
||||
<li>toUpperCase()</li>
|
||||
<li>charAt()</li>
|
||||
</ul>
|
||||
</ol>
|
||||
<p>Answers:</p>
|
||||
<ul>
|
||||
<li>length gets the character count of a string including spaces</li>
|
||||
<li>toLowerCase() turns all uppercase letters to lowercase letters</li>
|
||||
<li>toUpperCase() turns all lowercase letters to uppercase letters</li>
|
||||
<li>chatAt() takes a number for the index of the word to search through and returns the character at that index.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Playground</h2>
|
||||
<p>Interactive JavaScript follows</p>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
190
INFO-1272 (JS 1)/Notes/Midterm/index.js
Normal file
@@ -0,0 +1,190 @@
|
||||
// for (var i = 1; i < 10; i++) {
|
||||
// console.log("Ran " + i + " time(s).")
|
||||
// };
|
||||
|
||||
// console.log(window.confirm("Feel prepared?")); // true or false
|
||||
|
||||
// var question = ("50" === 50);
|
||||
// console.log(question);
|
||||
|
||||
// var question2 = (true && false);
|
||||
// console.log(question2);
|
||||
|
||||
// var question3 = (true || false);
|
||||
// console.log(question3);
|
||||
|
||||
// // VAR price = 35.6; <-- WRONG
|
||||
// var price = 35.6; // <-- RIGHT
|
||||
|
||||
// var city = "London";
|
||||
|
||||
// if (city.toLowerCase() === "london") {
|
||||
// console.log("I live there too!");
|
||||
// } else {
|
||||
// console.log("I dont know where that is.")
|
||||
// }
|
||||
|
||||
// var userName = window.prompt("Please enter your name:");
|
||||
// greetUser(userName);
|
||||
|
||||
// var radius = window.prompt("Please enter circle radius:");
|
||||
// calcCirc(radius);
|
||||
|
||||
// var testNum = window.prompt("Number to test for even:");
|
||||
// isEven(testNum);
|
||||
|
||||
// function greetUser(userName) {
|
||||
// alert("Hello " + userName + " welcome to the page");
|
||||
// }
|
||||
|
||||
// function calcCirc(radius) {
|
||||
// var Circ = ((2 * Math.PI) * radius).toFixed(2);
|
||||
// alert("Circumference is: " + Circ + " Inches.");
|
||||
// }
|
||||
|
||||
// function isEven(number) {
|
||||
// if (number % 2 == 0) {
|
||||
// console.log(number + " is even");
|
||||
// } else {
|
||||
// console.log(number + " is odd");
|
||||
// }
|
||||
// }
|
||||
|
||||
// NUMBER GUESSING GAME
|
||||
// var randomNum = Math.floor((Math.random() * 100) + 1);
|
||||
// console.log("Random Number: " + randomNum);
|
||||
|
||||
// var userGuess;
|
||||
// do {
|
||||
// var input = window.prompt("Guess a number from 1-100: ");
|
||||
// if (input === null) {
|
||||
// window.alert("Game cancelled.");
|
||||
// break;
|
||||
// }
|
||||
|
||||
// userGuess = parseInt(input, 10);
|
||||
// if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
|
||||
// window.alert("Please enter a valid number between 1 and 100.");
|
||||
// } else if (userGuess !== randomNum) {
|
||||
// window.alert("Incorrect number, try again!");
|
||||
// }
|
||||
// } while (userGuess !== randomNum);
|
||||
|
||||
// if (userGuess === randomNum) {
|
||||
// window.alert("You guessed the right number! The number was " + randomNum);
|
||||
// }
|
||||
|
||||
// ROCK PAPER SCISSORS GAME
|
||||
// var choices = ["rock", "paper", "scissors"];
|
||||
// var compChoice = choices[Math.floor(Math.random() * 3)];
|
||||
// console.log("Computer choice: " + compChoice);
|
||||
|
||||
// var userChoice = window.prompt("Enter rock, paper or scissors: ").toLowerCase();
|
||||
// console.log("User choice: " + userChoice);
|
||||
|
||||
// if (!choices.includes(userChoice)) {
|
||||
// window.alert("Invalid choice!");
|
||||
// } else if (userChoice === compChoice) {
|
||||
// window.alert("It's a tie!");
|
||||
// } else {
|
||||
// var winsAgainst = {
|
||||
// rock: "scissors",
|
||||
// paper: "rock",
|
||||
// scissors: "paper"
|
||||
// };
|
||||
|
||||
// if (winsAgainst[userChoice] === compChoice) {
|
||||
// window.alert("You win!");
|
||||
// } else {
|
||||
// window.alert("Computer wins!");
|
||||
// }
|
||||
// }
|
||||
|
||||
// SAMPLE BANK ACCOUNT
|
||||
// var bankBalance = 0;
|
||||
// console.log("Bank balance: $" + bankBalance);
|
||||
|
||||
// function getAmount(message) {
|
||||
// var input = window.prompt(message);
|
||||
// if (input === null) return null;
|
||||
// var amount = parseInt(input, 10);
|
||||
// if (isNaN(amount)) {
|
||||
// window.alert("Please enter a valid number.");
|
||||
// return null;
|
||||
// }
|
||||
// return amount;
|
||||
// }
|
||||
|
||||
// while (true) {
|
||||
// var userChoice = window.prompt(
|
||||
// "Welcome! Your bank balance is: $" + bankBalance +
|
||||
// ". Would you like to (w)ithdraw, (d)eposit or (v)iew balance, or (q)uit?");
|
||||
// if (userChoice === null || userChoice.toLowerCase() === "q") break;
|
||||
// userChoice = userChoice.toLowerCase();
|
||||
// console.log(userChoice);
|
||||
|
||||
// if (userChoice === "w" || userChoice === "withdrawl") {
|
||||
// var widthdrawlAmount = getAmount("How much would you like to widthdraw?");
|
||||
// if (widthdrawlAmount === null) continue;
|
||||
// if (widthdrawlAmount > bankBalance) {
|
||||
// window.alert("Not enough in balance to widthdraw, sorry!");
|
||||
// } else if (widthdrawlAmount <= 0) {
|
||||
// window.alert("Cannot widthdraw negative or 0 dollars.");
|
||||
// } else {
|
||||
// bankBalance -= widthdrawlAmount;
|
||||
// console.log("Bank balance: $" + bankBalance);
|
||||
// }
|
||||
// } else if (userChoice === "d" || userChoice === "deposit") {
|
||||
// var depositAmount = getAmount("How much would you like to deposit?");
|
||||
// if (depositAmount === null) continue;
|
||||
// if (depositAmount <= 0) {
|
||||
// window.alert("Cannot deposit negative or 0 dollars.");
|
||||
// } else {
|
||||
// bankBalance += depositAmount;
|
||||
// console.log("Bank balance: $" + bankBalance);
|
||||
// }
|
||||
// } else if (userChoice === "v" || userChoice === "view") {
|
||||
// window.alert("Your balance is: $" + bankBalance + " dollars. Thank you for banking with us!");
|
||||
// console.log("Bank balance: $" + bankBalance);
|
||||
// } else {
|
||||
// window.alert("Invalid choice, please try again");
|
||||
// }
|
||||
// }
|
||||
|
||||
// ARRAY STATS CALCULATOR
|
||||
// var stats = [];
|
||||
// var sum = 0;
|
||||
|
||||
// for (var i = 0; i < 50; i++) {
|
||||
// var randomNum = Math.floor(Math.random() * 50);
|
||||
// sum += randomNum;
|
||||
// stats.push(randomNum);
|
||||
// console.log(randomNum);
|
||||
// }
|
||||
// console.log(stats);
|
||||
|
||||
// console.log("Sum of stats: " + sum);
|
||||
// console.log("Average of stats: " + (sum / stats.length));
|
||||
// console.log("Min of stats: " + Math.min(...stats));
|
||||
// console.log("Max of stats: " + Math.max(...stats));
|
||||
|
||||
// PASSWORD STRENGTH CHECKER
|
||||
var userPass = window.prompt("Enter a password to test: ");
|
||||
var charCount, numCount, symCount;
|
||||
|
||||
charCount = userPass.length;
|
||||
console.log(charCount);
|
||||
|
||||
numCount = (userPass.match(/\d/g) || []).length;
|
||||
console.log(numCount);
|
||||
|
||||
symCount = (userPass.match(/[^a-zA-Z0-9]/g) || []).length;
|
||||
console.log(symCount);
|
||||
|
||||
if (charCount >= 10 && numCount >= 3 && symCount >= 1) {
|
||||
window.alert("Your password is STRONG");
|
||||
} else if (charCount >= 10 && numCount >= 1) {
|
||||
window.alert("Your password is OKAY");
|
||||
} else {
|
||||
window.alert("Your password is WEAK");
|
||||
}
|
||||
34
INFO-1272 (JS 1)/Notes/Week 1/index.html
Normal file
@@ -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>
|
||||
19
INFO-1272 (JS 1)/Notes/Week 1/index.js
Normal file
@@ -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}`
|
||||
}
|
||||
18
INFO-1272 (JS 1)/Notes/Week 2/index.html
Normal file
@@ -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>
|
||||
14
INFO-1272 (JS 1)/Notes/Week 2/index.js
Normal file
@@ -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);
|
||||
}
|
||||
11
INFO-1272 (JS 1)/Notes/Week 8/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Week 8 JS Object Practice</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Week 8 JS Object Practice</h1>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
63
INFO-1272 (JS 1)/Notes/Week 8/index.js
Normal file
@@ -0,0 +1,63 @@
|
||||
// Question 1
|
||||
function person(firstName, lastName, age, city) {
|
||||
return {
|
||||
firstName: firstName,
|
||||
lastName: lastName,
|
||||
age: age,
|
||||
city: city
|
||||
};
|
||||
}
|
||||
|
||||
var testPerson = person("Levi", "McLean", 20, "Woodstock");
|
||||
console.log(testPerson.firstName);
|
||||
console.log(testPerson.lastName);
|
||||
console.log(testPerson.age);
|
||||
console.log(testPerson.city);
|
||||
|
||||
// Question 2
|
||||
function book(title, author, pages) {
|
||||
return {
|
||||
title: title,
|
||||
author: author,
|
||||
pages: pages
|
||||
};
|
||||
}
|
||||
|
||||
var testBook = book("1984", "George Orwell", 386);
|
||||
console.log(testBook.title);
|
||||
console.log(testBook.author);
|
||||
console.log(testBook.pages);
|
||||
console.log("Update pages to 555");
|
||||
testBook.pages = 555;
|
||||
console.log(testBook.pages);
|
||||
|
||||
// Question 3
|
||||
function movie(name, year, rating) {
|
||||
return {
|
||||
name: name,
|
||||
year: year,
|
||||
rating: rating
|
||||
};
|
||||
}
|
||||
|
||||
var testMovie = movie("Kill Bill", 2003, 9.5);
|
||||
console.log(testMovie.name);
|
||||
console.log(testMovie.year);
|
||||
console.log(testMovie.rating);
|
||||
console.log("Adding new property director");
|
||||
testMovie.director = "Quentin Tarantino";
|
||||
console.log(testMovie.director);
|
||||
|
||||
// Question 4
|
||||
const playlist = {
|
||||
name: "Cool Jams",
|
||||
songs: ["Rap song", "Metal song", "Pop song"]
|
||||
};
|
||||
|
||||
console.log(playlist.songs);
|
||||
console.log("First Song");
|
||||
console.log(playlist.songs[0]);
|
||||
console.log("Last Song");
|
||||
console.log(playlist.songs[playlist.songs.length - 1]); // Always get last entry
|
||||
|
||||
// Question 5
|
||||
BIN
INFO-1272 (JS 1)/Projects/Final Project/Final Project.pdf
Normal file
116
INFO-1272 (JS 1)/Projects/Final Project/index.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Flowery Flower Shop</title>
|
||||
<meta charset="utf-8" lang="en">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Flowery Flower Shop</h1>
|
||||
<small>Browse our flowers below...</small>
|
||||
|
||||
<h2>Available flowers</h2>
|
||||
<section id="catalog">
|
||||
<article id="rose">
|
||||
<h3>Rose</h3>
|
||||
<ul>
|
||||
<li>Price:</li>
|
||||
<li>Category:</li>
|
||||
<li>Stock:</li>
|
||||
<li>Description:</li>
|
||||
</ul>
|
||||
<form class="add-to-cart">
|
||||
<label>Quantity: <input type="number" name="quantity" min="1" value="1" required></label>
|
||||
<button type="submit">Add to Cart</button>
|
||||
</form>
|
||||
</article>
|
||||
<article id="tulip">
|
||||
<h3>Tulip</h3>
|
||||
<ul>
|
||||
<li>Price:</li>
|
||||
<li>Category:</li>
|
||||
<li>Stock:</li>
|
||||
<li>Description:</li>
|
||||
</ul>
|
||||
<form class="add-to-cart">
|
||||
<label>Quantity: <input type="number" name="quantity" min="1" value="1" required></label>
|
||||
<button type="submit">Add to Cart</button>
|
||||
</form>
|
||||
</article>
|
||||
<article id="sunflower">
|
||||
<h3>Sunflower</h3>
|
||||
<ul>
|
||||
<li>Price:</li>
|
||||
<li>Category:</li>
|
||||
<li>Stock:</li>
|
||||
<li>Description:</li>
|
||||
</ul>
|
||||
<form class="add-to-cart">
|
||||
<label>Quantity: <input type="number" name="quantity" min="1" value="1" required></label>
|
||||
<button type="submit">Add to Cart</button>
|
||||
</form>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<h2>Shopping Cart</h2>
|
||||
<section id="cart">
|
||||
<table id="cart-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Flower</th>
|
||||
<th>Price</th>
|
||||
<th>Quantity</th>
|
||||
<th>Subtotal</th>
|
||||
<th>Remove</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="cart-total">
|
||||
<p>Subtotal: $<span id="subtotal">0.00</span></p>
|
||||
<p>Tax: $<span id="tax">0.00</span></p>
|
||||
<strong>Total: $<span id="total">0.00</span></strong>
|
||||
</div>
|
||||
<button id="checkout-button">Checkout</button>
|
||||
<div id="checkout-message"></div>
|
||||
</section>
|
||||
|
||||
<h2>Testimonials and Feedback</h2>
|
||||
<section id="feedback">
|
||||
<form id="feedback-form">
|
||||
<label>
|
||||
Flower:
|
||||
<select name="flower" required>
|
||||
<option value="">Select a flower to rate</option>
|
||||
<option value="Rose">Red Rose</option>
|
||||
<option value="Tulip">Tulip</option>
|
||||
<option value="Sunflower">Sunflower</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Rating:
|
||||
<select name="rating" required>
|
||||
<option value="">Rate</option>
|
||||
<option value="5">5 - Excellent</option>
|
||||
<option value="4">4 - Good</option>
|
||||
<option value="3">3 - Average</option>
|
||||
<option value="2">2 - Poor</option>
|
||||
<option value="1">1 - Terrible</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Feedback:
|
||||
<input type="text" name="content" maxlength="120" placeholder="Your feedback" required>
|
||||
</label>
|
||||
<button type="submit">Submit Feedback</button>
|
||||
</form>
|
||||
<div id="feedback-list">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
184
INFO-1272 (JS 1)/Projects/Final Project/index.js
Normal file
@@ -0,0 +1,184 @@
|
||||
// Object called flowers that contains 3 flower objects with their information
|
||||
const flowers = {
|
||||
"rose": {
|
||||
name: "Rose",
|
||||
price: 2.5,
|
||||
category: "Romance",
|
||||
stock: 20,
|
||||
description: "The classic red rose for that someone special."
|
||||
},
|
||||
"tulip": {
|
||||
name: "Tulip",
|
||||
price: 3.0,
|
||||
category: "Springtime",
|
||||
stock: 15,
|
||||
description: "A perfect spring time flower for a bouquet."
|
||||
},
|
||||
"sunflower": {
|
||||
name: "Sunflower",
|
||||
price: 5.0,
|
||||
category: "Exclusives",
|
||||
stock: 10,
|
||||
description: "Large iconic flower perfect for an Autumn garden."
|
||||
}
|
||||
};
|
||||
|
||||
let feedback = [
|
||||
{flower: "Rose", rating: 5, content: "A beautiful bouqet delivered on time with care!"},
|
||||
{flower: "Tulip", rating: 4, content: "Reminds me of Spring any time of year!"},
|
||||
{flower: "Sunflower", rating: 5, content: "Sunflower was tall and healthy, so elegant!"}
|
||||
];
|
||||
|
||||
// Function to add flower information (price, stock, description, category) to HTML catalog
|
||||
function populateCatalog() {
|
||||
Object.values(flowers).forEach(flower => {
|
||||
const article = document.getElementById(`${flower.name.toLowerCase()}`)
|
||||
if (article) {
|
||||
const listItems = article.querySelectorAll("ul li");
|
||||
listItems[0].textContent = `Price: $${flower.price.toFixed(2)}`;
|
||||
listItems[1].textContent = `Category: ${flower.category}`;
|
||||
listItems[2].textContent = `Stock: ${flower.stock}`;
|
||||
listItems[3].textContent = `Description: ${flower.description}`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Function to update items inside cart, used by addToCart() and at initialization
|
||||
function updateCartDisplay() {
|
||||
const tbody = document.querySelector("#cart-table tbody");
|
||||
tbody.innerHTML = "";
|
||||
let subtotal = 0;
|
||||
cart.forEach((item, idx) => {
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td>${flowers[item.name].name}</td>
|
||||
<td>$${item.price.toFixed(2)}</td>
|
||||
<td>${item.quantity}</td>
|
||||
<td>${(item.price * item.quantity).toFixed(2)}</td>
|
||||
<td><button data-idx="${idx}" class="remove-button">Remove</button></td>
|
||||
`
|
||||
tbody.appendChild(row);
|
||||
subtotal += item.price * item.quantity;
|
||||
});
|
||||
|
||||
const tax = subtotal * 0.13;
|
||||
const total = subtotal + tax;
|
||||
|
||||
document.getElementById("subtotal").textContent = subtotal.toFixed(2);
|
||||
document.getElementById("tax").textContent = tax.toFixed(2);
|
||||
document.getElementById("total").textContent = total.toFixed(2);
|
||||
|
||||
document.querySelectorAll(".remove-button").forEach(btn => {
|
||||
btn.addEventListener("click", function() {
|
||||
const idx = Number(btn.getAttribute("data-idx"));
|
||||
const item = cart[idx];
|
||||
flowers[item.name].stock += item.quantity;
|
||||
cart.splice(idx,1);
|
||||
updateCartDisplay();
|
||||
populateCatalog();
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Function to handle getting the correct flower name and quantity to add to cart
|
||||
function setupCartForms() {
|
||||
document.querySelectorAll(".add-to-cart").forEach(form => {
|
||||
form.addEventListener("submit", function(e) {
|
||||
e.preventDefault();
|
||||
const article = form.closest("article");
|
||||
const flowerName = article.querySelector("h3").textContent;
|
||||
const quantity = form.querySelector("input[name='quantity']").value;
|
||||
addToCart(flowerName, quantity);
|
||||
form.reset();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Start with empty cart
|
||||
let cart = [];
|
||||
|
||||
// Funcion to add items to cart
|
||||
function addToCart(flowerName, quantity) {
|
||||
quantity = Number(quantity);
|
||||
|
||||
const key = flowerName.toLowerCase();
|
||||
const flower = flowers[key];
|
||||
|
||||
if (!flower || quantity < 1 || quantity > flower.stock) {
|
||||
alert("Too many or too few flowers added to cart, rejecting.");
|
||||
return;
|
||||
}
|
||||
|
||||
const existing = cart.find(item => item.name === flowerName);
|
||||
if (existing) {
|
||||
if (quantity > flower.stock) {
|
||||
alert("Added quantity goes over stock limit, rejecting.");
|
||||
return
|
||||
}
|
||||
existing.quantity += quantity;
|
||||
} else {
|
||||
cart.push({
|
||||
name: key,
|
||||
price: flower.price,
|
||||
quantity: quantity
|
||||
});
|
||||
}
|
||||
flower.stock -= quantity;
|
||||
updateCartDisplay();
|
||||
populateCatalog();
|
||||
}
|
||||
|
||||
// Function to create feedback HTML elements from list
|
||||
function renderFeedback() {
|
||||
const feedbackList = document.getElementById("feedback-list");
|
||||
feedbackList.innerHTML = "";
|
||||
if (feedback.length === 0) {
|
||||
feedbackList.innerHTML = "<p>No feedback yet. Be our first review?</p>";
|
||||
return;
|
||||
}
|
||||
feedback.forEach(fb => {
|
||||
const div = document.createElement("div");
|
||||
div.className = "testimonial";
|
||||
div.innerHTML = `
|
||||
<strong>${fb.flower}</strong>
|
||||
<span>(${fb.rating}★)</span>
|
||||
<p>${fb.content}</p>
|
||||
<hr>
|
||||
`
|
||||
feedbackList.appendChild(div);
|
||||
})
|
||||
}
|
||||
|
||||
// Event listener for checkout button to show checkout message and reset cart
|
||||
document.getElementById("checkout-button").addEventListener("click", function() {
|
||||
if (cart.length === 0) {
|
||||
document.getElementById("checkout-message").textContent = "Your cart is empty!";
|
||||
return;
|
||||
}
|
||||
const confirmed = confirm("Are you sure you want to finalize cart and check out?");
|
||||
if (confirmed) {
|
||||
document.getElementById("checkout-message").textContent = "Thank you for your order!";
|
||||
cart = [];
|
||||
updateCartDisplay();
|
||||
populateCatalog();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("feedback-form").addEventListener("submit", function(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const flower = form.flower.value;
|
||||
const rating = Number(form.rating.value);
|
||||
const content = form.content.value.trim()
|
||||
|
||||
if (!flower || !rating || !content) return;
|
||||
|
||||
feedback.unshift({ flower, rating, content });
|
||||
renderFeedback();
|
||||
form.reset();
|
||||
})
|
||||
|
||||
populateCatalog();
|
||||
setupCartForms();
|
||||
updateCartDisplay();
|
||||
renderFeedback();
|
||||
82
INFO-1272 (JS 1)/Projects/Final Project/style.css
Normal file
@@ -0,0 +1,82 @@
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: #fafafa;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 24px 0 12px 0;
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 0 0 18px 0;
|
||||
color: #555;
|
||||
font-size: 0.98em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 0 auto 24px auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
article {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin: 12px 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form label {
|
||||
display: block;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
input[type="number"], input[type="text"], select {
|
||||
padding: 2px 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 6px;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
background: #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
#feedback-list .testimonial {
|
||||
background: #f9f9f9;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin: 8px 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 3.4 MiB |
|
After Width: | Height: | Size: 3.9 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 2.0 MiB |