Device Sync
This commit is contained in:
@@ -1,111 +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">
|
<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">
|
<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">
|
<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>
|
<root>
|
||||||
<mxCell id="0" />
|
<mxCell id="0" />
|
||||||
<mxCell id="1" parent="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">
|
<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">
|
<mxGeometry relative="1" as="geometry">
|
||||||
<mxPoint x="350" y="200" as="targetPoint" />
|
<mxPoint x="350" y="200" as="targetPoint" />
|
||||||
</mxGeometry>
|
</mxGeometry>
|
||||||
</mxCell>
|
</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">
|
<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" />
|
<mxGeometry relative="1" as="geometry" />
|
||||||
</mxCell>
|
</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">
|
<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" />
|
<mxGeometry relative="1" as="geometry" />
|
||||||
</mxCell>
|
</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">
|
<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" />
|
<mxGeometry relative="1" as="geometry" />
|
||||||
</mxCell>
|
</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">
|
<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" />
|
<mxGeometry relative="1" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-1" value="Modem/Router combo" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="380" y="160" width="80" height="80" as="geometry" />
|
||||||
</mxCell>
|
</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">
|
<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">
|
<mxGeometry relative="1" as="geometry">
|
||||||
<Array as="points">
|
<Array as="points">
|
||||||
<mxPoint x="420" y="75" />
|
<mxPoint x="420" y="75" />
|
||||||
</Array>
|
</Array>
|
||||||
</mxGeometry>
|
</mxGeometry>
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-2" value="Bell ISP (internet)" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="360" width="120" height="80" as="geometry" />
|
||||||
</mxCell>
|
</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">
|
<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" />
|
<mxGeometry relative="1" as="geometry" />
|
||||||
</mxCell>
|
</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">
|
<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" />
|
<mxGeometry relative="1" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-5" value="" style="rhombus;whiteSpace=wrap;html=1;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="190" y="160" width="80" height="80" as="geometry" />
|
||||||
</mxCell>
|
</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">
|
<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">
|
<mxGeometry relative="1" as="geometry">
|
||||||
<mxPoint x="180" y="200" as="sourcePoint" />
|
<mxPoint x="180" y="200" as="sourcePoint" />
|
||||||
<Array as="points">
|
<Array as="points">
|
||||||
<mxPoint x="155" y="200" />
|
<mxPoint x="155" y="200" />
|
||||||
<mxPoint x="155" y="170" />
|
<mxPoint x="155" y="170" />
|
||||||
</Array>
|
</Array>
|
||||||
</mxGeometry>
|
</mxGeometry>
|
||||||
</mxCell>
|
</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">
|
<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">
|
<mxGeometry relative="1" as="geometry">
|
||||||
<mxPoint x="190" y="200" as="sourcePoint" />
|
<mxPoint x="190" y="200" as="sourcePoint" />
|
||||||
</mxGeometry>
|
</mxGeometry>
|
||||||
</mxCell>
|
</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">
|
<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" />
|
<mxGeometry x="200" y="185" width="60" height="30" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-13" value="Desktop PC" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="240" y="420" width="80" height="80" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-15" value="TV" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="680" y="320" width="80" height="80" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-16" value="iPhone" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="710" y="185" width="80" height="80" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-17" value="iPhone" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="700" y="30" width="80" height="80" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-21" value="Camera" style="triangle;whiteSpace=wrap;html=1;direction=north;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="160" y="10" width="80" height="60" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-22" value="Camera" style="triangle;whiteSpace=wrap;html=1;direction=north;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="30" y="140" width="80" height="60" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-26" value="Camera" style="triangle;whiteSpace=wrap;html=1;direction=north;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="70" y="280" width="80" height="60" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="EjGk1gJt4pWiwggd2_OH-28" value="Laptop" style="whiteSpace=wrap;html=1;aspect=fixed;rounded=0;" vertex="1" parent="1">
|
<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" />
|
<mxGeometry x="590" y="430" width="80" height="80" as="geometry" />
|
||||||
</mxCell>
|
</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">
|
<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">
|
<mxGeometry x="30" y="400" width="140" height="90" as="geometry">
|
||||||
<mxRectangle x="30" y="400" width="60" height="30" as="alternateBounds" />
|
<mxRectangle x="30" y="400" width="60" height="30" as="alternateBounds" />
|
||||||
</mxGeometry>
|
</mxGeometry>
|
||||||
</mxCell>
|
</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">
|
<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">
|
<mxGeometry relative="1" as="geometry">
|
||||||
<mxPoint x="190" y="45" as="targetPoint" />
|
<mxPoint x="190" y="45" as="targetPoint" />
|
||||||
</mxGeometry>
|
</mxGeometry>
|
||||||
</mxCell>
|
</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">
|
<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" />
|
<mxGeometry y="30" width="140" height="30" as="geometry" />
|
||||||
</mxCell>
|
</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">
|
<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">
|
<mxGeometry relative="1" as="geometry">
|
||||||
<mxPoint x="190" y="75" as="targetPoint" />
|
<mxPoint x="190" y="75" as="targetPoint" />
|
||||||
</mxGeometry>
|
</mxGeometry>
|
||||||
</mxCell>
|
</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">
|
<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" />
|
<mxGeometry y="60" width="140" height="30" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
</root>
|
</root>
|
||||||
</mxGraphModel>
|
</mxGraphModel>
|
||||||
</diagram>
|
</diagram>
|
||||||
</mxfile>
|
</mxfile>
|
||||||
|
|||||||
@@ -1,37 +1,37 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>My First Sample Site</title>
|
<title>My First Sample Site</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Heading One</h1>
|
<h1>Heading One</h1>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=#>Contact Us</a></li>
|
<li><a href=#>Contact Us</a></li>
|
||||||
<li><a href=#>Call Us</a></li>
|
<li><a href=#>Call Us</a></li>
|
||||||
<li><a href=#>More Info</a></li>
|
<li><a href=#>More Info</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<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>
|
<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>
|
<b><i>This is a smaller paragraph!</i></b>
|
||||||
|
|
||||||
<h2>Heading Two</h2>
|
<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>
|
<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/brick.jpg" alt="A picture of bricks" height="150">
|
||||||
<img src="img/rust.jpg" alt="A picture of rust" 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">
|
<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>
|
<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>
|
<ol>
|
||||||
<li>First item</li>
|
<li>First item</li>
|
||||||
<li>Second item</li>
|
<li>Second item</li>
|
||||||
<li>Third item</li>
|
<li>Third item</li>
|
||||||
<li>Fouth item</li>
|
<li>Fouth item</li>
|
||||||
</ol>
|
</ol>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<hr>
|
<hr>
|
||||||
<p>© 2025 | IWD2-01 INFO-1252 Lab 1 Test Website | Made by Levi McLean</p>
|
<p>© 2025 | IWD2-01 INFO-1252 Lab 1 Test Website | Made by Levi McLean</p>
|
||||||
</footer>
|
</footer>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,22 +1,22 @@
|
|||||||
body {
|
body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #333;
|
background: #333;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, ol {
|
ul, ol {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: deepskyblue;
|
color: deepskyblue;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
@@ -1,33 +1,33 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta lang="en-CA">
|
<meta lang="en-CA">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<title>About Page - Travel Spot</title>
|
<title>About Page - Travel Spot</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<img src="/img/logo.jpg" alt="Company logo">
|
<img src="/img/logo.jpg" alt="Company logo">
|
||||||
<ul class="mainNav">
|
<ul class="mainNav">
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="about.html">About Us</a></li>
|
<li><a href="about.html">About Us</a></li>
|
||||||
<li><a href="contact.html">Contact Us</a></li>
|
<li><a href="contact.html">Contact Us</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<hr>
|
||||||
<h1>About the Travel Spot</h1>
|
<h1>About the Travel Spot</h1>
|
||||||
<img src="./img/paris.jpg" alt="The eiffel tower">
|
<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>
|
<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>
|
<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>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>
|
<p>Four Reasons to travel with us</p>
|
||||||
<ol>
|
<ol>
|
||||||
<li>customer service</li>
|
<li>customer service</li>
|
||||||
<li>prices</li>
|
<li>prices</li>
|
||||||
<li>variety</li>
|
<li>variety</li>
|
||||||
<li>experience</li>
|
<li>experience</li>
|
||||||
</ol>
|
</ol>
|
||||||
<hr>
|
<hr>
|
||||||
<p>Copyright © 2022. Travel Spot.</p>
|
<p>Copyright © 2022. Travel Spot.</p>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,59 +1,59 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta lang="en-CA">
|
<meta lang="en-CA">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<title>Contact Page - Travel Spot</title>
|
<title>Contact Page - Travel Spot</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<img src="/img/logo.jpg" alt="Company logo">
|
<img src="/img/logo.jpg" alt="Company logo">
|
||||||
<ul class="mainNav">
|
<ul class="mainNav">
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="about.html">About Us</a></li>
|
<li><a href="about.html">About Us</a></li>
|
||||||
<li><a href="contact.html">Contact Us</a></li>
|
<li><a href="contact.html">Contact Us</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<hr>
|
||||||
<h1>Contact the Travel Spot</h1>
|
<h1>Contact the Travel Spot</h1>
|
||||||
<p>152 King Street <br> London, Ontario N6R 4T5
|
<p>152 King Street <br> London, Ontario N6R 4T5
|
||||||
<br>
|
<br>
|
||||||
<b>tel: </b><a href="tel:5195559045">519 555-9045</a>
|
<b>tel: </b><a href="tel:5195559045">519 555-9045</a>
|
||||||
<br>
|
<br>
|
||||||
<b>email: </b><a href="mailto:info@travel.com">info@travel.com</a>
|
<b>email: </b><a href="mailto:info@travel.com">info@travel.com</a>
|
||||||
</p>
|
</p>
|
||||||
<h2>Special Prices</h2>
|
<h2>Special Prices</h2>
|
||||||
<table class="priceTable">
|
<table class="priceTable">
|
||||||
<caption style="caption-side: bottom; text-align: left;">
|
<caption style="caption-side: bottom; text-align: left;">
|
||||||
<br>
|
<br>
|
||||||
<b>Note: </b><p>Meals are not included.</p>
|
<b>Note: </b><p>Meals are not included.</p>
|
||||||
</caption>
|
</caption>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Destination</th>
|
<th>Destination</th>
|
||||||
<th>1 Week</th>
|
<th>1 Week</th>
|
||||||
<th>2 Weeks</th>
|
<th>2 Weeks</th>
|
||||||
<th>3 Weeks</th>
|
<th>3 Weeks</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Paris</th>
|
<th>Paris</th>
|
||||||
<td>$850</td>
|
<td>$850</td>
|
||||||
<td>$1,250</td>
|
<td>$1,250</td>
|
||||||
<td>$1,990</td>
|
<td>$1,990</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Italy</th>
|
<th>Italy</th>
|
||||||
<td>$750</td>
|
<td>$750</td>
|
||||||
<td>$1,000</td>
|
<td>$1,000</td>
|
||||||
<td>$1,500</td>
|
<td>$1,500</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Brazil</th>
|
<th>Brazil</th>
|
||||||
<td>$900</td>
|
<td>$900</td>
|
||||||
<td>$1,300</td>
|
<td>$1,300</td>
|
||||||
<td>$2,100</td>
|
<td>$2,100</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<hr>
|
<hr>
|
||||||
<p>Copyright © 2022. Travel Spot.</p>
|
<p>Copyright © 2022. Travel Spot.</p>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,25 +1,25 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta lang="en-CA">
|
<meta lang="en-CA">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<title>Home Page - Travel Spot</title>
|
<title>Home Page - Travel Spot</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<img src="/img/logo.jpg" alt="Company logo">
|
<img src="/img/logo.jpg" alt="Company logo">
|
||||||
<ul class="mainNav">
|
<ul class="mainNav">
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="about.html">About Us</a></li>
|
<li><a href="about.html">About Us</a></li>
|
||||||
<li><a href="contact.html">Contact Us</a></li>
|
<li><a href="contact.html">Contact Us</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<hr>
|
||||||
<h1>Welcome to the Travel Spot</h1>
|
<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>
|
<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">
|
<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>
|
<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>
|
<hr>
|
||||||
<p>Copyright © 2022. Travel Spot.</p>
|
<p>Copyright © 2022. Travel Spot.</p>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,29 +1,29 @@
|
|||||||
.mainNav {
|
.mainNav {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, ol {
|
ul, ol {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.priceTable {
|
.priceTable {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
caption p {
|
caption p {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,115 +1,115 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Registration - Travel Spot</title>
|
<title>Registration - Travel Spot</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta lang="EN">
|
<meta lang="EN">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<img src="img/logo.jpg" alt="Company logo">
|
<img src="img/logo.jpg" alt="Company logo">
|
||||||
<hr>
|
<hr>
|
||||||
<h1>Sign Up</h1>
|
<h1>Sign Up</h1>
|
||||||
<h2>Your next travel starts here!</h2>
|
<h2>Your next travel starts here!</h2>
|
||||||
<p>Fill in the form below:</p>
|
<p>Fill in the form below:</p>
|
||||||
|
|
||||||
<label for="regDate">Registration date:</label>
|
<label for="regDate">Registration date:</label>
|
||||||
<input type="datetime-local" id="regDate" name="regDate">
|
<input type="datetime-local" id="regDate" name="regDate">
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<!--Personal Information form-->
|
<!--Personal Information form-->
|
||||||
<form>
|
<form>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Personal Information</legend>
|
<legend>Personal Information</legend>
|
||||||
|
|
||||||
<label for="name">Name:</label>
|
<label for="name">Name:</label>
|
||||||
<input type="text" id="name" name="name"><br>
|
<input type="text" id="name" name="name"><br>
|
||||||
<label for="email">Email:</label>
|
<label for="email">Email:</label>
|
||||||
<input type="email" id="email" name="email"><br>
|
<input type="email" id="email" name="email"><br>
|
||||||
<label for="telephone">Phone:</label>
|
<label for="telephone">Phone:</label>
|
||||||
<input type="tel" id="telephone" name="telephone"><br>
|
<input type="tel" id="telephone" name="telephone"><br>
|
||||||
<label for="passport" name="passport">Passport:</label>
|
<label for="passport" name="passport">Passport:</label>
|
||||||
<input type="file" id="passport" name="passport"><br>
|
<input type="file" id="passport" name="passport"><br>
|
||||||
<label for="stress">What is your stress level?</label>
|
<label for="stress">What is your stress level?</label>
|
||||||
<input type="range" id="stress" name="stress">
|
<input type="range" id="stress" name="stress">
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form><br>
|
</form><br>
|
||||||
|
|
||||||
<!--Travel Destination form-->
|
<!--Travel Destination form-->
|
||||||
<form>
|
<form>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Travel Destination</legend>
|
<legend>Travel Destination</legend>
|
||||||
<p>Tell us where you want to go:</p>
|
<p>Tell us where you want to go:</p>
|
||||||
<label for="pplTravelling">How many people will be travelling?</label>
|
<label for="pplTravelling">How many people will be travelling?</label>
|
||||||
<input type="text" id="pplTravelling" name="pplTravelling"><br>
|
<input type="text" id="pplTravelling" name="pplTravelling"><br>
|
||||||
<label for="period">Preferred Travel Period:</label>
|
<label for="period">Preferred Travel Period:</label>
|
||||||
<select id="period" name="period" required>
|
<select id="period" name="period" required>
|
||||||
<option value="select">-Select-</option>
|
<option value="select">-Select-</option>
|
||||||
<option value="summer">Summer</option>
|
<option value="summer">Summer</option>
|
||||||
<option value="winter">Winter</option>
|
<option value="winter">Winter</option>
|
||||||
</select><br>
|
</select><br>
|
||||||
<label for="destination">Destination:</label>
|
<label for="destination">Destination:</label>
|
||||||
<input type="text" id="destination" name="destination"><br>
|
<input type="text" id="destination" name="destination"><br>
|
||||||
<label for="departDate">Date of Departure:</label>
|
<label for="departDate">Date of Departure:</label>
|
||||||
<input type="date" id="departDate" name="departDate"><br>
|
<input type="date" id="departDate" name="departDate"><br>
|
||||||
<label for="returnDate">Date of Return:</label>
|
<label for="returnDate">Date of Return:</label>
|
||||||
<input type="date" id="returnDate" name="returnDate"><br>
|
<input type="date" id="returnDate" name="returnDate"><br>
|
||||||
<label for="includeFlight">Include Flight</label>
|
<label for="includeFlight">Include Flight</label>
|
||||||
<input type="checkbox" id="includeFlight" name="includeFlight"><br>
|
<input type="checkbox" id="includeFlight" name="includeFlight"><br>
|
||||||
<label for="includeHotel">Include Hotel</label>
|
<label for="includeHotel">Include Hotel</label>
|
||||||
<input type="checkbox" id="includeHotel" name="includeHotel"><br>
|
<input type="checkbox" id="includeHotel" name="includeHotel"><br>
|
||||||
<label for="includeMeals">Include Meals</label>
|
<label for="includeMeals">Include Meals</label>
|
||||||
<input type="checkbox" id="includeMeals" name="includeMeals"><br>
|
<input type="checkbox" id="includeMeals" name="includeMeals"><br>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form><br>
|
</form><br>
|
||||||
|
|
||||||
<!--Travel Experience field-->
|
<!--Travel Experience field-->
|
||||||
<form>
|
<form>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Travel Experience</legend>
|
<legend>Travel Experience</legend>
|
||||||
<p>Tell us about your last travel experience (leave this section empty if you have never travelled before):</p>
|
<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>
|
<label for="lastDest">Last Destination:</label>
|
||||||
<input type="text" id="lastDest" name="lastDest"><br>
|
<input type="text" id="lastDest" name="lastDest"><br>
|
||||||
|
|
||||||
<!--First radio button group-->
|
<!--First radio button group-->
|
||||||
<label>How do you rate the flight?</label>
|
<label>How do you rate the flight?</label>
|
||||||
<input type="radio" id="fightRateGood" name="flightRateGood" value="Good">
|
<input type="radio" id="fightRateGood" name="flightRateGood" value="Good">
|
||||||
<label for="flightRateGood">Good</label>
|
<label for="flightRateGood">Good</label>
|
||||||
<input type="radio" id="fightRateNorm" name="flightRateNorm" value="Normal">
|
<input type="radio" id="fightRateNorm" name="flightRateNorm" value="Normal">
|
||||||
<label for="flightRateNorm">Normal</label>
|
<label for="flightRateNorm">Normal</label>
|
||||||
<input type="radio" id="fightRateBad" name="flightRateBad" value="Bad">
|
<input type="radio" id="fightRateBad" name="flightRateBad" value="Bad">
|
||||||
<label for="flightRateBad">Bad</label><br>
|
<label for="flightRateBad">Bad</label><br>
|
||||||
|
|
||||||
<!--Second radio button group-->
|
<!--Second radio button group-->
|
||||||
<label>How do you rate the hotel?</label>
|
<label>How do you rate the hotel?</label>
|
||||||
<input type="radio" id="hotelRateGood" name="hotelRateGood" value="Good">
|
<input type="radio" id="hotelRateGood" name="hotelRateGood" value="Good">
|
||||||
<label for="hotelRateGood">Good</label>
|
<label for="hotelRateGood">Good</label>
|
||||||
<input type="radio" id="hotelRateNorm" name="hotelRateNorm" value="Normal">
|
<input type="radio" id="hotelRateNorm" name="hotelRateNorm" value="Normal">
|
||||||
<label for="hotelRateNorm">Normal</label>
|
<label for="hotelRateNorm">Normal</label>
|
||||||
<input type="radio" id="hotelRateBad" name="hotelRateBad" value="Bad">
|
<input type="radio" id="hotelRateBad" name="hotelRateBad" value="Bad">
|
||||||
<label for="hotelRateBad">Bad</label><br>
|
<label for="hotelRateBad">Bad</label><br>
|
||||||
|
|
||||||
<!--Third radio button group-->
|
<!--Third radio button group-->
|
||||||
<label>How do you rate the meal?</label>
|
<label>How do you rate the meal?</label>
|
||||||
<input type="radio" id="mealRateGood" name="mealRateGood" value="Good">
|
<input type="radio" id="mealRateGood" name="mealRateGood" value="Good">
|
||||||
<label for="mealRateGood">Good</label>
|
<label for="mealRateGood">Good</label>
|
||||||
<input type="radio" id="mealRateNorm" name="mealRateNorm" value="Normal">
|
<input type="radio" id="mealRateNorm" name="mealRateNorm" value="Normal">
|
||||||
<label for="mealRateNorm">Normal</label>
|
<label for="mealRateNorm">Normal</label>
|
||||||
<input type="radio" id="fightRateBad" name="mealRateBad" value="Bad">
|
<input type="radio" id="fightRateBad" name="mealRateBad" value="Bad">
|
||||||
<label for="mealRateBad">Bad</label><br>
|
<label for="mealRateBad">Bad</label><br>
|
||||||
|
|
||||||
<label for="experienceText">Describe your experience:</label><br>
|
<label for="experienceText">Describe your experience:</label><br>
|
||||||
<textarea id="experienceText" name="experienceText" cols="40" rows="5"></textarea>
|
<textarea id="experienceText" name="experienceText" cols="40" rows="5"></textarea>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form><br>
|
</form><br>
|
||||||
|
|
||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
<button type="reset">Reset</button>
|
<button type="reset">Reset</button>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<hr>
|
<hr>
|
||||||
<p>Copyright © 2025. Travel Spot.</p>
|
<p>Copyright © 2025. Travel Spot.</p>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,85 +1,85 @@
|
|||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
background-color: #f9fafc;
|
background-color: #f9fafc;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto 10px auto;
|
margin: 0 auto 10px auto;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #2a6ebb;
|
color: #2a6ebb;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #555;
|
color: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #2a6ebb;
|
color: #2a6ebb;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, select, textarea {
|
input, select, textarea {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background-color: #2a6ebb;
|
background-color: #2a6ebb;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #1d4f88;
|
background-color: #1d4f88;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
color: #777;
|
color: #777;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 880px) {
|
@media (max-width: 880px) {
|
||||||
input[type="radio"] + label {
|
input[type="radio"] + label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
width: auto;
|
width: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,111 +1,111 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
|
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
|
||||||
<link rel="stylesheet" href="./styles/styles.css">
|
<link rel="stylesheet" href="./styles/styles.css">
|
||||||
<title>Sandy's Cooking Blog</title>
|
<title>Sandy's Cooking Blog</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header>
|
<header>
|
||||||
<img class="logo" src="images/smileyface.png" alt="smily face" />
|
<img class="logo" src="images/smileyface.png" alt="smily face" />
|
||||||
<h1 class="main-heading">Sandy's Cooking Blog</h1>
|
<h1 class="main-heading">Sandy's Cooking Blog</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Menu-->
|
<!-- Main Menu-->
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Home</a></li>
|
<li><a href="#">Home</a></li>
|
||||||
<li><a href="#">Categories</a></li>
|
<li><a href="#">Categories</a></li>
|
||||||
<li><a href="#">About Sandy</a></li>
|
<li><a href="#">About Sandy</a></li>
|
||||||
<li><a href="#">Recipe Index</a></li>
|
<li><a href="#">Recipe Index</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Main Page-->
|
<!-- Main Page-->
|
||||||
<main>
|
<main>
|
||||||
<!-- Recipes -->
|
<!-- Recipes -->
|
||||||
<section>
|
<section>
|
||||||
<div class="recipe-card">
|
<div class="recipe-card">
|
||||||
<h2>Dinner Party Ideas</h2>
|
<h2>Dinner Party Ideas</h2>
|
||||||
<div class="author">By: <strong>John</strong></div>
|
<div class="author">By: <strong>John</strong></div>
|
||||||
<div class="publish-date">Jan 11, 2022</div>
|
<div class="publish-date">Jan 11, 2022</div>
|
||||||
<img src="images/dinnerparty.jpg" alt="Dinner party food" />
|
<img src="images/dinnerparty.jpg" alt="Dinner party food" />
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
||||||
mollis, nulla non elementum tincidunt, felis ligula sodales lectus,
|
mollis, nulla non elementum tincidunt, felis ligula sodales lectus,
|
||||||
sit amet dignissim quam massa sit amet lorem. Aenean lorem risus,
|
sit amet dignissim quam massa sit amet lorem. Aenean lorem risus,
|
||||||
tempus nec, gravida eu.
|
tempus nec, gravida eu.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="recipe-card">
|
<div class="recipe-card">
|
||||||
<h2>Weeknight Meals</h2>
|
<h2>Weeknight Meals</h2>
|
||||||
<div class="author">By: <strong>Mary</strong></div>
|
<div class="author">By: <strong>Mary</strong></div>
|
||||||
<div class="publish-date">Jan 07, 2022</div>
|
<div class="publish-date">Jan 07, 2022</div>
|
||||||
<img src="images/dinner.jpg" alt="Nice dinner" />
|
<img src="images/dinner.jpg" alt="Nice dinner" />
|
||||||
<p>
|
<p>
|
||||||
Donec cursus faucibus turpis. Quisque auctor est at magna. In
|
Donec cursus faucibus turpis. Quisque auctor est at magna. In
|
||||||
sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus
|
sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus
|
||||||
elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer
|
elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer
|
||||||
non, leo. Phasellus suscipit felis non est.
|
non, leo. Phasellus suscipit felis non est.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="recipe-card">
|
<div class="recipe-card">
|
||||||
<h2>Superbowl Snacks</h2>
|
<h2>Superbowl Snacks</h2>
|
||||||
<div class="author">By: <strong>Sandy</strong></div>
|
<div class="author">By: <strong>Sandy</strong></div>
|
||||||
<div class="publish-date">Jan 06, 2022</div>
|
<div class="publish-date">Jan 06, 2022</div>
|
||||||
<img src="images/nachos.jpg" alt="Plate of nachos" />
|
<img src="images/nachos.jpg" alt="Plate of nachos" />
|
||||||
<p>
|
<p>
|
||||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||||
fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet
|
fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet
|
||||||
adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus
|
adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus
|
||||||
quis libero. Vivamus quam.
|
quis libero. Vivamus quam.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- About -->
|
<!-- About -->
|
||||||
<section class="about-sandy">
|
<section class="about-sandy">
|
||||||
<h2>About Sandy</h2>
|
<h2>About Sandy</h2>
|
||||||
|
|
||||||
<img src="images/smileyface.png" class="logo" alt="smiley face" />
|
<img src="images/smileyface.png" class="logo" alt="smiley face" />
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
|
||||||
gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus.
|
gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus.
|
||||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||||
fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent
|
fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent
|
||||||
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
|
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
|
||||||
himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas
|
himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas
|
||||||
elementum, augue at vulputate ornare, ipsum enim lacinia orci, id
|
elementum, augue at vulputate ornare, ipsum enim lacinia orci, id
|
||||||
elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac
|
elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac
|
||||||
habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis
|
habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis
|
||||||
condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus
|
condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus
|
||||||
nec efficitur sagittis. Aliquam sed nunc ligula.
|
nec efficitur sagittis. Aliquam sed nunc ligula.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed
|
Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed
|
||||||
interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit
|
interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit
|
||||||
amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet
|
amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet
|
||||||
sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla.
|
sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla.
|
||||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||||
fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est.
|
fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est.
|
||||||
Maecenas quis hendrerit dui, tincidunt maximus velit.
|
Maecenas quis hendrerit dui, tincidunt maximus velit.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer>
|
<footer>
|
||||||
Copyright <strong>©</strong> 2025. Developed by
|
Copyright <strong>©</strong> 2025. Developed by
|
||||||
<strong>Levi McLean</strong>.
|
<strong>Levi McLean</strong>.
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,126 +1,126 @@
|
|||||||
/* Beginner elements */
|
/* Beginner elements */
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: url(../images/squares_bg.png);
|
background: url(../images/squares_bg.png);
|
||||||
font-family: Helvetica, sans-serif;
|
font-family: Helvetica, sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header and logo */
|
/* Header and logo */
|
||||||
.logo {
|
.logo {
|
||||||
opacity: 30%;
|
opacity: 30%;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 2rem auto;
|
margin: 2rem auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2 {
|
h2 {
|
||||||
font-family: "Dancing Script", cursive;
|
font-family: "Dancing Script", cursive;
|
||||||
color: teal;
|
color: teal;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
text-shadow: 2px 2px 4px grey;
|
text-shadow: 2px 2px 4px grey;
|
||||||
margin-left: 1.2rem;
|
margin-left: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-heading {
|
.main-heading {
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navbar styling */
|
/* Navbar styling */
|
||||||
nav {
|
nav {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-top: 5px solid teal;
|
border-top: 5px solid teal;
|
||||||
border-bottom: 5px solid teal;
|
border-bottom: 5px solid teal;
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
a {
|
a {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 1.5rem 0;
|
margin: 1.5rem 0;
|
||||||
color: grey;
|
color: grey;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: Helvetica, sans-serif;
|
font-family: Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Recipe card styling */
|
/* Recipe card styling */
|
||||||
.recipe-card {
|
.recipe-card {
|
||||||
margin: 2rem 1rem;
|
margin: 2rem 1rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
border: 2px solid grey;
|
border: 2px solid grey;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-shadow: 2px 2px 4px grey;
|
box-shadow: 2px 2px 4px grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-card img {
|
.recipe-card img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 1.5rem auto;
|
margin: 1.5rem auto;
|
||||||
border-radius: 60%;
|
border-radius: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-card p {
|
.recipe-card p {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
color: grey;
|
color: grey;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: Helvetica, sans-serif;
|
font-family: Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author {
|
.author {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
color: grey;
|
color: grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
.publish-date {
|
.publish-date {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
color: rgba(75, 75, 75, 0.507);
|
color: rgba(75, 75, 75, 0.507);
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* About section styling */
|
/* About section styling */
|
||||||
.about-sandy {
|
.about-sandy {
|
||||||
background-color: grey;
|
background-color: grey;
|
||||||
background-image: url(../images/squares_bg.png);
|
background-image: url(../images/squares_bg.png);
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-sandy p {
|
.about-sandy p {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 1.6rem;
|
line-height: 1.6rem;
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
color: lightgrey;
|
color: lightgrey;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-sandy h2 {
|
.about-sandy h2 {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
text-shadow: 2px 2px 4px black;
|
text-shadow: 2px 2px 4px black;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer styling */
|
/* Footer styling */
|
||||||
footer {
|
footer {
|
||||||
background: teal;
|
background: teal;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: lightgrey;
|
color: lightgrey;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
footer strong {
|
footer strong {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
@@ -1,111 +1,111 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Sandy's Cooking Blog</title>
|
<title>Sandy's Cooking Blog</title>
|
||||||
<link rel="stylesheet" href="styles/main.css" />
|
<link rel="stylesheet" href="styles/main.css" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Roboto:wght@100;400;500;700&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Roboto:wght@100;400;500;700&display=swap"
|
||||||
rel="stylesheet" />
|
rel="stylesheet" />
|
||||||
<link rel="stylesheet" href="main.css" />
|
<link rel="stylesheet" href="main.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<img class="header-logo" src="images/smileyface.png" />
|
<img class="header-logo" src="images/smileyface.png" />
|
||||||
<h1 class="header-title">Sandy's Cooking Blog</h1>
|
<h1 class="header-title">Sandy's Cooking Blog</h1>
|
||||||
|
|
||||||
<nav class="header-nav">
|
<nav class="header-nav">
|
||||||
<ul class="header-nav-list">
|
<ul class="header-nav-list">
|
||||||
<li class="header-nav-list-item"><a href="#">Home</a></li>
|
<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="#">Categories</a></li>
|
||||||
<li class="header-nav-list-item"><a href="#">About Sandy</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>
|
<li class="header-nav-list-item"><a href="#">Recipe Index</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Page-->
|
<!-- Main Page-->
|
||||||
<main>
|
<main>
|
||||||
<!-- Recipes -->
|
<!-- Recipes -->
|
||||||
<section class="recipes">
|
<section class="recipes">
|
||||||
<article class="recipe">
|
<article class="recipe">
|
||||||
<h2 class="recipe-title">Dinner Party Ideas</h2>
|
<h2 class="recipe-title">Dinner Party Ideas</h2>
|
||||||
<div class="recipe-by">By: <strong>John</strong></div>
|
<div class="recipe-by">By: <strong>John</strong></div>
|
||||||
<div class="recipe-date">Jan 11, 2022</div>
|
<div class="recipe-date">Jan 11, 2022</div>
|
||||||
<img class="recipe-image" src="images/dinnerparty.jpg" alt="dinner party food" />
|
<img class="recipe-image" src="images/dinnerparty.jpg" alt="dinner party food" />
|
||||||
<p class="recipe-desc">
|
<p class="recipe-desc">
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
||||||
mollis, nulla non elementum tincidunt, felis ligula sodales lectus,
|
mollis, nulla non elementum tincidunt, felis ligula sodales lectus,
|
||||||
sit amet dignissim quam massa sit amet lorem. Aenean lorem risus,
|
sit amet dignissim quam massa sit amet lorem. Aenean lorem risus,
|
||||||
tempus nec, gravida eu.
|
tempus nec, gravida eu.
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="recipe">
|
<article class="recipe">
|
||||||
<h2 class="recipe-title">Weeknight Meals</h2>
|
<h2 class="recipe-title">Weeknight Meals</h2>
|
||||||
<div class="recipe-by">By: <strong>Mary</strong></div>
|
<div class="recipe-by">By: <strong>Mary</strong></div>
|
||||||
<div class="recipe-date">Jan 07, 2022</div>
|
<div class="recipe-date">Jan 07, 2022</div>
|
||||||
<img class="recipe-image" src="images/dinner.jpg" alt="nice dinner" />
|
<img class="recipe-image" src="images/dinner.jpg" alt="nice dinner" />
|
||||||
<p class="recipe-desc">
|
<p class="recipe-desc">
|
||||||
Donec cursus faucibus turpis. Quisque auctor est at magna. In
|
Donec cursus faucibus turpis. Quisque auctor est at magna. In
|
||||||
sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus
|
sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus
|
||||||
elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer
|
elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer
|
||||||
non, leo. Phasellus suscipit felis non est.
|
non, leo. Phasellus suscipit felis non est.
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="recipe">
|
<article class="recipe">
|
||||||
<h2 class="recipe-title">Superbowl Snacks</h2>
|
<h2 class="recipe-title">Superbowl Snacks</h2>
|
||||||
<div class="recipe-by">By: <strong>Sandy</strong></div>
|
<div class="recipe-by">By: <strong>Sandy</strong></div>
|
||||||
<div class="recipe-date">Jan 06, 2022</div>
|
<div class="recipe-date">Jan 06, 2022</div>
|
||||||
<img class="recipe-image" src="images/nachos.jpg" alt="plate of nachos" />
|
<img class="recipe-image" src="images/nachos.jpg" alt="plate of nachos" />
|
||||||
<p class="recipe-desc">
|
<p class="recipe-desc">
|
||||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||||
fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet
|
fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet
|
||||||
adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus
|
adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus
|
||||||
quis libero. Vivamus quam.
|
quis libero. Vivamus quam.
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- About -->
|
<!-- About -->
|
||||||
<section class="about">
|
<section class="about">
|
||||||
<h2 class="about-title">About Sandy</h2>
|
<h2 class="about-title">About Sandy</h2>
|
||||||
<img class="about-logo" src="images/smileyface.png" />
|
<img class="about-logo" src="images/smileyface.png" />
|
||||||
<p class="about-text">
|
<p class="about-text">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
|
||||||
gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus.
|
gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus.
|
||||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||||
fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent
|
fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent
|
||||||
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
|
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
|
||||||
himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas
|
himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas
|
||||||
elementum, augue at vulputate ornare, ipsum enim lacinia orci, id
|
elementum, augue at vulputate ornare, ipsum enim lacinia orci, id
|
||||||
elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac
|
elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac
|
||||||
habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis
|
habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis
|
||||||
condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus
|
condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus
|
||||||
nec efficitur sagittis. Aliquam sed nunc ligula.
|
nec efficitur sagittis. Aliquam sed nunc ligula.
|
||||||
</p>
|
</p>
|
||||||
<p class="about-text">
|
<p class="about-text">
|
||||||
Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed
|
Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed
|
||||||
interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit
|
interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit
|
||||||
amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet
|
amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet
|
||||||
sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla.
|
sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla.
|
||||||
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
Pellentesque habitant morbi tristique senectus et netus et malesuada
|
||||||
fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est.
|
fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est.
|
||||||
Maecenas quis hendrerit dui, tincidunt maximus velit.
|
Maecenas quis hendrerit dui, tincidunt maximus velit.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<p>Copyright <strong>©</strong> 2025.</p>
|
<p>Copyright <strong>©</strong> 2025.</p>
|
||||||
<p>Developed by <strong class="footer-name">Levi McLean</strong>.</p>
|
<p>Developed by <strong class="footer-name">Levi McLean</strong>.</p>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,303 +1,303 @@
|
|||||||
/* global settings */
|
/* global settings */
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 62.5%;
|
font-size: 62.5%;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Roboto", sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
background: url(../images/squares_bg.png);
|
background: url(../images/squares_bg.png);
|
||||||
color: #686868;
|
color: #686868;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
.header-logo {
|
.header-logo {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 2rem auto;
|
margin: 2rem auto;
|
||||||
opacity: 30%;
|
opacity: 30%;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-title {
|
.header-title {
|
||||||
font-family: "Dancing script";
|
font-family: "Dancing script";
|
||||||
font-size: 4.2rem;
|
font-size: 4.2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: teal;
|
color: teal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav {
|
.header-nav {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-top: 5px solid teal;
|
border-top: 5px solid teal;
|
||||||
border-bottom: 5px solid teal;
|
border-bottom: 5px solid teal;
|
||||||
padding: 0.4rem 0;
|
padding: 0.4rem 0;
|
||||||
margin-top: 2.4rem;
|
margin-top: 2.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav-list-item {
|
.header-nav-list-item {
|
||||||
margin: 0.8rem 0;
|
margin: 0.8rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav-list-item a:link,
|
.header-nav-list-item a:link,
|
||||||
.header-nav-list-item a:visited {
|
.header-nav-list-item a:visited {
|
||||||
font-size: 2.4rem;
|
font-size: 2.4rem;
|
||||||
color: #686868;
|
color: #686868;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav-list-item a:hover,
|
.header-nav-list-item a:hover,
|
||||||
.header-nav-list-item a:active {
|
.header-nav-list-item a:active {
|
||||||
color: teal;
|
color: teal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main */
|
/* Main */
|
||||||
.recipes {
|
.recipes {
|
||||||
margin-top: 2.4rem;
|
margin-top: 2.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe {
|
.recipe {
|
||||||
margin: 2rem 1rem;
|
margin: 2rem 1rem;
|
||||||
border: 1px solid grey;
|
border: 1px solid grey;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 2.4rem 1.2rem;
|
padding: 2.4rem 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe:hover {
|
.recipe:hover {
|
||||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
|
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
|
||||||
transform: translateY(-10px);
|
transform: translateY(-10px);
|
||||||
/* we will learn this later. Don't worry about this line*/
|
/* we will learn this later. Don't worry about this line*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-title {
|
.recipe-title {
|
||||||
font-family: "Dancing script";
|
font-family: "Dancing script";
|
||||||
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
|
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
|
||||||
font-size: 3.6rem;
|
font-size: 3.6rem;
|
||||||
color: teal;
|
color: teal;
|
||||||
margin-bottom: 2.4rem;
|
margin-bottom: 2.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-by,
|
.recipe-by,
|
||||||
.recipe-by strong,
|
.recipe-by strong,
|
||||||
.recipe-date {
|
.recipe-date {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-image {
|
.recipe-image {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 1rem auto;
|
margin: 1rem auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-desc {
|
.recipe-desc {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
margin-top: 2.4rem;
|
margin-top: 2.4rem;
|
||||||
padding: 0 1.2rem;
|
padding: 0 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* About */
|
/* About */
|
||||||
.about {
|
.about {
|
||||||
padding: 2.4rem;
|
padding: 2.4rem;
|
||||||
background-color: rgb(82, 82, 82);
|
background-color: rgb(82, 82, 82);
|
||||||
opacity: 70%;
|
opacity: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-title {
|
.about-title {
|
||||||
font-family: "Dancing script";
|
font-family: "Dancing script";
|
||||||
font-size: 4.8rem;
|
font-size: 4.8rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75);
|
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-text {
|
.about-text {
|
||||||
/* use white colour + opacity or grey font color to achieve this result*/
|
/* use white colour + opacity or grey font color to achieve this result*/
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
text-shadow: 1px 1px 0 black;
|
text-shadow: 1px 1px 0 black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-logo {
|
.about-logo {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
.footer {
|
.footer {
|
||||||
background-color: teal;
|
background-color: teal;
|
||||||
color: rgb(207, 207, 207);
|
color: rgb(207, 207, 207);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 3.6rem 0;
|
padding: 3.6rem 0;
|
||||||
font-size: 2.4rem;
|
font-size: 2.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-name {
|
.footer-name {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 2.4rem;
|
font-size: 2.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 820px) {
|
@media only screen and (min-width: 820px) {
|
||||||
/* Header */
|
/* Header */
|
||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-logo {
|
.header-logo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 5%;
|
left: 5%;
|
||||||
top: 33%;
|
top: 33%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
width: 25%;
|
width: 25%;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-title {
|
.header-title {
|
||||||
font-size: 6rem;
|
font-size: 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav {
|
.header-nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav-list {
|
.header-nav-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4rem;
|
gap: 4rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Recipe cards */
|
/* Recipe cards */
|
||||||
.recipe {
|
.recipe {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-image {
|
.recipe-image {
|
||||||
display: block;
|
display: block;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-title {
|
.recipe-title {
|
||||||
font-size: 4.8rem;
|
font-size: 4.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-desc {
|
.recipe-desc {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 65%;
|
width: 65%;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* About Sandy */
|
/* About Sandy */
|
||||||
.about-logo {
|
.about-logo {
|
||||||
display: inline;
|
display: inline;
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
margin-right: 4rem;
|
margin-right: 4rem;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-text {
|
.about-text {
|
||||||
display: inline;
|
display: inline;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer needs no changes */
|
/* Footer needs no changes */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 1200px) {
|
@media only screen and (min-width: 1200px) {
|
||||||
/* Header */
|
/* Header */
|
||||||
.header-logo {
|
.header-logo {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Recipe cards */
|
/* Recipe cards */
|
||||||
.recipes {
|
.recipes {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-image {
|
.recipe-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-title {
|
.recipe-title {
|
||||||
font-size: 8rem;
|
font-size: 8rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-by {
|
.recipe-by {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-date {
|
.recipe-date {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
.recipe-desc {
|
.recipe-desc {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* About Sandy */
|
/* About Sandy */
|
||||||
.about-title {
|
.about-title {
|
||||||
font-size: 8rem;
|
font-size: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-logo {
|
.about-logo {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-text {
|
.about-text {
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
.footer {
|
.footer {
|
||||||
margin-top: 0.2rem;
|
margin-top: 0.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 3.6rem 2rem;
|
padding: 3.6rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer p {
|
.footer p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-name {
|
.footer-name {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,186 +1,186 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" lang="en">
|
<meta charset="utf-8" lang="en">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Lab 6</title>
|
<title>Lab 6</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Lab 6</h1>
|
<h1>Lab 6</h1>
|
||||||
<h2>Bootstrap Components</h2><br>
|
<h2>Bootstrap Components</h2><br>
|
||||||
<div class="container text-center">
|
<div class="container text-center">
|
||||||
<div class="row align-items-start">
|
<div class="row align-items-start">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<strong>Accordian</strong>
|
<strong>Accordian</strong>
|
||||||
<div class="accordion" id="accordionExample">
|
<div class="accordion" id="accordionExample">
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header">
|
<h2 class="accordion-header">
|
||||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||||
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||||
Accordion Item #1
|
Accordion Item #1
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
<div id="collapseOne" class="accordion-collapse collapse show"
|
<div id="collapseOne" class="accordion-collapse collapse show"
|
||||||
data-bs-parent="#accordionExample">
|
data-bs-parent="#accordionExample">
|
||||||
<div class="accordion-body">
|
<div class="accordion-body">
|
||||||
<strong>This is the first item’s accordion body.</strong> The base elements of the
|
<strong>This is the first item’s accordion body.</strong> The base elements of the
|
||||||
accordian
|
accordian
|
||||||
was
|
was
|
||||||
taken from the Bootstrap documentation.
|
taken from the Bootstrap documentation.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header">
|
<h2 class="accordion-header">
|
||||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||||
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||||
Accordion Item #2
|
Accordion Item #2
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
<div class="accordion-body">
|
<div class="accordion-body">
|
||||||
<strong>This is the second item’s accordion body.</strong> I only changed the interior
|
<strong>This is the second item’s accordion body.</strong> I only changed the interior
|
||||||
content
|
content
|
||||||
of
|
of
|
||||||
the accordian, although content isn't all that imporant.
|
the accordian, although content isn't all that imporant.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header">
|
<h2 class="accordion-header">
|
||||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||||
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||||
Accordion Item #3
|
Accordion Item #3
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
<div class="accordion-body">
|
<div class="accordion-body">
|
||||||
<strong>This is the third item’s accordion body.</strong> It just saves a lot of time
|
<strong>This is the third item’s accordion body.</strong> It just saves a lot of time
|
||||||
instead of
|
instead of
|
||||||
writing out the code by hand to take the documentation examples.
|
writing out the code by hand to take the documentation examples.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><br>
|
</div><br>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<strong>Modal (Personal favourite)</strong><br>
|
<strong>Modal (Personal favourite)</strong><br>
|
||||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||||
Launch demo modal
|
Launch demo modal
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||||||
aria-hidden="true">
|
aria-hidden="true">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal Demo</h1>
|
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal Demo</h1>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||||
aria-label="Close"></button>
|
aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
Modal outline was also taken from the bootsrap documentation
|
Modal outline was also taken from the bootsrap documentation
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||||
<button type="button" class="btn btn-primary">Save changes</button>
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><br><br>
|
</div><br><br>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<strong>Card</strong>
|
<strong>Card</strong>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<img src="./synthwave.webp" class="card-img-top" alt="...">
|
<img src="./synthwave.webp" class="card-img-top" alt="...">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">Card Demo</h5>
|
<h5 class="card-title">Card Demo</h5>
|
||||||
<p class="card-text">Just a simple card with the default image placeholder</p>
|
<p class="card-text">Just a simple card with the default image placeholder</p>
|
||||||
<a href="#" class="btn btn-primary">Do Something</a>
|
<a href="#" class="btn btn-primary">Do Something</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Container Example</h2>
|
<h2>Container Example</h2>
|
||||||
<div class="container text-center">
|
<div class="container text-center">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Movie
|
Movie
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Genre
|
Genre
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Director
|
Director
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Kill Bill
|
Kill Bill
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Action
|
Action
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Quentin Tarantino
|
Quentin Tarantino
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
The Room
|
The Room
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Romance
|
Romance
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Tommy Wiseau
|
Tommy Wiseau
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Star Wars
|
Star Wars
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Action
|
Action
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
George Lucas
|
George Lucas
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Form Demo</h2>
|
<h2>Form Demo</h2>
|
||||||
<form>
|
<form>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="emailInput" class="form-label">Email Address</label>
|
<label for="emailInput" class="form-label">Email Address</label>
|
||||||
<input type="email" class="form-control" id="emailInput">
|
<input type="email" class="form-control" id="emailInput">
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="genderSelect" class="form-label">Gender</label>
|
<label for="genderSelect" class="form-label">Gender</label>
|
||||||
<select class="form-select" aria-label="Gender Selection">
|
<select class="form-select" aria-label="Gender Selection">
|
||||||
<option selected>Open this select menu</option>
|
<option selected>Open this select menu</option>
|
||||||
<option value="Male">Male</option>
|
<option value="Male">Male</option>
|
||||||
<option value="Female">Female</option>
|
<option value="Female">Female</option>
|
||||||
<option value="Other">Other</option>
|
<option value="Other">Other</option>
|
||||||
<option value="NotSay">Prefer not to say</option>
|
<option value="NotSay">Prefer not to say</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="ageSelect" class="form-label">Age</label>
|
<label for="ageSelect" class="form-label">Age</label>
|
||||||
<input type="range" class="form-range" min="1" max="99" id="ageSelect">
|
<input type="range" class="form-range" min="1" max="99" id="ageSelect">
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-primary btn-lg">Submit</button>
|
<button type="button" class="btn btn-primary btn-lg">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
|
||||||
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
|
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,24 +1,24 @@
|
|||||||
body {
|
body {
|
||||||
background-color: crimson;
|
background-color: crimson;
|
||||||
font-family: "Inter", sans-serif;
|
font-family: "Inter", sans-serif;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2 {
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -1,58 +1,58 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head lang="en">
|
<head lang="en">
|
||||||
<title>Pet Showcase - Contact</title>
|
<title>Pet Showcase - Contact</title>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>Contact Page</h1>
|
<h1>Contact Page</h1>
|
||||||
<small>Contact the owner of the page with questions or concerns below</small>
|
<small>Contact the owner of the page with questions or concerns below</small>
|
||||||
|
|
||||||
<!-- Nav that matches one from homepage-->
|
<!-- Nav that matches one from homepage-->
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="index.html">Home</a>
|
<a href="index.html">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="contact.html">Contact</a>
|
<a href="contact.html">Contact</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<strong>Contact requests will be answered within ∞ business days</strong>
|
<strong>Contact requests will be answered within ∞ business days</strong>
|
||||||
|
|
||||||
<!-- Form with 5 inputs and 2 buttons (assuming textarea counts as input)-->
|
<!-- Form with 5 inputs and 2 buttons (assuming textarea counts as input)-->
|
||||||
<form>
|
<form>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Enter personal Information Below</legend>
|
<legend>Enter personal Information Below</legend>
|
||||||
<label for="firstName">First Name:</label><br>
|
<label for="firstName">First Name:</label><br>
|
||||||
<input type="text" name="firstName"><br>
|
<input type="text" name="firstName"><br>
|
||||||
<label for="lastName">Last Name:</label><br>
|
<label for="lastName">Last Name:</label><br>
|
||||||
<input type="text" name="lastName"><br>
|
<input type="text" name="lastName"><br>
|
||||||
<label for="email">Email:</label><br>
|
<label for="email">Email:</label><br>
|
||||||
<input type="email" name="email"><br>
|
<input type="email" name="email"><br>
|
||||||
<label for="phone">Phone:</label><br>
|
<label for="phone">Phone:</label><br>
|
||||||
<input type="tel" name="phone"><br>
|
<input type="tel" name="phone"><br>
|
||||||
<label for="message">Message:</label><br>
|
<label for="message">Message:</label><br>
|
||||||
<textarea name="message" rows="4" cols="50"></textarea><br>
|
<textarea name="message" rows="4" cols="50"></textarea><br>
|
||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
<button type="reset">Reset</button>
|
<button type="reset">Reset</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<!-- Footer to complete semantic elements, same as homepage-->
|
<!-- Footer to complete semantic elements, same as homepage-->
|
||||||
<footer>
|
<footer>
|
||||||
<p><strong>© 2025</strong> | Created by <strong>Levi McLean</strong></p>
|
<p><strong>© 2025</strong> | Created by <strong>Levi McLean</strong></p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,176 +1,176 @@
|
|||||||
/* Keyframe animation */
|
/* Keyframe animation */
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(30px);
|
transform: translateY(30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile design */
|
/* Mobile design */
|
||||||
body {
|
body {
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
color: #222;
|
color: #222;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2 {
|
h2 {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
padding-bottom: 0.4rem;
|
padding-bottom: 0.4rem;
|
||||||
border-bottom: 3px solid #444;
|
border-bottom: 3px solid #444;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
nav a {
|
||||||
background: #2980b9;
|
background: #2980b9;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
transition: background 0.3s, transform 0.3s;
|
transition: background 0.3s, transform 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a:hover {
|
nav a:hover {
|
||||||
background: #1c5a85;
|
background: #1c5a85;
|
||||||
transform: scale(1.07);
|
transform: scale(1.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
|
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
|
||||||
animation: fadeIn 1s ease;
|
animation: fadeIn 1s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
section img {
|
section img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
|
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
textarea {
|
textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
border: 1px solid #bbb;
|
border: 1px solid #bbb;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
width: 48%;
|
width: 48%;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
background: #2980b9;
|
background: #2980b9;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
button[type="reset"] {
|
button[type="reset"] {
|
||||||
background: red;
|
background: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 2rem 0 1rem 0;
|
margin: 2rem 0 1rem 0;
|
||||||
color: #888;
|
color: #888;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animal-grid {
|
.animal-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Layouts for larger screens */
|
/* Layouts for larger screens */
|
||||||
/* Tablet/Medium screen */
|
/* Tablet/Medium screen */
|
||||||
@media (min-width: 600px) and (max-width: 899px) {
|
@media (min-width: 600px) and (max-width: 899px) {
|
||||||
body {
|
body {
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
section,
|
section,
|
||||||
form {
|
form {
|
||||||
max-width: 650px;
|
max-width: 650px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop/large Screen */
|
/* Desktop/large Screen */
|
||||||
@media (min-width: 900px) {
|
@media (min-width: 900px) {
|
||||||
body {
|
body {
|
||||||
padding: 0 4rem;
|
padding: 0 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
section,
|
section,
|
||||||
form {
|
form {
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animal-grid {
|
.animal-grid {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 469 KiB |
@@ -1,127 +1,127 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head lang="en">
|
<head lang="en">
|
||||||
<title>Pet Showcase - Home</title>
|
<title>Pet Showcase - Home</title>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>Levi's Pet Showcase</h1>
|
<h1>Levi's Pet Showcase</h1>
|
||||||
<small>A collection of pet images with facts about their personality</small>
|
<small>A collection of pet images with facts about their personality</small>
|
||||||
|
|
||||||
<!-- Nav that will match accross all pages -->
|
<!-- Nav that will match accross all pages -->
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="index.html">Home</a>
|
<a href="index.html">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="contact.html">Contact</a>
|
<a href="contact.html">Contact</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h2>Welcome!</h2>
|
<h2>Welcome!</h2>
|
||||||
<p>Below will be 5 short showcases for each of my pets (past and current) featuring pictures and a small
|
<p>Below will be 5 short showcases for each of my pets (past and current) featuring pictures and a small
|
||||||
description
|
description
|
||||||
of their personalities</p>
|
of their personalities</p>
|
||||||
|
|
||||||
<!-- 5 Section elements for my animals-->
|
<!-- 5 Section elements for my animals-->
|
||||||
<div class="animal-grid">
|
<div class="animal-grid">
|
||||||
<section id="mierda">
|
<section id="mierda">
|
||||||
<h3>Mierda</h3>
|
<h3>Mierda</h3>
|
||||||
<img src="img/Mierda.jpeg" alt="picture of Mierda" width="600" height="1000">
|
<img src="img/Mierda.jpeg" alt="picture of Mierda" width="600" height="1000">
|
||||||
<p>Mierda is 5 years old as of writing which makes her the oldest of the animals</p>
|
<p>Mierda is 5 years old as of writing which makes her the oldest of the animals</p>
|
||||||
<p>Mierda likes:</p>
|
<p>Mierda likes:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Sleeping with her head in a shoe</li>
|
<li>Sleeping with her head in a shoe</li>
|
||||||
<li>Wet food</li>
|
<li>Wet food</li>
|
||||||
<li>Sleeping outside</li>
|
<li>Sleeping outside</li>
|
||||||
<li>Playing with <a href="#frank">Frank</a></li>
|
<li>Playing with <a href="#frank">Frank</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Although she looks very sweet (which she can be), she also has a bit of an evil genius side, which my
|
<p>Although she looks very sweet (which she can be), she also has a bit of an evil genius side, which my
|
||||||
family
|
family
|
||||||
loves to joke about</p>
|
loves to joke about</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="Frank">
|
<section id="Frank">
|
||||||
<h3>Frank</h3>
|
<h3>Frank</h3>
|
||||||
<img src="img/Frank.jpeg" alt="picture of Frank" width="500" height="600">
|
<img src="img/Frank.jpeg" alt="picture of Frank" width="500" height="600">
|
||||||
<p>Frank is 3 years old and came directly after Mierda</p>
|
<p>Frank is 3 years old and came directly after Mierda</p>
|
||||||
<p>Frank likes:</p>
|
<p>Frank likes:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Sleeping upside down</li>
|
<li>Sleeping upside down</li>
|
||||||
<li>Wet food</li>
|
<li>Wet food</li>
|
||||||
<li>Kibble</li>
|
<li>Kibble</li>
|
||||||
<li>Food that falls on the floor</li>
|
<li>Food that falls on the floor</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Frank LOVES food. We joke a lot about how he tends to beg like a dog, even sometimes sitting right
|
<p>Frank LOVES food. We joke a lot about how he tends to beg like a dog, even sometimes sitting right
|
||||||
next
|
next
|
||||||
to <a href="#Bo">Bo</a> while he begs.</p>
|
to <a href="#Bo">Bo</a> while he begs.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="Rocco">
|
<section id="Rocco">
|
||||||
<h3>Rocco</h3>
|
<h3>Rocco</h3>
|
||||||
<img src="img/Rocco.jpeg" alt="picture of Rocco" width="500" height="700">
|
<img src="img/Rocco.jpeg" alt="picture of Rocco" width="500" height="700">
|
||||||
<p>Rocco is 3 years old and was adopted very shortly after Frank, their almost the same age</p>
|
<p>Rocco is 3 years old and was adopted very shortly after Frank, their almost the same age</p>
|
||||||
<p>Rocco likes:</p>
|
<p>Rocco likes:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Cuddles in bed</li>
|
<li>Cuddles in bed</li>
|
||||||
<li>Sleeping in boxes</li>
|
<li>Sleeping in boxes</li>
|
||||||
<li>Scratching the cat post</li>
|
<li>Scratching the cat post</li>
|
||||||
<li>Drinking tap water from the faucet</li>
|
<li>Drinking tap water from the faucet</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Rocco is pretty quiet but he's got a lot of personality. He's the silliest of the animals and often
|
<p>Rocco is pretty quiet but he's got a lot of personality. He's the silliest of the animals and often
|
||||||
even
|
even
|
||||||
tends to slip and trip on himself. He's very easily startled too.</p>
|
tends to slip and trip on himself. He's very easily startled too.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="Bo">
|
<section id="Bo">
|
||||||
<h3>Bo</h3>
|
<h3>Bo</h3>
|
||||||
<img src="img/Bo.jpeg" alt="picture of Bo" width="600" height="700">
|
<img src="img/Bo.jpeg" alt="picture of Bo" width="600" height="700">
|
||||||
<p>Bo is 9 months old and is the newest addition to our family</p>
|
<p>Bo is 9 months old and is the newest addition to our family</p>
|
||||||
<p>Bo likes:</p>
|
<p>Bo likes:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Jumping, a lot of jumping</li>
|
<li>Jumping, a lot of jumping</li>
|
||||||
<li>Walking with his backpack on</li>
|
<li>Walking with his backpack on</li>
|
||||||
<li>Belly rubs</li>
|
<li>Belly rubs</li>
|
||||||
<li>Dried pigs ear treats (delicious, I know)</li>
|
<li>Dried pigs ear treats (delicious, I know)</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Bo is still very young and figuring out his personality but he's very hyperactive and LOVES to jump
|
<p>Bo is still very young and figuring out his personality but he's very hyperactive and LOVES to jump
|
||||||
off
|
off
|
||||||
the
|
the
|
||||||
back of the porch and up on us when we come home. He's a Boxer-Border Collie mix.</p>
|
back of the porch and up on us when we come home. He's a Boxer-Border Collie mix.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="Jax">
|
<section id="Jax">
|
||||||
<h3>Jax</h3>
|
<h3>Jax</h3>
|
||||||
<img src="img/Jax.jpeg" alt="picture of Jax" width="500" height="700">
|
<img src="img/Jax.jpeg" alt="picture of Jax" width="500" height="700">
|
||||||
<p>Jax was 9 years old when he past, which was about a year ago now.</p>
|
<p>Jax was 9 years old when he past, which was about a year ago now.</p>
|
||||||
<p>Jax Liked:</p>
|
<p>Jax Liked:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Barking, he loved the sound of his own voice</li>
|
<li>Barking, he loved the sound of his own voice</li>
|
||||||
<li>The cats!</li>
|
<li>The cats!</li>
|
||||||
<li>The dog park</li>
|
<li>The dog park</li>
|
||||||
<li>Water, he was quite the swimmer</li>
|
<li>Water, he was quite the swimmer</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Jax (or Jackie) was our first family pet, we love him and miss him but remember him everyday. Jax was
|
<p>Jax (or Jackie) was our first family pet, we love him and miss him but remember him everyday. Jax was
|
||||||
a
|
a
|
||||||
Great
|
Great
|
||||||
Pyranese mixed with a Shepherd breed of some sort. He had LOTS of fur and was very fluffy.</p>
|
Pyranese mixed with a Shepherd breed of some sort. He had LOTS of fur and was very fluffy.</p>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<!-- Footer that will match accross all pages -->
|
<!-- Footer that will match accross all pages -->
|
||||||
<footer>
|
<footer>
|
||||||
<p><strong>© 2025</strong> | Created by <strong>Levi McLean</strong></p>
|
<p><strong>© 2025</strong> | Created by <strong>Levi McLean</strong></p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,35 +1,35 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Lab 2</title>
|
<title>Lab 2</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Lab 2</h1>
|
<h1>Lab 2</h1>
|
||||||
<script>
|
<script>
|
||||||
/*
|
/*
|
||||||
* Name: Levi McLean
|
* Name: Levi McLean
|
||||||
* Project: Lab 1
|
* Project: Lab 1
|
||||||
* Submission date: September 18th, 2025
|
* Submission date: September 18th, 2025
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var studentName; //unassigned variable
|
var studentName; //unassigned variable
|
||||||
do {
|
do {
|
||||||
studentName = prompt("Enter the student's name: "); //prompt for name, assign variable with value
|
studentName = prompt("Enter the student's name: "); //prompt for name, assign variable with value
|
||||||
if (studentName === null || studentName.trim() === "") {
|
if (studentName === null || studentName.trim() === "") {
|
||||||
alert("Please enter a student name");
|
alert("Please enter a student name");
|
||||||
}
|
}
|
||||||
} while (studentName === null || studentName.trim() === "");
|
} while (studentName === null || studentName.trim() === "");
|
||||||
alert("Thank you for your entry!"); //Pop up message alert
|
alert("Thank you for your entry!"); //Pop up message alert
|
||||||
sessionStorage.setItem("Student Name", studentName);
|
sessionStorage.setItem("Student Name", studentName);
|
||||||
|
|
||||||
const welcomeText = "Welcome to INFO-1272 Fall 2025 "; //set const welcomeText
|
const welcomeText = "Welcome to INFO-1272 Fall 2025 "; //set const welcomeText
|
||||||
const nameText = `You are ${sessionStorage.getItem("Student Name")}`;
|
const nameText = `You are ${sessionStorage.getItem("Student Name")}`;
|
||||||
document.write(welcomeText); //write const welcomeText
|
document.write(welcomeText); //write const welcomeText
|
||||||
document.write("<br>");
|
document.write("<br>");
|
||||||
document.write(nameText);
|
document.write(nameText);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,81 +1,81 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Lab 2</title>
|
<title>Lab 2</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Theme Park Tickets</h1>
|
<h1>Theme Park Tickets</h1>
|
||||||
<script>
|
<script>
|
||||||
// Constant values
|
// Constant values
|
||||||
const CHILD_TICKET_PRICE = 9.99;
|
const CHILD_TICKET_PRICE = 9.99;
|
||||||
const ADULT_TICKET_PRICE = 19.99;
|
const ADULT_TICKET_PRICE = 19.99;
|
||||||
const SENIOR_TICKET_PRICE = 14.99;
|
const SENIOR_TICKET_PRICE = 14.99;
|
||||||
const HST_TAX = 0.13;
|
const HST_TAX = 0.13;
|
||||||
|
|
||||||
// Unassigned for now, assign later
|
// Unassigned for now, assign later
|
||||||
var ticketType;
|
var ticketType;
|
||||||
var ticketPrice;
|
var ticketPrice;
|
||||||
var userAge;
|
var userAge;
|
||||||
var firstName;
|
var firstName;
|
||||||
var lastName;
|
var lastName;
|
||||||
var email;
|
var email;
|
||||||
var phone;
|
var phone;
|
||||||
var tax;
|
var tax;
|
||||||
var total;
|
var total;
|
||||||
var freeRides;
|
var freeRides;
|
||||||
|
|
||||||
// Ask for user details
|
// Ask for user details
|
||||||
firstName = prompt("First Name:");
|
firstName = prompt("First Name:");
|
||||||
lastName = prompt("Last Name:");
|
lastName = prompt("Last Name:");
|
||||||
email = prompt("Email:");
|
email = prompt("Email:");
|
||||||
phone = prompt("Phone:");
|
phone = prompt("Phone:");
|
||||||
userAge = prompt("Enter your age:");
|
userAge = prompt("Enter your age:");
|
||||||
|
|
||||||
// Determine ticket price
|
// Determine ticket price
|
||||||
if (userAge < 12) {
|
if (userAge < 12) {
|
||||||
ticketPrice = CHILD_TICKET_PRICE;
|
ticketPrice = CHILD_TICKET_PRICE;
|
||||||
ticketType = "Child";
|
ticketType = "Child";
|
||||||
} else if (userAge <= 59) {
|
} else if (userAge <= 59) {
|
||||||
ticketPrice = ADULT_TICKET_PRICE;
|
ticketPrice = ADULT_TICKET_PRICE;
|
||||||
ticketType = "Adult";
|
ticketType = "Adult";
|
||||||
} else {
|
} else {
|
||||||
ticketPrice = SENIOR_TICKET_PRICE;
|
ticketPrice = SENIOR_TICKET_PRICE;
|
||||||
ticketType = "Senior";
|
ticketType = "Senior";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Determine free ride coupons
|
// Determine free ride coupons
|
||||||
if (ticketType === "Child") {
|
if (ticketType === "Child") {
|
||||||
freeRides = 0;
|
freeRides = 0;
|
||||||
} else if (ticketType === "Adult") {
|
} else if (ticketType === "Adult") {
|
||||||
freeRides = 2;
|
freeRides = 2;
|
||||||
} else {
|
} else {
|
||||||
freeRides = 1;
|
freeRides = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Caluclate tax and total
|
// Caluclate tax and total
|
||||||
tax = ticketPrice * HST_TAX;
|
tax = ticketPrice * HST_TAX;
|
||||||
total = ticketPrice + tax;
|
total = ticketPrice + tax;
|
||||||
|
|
||||||
// Display to console
|
// Display to console
|
||||||
console.log("==========================================");
|
console.log("==========================================");
|
||||||
console.log(" Theme Park Ticket Receipt ");
|
console.log(" Theme Park Ticket Receipt ");
|
||||||
console.log("==========================================");
|
console.log("==========================================");
|
||||||
console.log("Customer Name: ", firstName, lastName);
|
console.log("Customer Name: ", firstName, lastName);
|
||||||
console.log("Email: ", email);
|
console.log("Email: ", email);
|
||||||
console.log("Phone: ", phone);
|
console.log("Phone: ", phone);
|
||||||
console.log("------------------------------------------");
|
console.log("------------------------------------------");
|
||||||
console.log("Ticket Type: ", ticketType);
|
console.log("Ticket Type: ", ticketType);
|
||||||
console.log("Base Price: $", ticketPrice.toFixed(2));
|
console.log("Base Price: $", ticketPrice.toFixed(2));
|
||||||
console.log("Tax (13%): $", tax.toFixed(2));
|
console.log("Tax (13%): $", tax.toFixed(2));
|
||||||
console.log("TOTAL: $", total.toFixed(2));
|
console.log("TOTAL: $", total.toFixed(2));
|
||||||
console.log("------------------------------------------");
|
console.log("------------------------------------------");
|
||||||
console.log("Free Ride Coupons Earned: ", freeRides);
|
console.log("Free Ride Coupons Earned: ", freeRides);
|
||||||
console.log("==========================================");
|
console.log("==========================================");
|
||||||
console.log(" Have a fun and safe day at the park! ");
|
console.log(" Have a fun and safe day at the park! ");
|
||||||
console.log("==========================================");
|
console.log("==========================================");
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,61 +1,61 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Lab 3</title>
|
<title>Lab 3</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Lab 3</h1>
|
<h1>Lab 3</h1>
|
||||||
<script>
|
<script>
|
||||||
/*
|
/*
|
||||||
* I have decided to declare my fortune messages in order of
|
* I have decided to declare my fortune messages in order of
|
||||||
* most-to-least positive
|
* most-to-least positive
|
||||||
*/
|
*/
|
||||||
var fortune1 = "You will have a great day";
|
var fortune1 = "You will have a great day";
|
||||||
var fortune2 = "Success if around the corner";
|
var fortune2 = "Success if around the corner";
|
||||||
var fortune3 = "Happiness comes from within";
|
var fortune3 = "Happiness comes from within";
|
||||||
var fortune4 = "Today will be okay";
|
var fortune4 = "Today will be okay";
|
||||||
var fortune5 = "Keep an eye on the details";
|
var fortune5 = "Keep an eye on the details";
|
||||||
var fortune6 = "Patience will be tested";
|
var fortune6 = "Patience will be tested";
|
||||||
var fortune7 = "You will step on LEGO soon";
|
var fortune7 = "You will step on LEGO soon";
|
||||||
var fortune8 = "Beware of pigeons, they have attitude";
|
var fortune8 = "Beware of pigeons, they have attitude";
|
||||||
var fortune9 = "Your WIFI will mysteriously stop working";
|
var fortune9 = "Your WIFI will mysteriously stop working";
|
||||||
|
|
||||||
// Prompt user for numCookies
|
// Prompt user for numCookies
|
||||||
var numCookies = window.prompt("How many cookies do you want to open?");
|
var numCookies = window.prompt("How many cookies do you want to open?");
|
||||||
|
|
||||||
// Loop starting at 1, stoping at numCookies
|
// Loop starting at 1, stoping at numCookies
|
||||||
for (var i = 1; i <=numCookies; i++) {
|
for (var i = 1; i <=numCookies; i++) {
|
||||||
|
|
||||||
// Generate random number from 1 - 9 inclusive
|
// Generate random number from 1 - 9 inclusive
|
||||||
var randNum = Math.floor(Math.random() * 9) + 1;
|
var randNum = Math.floor(Math.random() * 9) + 1;
|
||||||
|
|
||||||
// Assign messge and cateogry to blank for now
|
// Assign messge and cateogry to blank for now
|
||||||
var message = ""
|
var message = ""
|
||||||
var category = ""
|
var category = ""
|
||||||
|
|
||||||
// Determine message and category from randNum
|
// Determine message and category from randNum
|
||||||
if (randNum <= 3) {
|
if (randNum <= 3) {
|
||||||
if (randNum === 1) message = fortune1;
|
if (randNum === 1) message = fortune1;
|
||||||
else if (randNum === 2) message = fortune2;
|
else if (randNum === 2) message = fortune2;
|
||||||
else message = fortune3;
|
else message = fortune3;
|
||||||
category = "Positive"; // Positive if 1-3
|
category = "Positive"; // Positive if 1-3
|
||||||
} else if (randNum <= 6) {
|
} else if (randNum <= 6) {
|
||||||
if (randNum === 4) message = fortune4;
|
if (randNum === 4) message = fortune4;
|
||||||
else if (randNum === 5) message = fortune5;
|
else if (randNum === 5) message = fortune5;
|
||||||
else message = fortune6;
|
else message = fortune6;
|
||||||
category = "Neutral"; // Neutral if 4-6
|
category = "Neutral"; // Neutral if 4-6
|
||||||
} else {
|
} else {
|
||||||
if (randNum === 7) message = fortune7;
|
if (randNum === 7) message = fortune7;
|
||||||
else if (randNum === 8) message = fortune8;
|
else if (randNum === 8) message = fortune8;
|
||||||
else message = fortune9;
|
else message = fortune9;
|
||||||
category = "Funny" // Funny if 7-9
|
category = "Funny" // Funny if 7-9
|
||||||
}
|
}
|
||||||
|
|
||||||
// Display fortune cookie details
|
// Display fortune cookie details
|
||||||
console.log("Cookie #" + i + "\nMessage: " + message + "\nCategory: " + category);
|
console.log("Cookie #" + i + "\nMessage: " + message + "\nCategory: " + category);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,93 +1,93 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Lab 5</title>
|
<title>Lab 5</title>
|
||||||
<meta charset="utf-8" lang="en">
|
<meta charset="utf-8" lang="en">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Lab 5</h1>
|
<h1>Lab 5</h1>
|
||||||
<script>
|
<script>
|
||||||
// Get number of students in class
|
// Get number of students in class
|
||||||
var numStudents = parseInt(window.prompt("How many students are in the class?"));
|
var numStudents = parseInt(window.prompt("How many students are in the class?"));
|
||||||
var studentNames = [];
|
var studentNames = [];
|
||||||
var studentGrades = [];
|
var studentGrades = [];
|
||||||
|
|
||||||
// Run grade analytics once so theres something to display
|
// Run grade analytics once so theres something to display
|
||||||
gradeAnalyzer();
|
gradeAnalyzer();
|
||||||
calculateAverage(studentGrades);
|
calculateAverage(studentGrades);
|
||||||
findMinMax(studentGrades);
|
findMinMax(studentGrades);
|
||||||
|
|
||||||
// Ask user if they want to review the results
|
// Ask user if they want to review the results
|
||||||
do {
|
do {
|
||||||
displayResults();
|
displayResults();
|
||||||
var viewAgain = window.confirm("Would you like to view the results again?");
|
var viewAgain = window.confirm("Would you like to view the results again?");
|
||||||
} while (viewAgain);
|
} while (viewAgain);
|
||||||
|
|
||||||
// Thank user and end loop
|
// Thank user and end loop
|
||||||
alert("Thank you for using the Grade Analyzer!");
|
alert("Thank you for using the Grade Analyzer!");
|
||||||
|
|
||||||
// Function Definitions from here on
|
// Function Definitions from here on
|
||||||
|
|
||||||
// Gets names, grades and inserts into respective arrays
|
// Gets names, grades and inserts into respective arrays
|
||||||
function gradeAnalyzer() {
|
function gradeAnalyzer() {
|
||||||
for (var i = 0; i <= numStudents - 1; i++) {
|
for (var i = 0; i <= numStudents - 1; i++) {
|
||||||
var studentName = window.prompt("Enter students name:");
|
var studentName = window.prompt("Enter students name:");
|
||||||
var studentGrade = parseFloat(window.prompt("Enter student grade:"));
|
var studentGrade = parseFloat(window.prompt("Enter student grade:"));
|
||||||
if (studentGrade > 0 && studentGrade <= 100) {
|
if (studentGrade > 0 && studentGrade <= 100) {
|
||||||
studentNames.push(studentName);
|
studentNames.push(studentName);
|
||||||
studentGrades.push(studentGrade);
|
studentGrades.push(studentGrade);
|
||||||
} else {
|
} else {
|
||||||
alert("Invalid grade entered, skipping entry");
|
alert("Invalid grade entered, skipping entry");
|
||||||
}
|
}
|
||||||
console.log("Student " + (i + 1) + ": " + studentName + " - Grade: " + studentGrade);
|
console.log("Student " + (i + 1) + ": " + studentName + " - Grade: " + studentGrade);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculates the average of a given array
|
// Calculates the average of a given array
|
||||||
function calculateAverage(arr) {
|
function calculateAverage(arr) {
|
||||||
var totalGrades = 0;
|
var totalGrades = 0;
|
||||||
for (var i = 0; i < arr.length; i++) {
|
for (var i = 0; i < arr.length; i++) {
|
||||||
totalGrades += arr[i];
|
totalGrades += arr[i];
|
||||||
}
|
}
|
||||||
var average = totalGrades / arr.length;
|
var average = totalGrades / arr.length;
|
||||||
console.log("Class average: " + average.toFixed(2));
|
console.log("Class average: " + average.toFixed(2));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Finds the minimum and maximum value of an array by looping through it
|
// Finds the minimum and maximum value of an array by looping through it
|
||||||
function findMinMax(arr) {
|
function findMinMax(arr) {
|
||||||
if (arr.length === 0) {
|
if (arr.length === 0) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
var min = arr[0];
|
var min = arr[0];
|
||||||
var max = arr[0];
|
var max = arr[0];
|
||||||
|
|
||||||
for (var i = 1; i < arr.length; i++) {
|
for (var i = 1; i < arr.length; i++) {
|
||||||
var grade = arr[i];
|
var grade = arr[i];
|
||||||
if (grade < min) {
|
if (grade < min) {
|
||||||
min = grade;
|
min = grade;
|
||||||
}
|
}
|
||||||
if (grade > max) {
|
if (grade > max) {
|
||||||
max = grade;
|
max = grade;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("Min: " + min + " Max: " + max);
|
console.log("Min: " + min + " Max: " + max);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper function to display results cleanly
|
// Helper function to display results cleanly
|
||||||
function displayResults() {
|
function displayResults() {
|
||||||
console.clear();
|
console.clear();
|
||||||
console.log("Student List:");
|
console.log("Student List:");
|
||||||
for (var i = 0; i < studentNames.length; i++) {
|
for (var i = 0; i < studentNames.length; i++) {
|
||||||
console.log("Student " + i + ": " + studentNames[i] + " Grade: " + studentGrades[i]);
|
console.log("Student " + i + ": " + studentNames[i] + " Grade: " + studentGrades[i]);
|
||||||
}
|
}
|
||||||
calculateAverage(studentGrades);
|
calculateAverage(studentGrades);
|
||||||
findMinMax(studentGrades);
|
findMinMax(studentGrades);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,130 +1,130 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Levi McLean Midterm Part B</title>
|
<title>Levi McLean Midterm Part B</title>
|
||||||
<meta charset="utf-8" lang="en-us">
|
<meta charset="utf-8" lang="en-us">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Levi McLean Midterm Part B</h1>
|
<h1>Levi McLean Midterm Part B</h1>
|
||||||
<script>
|
<script>
|
||||||
const TAX_RATE = 0.13;
|
const TAX_RATE = 0.13;
|
||||||
const DISCOUNT_RATE = 0.1;
|
const DISCOUNT_RATE = 0.1;
|
||||||
|
|
||||||
var item1 = {
|
var item1 = {
|
||||||
name: "apple",
|
name: "apple",
|
||||||
price: 1.1,
|
price: 1.1,
|
||||||
qty: 4
|
qty: 4
|
||||||
};
|
};
|
||||||
|
|
||||||
var item2 = {
|
var item2 = {
|
||||||
name: "banana",
|
name: "banana",
|
||||||
price: 0.59,
|
price: 0.59,
|
||||||
qty: 2
|
qty: 2
|
||||||
};
|
};
|
||||||
|
|
||||||
var item3 = {
|
var item3 = {
|
||||||
name: "pear",
|
name: "pear",
|
||||||
price: 1.25,
|
price: 1.25,
|
||||||
qty: 6
|
qty: 6
|
||||||
};
|
};
|
||||||
|
|
||||||
var item4 = {
|
var item4 = {
|
||||||
name: "grapes",
|
name: "grapes",
|
||||||
price: 2.25,
|
price: 2.25,
|
||||||
qty: 8
|
qty: 8
|
||||||
};
|
};
|
||||||
|
|
||||||
var item5 = {
|
var item5 = {
|
||||||
name: "kiwi",
|
name: "kiwi",
|
||||||
price: 3,
|
price: 3,
|
||||||
qty: 1
|
qty: 1
|
||||||
};
|
};
|
||||||
|
|
||||||
var cart = [item1, item2, item3, item4, item5];
|
var cart = [item1, item2, item3, item4, item5];
|
||||||
|
|
||||||
function searchItem() {
|
function searchItem() {
|
||||||
var itemName = window.prompt("Enter an item name: ").toLowerCase();
|
var itemName = window.prompt("Enter an item name: ").toLowerCase();
|
||||||
var foundItem;
|
var foundItem;
|
||||||
|
|
||||||
if (itemName == null) {
|
if (itemName == null) {
|
||||||
window.alert("Item name cannot be null.");
|
window.alert("Item name cannot be null.");
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var i=0; i < cart.length; i++) {
|
for (var i=0; i < cart.length; i++) {
|
||||||
if (cart[i].name === itemName) {
|
if (cart[i].name === itemName) {
|
||||||
window.alert("Item(s) found.");
|
window.alert("Item(s) found.");
|
||||||
foundItem = cart[i];
|
foundItem = cart[i];
|
||||||
return foundItem;
|
return foundItem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.alert("Item(s) not found.");
|
window.alert("Item(s) not found.");
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateItemQuantity() {
|
function updateItemQuantity() {
|
||||||
var updateItem = window.prompt("Enter item name to update: ").toLowerCase();
|
var updateItem = window.prompt("Enter item name to update: ").toLowerCase();
|
||||||
|
|
||||||
if (updateItem == null) {
|
if (updateItem == null) {
|
||||||
window.alert("Invalid item name.");
|
window.alert("Invalid item name.");
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var i=0; i < cart.length; i++) {
|
for (var i=0; i < cart.length; i++) {
|
||||||
if (cart[i].name === updateItem) {
|
if (cart[i].name === updateItem) {
|
||||||
var updateQty = parseInt(window.prompt("How many items do we add? "), 10);
|
var updateQty = parseInt(window.prompt("How many items do we add? "), 10);
|
||||||
cart[i].qty += updateQty;
|
cart[i].qty += updateQty;
|
||||||
console.log(cart);
|
console.log(cart);
|
||||||
return updateItem;
|
return updateItem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.alert("Item does not exist in cart.");
|
window.alert("Item does not exist in cart.");
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearCart() {
|
function clearCart() {
|
||||||
for (var i = 0; i < cart.length; i++) {
|
for (var i = 0; i < cart.length; i++) {
|
||||||
cart[i].name = "";
|
cart[i].name = "";
|
||||||
cart[i].qty = 0;
|
cart[i].qty = 0;
|
||||||
}
|
}
|
||||||
console.log(cart);
|
console.log(cart);
|
||||||
window.alert("Cart has been cleared!");
|
window.alert("Cart has been cleared!");
|
||||||
}
|
}
|
||||||
|
|
||||||
function calulateFinalPriceWithDiscount() {
|
function calulateFinalPriceWithDiscount() {
|
||||||
var subtotal = 0;
|
var subtotal = 0;
|
||||||
for (var i = 0; i < cart.length; i++) {
|
for (var i = 0; i < cart.length; i++) {
|
||||||
subtotal += cart[i].price * cart[i].qty;
|
subtotal += cart[i].price * cart[i].qty;
|
||||||
}
|
}
|
||||||
var tax = subtotal * TAX_RATE;
|
var tax = subtotal * TAX_RATE;
|
||||||
var discount = subtotal * DISCOUNT_RATE;
|
var discount = subtotal * DISCOUNT_RATE;
|
||||||
var total = subtotal - discount + tax;
|
var total = subtotal - discount + tax;
|
||||||
window.alert(
|
window.alert(
|
||||||
"Subtotal: $" + subtotal.toFixed(2) + "\n" +
|
"Subtotal: $" + subtotal.toFixed(2) + "\n" +
|
||||||
"Tax: $" + tax.toFixed(2) + "\n" +
|
"Tax: $" + tax.toFixed(2) + "\n" +
|
||||||
"Discount: $" + discount.toFixed(2) + "\n" +
|
"Discount: $" + discount.toFixed(2) + "\n" +
|
||||||
"Total: $" + total.toFixed(2)
|
"Total: $" + total.toFixed(2)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
var notDone = true;
|
var notDone = true;
|
||||||
while(notDone === true) {
|
while(notDone === true) {
|
||||||
var userChoice = window.prompt("Please make a selection (s)earch, (u)pdate, (c)lear, (d)iscount: ").toLowerCase();
|
var userChoice = window.prompt("Please make a selection (s)earch, (u)pdate, (c)lear, (d)iscount: ").toLowerCase();
|
||||||
if (userChoice === "s") {
|
if (userChoice === "s") {
|
||||||
searchItem();
|
searchItem();
|
||||||
notDone = window.confirm("Do you wish to continue?");
|
notDone = window.confirm("Do you wish to continue?");
|
||||||
} else if (userChoice === "u") {
|
} else if (userChoice === "u") {
|
||||||
updateItemQuantity();
|
updateItemQuantity();
|
||||||
notDone = window.confirm("Do you wish to continue?");
|
notDone = window.confirm("Do you wish to continue?");
|
||||||
} else if (userChoice === "c") {
|
} else if (userChoice === "c") {
|
||||||
clearCart();
|
clearCart();
|
||||||
notDone = window.confirm("Do you wish to continue?");
|
notDone = window.confirm("Do you wish to continue?");
|
||||||
} else if (userChoice === "d") {
|
} else if (userChoice === "d") {
|
||||||
calulateFinalPriceWithDiscount();
|
calulateFinalPriceWithDiscount();
|
||||||
notDone = window.confirm("Do you wish to continue?");
|
notDone = window.confirm("Do you wish to continue?");
|
||||||
} else {
|
} else {
|
||||||
window.alert("Invalid selection, try again.");
|
window.alert("Invalid selection, try again.");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,138 +1,138 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Levi McLean Midterm Part B</title>
|
<title>Levi McLean Midterm Part B</title>
|
||||||
<meta charset="utf-8" lang="en-us">
|
<meta charset="utf-8" lang="en-us">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Levi McLean Midterm Part B</h1>
|
<h1>Levi McLean Midterm Part B</h1>
|
||||||
<script>
|
<script>
|
||||||
const TAX_RATE = 0.13;
|
const TAX_RATE = 0.13;
|
||||||
const DISCOUNT_RATE = 0.1;
|
const DISCOUNT_RATE = 0.1;
|
||||||
|
|
||||||
var item1 = {
|
var item1 = {
|
||||||
name: "apple",
|
name: "apple",
|
||||||
price: 1.1,
|
price: 1.1,
|
||||||
qty: 4
|
qty: 4
|
||||||
};
|
};
|
||||||
|
|
||||||
var item2 = {
|
var item2 = {
|
||||||
name: "banana",
|
name: "banana",
|
||||||
price: 0.59,
|
price: 0.59,
|
||||||
qty: 2
|
qty: 2
|
||||||
};
|
};
|
||||||
|
|
||||||
var item3 = {
|
var item3 = {
|
||||||
name: "pear",
|
name: "pear",
|
||||||
price: 1.25,
|
price: 1.25,
|
||||||
qty: 6
|
qty: 6
|
||||||
};
|
};
|
||||||
|
|
||||||
var item4 = {
|
var item4 = {
|
||||||
name: "grapes",
|
name: "grapes",
|
||||||
price: 2.25,
|
price: 2.25,
|
||||||
qty: 8
|
qty: 8
|
||||||
};
|
};
|
||||||
|
|
||||||
var item5 = {
|
var item5 = {
|
||||||
name: "kiwi",
|
name: "kiwi",
|
||||||
price: 3,
|
price: 3,
|
||||||
qty: 1
|
qty: 1
|
||||||
};
|
};
|
||||||
|
|
||||||
var cart = [item1, item2, item3, item4, item5];
|
var cart = [item1, item2, item3, item4, item5];
|
||||||
|
|
||||||
function searchItem() {
|
function searchItem() {
|
||||||
var itemName = window.prompt("Enter an item name: ").toLowerCase();
|
var itemName = window.prompt("Enter an item name: ").toLowerCase();
|
||||||
var foundItem;
|
var foundItem;
|
||||||
|
|
||||||
if (itemName == null) {
|
if (itemName == null) {
|
||||||
window.alert("Item name cannot be null.");
|
window.alert("Item name cannot be null.");
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var i=0; i <= cart.length; i++) {
|
for (var i=0; i <= cart.length; i++) {
|
||||||
if (cart[i].name === itemName) {
|
if (cart[i].name === itemName) {
|
||||||
window.alert("Item(s) found.");
|
window.alert("Item(s) found.");
|
||||||
foundItem = cart[i];
|
foundItem = cart[i];
|
||||||
return foundItem;
|
return foundItem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.alert("Item(s) not found.");
|
window.alert("Item(s) not found.");
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateItemQuantity() {
|
function updateItemQuantity() {
|
||||||
var updateItem = window.prompt("Enter item name to update: ").toLowerCase();
|
var updateItem = window.prompt("Enter item name to update: ").toLowerCase();
|
||||||
|
|
||||||
if (updateItem == null) {
|
if (updateItem == null) {
|
||||||
window.alert("Invalid item name.");
|
window.alert("Invalid item name.");
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var i=0; i <= cart.length; i++) {
|
for (var i=0; i <= cart.length; i++) {
|
||||||
if (cart[i].name === updateItem) {
|
if (cart[i].name === updateItem) {
|
||||||
var updateQty = parseInt(window.prompt("How many items do we add? "), 10);
|
var updateQty = parseInt(window.prompt("How many items do we add? "), 10);
|
||||||
cart[i].qty += updateQty;
|
cart[i].qty += updateQty;
|
||||||
console.log(cart);
|
console.log(cart);
|
||||||
return updateItem;
|
return updateItem;
|
||||||
}
|
}
|
||||||
window.alert("Item does not exist in cart.");
|
window.alert("Item does not exist in cart.");
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearCart() {
|
function clearCart() {
|
||||||
cart[0].name = "";
|
cart[0].name = "";
|
||||||
cart[0].qty = 0;
|
cart[0].qty = 0;
|
||||||
cart[1].name = "";
|
cart[1].name = "";
|
||||||
cart[1].qty = 0;
|
cart[1].qty = 0;
|
||||||
cart[2].name = "";
|
cart[2].name = "";
|
||||||
cart[2].qty = 0;
|
cart[2].qty = 0;
|
||||||
cart[3].name = "";
|
cart[3].name = "";
|
||||||
cart[3].qty = 0;
|
cart[3].qty = 0;
|
||||||
cart[4].name = "";
|
cart[4].name = "";
|
||||||
cart[4].qty = 0;
|
cart[4].qty = 0;
|
||||||
console.log(cart);
|
console.log(cart);
|
||||||
window.alert("Cart has been cleared!");
|
window.alert("Cart has been cleared!");
|
||||||
}
|
}
|
||||||
|
|
||||||
function calulateFinalPriceWithDiscount() {
|
function calulateFinalPriceWithDiscount() {
|
||||||
var subtotal = 0;
|
var subtotal = 0;
|
||||||
var tax = 0;
|
var tax = 0;
|
||||||
var total = 0;
|
var total = 0;
|
||||||
// for (var i = 0; i <= cart.length; i++) {
|
// for (var i = 0; i <= cart.length; i++) {
|
||||||
// subtotal += cart[i].price;
|
// subtotal += cart[i].price;
|
||||||
// }
|
// }
|
||||||
subtotal += cart[0].price;
|
subtotal += cart[0].price;
|
||||||
subtotal += cart[1].price;
|
subtotal += cart[1].price;
|
||||||
subtotal += cart[2].price;
|
subtotal += cart[2].price;
|
||||||
subtotal += cart[3].price;
|
subtotal += cart[3].price;
|
||||||
subtotal += cart[4].price;
|
subtotal += cart[4].price;
|
||||||
tax = subtotal * TAX_RATE;
|
tax = subtotal * TAX_RATE;
|
||||||
discount = subtotal * DISCOUNT_RATE;
|
discount = subtotal * DISCOUNT_RATE;
|
||||||
total = subtotal - discount + tax;
|
total = subtotal - discount + tax;
|
||||||
window.alert("Subtotal: $" + subtotal + " Tax: $" + tax + " Total: $" + total);
|
window.alert("Subtotal: $" + subtotal + " Tax: $" + tax + " Total: $" + total);
|
||||||
}
|
}
|
||||||
|
|
||||||
var notDone = true;
|
var notDone = true;
|
||||||
while(notDone === true) {
|
while(notDone === true) {
|
||||||
var userChoice = window.prompt("Please make a selection (s)earch, (u)pdate, (c)lear, (d)iscount: ").toLowerCase();
|
var userChoice = window.prompt("Please make a selection (s)earch, (u)pdate, (c)lear, (d)iscount: ").toLowerCase();
|
||||||
if (userChoice === "s") {
|
if (userChoice === "s") {
|
||||||
searchItem();
|
searchItem();
|
||||||
notDone = window.confirm("Do you wish to continue?");
|
notDone = window.confirm("Do you wish to continue?");
|
||||||
} else if (userChoice === "u") {
|
} else if (userChoice === "u") {
|
||||||
updateItemQuantity();
|
updateItemQuantity();
|
||||||
notDone = window.confirm("Do you wish to continue?");
|
notDone = window.confirm("Do you wish to continue?");
|
||||||
} else if (userChoice === "c") {
|
} else if (userChoice === "c") {
|
||||||
clearCart();
|
clearCart();
|
||||||
notDone = window.confirm("Do you wish to continue?");
|
notDone = window.confirm("Do you wish to continue?");
|
||||||
} else if (userChoice === "d") {
|
} else if (userChoice === "d") {
|
||||||
calulateFinalPriceWithDiscount();
|
calulateFinalPriceWithDiscount();
|
||||||
notDone = window.confirm("Do you wish to continue?");
|
notDone = window.confirm("Do you wish to continue?");
|
||||||
} else {
|
} else {
|
||||||
window.alert("Invalid selection, try again.");
|
window.alert("Invalid selection, try again.");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,176 +1,176 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Midterm Study</title>
|
<title>Midterm Study</title>
|
||||||
<meta charset="utf-8" lang="en-us">
|
<meta charset="utf-8" lang="en-us">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Midterm Study</h1>
|
<h1>Midterm Study</h1>
|
||||||
<h2>Introduction to Web Pages</h2>
|
<h2>Introduction to Web Pages</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>A web page is a container for the following three technologies. Describe the purpose of each for a web page:
|
<li>A web page is a container for the following three technologies. Describe the purpose of each for a web page:
|
||||||
</li>
|
</li>
|
||||||
<ul>
|
<ul>
|
||||||
<li>HTML</li>
|
<li>HTML</li>
|
||||||
<li>CSS</li>
|
<li>CSS</li>
|
||||||
<li>JavaScript</li>
|
<li>JavaScript</li>
|
||||||
</ul>
|
</ul>
|
||||||
</ol>
|
</ol>
|
||||||
<p>Answers:</p>
|
<p>Answers:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>HTML is used for defining web elements and the rough layout of a website</li>
|
<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>CSS is used to style the default HTML elements</li>
|
||||||
<li>JavaScript is used for data input, manipulation and other logical components</li>
|
<li>JavaScript is used for data input, manipulation and other logical components</li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2>Introduction to javascript</h2>
|
<h2>Introduction to javascript</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Browser pop-up dialogue box functions</li>
|
<li>Browser pop-up dialogue box functions</li>
|
||||||
<ul>
|
<ul>
|
||||||
<li>alert()</li>
|
<li>alert()</li>
|
||||||
<li>prompt()</li>
|
<li>prompt()</li>
|
||||||
<li>confirm()</li>
|
<li>confirm()</li>
|
||||||
</ul>
|
</ul>
|
||||||
</ol>
|
</ol>
|
||||||
<p>Answers:</p>
|
<p>Answers:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Reload webpage to see examples</li>
|
<li>Reload webpage to see examples</li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2>Data Types and Variables</h2>
|
<h2>Data Types and Variables</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Name JavaScript's three data types. Describe the types of data they store</li>
|
<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>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 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>
|
<li>What is a constant in JavaScript? Describe how you would declare a JavaScript constant.</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>Answers:</p>
|
<p>Answers:</p>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Number, String and Boolean</li>
|
<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
|
<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>
|
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.
|
<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>
|
JavaScript uses camelCase for variables and classes and UPPER_SNAKE_CASE for constants</li>
|
||||||
<code>
|
<code>
|
||||||
let customerAge = 23;<br>
|
let customerAge = 23;<br>
|
||||||
const ONT_TAX_RATE = 0.13;
|
const ONT_TAX_RATE = 0.13;
|
||||||
</code>
|
</code>
|
||||||
<li>A constant is a variable whose value cannot be changed once initialized, making it constant. To define a
|
<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>
|
constant, use the "const" keyword.</li>
|
||||||
</ol>
|
</ol>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2>Operators</h2>
|
<h2>Operators</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Explain the following binary operators: + - * / %</li>
|
<li>Explain the following binary operators: + - * / %</li>
|
||||||
<li>Explain the multiple uses of the + operator.</li>
|
<li>Explain the multiple uses of the + operator.</li>
|
||||||
<li>Describe how the increment/decrement operators (++ and --) work.</li>
|
<li>Describe how the increment/decrement operators (++ and --) work.</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>Answers:</p>
|
<p>Answers:</p>
|
||||||
<ol>
|
<ol>
|
||||||
<li>The + operator is used to get the sum, the - operator is to get the difference, the * operator multiplies,
|
<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
|
the / operator divides and the % (modulus) operator determines if two numbers divided have a remainder and
|
||||||
how much of one</li>
|
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
|
<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>
|
multiple Strings together.</li>
|
||||||
<li>The ++ (increment) operator is used to increase the value of a variable by exactly one. The -- (decrement)
|
<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>
|
operator is used to decrease the value of a variable by exactly 1.</li>
|
||||||
</ol>
|
</ol>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2>The JavaScript Math object</h2>
|
<h2>The JavaScript Math object</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Describe the operation and the return for the following Math methods:</li>
|
<li>Describe the operation and the return for the following Math methods:</li>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Math.PI</li>
|
<li>Math.PI</li>
|
||||||
<li>Math.abs(x)</li>
|
<li>Math.abs(x)</li>
|
||||||
<li>Math.pow(x,2)</li>
|
<li>Math.pow(x,2)</li>
|
||||||
<li>Math.round(x)</li>
|
<li>Math.round(x)</li>
|
||||||
<li>Math.ceil(x)</li>
|
<li>Math.ceil(x)</li>
|
||||||
<li>Math.floor(x)</li>
|
<li>Math.floor(x)</li>
|
||||||
<li>Math.trunc(x)</li>
|
<li>Math.trunc(x)</li>
|
||||||
<li>Math.random()</li>
|
<li>Math.random()</li>
|
||||||
<li>Math.min(x,y)</li>
|
<li>Math.min(x,y)</li>
|
||||||
<li>Math.max(x,y)</li>
|
<li>Math.max(x,y)</li>
|
||||||
</ul>
|
</ul>
|
||||||
</ol>
|
</ol>
|
||||||
<p>Answers:</p>
|
<p>Answers:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Math.PI is a constant value for PI</li>
|
<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.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.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>Math.round(x) returns x rounded to the nearest whole. Below 0.5 is rounded down, above 0.5 is rouded up.
|
||||||
</li>
|
</li>
|
||||||
<li>Math.ceil(x) returns the "ceiling" of x, which is the next highest whole integer.</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.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>Math.trunc(x) returns x truncated, which means it cuts off the decimal places regardless of what they are.
|
||||||
</li>
|
</li>
|
||||||
<li>Math.random() returns a random number between 0 and 1, can be manipulated to return in between any range
|
<li>Math.random() returns a random number between 0 and 1, can be manipulated to return in between any range
|
||||||
</li>
|
</li>
|
||||||
<li>Math.min(x,y) returns the minimum of two numbers. The smaller of the two</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>
|
<li>Math.max(x,y) returns the maximum of two numbers. The larger of the two</li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2>JavaScript Number Methods</h2>
|
<h2>JavaScript Number Methods</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Describe the operation and the return for the following Number methods:</li>
|
<li>Describe the operation and the return for the following Number methods:</li>
|
||||||
<ul>
|
<ul>
|
||||||
<li>toFixed()</li>
|
<li>toFixed()</li>
|
||||||
<li>toPrecision()</li>
|
<li>toPrecision()</li>
|
||||||
</ul>
|
</ul>
|
||||||
</ol>
|
</ol>
|
||||||
<p>Answers:</p>
|
<p>Answers:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>toFixed() returns x but at a fixed number of decimal places, defined by y</li>
|
<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
|
<li>toPrecision() returns x but at a fixed number of significant digits. This means it may round deicimal places
|
||||||
before dropping them.</li>
|
before dropping them.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2>JavaScript Global Functions</h2>
|
<h2>JavaScript Global Functions</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Describe the operation and the return for the following global functions:</li>
|
<li>Describe the operation and the return for the following global functions:</li>
|
||||||
<ul>
|
<ul>
|
||||||
<li>parseInt(number)</li>
|
<li>parseInt(number)</li>
|
||||||
<li>parseFloat(number)</li>
|
<li>parseFloat(number)</li>
|
||||||
</ul>
|
</ul>
|
||||||
</ol>
|
</ol>
|
||||||
<p>Answers:</p>
|
<p>Answers:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>parseInt(number) takes a string as input and returns the first integer in the string. Can also accept a
|
<li>parseInt(number) takes a string as input and returns the first integer in the string. Can also accept a
|
||||||
radix option</li>
|
radix option</li>
|
||||||
<li>parseFloat(number) takes a string as input and returns the first float value in the string.</li>
|
<li>parseFloat(number) takes a string as input and returns the first float value in the string.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2>JavaScript String Methods</h2>
|
<h2>JavaScript String Methods</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Describe the operation and the return for the following String methods.</li>
|
<li>Describe the operation and the return for the following String methods.</li>
|
||||||
<ul>
|
<ul>
|
||||||
<li>length</li>
|
<li>length</li>
|
||||||
<li>toLowerCase()</li>
|
<li>toLowerCase()</li>
|
||||||
<li>toUpperCase()</li>
|
<li>toUpperCase()</li>
|
||||||
<li>charAt()</li>
|
<li>charAt()</li>
|
||||||
</ul>
|
</ul>
|
||||||
</ol>
|
</ol>
|
||||||
<p>Answers:</p>
|
<p>Answers:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>length gets the character count of a string including spaces</li>
|
<li>length gets the character count of a string including spaces</li>
|
||||||
<li>toLowerCase() turns all uppercase letters to lowercase letters</li>
|
<li>toLowerCase() turns all uppercase letters to lowercase letters</li>
|
||||||
<li>toUpperCase() turns all lowercase letters to uppercase 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>chatAt() takes a number for the index of the word to search through and returns the character at that index.
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>Playground</h2>
|
<h2>Playground</h2>
|
||||||
<p>Interactive JavaScript follows</p>
|
<p>Interactive JavaScript follows</p>
|
||||||
|
|
||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,190 +1,190 @@
|
|||||||
// for (var i = 1; i < 10; i++) {
|
// for (var i = 1; i < 10; i++) {
|
||||||
// console.log("Ran " + i + " time(s).")
|
// console.log("Ran " + i + " time(s).")
|
||||||
// };
|
// };
|
||||||
|
|
||||||
// console.log(window.confirm("Feel prepared?")); // true or false
|
// console.log(window.confirm("Feel prepared?")); // true or false
|
||||||
|
|
||||||
// var question = ("50" === 50);
|
// var question = ("50" === 50);
|
||||||
// console.log(question);
|
// console.log(question);
|
||||||
|
|
||||||
// var question2 = (true && false);
|
// var question2 = (true && false);
|
||||||
// console.log(question2);
|
// console.log(question2);
|
||||||
|
|
||||||
// var question3 = (true || false);
|
// var question3 = (true || false);
|
||||||
// console.log(question3);
|
// console.log(question3);
|
||||||
|
|
||||||
// // VAR price = 35.6; <-- WRONG
|
// // VAR price = 35.6; <-- WRONG
|
||||||
// var price = 35.6; // <-- RIGHT
|
// var price = 35.6; // <-- RIGHT
|
||||||
|
|
||||||
// var city = "London";
|
// var city = "London";
|
||||||
|
|
||||||
// if (city.toLowerCase() === "london") {
|
// if (city.toLowerCase() === "london") {
|
||||||
// console.log("I live there too!");
|
// console.log("I live there too!");
|
||||||
// } else {
|
// } else {
|
||||||
// console.log("I dont know where that is.")
|
// console.log("I dont know where that is.")
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// var userName = window.prompt("Please enter your name:");
|
// var userName = window.prompt("Please enter your name:");
|
||||||
// greetUser(userName);
|
// greetUser(userName);
|
||||||
|
|
||||||
// var radius = window.prompt("Please enter circle radius:");
|
// var radius = window.prompt("Please enter circle radius:");
|
||||||
// calcCirc(radius);
|
// calcCirc(radius);
|
||||||
|
|
||||||
// var testNum = window.prompt("Number to test for even:");
|
// var testNum = window.prompt("Number to test for even:");
|
||||||
// isEven(testNum);
|
// isEven(testNum);
|
||||||
|
|
||||||
// function greetUser(userName) {
|
// function greetUser(userName) {
|
||||||
// alert("Hello " + userName + " welcome to the page");
|
// alert("Hello " + userName + " welcome to the page");
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// function calcCirc(radius) {
|
// function calcCirc(radius) {
|
||||||
// var Circ = ((2 * Math.PI) * radius).toFixed(2);
|
// var Circ = ((2 * Math.PI) * radius).toFixed(2);
|
||||||
// alert("Circumference is: " + Circ + " Inches.");
|
// alert("Circumference is: " + Circ + " Inches.");
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// function isEven(number) {
|
// function isEven(number) {
|
||||||
// if (number % 2 == 0) {
|
// if (number % 2 == 0) {
|
||||||
// console.log(number + " is even");
|
// console.log(number + " is even");
|
||||||
// } else {
|
// } else {
|
||||||
// console.log(number + " is odd");
|
// console.log(number + " is odd");
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// NUMBER GUESSING GAME
|
// NUMBER GUESSING GAME
|
||||||
// var randomNum = Math.floor((Math.random() * 100) + 1);
|
// var randomNum = Math.floor((Math.random() * 100) + 1);
|
||||||
// console.log("Random Number: " + randomNum);
|
// console.log("Random Number: " + randomNum);
|
||||||
|
|
||||||
// var userGuess;
|
// var userGuess;
|
||||||
// do {
|
// do {
|
||||||
// var input = window.prompt("Guess a number from 1-100: ");
|
// var input = window.prompt("Guess a number from 1-100: ");
|
||||||
// if (input === null) {
|
// if (input === null) {
|
||||||
// window.alert("Game cancelled.");
|
// window.alert("Game cancelled.");
|
||||||
// break;
|
// break;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// userGuess = parseInt(input, 10);
|
// userGuess = parseInt(input, 10);
|
||||||
// if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
|
// if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
|
||||||
// window.alert("Please enter a valid number between 1 and 100.");
|
// window.alert("Please enter a valid number between 1 and 100.");
|
||||||
// } else if (userGuess !== randomNum) {
|
// } else if (userGuess !== randomNum) {
|
||||||
// window.alert("Incorrect number, try again!");
|
// window.alert("Incorrect number, try again!");
|
||||||
// }
|
// }
|
||||||
// } while (userGuess !== randomNum);
|
// } while (userGuess !== randomNum);
|
||||||
|
|
||||||
// if (userGuess === randomNum) {
|
// if (userGuess === randomNum) {
|
||||||
// window.alert("You guessed the right number! The number was " + randomNum);
|
// window.alert("You guessed the right number! The number was " + randomNum);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// ROCK PAPER SCISSORS GAME
|
// ROCK PAPER SCISSORS GAME
|
||||||
// var choices = ["rock", "paper", "scissors"];
|
// var choices = ["rock", "paper", "scissors"];
|
||||||
// var compChoice = choices[Math.floor(Math.random() * 3)];
|
// var compChoice = choices[Math.floor(Math.random() * 3)];
|
||||||
// console.log("Computer choice: " + compChoice);
|
// console.log("Computer choice: " + compChoice);
|
||||||
|
|
||||||
// var userChoice = window.prompt("Enter rock, paper or scissors: ").toLowerCase();
|
// var userChoice = window.prompt("Enter rock, paper or scissors: ").toLowerCase();
|
||||||
// console.log("User choice: " + userChoice);
|
// console.log("User choice: " + userChoice);
|
||||||
|
|
||||||
// if (!choices.includes(userChoice)) {
|
// if (!choices.includes(userChoice)) {
|
||||||
// window.alert("Invalid choice!");
|
// window.alert("Invalid choice!");
|
||||||
// } else if (userChoice === compChoice) {
|
// } else if (userChoice === compChoice) {
|
||||||
// window.alert("It's a tie!");
|
// window.alert("It's a tie!");
|
||||||
// } else {
|
// } else {
|
||||||
// var winsAgainst = {
|
// var winsAgainst = {
|
||||||
// rock: "scissors",
|
// rock: "scissors",
|
||||||
// paper: "rock",
|
// paper: "rock",
|
||||||
// scissors: "paper"
|
// scissors: "paper"
|
||||||
// };
|
// };
|
||||||
|
|
||||||
// if (winsAgainst[userChoice] === compChoice) {
|
// if (winsAgainst[userChoice] === compChoice) {
|
||||||
// window.alert("You win!");
|
// window.alert("You win!");
|
||||||
// } else {
|
// } else {
|
||||||
// window.alert("Computer wins!");
|
// window.alert("Computer wins!");
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// SAMPLE BANK ACCOUNT
|
// SAMPLE BANK ACCOUNT
|
||||||
// var bankBalance = 0;
|
// var bankBalance = 0;
|
||||||
// console.log("Bank balance: $" + bankBalance);
|
// console.log("Bank balance: $" + bankBalance);
|
||||||
|
|
||||||
// function getAmount(message) {
|
// function getAmount(message) {
|
||||||
// var input = window.prompt(message);
|
// var input = window.prompt(message);
|
||||||
// if (input === null) return null;
|
// if (input === null) return null;
|
||||||
// var amount = parseInt(input, 10);
|
// var amount = parseInt(input, 10);
|
||||||
// if (isNaN(amount)) {
|
// if (isNaN(amount)) {
|
||||||
// window.alert("Please enter a valid number.");
|
// window.alert("Please enter a valid number.");
|
||||||
// return null;
|
// return null;
|
||||||
// }
|
// }
|
||||||
// return amount;
|
// return amount;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// while (true) {
|
// while (true) {
|
||||||
// var userChoice = window.prompt(
|
// var userChoice = window.prompt(
|
||||||
// "Welcome! Your bank balance is: $" + bankBalance +
|
// "Welcome! Your bank balance is: $" + bankBalance +
|
||||||
// ". Would you like to (w)ithdraw, (d)eposit or (v)iew balance, or (q)uit?");
|
// ". Would you like to (w)ithdraw, (d)eposit or (v)iew balance, or (q)uit?");
|
||||||
// if (userChoice === null || userChoice.toLowerCase() === "q") break;
|
// if (userChoice === null || userChoice.toLowerCase() === "q") break;
|
||||||
// userChoice = userChoice.toLowerCase();
|
// userChoice = userChoice.toLowerCase();
|
||||||
// console.log(userChoice);
|
// console.log(userChoice);
|
||||||
|
|
||||||
// if (userChoice === "w" || userChoice === "withdrawl") {
|
// if (userChoice === "w" || userChoice === "withdrawl") {
|
||||||
// var widthdrawlAmount = getAmount("How much would you like to widthdraw?");
|
// var widthdrawlAmount = getAmount("How much would you like to widthdraw?");
|
||||||
// if (widthdrawlAmount === null) continue;
|
// if (widthdrawlAmount === null) continue;
|
||||||
// if (widthdrawlAmount > bankBalance) {
|
// if (widthdrawlAmount > bankBalance) {
|
||||||
// window.alert("Not enough in balance to widthdraw, sorry!");
|
// window.alert("Not enough in balance to widthdraw, sorry!");
|
||||||
// } else if (widthdrawlAmount <= 0) {
|
// } else if (widthdrawlAmount <= 0) {
|
||||||
// window.alert("Cannot widthdraw negative or 0 dollars.");
|
// window.alert("Cannot widthdraw negative or 0 dollars.");
|
||||||
// } else {
|
// } else {
|
||||||
// bankBalance -= widthdrawlAmount;
|
// bankBalance -= widthdrawlAmount;
|
||||||
// console.log("Bank balance: $" + bankBalance);
|
// console.log("Bank balance: $" + bankBalance);
|
||||||
// }
|
// }
|
||||||
// } else if (userChoice === "d" || userChoice === "deposit") {
|
// } else if (userChoice === "d" || userChoice === "deposit") {
|
||||||
// var depositAmount = getAmount("How much would you like to deposit?");
|
// var depositAmount = getAmount("How much would you like to deposit?");
|
||||||
// if (depositAmount === null) continue;
|
// if (depositAmount === null) continue;
|
||||||
// if (depositAmount <= 0) {
|
// if (depositAmount <= 0) {
|
||||||
// window.alert("Cannot deposit negative or 0 dollars.");
|
// window.alert("Cannot deposit negative or 0 dollars.");
|
||||||
// } else {
|
// } else {
|
||||||
// bankBalance += depositAmount;
|
// bankBalance += depositAmount;
|
||||||
// console.log("Bank balance: $" + bankBalance);
|
// console.log("Bank balance: $" + bankBalance);
|
||||||
// }
|
// }
|
||||||
// } else if (userChoice === "v" || userChoice === "view") {
|
// } else if (userChoice === "v" || userChoice === "view") {
|
||||||
// window.alert("Your balance is: $" + bankBalance + " dollars. Thank you for banking with us!");
|
// window.alert("Your balance is: $" + bankBalance + " dollars. Thank you for banking with us!");
|
||||||
// console.log("Bank balance: $" + bankBalance);
|
// console.log("Bank balance: $" + bankBalance);
|
||||||
// } else {
|
// } else {
|
||||||
// window.alert("Invalid choice, please try again");
|
// window.alert("Invalid choice, please try again");
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// ARRAY STATS CALCULATOR
|
// ARRAY STATS CALCULATOR
|
||||||
// var stats = [];
|
// var stats = [];
|
||||||
// var sum = 0;
|
// var sum = 0;
|
||||||
|
|
||||||
// for (var i = 0; i < 50; i++) {
|
// for (var i = 0; i < 50; i++) {
|
||||||
// var randomNum = Math.floor(Math.random() * 50);
|
// var randomNum = Math.floor(Math.random() * 50);
|
||||||
// sum += randomNum;
|
// sum += randomNum;
|
||||||
// stats.push(randomNum);
|
// stats.push(randomNum);
|
||||||
// console.log(randomNum);
|
// console.log(randomNum);
|
||||||
// }
|
// }
|
||||||
// console.log(stats);
|
// console.log(stats);
|
||||||
|
|
||||||
// console.log("Sum of stats: " + sum);
|
// console.log("Sum of stats: " + sum);
|
||||||
// console.log("Average of stats: " + (sum / stats.length));
|
// console.log("Average of stats: " + (sum / stats.length));
|
||||||
// console.log("Min of stats: " + Math.min(...stats));
|
// console.log("Min of stats: " + Math.min(...stats));
|
||||||
// console.log("Max of stats: " + Math.max(...stats));
|
// console.log("Max of stats: " + Math.max(...stats));
|
||||||
|
|
||||||
// PASSWORD STRENGTH CHECKER
|
// PASSWORD STRENGTH CHECKER
|
||||||
var userPass = window.prompt("Enter a password to test: ");
|
var userPass = window.prompt("Enter a password to test: ");
|
||||||
var charCount, numCount, symCount;
|
var charCount, numCount, symCount;
|
||||||
|
|
||||||
charCount = userPass.length;
|
charCount = userPass.length;
|
||||||
console.log(charCount);
|
console.log(charCount);
|
||||||
|
|
||||||
numCount = (userPass.match(/\d/g) || []).length;
|
numCount = (userPass.match(/\d/g) || []).length;
|
||||||
console.log(numCount);
|
console.log(numCount);
|
||||||
|
|
||||||
symCount = (userPass.match(/[^a-zA-Z0-9]/g) || []).length;
|
symCount = (userPass.match(/[^a-zA-Z0-9]/g) || []).length;
|
||||||
console.log(symCount);
|
console.log(symCount);
|
||||||
|
|
||||||
if (charCount >= 10 && numCount >= 3 && symCount >= 1) {
|
if (charCount >= 10 && numCount >= 3 && symCount >= 1) {
|
||||||
window.alert("Your password is STRONG");
|
window.alert("Your password is STRONG");
|
||||||
} else if (charCount >= 10 && numCount >= 1) {
|
} else if (charCount >= 10 && numCount >= 1) {
|
||||||
window.alert("Your password is OKAY");
|
window.alert("Your password is OKAY");
|
||||||
} else {
|
} else {
|
||||||
window.alert("Your password is WEAK");
|
window.alert("Your password is WEAK");
|
||||||
}
|
}
|
||||||
@@ -1,34 +1,34 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Week 1 Class 1</title>
|
<title>Week 1 Class 1</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Javascript test</h1>
|
<h1>Javascript test</h1>
|
||||||
<script>
|
<script>
|
||||||
document.write("Hello Class, Welcome to JavaScript <br>");
|
document.write("Hello Class, Welcome to JavaScript <br>");
|
||||||
document.write("I love JavaScript");
|
document.write("I love JavaScript");
|
||||||
|
|
||||||
document.write("Hello Class, Welcome to JavaScript")
|
document.write("Hello Class, Welcome to JavaScript")
|
||||||
document.write("<br>");
|
document.write("<br>");
|
||||||
document.write("I love JavaScript <br>");
|
document.write("I love JavaScript <br>");
|
||||||
|
|
||||||
window.alert("ALERT ALERT ALERT ALERT");
|
window.alert("ALERT ALERT ALERT ALERT");
|
||||||
window.confirm("CONFIRM PLEASE CONFIRM PLEASE");
|
window.confirm("CONFIRM PLEASE CONFIRM PLEASE");
|
||||||
window.prompt("PROMPT HERE PROMPT HERE");
|
window.prompt("PROMPT HERE PROMPT HERE");
|
||||||
</script>
|
</script>
|
||||||
<button type="submit" id="testButton" onclick="testButton()">
|
<button type="submit" id="testButton" onclick="testButton()">
|
||||||
<p>Press me!</p>
|
<p>Press me!</p>
|
||||||
</button>
|
</button>
|
||||||
<p id="buttonLabel">Button pressed!</p>
|
<p id="buttonLabel">Button pressed!</p>
|
||||||
<hr>
|
<hr>
|
||||||
<h2>Form example</h2>
|
<h2>Form example</h2>
|
||||||
<input type="text" id="firstName" placeholder="First name">
|
<input type="text" id="firstName" placeholder="First name">
|
||||||
<input type="text" id="lastName" placeholder="Last name">
|
<input type="text" id="lastName" placeholder="Last name">
|
||||||
<input type="email" id="email" placeholder="Email">
|
<input type="email" id="email" placeholder="Email">
|
||||||
<input type="text" id="phone" placeholder="Phone number">
|
<input type="text" id="phone" placeholder="Phone number">
|
||||||
<p id="formLabel">You entered: </p>
|
<p id="formLabel">You entered: </p>
|
||||||
<button type="submit" id="repeatButton" onclick="repeatInfo()">Repeat Info</button>
|
<button type="submit" id="repeatButton" onclick="repeatInfo()">Repeat Info</button>
|
||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,19 +1,19 @@
|
|||||||
document.getElementById("buttonLabel").style.display = "none";
|
document.getElementById("buttonLabel").style.display = "none";
|
||||||
|
|
||||||
function testButton() {
|
function testButton() {
|
||||||
const buttonLabel = document.getElementById("buttonLabel");
|
const buttonLabel = document.getElementById("buttonLabel");
|
||||||
if (buttonLabel.style.display === "block") {
|
if (buttonLabel.style.display === "block") {
|
||||||
buttonLabel.style.display = "none";
|
buttonLabel.style.display = "none";
|
||||||
} else {
|
} else {
|
||||||
buttonLabel.style.display = "block";
|
buttonLabel.style.display = "block";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function repeatInfo() {
|
function repeatInfo() {
|
||||||
const formLabel = document.getElementById("formLabel");
|
const formLabel = document.getElementById("formLabel");
|
||||||
const firstName = document.getElementById("firstName").value;
|
const firstName = document.getElementById("firstName").value;
|
||||||
const lastName = document.getElementById("lastName").value;
|
const lastName = document.getElementById("lastName").value;
|
||||||
const email = document.getElementById("email").value;
|
const email = document.getElementById("email").value;
|
||||||
const phone = Number(document.getElementById("phone").value);
|
const phone = Number(document.getElementById("phone").value);
|
||||||
formLabel.innerHTML += `${firstName} ${lastName}, ${email}, ${phone}`
|
formLabel.innerHTML += `${firstName} ${lastName}, ${email}, ${phone}`
|
||||||
}
|
}
|
||||||
@@ -1,18 +1,18 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Week 3 Class 1</title>
|
<title>Week 3 Class 1</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Week 3 Class 1</h1>
|
<h1>Week 3 Class 1</h1>
|
||||||
<p>Enter some details</p>
|
<p>Enter some details</p>
|
||||||
<input id="firstNameBox" type="text" placeholder="First Name">
|
<input id="firstNameBox" type="text" placeholder="First Name">
|
||||||
<input id="lastNameBox" type="text" placeholder="Last Name">
|
<input id="lastNameBox" type="text" placeholder="Last Name">
|
||||||
<input id="ageBox" type="number" placeholder="Age">
|
<input id="ageBox" type="number" placeholder="Age">
|
||||||
<input id="passwordBox" type="password" placeholder="Password">
|
<input id="passwordBox" type="password" placeholder="Password">
|
||||||
<button type="submit" onclick="showDetails()">Submit</button>
|
<button type="submit" onclick="showDetails()">Submit</button>
|
||||||
<p id="detailsLabel">Entered Details: </p>
|
<p id="detailsLabel">Entered Details: </p>
|
||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
function showDetails() {
|
function showDetails() {
|
||||||
var firstName = document.getElementById("firstNameBox").value;
|
var firstName = document.getElementById("firstNameBox").value;
|
||||||
var lastName = document.getElementById("lastNameBox").value;
|
var lastName = document.getElementById("lastNameBox").value;
|
||||||
var age = Number(document.getElementById("ageBox").value);
|
var age = Number(document.getElementById("ageBox").value);
|
||||||
var password = document.getElementById("passwordBox").value;
|
var password = document.getElementById("passwordBox").value;
|
||||||
console.log(`You entered: ${firstName}, ${lastName}, ${age}, ${password}`);
|
console.log(`You entered: ${firstName}, ${lastName}, ${age}, ${password}`);
|
||||||
document.getElementById("detailsLabel").innerHTML += `${firstName}, ${lastName}, ${age}, ${password}`;
|
document.getElementById("detailsLabel").innerHTML += `${firstName}, ${lastName}, ${age}, ${password}`;
|
||||||
|
|
||||||
console.log(10 + 10);
|
console.log(10 + 10);
|
||||||
console.log(10 * 10);
|
console.log(10 * 10);
|
||||||
console.log(10 - 3);
|
console.log(10 - 3);
|
||||||
console.log(100 / 25);
|
console.log(100 / 25);
|
||||||
console.log(100 % 3);
|
console.log(100 % 3);
|
||||||
}
|
}
|
||||||
@@ -1,11 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Week 8 JS Object Practice</title>
|
<title>Week 8 JS Object Practice</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Week 8 JS Object Practice</h1>
|
<h1>Week 8 JS Object Practice</h1>
|
||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,63 +1,63 @@
|
|||||||
// Question 1
|
// Question 1
|
||||||
function person(firstName, lastName, age, city) {
|
function person(firstName, lastName, age, city) {
|
||||||
return {
|
return {
|
||||||
firstName: firstName,
|
firstName: firstName,
|
||||||
lastName: lastName,
|
lastName: lastName,
|
||||||
age: age,
|
age: age,
|
||||||
city: city
|
city: city
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
var testPerson = person("Levi", "McLean", 20, "Woodstock");
|
var testPerson = person("Levi", "McLean", 20, "Woodstock");
|
||||||
console.log(testPerson.firstName);
|
console.log(testPerson.firstName);
|
||||||
console.log(testPerson.lastName);
|
console.log(testPerson.lastName);
|
||||||
console.log(testPerson.age);
|
console.log(testPerson.age);
|
||||||
console.log(testPerson.city);
|
console.log(testPerson.city);
|
||||||
|
|
||||||
// Question 2
|
// Question 2
|
||||||
function book(title, author, pages) {
|
function book(title, author, pages) {
|
||||||
return {
|
return {
|
||||||
title: title,
|
title: title,
|
||||||
author: author,
|
author: author,
|
||||||
pages: pages
|
pages: pages
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
var testBook = book("1984", "George Orwell", 386);
|
var testBook = book("1984", "George Orwell", 386);
|
||||||
console.log(testBook.title);
|
console.log(testBook.title);
|
||||||
console.log(testBook.author);
|
console.log(testBook.author);
|
||||||
console.log(testBook.pages);
|
console.log(testBook.pages);
|
||||||
console.log("Update pages to 555");
|
console.log("Update pages to 555");
|
||||||
testBook.pages = 555;
|
testBook.pages = 555;
|
||||||
console.log(testBook.pages);
|
console.log(testBook.pages);
|
||||||
|
|
||||||
// Question 3
|
// Question 3
|
||||||
function movie(name, year, rating) {
|
function movie(name, year, rating) {
|
||||||
return {
|
return {
|
||||||
name: name,
|
name: name,
|
||||||
year: year,
|
year: year,
|
||||||
rating: rating
|
rating: rating
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
var testMovie = movie("Kill Bill", 2003, 9.5);
|
var testMovie = movie("Kill Bill", 2003, 9.5);
|
||||||
console.log(testMovie.name);
|
console.log(testMovie.name);
|
||||||
console.log(testMovie.year);
|
console.log(testMovie.year);
|
||||||
console.log(testMovie.rating);
|
console.log(testMovie.rating);
|
||||||
console.log("Adding new property director");
|
console.log("Adding new property director");
|
||||||
testMovie.director = "Quentin Tarantino";
|
testMovie.director = "Quentin Tarantino";
|
||||||
console.log(testMovie.director);
|
console.log(testMovie.director);
|
||||||
|
|
||||||
// Question 4
|
// Question 4
|
||||||
const playlist = {
|
const playlist = {
|
||||||
name: "Cool Jams",
|
name: "Cool Jams",
|
||||||
songs: ["Rap song", "Metal song", "Pop song"]
|
songs: ["Rap song", "Metal song", "Pop song"]
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log(playlist.songs);
|
console.log(playlist.songs);
|
||||||
console.log("First Song");
|
console.log("First Song");
|
||||||
console.log(playlist.songs[0]);
|
console.log(playlist.songs[0]);
|
||||||
console.log("Last Song");
|
console.log("Last Song");
|
||||||
console.log(playlist.songs[playlist.songs.length - 1]); // Always get last entry
|
console.log(playlist.songs[playlist.songs.length - 1]); // Always get last entry
|
||||||
|
|
||||||
// Question 5
|
// Question 5
|
||||||
|
|||||||
@@ -1,116 +1,116 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Flowery Flower Shop</title>
|
<title>Flowery Flower Shop</title>
|
||||||
<meta charset="utf-8" lang="en">
|
<meta charset="utf-8" lang="en">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Flowery Flower Shop</h1>
|
<h1>Flowery Flower Shop</h1>
|
||||||
<small>Browse our flowers below...</small>
|
<small>Browse our flowers below...</small>
|
||||||
|
|
||||||
<h2>Available flowers</h2>
|
<h2>Available flowers</h2>
|
||||||
<section id="catalog">
|
<section id="catalog">
|
||||||
<article id="rose">
|
<article id="rose">
|
||||||
<h3>Rose</h3>
|
<h3>Rose</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Price:</li>
|
<li>Price:</li>
|
||||||
<li>Category:</li>
|
<li>Category:</li>
|
||||||
<li>Stock:</li>
|
<li>Stock:</li>
|
||||||
<li>Description:</li>
|
<li>Description:</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="add-to-cart">
|
<form class="add-to-cart">
|
||||||
<label>Quantity: <input type="number" name="quantity" min="1" value="1" required></label>
|
<label>Quantity: <input type="number" name="quantity" min="1" value="1" required></label>
|
||||||
<button type="submit">Add to Cart</button>
|
<button type="submit">Add to Cart</button>
|
||||||
</form>
|
</form>
|
||||||
</article>
|
</article>
|
||||||
<article id="tulip">
|
<article id="tulip">
|
||||||
<h3>Tulip</h3>
|
<h3>Tulip</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Price:</li>
|
<li>Price:</li>
|
||||||
<li>Category:</li>
|
<li>Category:</li>
|
||||||
<li>Stock:</li>
|
<li>Stock:</li>
|
||||||
<li>Description:</li>
|
<li>Description:</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="add-to-cart">
|
<form class="add-to-cart">
|
||||||
<label>Quantity: <input type="number" name="quantity" min="1" value="1" required></label>
|
<label>Quantity: <input type="number" name="quantity" min="1" value="1" required></label>
|
||||||
<button type="submit">Add to Cart</button>
|
<button type="submit">Add to Cart</button>
|
||||||
</form>
|
</form>
|
||||||
</article>
|
</article>
|
||||||
<article id="sunflower">
|
<article id="sunflower">
|
||||||
<h3>Sunflower</h3>
|
<h3>Sunflower</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Price:</li>
|
<li>Price:</li>
|
||||||
<li>Category:</li>
|
<li>Category:</li>
|
||||||
<li>Stock:</li>
|
<li>Stock:</li>
|
||||||
<li>Description:</li>
|
<li>Description:</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="add-to-cart">
|
<form class="add-to-cart">
|
||||||
<label>Quantity: <input type="number" name="quantity" min="1" value="1" required></label>
|
<label>Quantity: <input type="number" name="quantity" min="1" value="1" required></label>
|
||||||
<button type="submit">Add to Cart</button>
|
<button type="submit">Add to Cart</button>
|
||||||
</form>
|
</form>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<h2>Shopping Cart</h2>
|
<h2>Shopping Cart</h2>
|
||||||
<section id="cart">
|
<section id="cart">
|
||||||
<table id="cart-table">
|
<table id="cart-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Flower</th>
|
<th>Flower</th>
|
||||||
<th>Price</th>
|
<th>Price</th>
|
||||||
<th>Quantity</th>
|
<th>Quantity</th>
|
||||||
<th>Subtotal</th>
|
<th>Subtotal</th>
|
||||||
<th>Remove</th>
|
<th>Remove</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div id="cart-total">
|
<div id="cart-total">
|
||||||
<p>Subtotal: $<span id="subtotal">0.00</span></p>
|
<p>Subtotal: $<span id="subtotal">0.00</span></p>
|
||||||
<p>Tax: $<span id="tax">0.00</span></p>
|
<p>Tax: $<span id="tax">0.00</span></p>
|
||||||
<strong>Total: $<span id="total">0.00</span></strong>
|
<strong>Total: $<span id="total">0.00</span></strong>
|
||||||
</div>
|
</div>
|
||||||
<button id="checkout-button">Checkout</button>
|
<button id="checkout-button">Checkout</button>
|
||||||
<div id="checkout-message"></div>
|
<div id="checkout-message"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<h2>Testimonials and Feedback</h2>
|
<h2>Testimonials and Feedback</h2>
|
||||||
<section id="feedback">
|
<section id="feedback">
|
||||||
<form id="feedback-form">
|
<form id="feedback-form">
|
||||||
<label>
|
<label>
|
||||||
Flower:
|
Flower:
|
||||||
<select name="flower" required>
|
<select name="flower" required>
|
||||||
<option value="">Select a flower to rate</option>
|
<option value="">Select a flower to rate</option>
|
||||||
<option value="Rose">Red Rose</option>
|
<option value="Rose">Red Rose</option>
|
||||||
<option value="Tulip">Tulip</option>
|
<option value="Tulip">Tulip</option>
|
||||||
<option value="Sunflower">Sunflower</option>
|
<option value="Sunflower">Sunflower</option>
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
Rating:
|
Rating:
|
||||||
<select name="rating" required>
|
<select name="rating" required>
|
||||||
<option value="">Rate</option>
|
<option value="">Rate</option>
|
||||||
<option value="5">5 - Excellent</option>
|
<option value="5">5 - Excellent</option>
|
||||||
<option value="4">4 - Good</option>
|
<option value="4">4 - Good</option>
|
||||||
<option value="3">3 - Average</option>
|
<option value="3">3 - Average</option>
|
||||||
<option value="2">2 - Poor</option>
|
<option value="2">2 - Poor</option>
|
||||||
<option value="1">1 - Terrible</option>
|
<option value="1">1 - Terrible</option>
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
Feedback:
|
Feedback:
|
||||||
<input type="text" name="content" maxlength="120" placeholder="Your feedback" required>
|
<input type="text" name="content" maxlength="120" placeholder="Your feedback" required>
|
||||||
</label>
|
</label>
|
||||||
<button type="submit">Submit Feedback</button>
|
<button type="submit">Submit Feedback</button>
|
||||||
</form>
|
</form>
|
||||||
<div id="feedback-list">
|
<div id="feedback-list">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,184 +1,184 @@
|
|||||||
// Object called flowers that contains 3 flower objects with their information
|
// Object called flowers that contains 3 flower objects with their information
|
||||||
const flowers = {
|
const flowers = {
|
||||||
"rose": {
|
"rose": {
|
||||||
name: "Rose",
|
name: "Rose",
|
||||||
price: 2.5,
|
price: 2.5,
|
||||||
category: "Romance",
|
category: "Romance",
|
||||||
stock: 20,
|
stock: 20,
|
||||||
description: "The classic red rose for that someone special."
|
description: "The classic red rose for that someone special."
|
||||||
},
|
},
|
||||||
"tulip": {
|
"tulip": {
|
||||||
name: "Tulip",
|
name: "Tulip",
|
||||||
price: 3.0,
|
price: 3.0,
|
||||||
category: "Springtime",
|
category: "Springtime",
|
||||||
stock: 15,
|
stock: 15,
|
||||||
description: "A perfect spring time flower for a bouquet."
|
description: "A perfect spring time flower for a bouquet."
|
||||||
},
|
},
|
||||||
"sunflower": {
|
"sunflower": {
|
||||||
name: "Sunflower",
|
name: "Sunflower",
|
||||||
price: 5.0,
|
price: 5.0,
|
||||||
category: "Exclusives",
|
category: "Exclusives",
|
||||||
stock: 10,
|
stock: 10,
|
||||||
description: "Large iconic flower perfect for an Autumn garden."
|
description: "Large iconic flower perfect for an Autumn garden."
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let feedback = [
|
let feedback = [
|
||||||
{flower: "Rose", rating: 5, content: "A beautiful bouqet delivered on time with care!"},
|
{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: "Tulip", rating: 4, content: "Reminds me of Spring any time of year!"},
|
||||||
{flower: "Sunflower", rating: 5, content: "Sunflower was tall and healthy, so elegant!"}
|
{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 to add flower information (price, stock, description, category) to HTML catalog
|
||||||
function populateCatalog() {
|
function populateCatalog() {
|
||||||
Object.values(flowers).forEach(flower => {
|
Object.values(flowers).forEach(flower => {
|
||||||
const article = document.getElementById(`${flower.name.toLowerCase()}`)
|
const article = document.getElementById(`${flower.name.toLowerCase()}`)
|
||||||
if (article) {
|
if (article) {
|
||||||
const listItems = article.querySelectorAll("ul li");
|
const listItems = article.querySelectorAll("ul li");
|
||||||
listItems[0].textContent = `Price: $${flower.price.toFixed(2)}`;
|
listItems[0].textContent = `Price: $${flower.price.toFixed(2)}`;
|
||||||
listItems[1].textContent = `Category: ${flower.category}`;
|
listItems[1].textContent = `Category: ${flower.category}`;
|
||||||
listItems[2].textContent = `Stock: ${flower.stock}`;
|
listItems[2].textContent = `Stock: ${flower.stock}`;
|
||||||
listItems[3].textContent = `Description: ${flower.description}`;
|
listItems[3].textContent = `Description: ${flower.description}`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to update items inside cart, used by addToCart() and at initialization
|
// Function to update items inside cart, used by addToCart() and at initialization
|
||||||
function updateCartDisplay() {
|
function updateCartDisplay() {
|
||||||
const tbody = document.querySelector("#cart-table tbody");
|
const tbody = document.querySelector("#cart-table tbody");
|
||||||
tbody.innerHTML = "";
|
tbody.innerHTML = "";
|
||||||
let subtotal = 0;
|
let subtotal = 0;
|
||||||
cart.forEach((item, idx) => {
|
cart.forEach((item, idx) => {
|
||||||
const row = document.createElement("tr");
|
const row = document.createElement("tr");
|
||||||
row.innerHTML = `
|
row.innerHTML = `
|
||||||
<td>${flowers[item.name].name}</td>
|
<td>${flowers[item.name].name}</td>
|
||||||
<td>$${item.price.toFixed(2)}</td>
|
<td>$${item.price.toFixed(2)}</td>
|
||||||
<td>${item.quantity}</td>
|
<td>${item.quantity}</td>
|
||||||
<td>${(item.price * item.quantity).toFixed(2)}</td>
|
<td>${(item.price * item.quantity).toFixed(2)}</td>
|
||||||
<td><button data-idx="${idx}" class="remove-button">Remove</button></td>
|
<td><button data-idx="${idx}" class="remove-button">Remove</button></td>
|
||||||
`
|
`
|
||||||
tbody.appendChild(row);
|
tbody.appendChild(row);
|
||||||
subtotal += item.price * item.quantity;
|
subtotal += item.price * item.quantity;
|
||||||
});
|
});
|
||||||
|
|
||||||
const tax = subtotal * 0.13;
|
const tax = subtotal * 0.13;
|
||||||
const total = subtotal + tax;
|
const total = subtotal + tax;
|
||||||
|
|
||||||
document.getElementById("subtotal").textContent = subtotal.toFixed(2);
|
document.getElementById("subtotal").textContent = subtotal.toFixed(2);
|
||||||
document.getElementById("tax").textContent = tax.toFixed(2);
|
document.getElementById("tax").textContent = tax.toFixed(2);
|
||||||
document.getElementById("total").textContent = total.toFixed(2);
|
document.getElementById("total").textContent = total.toFixed(2);
|
||||||
|
|
||||||
document.querySelectorAll(".remove-button").forEach(btn => {
|
document.querySelectorAll(".remove-button").forEach(btn => {
|
||||||
btn.addEventListener("click", function() {
|
btn.addEventListener("click", function() {
|
||||||
const idx = Number(btn.getAttribute("data-idx"));
|
const idx = Number(btn.getAttribute("data-idx"));
|
||||||
const item = cart[idx];
|
const item = cart[idx];
|
||||||
flowers[item.name].stock += item.quantity;
|
flowers[item.name].stock += item.quantity;
|
||||||
cart.splice(idx,1);
|
cart.splice(idx,1);
|
||||||
updateCartDisplay();
|
updateCartDisplay();
|
||||||
populateCatalog();
|
populateCatalog();
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to handle getting the correct flower name and quantity to add to cart
|
// Function to handle getting the correct flower name and quantity to add to cart
|
||||||
function setupCartForms() {
|
function setupCartForms() {
|
||||||
document.querySelectorAll(".add-to-cart").forEach(form => {
|
document.querySelectorAll(".add-to-cart").forEach(form => {
|
||||||
form.addEventListener("submit", function(e) {
|
form.addEventListener("submit", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const article = form.closest("article");
|
const article = form.closest("article");
|
||||||
const flowerName = article.querySelector("h3").textContent;
|
const flowerName = article.querySelector("h3").textContent;
|
||||||
const quantity = form.querySelector("input[name='quantity']").value;
|
const quantity = form.querySelector("input[name='quantity']").value;
|
||||||
addToCart(flowerName, quantity);
|
addToCart(flowerName, quantity);
|
||||||
form.reset();
|
form.reset();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Start with empty cart
|
// Start with empty cart
|
||||||
let cart = [];
|
let cart = [];
|
||||||
|
|
||||||
// Funcion to add items to cart
|
// Funcion to add items to cart
|
||||||
function addToCart(flowerName, quantity) {
|
function addToCart(flowerName, quantity) {
|
||||||
quantity = Number(quantity);
|
quantity = Number(quantity);
|
||||||
|
|
||||||
const key = flowerName.toLowerCase();
|
const key = flowerName.toLowerCase();
|
||||||
const flower = flowers[key];
|
const flower = flowers[key];
|
||||||
|
|
||||||
if (!flower || quantity < 1 || quantity > flower.stock) {
|
if (!flower || quantity < 1 || quantity > flower.stock) {
|
||||||
alert("Too many or too few flowers added to cart, rejecting.");
|
alert("Too many or too few flowers added to cart, rejecting.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const existing = cart.find(item => item.name === flowerName);
|
const existing = cart.find(item => item.name === flowerName);
|
||||||
if (existing) {
|
if (existing) {
|
||||||
if (quantity > flower.stock) {
|
if (quantity > flower.stock) {
|
||||||
alert("Added quantity goes over stock limit, rejecting.");
|
alert("Added quantity goes over stock limit, rejecting.");
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
existing.quantity += quantity;
|
existing.quantity += quantity;
|
||||||
} else {
|
} else {
|
||||||
cart.push({
|
cart.push({
|
||||||
name: key,
|
name: key,
|
||||||
price: flower.price,
|
price: flower.price,
|
||||||
quantity: quantity
|
quantity: quantity
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
flower.stock -= quantity;
|
flower.stock -= quantity;
|
||||||
updateCartDisplay();
|
updateCartDisplay();
|
||||||
populateCatalog();
|
populateCatalog();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to create feedback HTML elements from list
|
// Function to create feedback HTML elements from list
|
||||||
function renderFeedback() {
|
function renderFeedback() {
|
||||||
const feedbackList = document.getElementById("feedback-list");
|
const feedbackList = document.getElementById("feedback-list");
|
||||||
feedbackList.innerHTML = "";
|
feedbackList.innerHTML = "";
|
||||||
if (feedback.length === 0) {
|
if (feedback.length === 0) {
|
||||||
feedbackList.innerHTML = "<p>No feedback yet. Be our first review?</p>";
|
feedbackList.innerHTML = "<p>No feedback yet. Be our first review?</p>";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
feedback.forEach(fb => {
|
feedback.forEach(fb => {
|
||||||
const div = document.createElement("div");
|
const div = document.createElement("div");
|
||||||
div.className = "testimonial";
|
div.className = "testimonial";
|
||||||
div.innerHTML = `
|
div.innerHTML = `
|
||||||
<strong>${fb.flower}</strong>
|
<strong>${fb.flower}</strong>
|
||||||
<span>(${fb.rating}★)</span>
|
<span>(${fb.rating}★)</span>
|
||||||
<p>${fb.content}</p>
|
<p>${fb.content}</p>
|
||||||
<hr>
|
<hr>
|
||||||
`
|
`
|
||||||
feedbackList.appendChild(div);
|
feedbackList.appendChild(div);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Event listener for checkout button to show checkout message and reset cart
|
// Event listener for checkout button to show checkout message and reset cart
|
||||||
document.getElementById("checkout-button").addEventListener("click", function() {
|
document.getElementById("checkout-button").addEventListener("click", function() {
|
||||||
if (cart.length === 0) {
|
if (cart.length === 0) {
|
||||||
document.getElementById("checkout-message").textContent = "Your cart is empty!";
|
document.getElementById("checkout-message").textContent = "Your cart is empty!";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const confirmed = confirm("Are you sure you want to finalize cart and check out?");
|
const confirmed = confirm("Are you sure you want to finalize cart and check out?");
|
||||||
if (confirmed) {
|
if (confirmed) {
|
||||||
document.getElementById("checkout-message").textContent = "Thank you for your order!";
|
document.getElementById("checkout-message").textContent = "Thank you for your order!";
|
||||||
cart = [];
|
cart = [];
|
||||||
updateCartDisplay();
|
updateCartDisplay();
|
||||||
populateCatalog();
|
populateCatalog();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("feedback-form").addEventListener("submit", function(e) {
|
document.getElementById("feedback-form").addEventListener("submit", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const form = e.target;
|
const form = e.target;
|
||||||
const flower = form.flower.value;
|
const flower = form.flower.value;
|
||||||
const rating = Number(form.rating.value);
|
const rating = Number(form.rating.value);
|
||||||
const content = form.content.value.trim()
|
const content = form.content.value.trim()
|
||||||
|
|
||||||
if (!flower || !rating || !content) return;
|
if (!flower || !rating || !content) return;
|
||||||
|
|
||||||
feedback.unshift({ flower, rating, content });
|
feedback.unshift({ flower, rating, content });
|
||||||
renderFeedback();
|
renderFeedback();
|
||||||
form.reset();
|
form.reset();
|
||||||
})
|
})
|
||||||
|
|
||||||
populateCatalog();
|
populateCatalog();
|
||||||
setupCartForms();
|
setupCartForms();
|
||||||
updateCartDisplay();
|
updateCartDisplay();
|
||||||
renderFeedback();
|
renderFeedback();
|
||||||
@@ -1,82 +1,82 @@
|
|||||||
body {
|
body {
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
color: #222;
|
color: #222;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 24px 0 12px 0;
|
margin: 24px 0 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 0 18px 0;
|
margin: 0 0 18px 0;
|
||||||
color: #555;
|
color: #555;
|
||||||
font-size: 0.98em;
|
font-size: 0.98em;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin: 0 auto 24px auto;
|
margin: 0 auto 24px auto;
|
||||||
max-width: 700px;
|
max-width: 700px;
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
th, td {
|
th, td {
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
form label {
|
form label {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"], input[type="text"], select {
|
input[type="number"], input[type="text"], select {
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
border: 1px solid #bbb;
|
border: 1px solid #bbb;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: #f0f0f0;
|
background: #f0f0f0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background: #e0e0e0;
|
background: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback-list .testimonial {
|
#feedback-list .testimonial {
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user