diff --git a/INFO-1251 (Web Server)/Labs/Lab 1/Home Network Diagram.drawio b/INFO-1251 (Web Server)/Labs/Lab 1/Home Network Diagram.drawio index 8f5d66b..6e319b2 100644 --- a/INFO-1251 (Web Server)/Labs/Lab 1/Home Network Diagram.drawio +++ b/INFO-1251 (Web Server)/Labs/Lab 1/Home Network Diagram.drawio @@ -1,111 +1,111 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-1/index.html b/INFO-1252 (Front End Dev)/Labs/Lab-1/index.html index 36b9b98..cb621b5 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-1/index.html +++ b/INFO-1252 (Front End Dev)/Labs/Lab-1/index.html @@ -1,37 +1,37 @@ - - - - My First Sample Site - - - - -

Heading One

- -
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quidem explicabo animi accusamus temporibus ex error odit porro dolore in quasi nulla voluptatem consectetur labore, quis, autem, voluptates 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.

- This is a smaller paragraph! - -

Heading Two

-

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!

- A picture of bricks - A picture of rust - A picture of wood -

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?

-
    -
  1. First item
    2. -
  2. Second item
    3. -
  3. Third item
    4. -
  4. Fouth item
    5. -
- - - + + + + My First Sample Site + + + + +

Heading One

+ +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quidem explicabo animi accusamus temporibus ex error odit porro dolore in quasi nulla voluptatem consectetur labore, quis, autem, voluptates 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.

+ This is a smaller paragraph! + +

Heading Two

+

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!

+ A picture of bricks + A picture of rust + A picture of wood +

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?

+
    +
  1. First item
    2. +
  2. Second item
    3. +
  3. Third item
    4. +
  4. Fouth item
    5. +
+ + + \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-1/style.css b/INFO-1252 (Front End Dev)/Labs/Lab-1/style.css index 791f5bf..aabf8c2 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-1/style.css +++ b/INFO-1252 (Front End Dev)/Labs/Lab-1/style.css @@ -1,22 +1,22 @@ -body { - text-align: center; - background: #333; - color: white; -} - -ul, ol { - margin: 0; - padding: 0; - display: inline-block; - text-align: left; -} - -ul li { - list-style: none; -} - -a { - color: deepskyblue; - text-align: center; - margin: auto; +body { + text-align: center; + background: #333; + color: white; +} + +ul, ol { + margin: 0; + padding: 0; + display: inline-block; + text-align: left; +} + +ul li { + list-style: none; +} + +a { + color: deepskyblue; + text-align: center; + margin: auto; } \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-2/about.html b/INFO-1252 (Front End Dev)/Labs/Lab-2/about.html index 68f4020..fefcc1e 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-2/about.html +++ b/INFO-1252 (Front End Dev)/Labs/Lab-2/about.html @@ -1,33 +1,33 @@ - - - - - - - About Page - Travel Spot - - - - Company logo - -
-

About the Travel Spot

- The eiffel tower -

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!

-

Satisfaction Guaranteed!

-

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.

-

Four Reasons to travel with us

-
    -
  1. customer service
    2. -
  2. prices
    3. -
  3. variety
    4. -
  4. experience
    5. -
-
-

Copyright © 2022. Travel Spot.

- + + + + + + + About Page - Travel Spot + + + + Company logo + +
+

About the Travel Spot

+ The eiffel tower +

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!

+

Satisfaction Guaranteed!

+

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.

+

Four Reasons to travel with us

+
    +
  1. customer service
    2. +
  2. prices
    3. +
  3. variety
    4. +
  4. experience
    5. +
+
+

Copyright © 2022. Travel Spot.

+ \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-2/contact.html b/INFO-1252 (Front End Dev)/Labs/Lab-2/contact.html index 333f622..1f8647b 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-2/contact.html +++ b/INFO-1252 (Front End Dev)/Labs/Lab-2/contact.html @@ -1,59 +1,59 @@ - - - - - - - Contact Page - Travel Spot - - - - Company logo - -
-

Contact the Travel Spot

-

152 King Street
London, Ontario N6R 4T5 -
- tel: 519 555-9045 -
- email: info@travel.com -

-

Special Prices

- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- Note:

Meals are not included.

-
Destination1 Week2 Weeks3 Weeks
Paris$850$1,250$1,990
Italy$750$1,000$1,500
Brazil$900$1,300$2,100
-
-

Copyright © 2022. Travel Spot.

- + + + + + + + Contact Page - Travel Spot + + + + Company logo + +
+

Contact the Travel Spot

+

152 King Street
London, Ontario N6R 4T5 +
+ tel: 519 555-9045 +
+ email: info@travel.com +

+

Special Prices

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Note:

Meals are not included.

+
Destination1 Week2 Weeks3 Weeks
Paris$850$1,250$1,990
Italy$750$1,000$1,500
Brazil$900$1,300$2,100
+
+

Copyright © 2022. Travel Spot.

+ \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-2/index.html b/INFO-1252 (Front End Dev)/Labs/Lab-2/index.html index a573e04..e25c11d 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-2/index.html +++ b/INFO-1252 (Front End Dev)/Labs/Lab-2/index.html @@ -1,25 +1,25 @@ - - - - - - - Home Page - Travel Spot - - - - Company logo - -
-

Welcome to the Travel Spot

-

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!

- A beach in Barbados -

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!

-
-

Copyright © 2022. Travel Spot.

- + + + + + + + Home Page - Travel Spot + + + + Company logo + +
+

Welcome to the Travel Spot

+

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!

+ A beach in Barbados +

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!

+
+

Copyright © 2022. Travel Spot.

+ \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-2/style.css b/INFO-1252 (Front End Dev)/Labs/Lab-2/style.css index 26d703a..a06349e 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-2/style.css +++ b/INFO-1252 (Front End Dev)/Labs/Lab-2/style.css @@ -1,29 +1,29 @@ -.mainNav { - text-align: center; - list-style: none; -} - -img { - display: block; - margin: auto; -} - -body { - text-align: center; -} - -ul, ol { - margin: 0; - padding: 0; - display: inline-block; - text-align: left; -} - -.priceTable { - margin-left: auto; - margin-right: auto; -} - -caption p { - display: inline; -} +.mainNav { + text-align: center; + list-style: none; +} + +img { + display: block; + margin: auto; +} + +body { + text-align: center; +} + +ul, ol { + margin: 0; + padding: 0; + display: inline-block; + text-align: left; +} + +.priceTable { + margin-left: auto; + margin-right: auto; +} + +caption p { + display: inline; +} diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-3/index.html b/INFO-1252 (Front End Dev)/Labs/Lab-3/index.html index 95db504..4cb7de4 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-3/index.html +++ b/INFO-1252 (Front End Dev)/Labs/Lab-3/index.html @@ -1,115 +1,115 @@ - - - - Registration - Travel Spot - - - - - - - Company logo -
-

Sign Up

-

Your next travel starts here!

-

Fill in the form below:

- - - -

- - -
-
- Personal Information - - -
- -
- -
- -
- - -
-

- - -
-
- Travel Destination -

Tell us where you want to go:

- -
- -
- -
- -
- -
- -
- -
- -
-
-

- - -
-
- Travel Experience -

Tell us about your last travel experience (leave this section empty if you have never travelled before):

- -
- - - - - - - - -
- - - - - - - - -
- - - - - - - - -
- -
- -
-

- - - - - - + + + + Registration - Travel Spot + + + + + + + Company logo +
+

Sign Up

+

Your next travel starts here!

+

Fill in the form below:

+ + + +

+ + +
+
+ Personal Information + + +
+ +
+ +
+ +
+ + +
+

+ + +
+
+ Travel Destination +

Tell us where you want to go:

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+

+ + +
+
+ Travel Experience +

Tell us about your last travel experience (leave this section empty if you have never travelled before):

+ +
+ + + + + + + + +
+ + + + + + + + +
+ + + + + + + + +
+ +
+ +
+

+ + + + + + \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-3/style.css b/INFO-1252 (Front End Dev)/Labs/Lab-3/style.css index eb9c1ff..89fe22a 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-3/style.css +++ b/INFO-1252 (Front End Dev)/Labs/Lab-3/style.css @@ -1,85 +1,85 @@ -body { - font-family: Arial, sans-serif; - margin: 20px; - background-color: #f9fafc; - color: #333; -} - -img { - display: block; - margin: 0 auto 10px auto; - border-radius: 8px; -} - -h1 { - text-align: center; - color: #2a6ebb; - margin-bottom: 5px; -} - -h2 { - text-align: center; - color: #555; -} - -fieldset { - border: 1px solid #ccc; - border-radius: 8px; - padding: 15px; - margin-bottom: 20px; - background: #fff; - box-shadow: 0 2px 4px rgba(0,0,0,0.05); -} - -legend { - font-weight: bold; - color: #2a6ebb; -} - -label { - display: inline-block; - width: 180px; - margin: 6px 0; -} - -input, select, textarea { - padding: 6px; - margin: 4px 0; - border: 1px solid #ccc; - border-radius: 4px; -} - -button { - padding: 8px 16px; - margin: 5px; - border: none; - border-radius: 6px; - background-color: #2a6ebb; - color: #fff; - cursor: pointer; -} - -button:hover { - background-color: #1d4f88; -} - -footer { - text-align: center; - margin-top: 30px; - font-size: 0.9em; - color: #777; -} - -@media (max-width: 880px) { - input[type="radio"] + label { - display: inline-block; - margin-right: 10px; - width: auto; - white-space: nowrap; - } - - input[type="radio"] { - display: inline-block; - margin-right: 4px; - } +body { + font-family: Arial, sans-serif; + margin: 20px; + background-color: #f9fafc; + color: #333; +} + +img { + display: block; + margin: 0 auto 10px auto; + border-radius: 8px; +} + +h1 { + text-align: center; + color: #2a6ebb; + margin-bottom: 5px; +} + +h2 { + text-align: center; + color: #555; +} + +fieldset { + border: 1px solid #ccc; + border-radius: 8px; + padding: 15px; + margin-bottom: 20px; + background: #fff; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); +} + +legend { + font-weight: bold; + color: #2a6ebb; +} + +label { + display: inline-block; + width: 180px; + margin: 6px 0; +} + +input, select, textarea { + padding: 6px; + margin: 4px 0; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + padding: 8px 16px; + margin: 5px; + border: none; + border-radius: 6px; + background-color: #2a6ebb; + color: #fff; + cursor: pointer; +} + +button:hover { + background-color: #1d4f88; +} + +footer { + text-align: center; + margin-top: 30px; + font-size: 0.9em; + color: #777; +} + +@media (max-width: 880px) { + input[type="radio"] + label { + display: inline-block; + margin-right: 10px; + width: auto; + white-space: nowrap; + } + + input[type="radio"] { + display: inline-block; + margin-right: 4px; + } } \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-4/index.html b/INFO-1252 (Front End Dev)/Labs/Lab-4/index.html index b334f13..ce0b6ce 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-4/index.html +++ b/INFO-1252 (Front End Dev)/Labs/Lab-4/index.html @@ -1,111 +1,111 @@ - - - - - - - - - Sandy's Cooking Blog - - - - -
- -

Sandy's Cooking Blog

-
- - - - - -
- -
-
-

Dinner Party Ideas

-
By: John
-
Jan 11, 2022
- Dinner party food -

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc - mollis, nulla non elementum tincidunt, felis ligula sodales lectus, - sit amet dignissim quam massa sit amet lorem. Aenean lorem risus, - tempus nec, gravida eu. -

-
- -
-

Weeknight Meals

-
By: Mary
-
Jan 07, 2022
- Nice dinner -

- Donec cursus faucibus turpis. Quisque auctor est at magna. In - sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus - elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer - non, leo. Phasellus suscipit felis non est. -

-
- -
-

Superbowl Snacks

-
By: Sandy
-
Jan 06, 2022
- Plate of nachos -

- Pellentesque habitant morbi tristique senectus et netus et malesuada - fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet - adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus - quis libero. Vivamus quam. -

-
-
- - -
-

About Sandy

- - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum - gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus. - Pellentesque habitant morbi tristique senectus et netus et malesuada - fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent - taciti sociosqu ad litora torquent per conubia nostra, per inceptos - himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas - elementum, augue at vulputate ornare, ipsum enim lacinia orci, id - elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac - habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis - condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus - nec efficitur sagittis. Aliquam sed nunc ligula. -

-

- Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed - interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit - amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet - sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla. - Pellentesque habitant morbi tristique senectus et netus et malesuada - fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est. - Maecenas quis hendrerit dui, tincidunt maximus velit. -

-
-
- - - - - + + + + + + + + + Sandy's Cooking Blog + + + + +
+ +

Sandy's Cooking Blog

+
+ + + + + +
+ +
+
+

Dinner Party Ideas

+
By: John
+
Jan 11, 2022
+ Dinner party food +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc + mollis, nulla non elementum tincidunt, felis ligula sodales lectus, + sit amet dignissim quam massa sit amet lorem. Aenean lorem risus, + tempus nec, gravida eu. +

+
+ +
+

Weeknight Meals

+
By: Mary
+
Jan 07, 2022
+ Nice dinner +

+ Donec cursus faucibus turpis. Quisque auctor est at magna. In + sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus + elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer + non, leo. Phasellus suscipit felis non est. +

+
+ +
+

Superbowl Snacks

+
By: Sandy
+
Jan 06, 2022
+ Plate of nachos +

+ Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet + adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus + quis libero. Vivamus quam. +

+
+
+ + +
+

About Sandy

+ + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus. + Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent + taciti sociosqu ad litora torquent per conubia nostra, per inceptos + himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas + elementum, augue at vulputate ornare, ipsum enim lacinia orci, id + elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac + habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis + condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus + nec efficitur sagittis. Aliquam sed nunc ligula. +

+

+ Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed + interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit + amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet + sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla. + Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est. + Maecenas quis hendrerit dui, tincidunt maximus velit. +

+
+
+ + + + + \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-4/styles/styles.css b/INFO-1252 (Front End Dev)/Labs/Lab-4/styles/styles.css index 2c12bf7..49fd60b 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-4/styles/styles.css +++ b/INFO-1252 (Front End Dev)/Labs/Lab-4/styles/styles.css @@ -1,126 +1,126 @@ -/* Beginner elements */ -* { - margin: 0; -} - -body { - background: url(../images/squares_bg.png); - font-family: Helvetica, sans-serif; - font-size: 1rem; -} - -/* Header and logo */ -.logo { - opacity: 30%; - display: block; - margin: 2rem auto; -} - -h1, -h2 { - font-family: "Dancing Script", cursive; - color: teal; - font-size: 2rem; - text-shadow: 2px 2px 4px grey; - margin-left: 1.2rem; -} - -.main-heading { - font-size: 2.2rem; - text-align: center; -} - -/* Navbar styling */ -nav { - background-color: white; - border-top: 5px solid teal; - border-bottom: 5px solid teal; - margin: 2rem 0; -} - -ul, -a { - font-size: 1rem; - text-decoration: none; - list-style: none; - display: block; - text-align: center; - margin: 1.5rem 0; - color: grey; - font-weight: bold; - font-family: Helvetica, sans-serif; -} - -/* Recipe card styling */ -.recipe-card { - margin: 2rem 1rem; - font-size: 1rem; - border: 2px solid grey; - background-color: white; - border-radius: 5px; - box-shadow: 2px 2px 4px grey; -} - -.recipe-card img { - display: block; - margin: 1.5rem auto; - border-radius: 60%; -} - -.recipe-card p { - text-align: left; - line-height: 25px; - margin: 2rem; - color: grey; - font-weight: bold; - font-family: Helvetica, sans-serif; -} - -.author { - text-align: right; - margin-right: 1rem; - color: grey; -} - -.publish-date { - text-align: right; - color: rgba(75, 75, 75, 0.507); - margin-right: 1rem; -} - -/* About section styling */ -.about-sandy { - background-color: grey; - background-image: url(../images/squares_bg.png); - padding-bottom: 1rem; - margin-bottom: 0.3rem; -} - -.about-sandy p { - text-align: left; - line-height: 1.6rem; - margin: 2rem; - color: lightgrey; - font-weight: bold; -} - -.about-sandy h2 { - color: white; - font-size: 3rem; - text-shadow: 2px 2px 4px black; -} - -/* Footer styling */ -footer { - background: teal; - font-size: 1rem; - color: lightgrey; - padding: 2rem; - text-align: center; - line-height: 1.6; -} - - -footer strong { - color: white; +/* Beginner elements */ +* { + margin: 0; +} + +body { + background: url(../images/squares_bg.png); + font-family: Helvetica, sans-serif; + font-size: 1rem; +} + +/* Header and logo */ +.logo { + opacity: 30%; + display: block; + margin: 2rem auto; +} + +h1, +h2 { + font-family: "Dancing Script", cursive; + color: teal; + font-size: 2rem; + text-shadow: 2px 2px 4px grey; + margin-left: 1.2rem; +} + +.main-heading { + font-size: 2.2rem; + text-align: center; +} + +/* Navbar styling */ +nav { + background-color: white; + border-top: 5px solid teal; + border-bottom: 5px solid teal; + margin: 2rem 0; +} + +ul, +a { + font-size: 1rem; + text-decoration: none; + list-style: none; + display: block; + text-align: center; + margin: 1.5rem 0; + color: grey; + font-weight: bold; + font-family: Helvetica, sans-serif; +} + +/* Recipe card styling */ +.recipe-card { + margin: 2rem 1rem; + font-size: 1rem; + border: 2px solid grey; + background-color: white; + border-radius: 5px; + box-shadow: 2px 2px 4px grey; +} + +.recipe-card img { + display: block; + margin: 1.5rem auto; + border-radius: 60%; +} + +.recipe-card p { + text-align: left; + line-height: 25px; + margin: 2rem; + color: grey; + font-weight: bold; + font-family: Helvetica, sans-serif; +} + +.author { + text-align: right; + margin-right: 1rem; + color: grey; +} + +.publish-date { + text-align: right; + color: rgba(75, 75, 75, 0.507); + margin-right: 1rem; +} + +/* About section styling */ +.about-sandy { + background-color: grey; + background-image: url(../images/squares_bg.png); + padding-bottom: 1rem; + margin-bottom: 0.3rem; +} + +.about-sandy p { + text-align: left; + line-height: 1.6rem; + margin: 2rem; + color: lightgrey; + font-weight: bold; +} + +.about-sandy h2 { + color: white; + font-size: 3rem; + text-shadow: 2px 2px 4px black; +} + +/* Footer styling */ +footer { + background: teal; + font-size: 1rem; + color: lightgrey; + padding: 2rem; + text-align: center; + line-height: 1.6; +} + + +footer strong { + color: white; } \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/index.html b/INFO-1252 (Front End Dev)/Labs/Lab-5/index.html index 6a0c6f9..3375b4d 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-5/index.html +++ b/INFO-1252 (Front End Dev)/Labs/Lab-5/index.html @@ -1,111 +1,111 @@ - - - - - Sandy's Cooking Blog - - - - - - - - - -
- -

Sandy's Cooking Blog

- - -
- - -
- -
-
-

Dinner Party Ideas

-
By: John
-
Jan 11, 2022
- dinner party food -

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc - mollis, nulla non elementum tincidunt, felis ligula sodales lectus, - sit amet dignissim quam massa sit amet lorem. Aenean lorem risus, - tempus nec, gravida eu. -

-
- -
-

Weeknight Meals

-
By: Mary
-
Jan 07, 2022
- nice dinner -

- Donec cursus faucibus turpis. Quisque auctor est at magna. In - sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus - elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer - non, leo. Phasellus suscipit felis non est. -

-
- -
-

Superbowl Snacks

-
By: Sandy
-
Jan 06, 2022
- plate of nachos -

- Pellentesque habitant morbi tristique senectus et netus et malesuada - fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet - adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus - quis libero. Vivamus quam. -

-
-
- - -
-

About Sandy

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum - gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus. - Pellentesque habitant morbi tristique senectus et netus et malesuada - fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent - taciti sociosqu ad litora torquent per conubia nostra, per inceptos - himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas - elementum, augue at vulputate ornare, ipsum enim lacinia orci, id - elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac - habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis - condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus - nec efficitur sagittis. Aliquam sed nunc ligula. -

-

- Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed - interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit - amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet - sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla. - Pellentesque habitant morbi tristique senectus et netus et malesuada - fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est. - Maecenas quis hendrerit dui, tincidunt maximus velit. -

-
-
- - - - - + + + + + Sandy's Cooking Blog + + + + + + + + + +
+ +

Sandy's Cooking Blog

+ + +
+ + +
+ +
+
+

Dinner Party Ideas

+
By: John
+
Jan 11, 2022
+ dinner party food +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc + mollis, nulla non elementum tincidunt, felis ligula sodales lectus, + sit amet dignissim quam massa sit amet lorem. Aenean lorem risus, + tempus nec, gravida eu. +

+
+ +
+

Weeknight Meals

+
By: Mary
+
Jan 07, 2022
+ nice dinner +

+ Donec cursus faucibus turpis. Quisque auctor est at magna. In + sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus + elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer + non, leo. Phasellus suscipit felis non est. +

+
+ +
+

Superbowl Snacks

+
By: Sandy
+
Jan 06, 2022
+ plate of nachos +

+ Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet + adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus + quis libero. Vivamus quam. +

+
+
+ + +
+

About Sandy

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus. + Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent + taciti sociosqu ad litora torquent per conubia nostra, per inceptos + himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas + elementum, augue at vulputate ornare, ipsum enim lacinia orci, id + elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac + habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis + condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus + nec efficitur sagittis. Aliquam sed nunc ligula. +

+

+ Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed + interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit + amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet + sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla. + Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est. + Maecenas quis hendrerit dui, tincidunt maximus velit. +

+
+
+ + + + + \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css b/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css index c083572..27fdab5 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css +++ b/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css @@ -1,303 +1,303 @@ -/* global settings */ -*, -*::before, -*::after { - box-sizing: inherit; - padding: 0; - margin: 0; -} - -html { - box-sizing: border-box; - font-size: 62.5%; - line-height: 1.6; -} - -body { - font-family: "Roboto", sans-serif; - background: url(../images/squares_bg.png); - color: #686868; -} - -li { - list-style-type: none; -} - -a { - text-decoration: none; -} - -/* Header */ -.header-logo { - display: block; - margin: 2rem auto; - opacity: 30%; - width: 50%; -} - -.header-title { - font-family: "Dancing script"; - font-size: 4.2rem; - text-align: center; - color: teal; -} - -.header-nav { - background-color: #fff; - text-align: center; - border-top: 5px solid teal; - border-bottom: 5px solid teal; - padding: 0.4rem 0; - margin-top: 2.4rem; -} - -.header-nav-list-item { - margin: 0.8rem 0; -} - -.header-nav-list-item a:link, -.header-nav-list-item a:visited { - font-size: 2.4rem; - color: #686868; -} - -.header-nav-list-item a:hover, -.header-nav-list-item a:active { - color: teal; - font-weight: 600; -} - -/* Main */ -.recipes { - margin-top: 2.4rem; -} - -.recipe { - margin: 2rem 1rem; - border: 1px solid grey; - background-color: white; - border-radius: 20px; - padding: 2.4rem 1.2rem; -} - -.recipe:hover { - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25); - transform: translateY(-10px); - /* we will learn this later. Don't worry about this line*/ -} - -.recipe-title { - font-family: "Dancing script"; - text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); - font-size: 3.6rem; - color: teal; - margin-bottom: 2.4rem; -} - -.recipe-by, -.recipe-by strong, -.recipe-date { - text-align: right; - font-size: 1.6rem; -} - -.recipe-image { - width: 80%; - border-radius: 50%; - display: block; - margin: 1rem auto; -} - -.recipe-desc { - font-size: 1.8rem; - margin-top: 2.4rem; - padding: 0 1.2rem; -} - -/* About */ -.about { - padding: 2.4rem; - background-color: rgb(82, 82, 82); - opacity: 70%; -} - -.about-title { - font-family: "Dancing script"; - font-size: 4.8rem; - color: #fff; - margin-top: 2rem; - text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75); -} - -.about-text { - /* use white colour + opacity or grey font color to achieve this result*/ - color: #fff; - opacity: 0.75; - font-size: 1.8rem; - margin: 2rem 0; - text-shadow: 1px 1px 0 black; -} - -.about-logo { - display: none; -} - -/* Footer */ -.footer { - background-color: teal; - color: rgb(207, 207, 207); - text-align: center; - padding: 3.6rem 0; - font-size: 2.4rem; -} - -.footer-name { - color: #fff; - font-size: 2.4rem; -} - -@media only screen and (min-width: 820px) { - /* Header */ - .header { - position: relative; - } - - .header-logo { - position: absolute; - left: 5%; - top: 33%; - transform: translateY(-50%); - width: 25%; - opacity: 0.3; - z-index: 0; - } - - .header-title { - font-size: 6rem; - } - - .header-nav { - position: relative; - z-index: 1; - display: flex; - justify-content: center; - align-items: center; - padding: 1rem 0; - } - - .header-nav-list { - display: flex; - justify-content: center; - align-items: center; - gap: 4rem; - width: 100%; - } - - /* Recipe cards */ - .recipe { - position: relative; - } - - .recipe-image { - display: block; - width: 30%; - border-radius: 50%; - margin: 0; - float: left; - } - - .recipe-title { - font-size: 4.8rem; - } - - .recipe-desc { - display: inline-block; - width: 65%; - margin-left: 1.5rem; - margin-bottom: 1.5rem; - padding: 0; - } - - /* About Sandy */ - .about-logo { - display: inline; - float: left; - margin-top: 2rem; - margin-right: 4rem; - margin-bottom: 2rem; - } - - .about-text { - display: inline; - vertical-align: top; - font-size: 1.8rem; - } - - /* Footer needs no changes */ -} - -@media only screen and (min-width: 1200px) { - /* Header */ - .header-logo { - width: 10%; - } - - /* Recipe cards */ - .recipes { - display: flex; - gap: 2rem; - } - - .recipe-image { - width: 100%; - margin: auto; - } - - .recipe-title { - font-size: 8rem; - margin: 0; - line-height: normal; - } - - .recipe-by { - font-size: 2rem; - } - - .recipe-date { - font-size: 2rem; - } - .recipe-desc { - width: 95%; - font-size: 2rem; - } - - /* About Sandy */ - .about-title { - font-size: 8rem; - } - - .about-logo { - width: 300px; - } - - .about-text { - font-size: 2.2rem; - } - - /* Footer */ - .footer { - margin-top: 0.2rem; - display: flex; - justify-content: space-between; - align-items: center; - padding: 3.6rem 2rem; - } - - .footer p { - margin: 0; - } - - .footer-name { - float: none; - } +/* global settings */ +*, +*::before, +*::after { + box-sizing: inherit; + padding: 0; + margin: 0; +} + +html { + box-sizing: border-box; + font-size: 62.5%; + line-height: 1.6; +} + +body { + font-family: "Roboto", sans-serif; + background: url(../images/squares_bg.png); + color: #686868; +} + +li { + list-style-type: none; +} + +a { + text-decoration: none; +} + +/* Header */ +.header-logo { + display: block; + margin: 2rem auto; + opacity: 30%; + width: 50%; +} + +.header-title { + font-family: "Dancing script"; + font-size: 4.2rem; + text-align: center; + color: teal; +} + +.header-nav { + background-color: #fff; + text-align: center; + border-top: 5px solid teal; + border-bottom: 5px solid teal; + padding: 0.4rem 0; + margin-top: 2.4rem; +} + +.header-nav-list-item { + margin: 0.8rem 0; +} + +.header-nav-list-item a:link, +.header-nav-list-item a:visited { + font-size: 2.4rem; + color: #686868; +} + +.header-nav-list-item a:hover, +.header-nav-list-item a:active { + color: teal; + font-weight: 600; +} + +/* Main */ +.recipes { + margin-top: 2.4rem; +} + +.recipe { + margin: 2rem 1rem; + border: 1px solid grey; + background-color: white; + border-radius: 20px; + padding: 2.4rem 1.2rem; +} + +.recipe:hover { + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25); + transform: translateY(-10px); + /* we will learn this later. Don't worry about this line*/ +} + +.recipe-title { + font-family: "Dancing script"; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); + font-size: 3.6rem; + color: teal; + margin-bottom: 2.4rem; +} + +.recipe-by, +.recipe-by strong, +.recipe-date { + text-align: right; + font-size: 1.6rem; +} + +.recipe-image { + width: 80%; + border-radius: 50%; + display: block; + margin: 1rem auto; +} + +.recipe-desc { + font-size: 1.8rem; + margin-top: 2.4rem; + padding: 0 1.2rem; +} + +/* About */ +.about { + padding: 2.4rem; + background-color: rgb(82, 82, 82); + opacity: 70%; +} + +.about-title { + font-family: "Dancing script"; + font-size: 4.8rem; + color: #fff; + margin-top: 2rem; + text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75); +} + +.about-text { + /* use white colour + opacity or grey font color to achieve this result*/ + color: #fff; + opacity: 0.75; + font-size: 1.8rem; + margin: 2rem 0; + text-shadow: 1px 1px 0 black; +} + +.about-logo { + display: none; +} + +/* Footer */ +.footer { + background-color: teal; + color: rgb(207, 207, 207); + text-align: center; + padding: 3.6rem 0; + font-size: 2.4rem; +} + +.footer-name { + color: #fff; + font-size: 2.4rem; +} + +@media only screen and (min-width: 820px) { + /* Header */ + .header { + position: relative; + } + + .header-logo { + position: absolute; + left: 5%; + top: 33%; + transform: translateY(-50%); + width: 25%; + opacity: 0.3; + z-index: 0; + } + + .header-title { + font-size: 6rem; + } + + .header-nav { + position: relative; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 1rem 0; + } + + .header-nav-list { + display: flex; + justify-content: center; + align-items: center; + gap: 4rem; + width: 100%; + } + + /* Recipe cards */ + .recipe { + position: relative; + } + + .recipe-image { + display: block; + width: 30%; + border-radius: 50%; + margin: 0; + float: left; + } + + .recipe-title { + font-size: 4.8rem; + } + + .recipe-desc { + display: inline-block; + width: 65%; + margin-left: 1.5rem; + margin-bottom: 1.5rem; + padding: 0; + } + + /* About Sandy */ + .about-logo { + display: inline; + float: left; + margin-top: 2rem; + margin-right: 4rem; + margin-bottom: 2rem; + } + + .about-text { + display: inline; + vertical-align: top; + font-size: 1.8rem; + } + + /* Footer needs no changes */ +} + +@media only screen and (min-width: 1200px) { + /* Header */ + .header-logo { + width: 10%; + } + + /* Recipe cards */ + .recipes { + display: flex; + gap: 2rem; + } + + .recipe-image { + width: 100%; + margin: auto; + } + + .recipe-title { + font-size: 8rem; + margin: 0; + line-height: normal; + } + + .recipe-by { + font-size: 2rem; + } + + .recipe-date { + font-size: 2rem; + } + .recipe-desc { + width: 95%; + font-size: 2rem; + } + + /* About Sandy */ + .about-title { + font-size: 8rem; + } + + .about-logo { + width: 300px; + } + + .about-text { + font-size: 2.2rem; + } + + /* Footer */ + .footer { + margin-top: 0.2rem; + display: flex; + justify-content: space-between; + align-items: center; + padding: 3.6rem 2rem; + } + + .footer p { + margin: 0; + } + + .footer-name { + float: none; + } } \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-6/index.html b/INFO-1252 (Front End Dev)/Labs/Lab-6/index.html index db11dad..2ae6733 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-6/index.html +++ b/INFO-1252 (Front End Dev)/Labs/Lab-6/index.html @@ -1,186 +1,186 @@ - - - - - - - Lab 6 - - - - - -

Lab 6

-

Bootstrap Components


-
-
-
- Accordian -
-
-

- -

-
-
- This is the first item’s accordion body. The base elements of the - accordian - was - taken from the Bootstrap documentation. -
-
-
-
-

- -

-
-
- This is the second item’s accordion body. I only changed the interior - content - of - the accordian, although content isn't all that imporant. -
-
-
-
-

- -

-
-
- This is the third item’s accordion body. It just saves a lot of time - instead of - writing out the code by hand to take the documentation examples. -
-
-
-

-
-
- Modal (Personal favourite)
- - -

-
-
- Card -
- ... -
-
Card Demo
-

Just a simple card with the default image placeholder

- Do Something -
-
-
-
-
- -

Container Example

-
-
-
- Movie -
-
- Genre -
-
- Director -
-
-
-
- Kill Bill -
-
- Action -
-
- Quentin Tarantino -
-
-
-
- The Room -
-
- Romance -
-
- Tommy Wiseau -
-
-
-
- Star Wars -
-
- Action -
-
- George Lucas -
-
-
- -

Form Demo

-
-
- - -
-
- - -
-
- - -
- -
- - - + + + + + + + Lab 6 + + + + + +

Lab 6

+

Bootstrap Components


+
+
+
+ Accordian +
+
+

+ +

+
+
+ This is the first item’s accordion body. The base elements of the + accordian + was + taken from the Bootstrap documentation. +
+
+
+
+

+ +

+
+
+ This is the second item’s accordion body. I only changed the interior + content + of + the accordian, although content isn't all that imporant. +
+
+
+
+

+ +

+
+
+ This is the third item’s accordion body. It just saves a lot of time + instead of + writing out the code by hand to take the documentation examples. +
+
+
+

+
+
+ Modal (Personal favourite)
+ + +

+
+
+ Card +
+ ... +
+
Card Demo
+

Just a simple card with the default image placeholder

+ Do Something +
+
+
+
+
+ +

Container Example

+
+
+
+ Movie +
+
+ Genre +
+
+ Director +
+
+
+
+ Kill Bill +
+
+ Action +
+
+ Quentin Tarantino +
+
+
+
+ The Room +
+
+ Romance +
+
+ Tommy Wiseau +
+
+
+
+ Star Wars +
+
+ Action +
+
+ George Lucas +
+
+
+ +

Form Demo

+
+
+ + +
+
+ + +
+
+ + +
+ +
+ + + \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-6/style.css b/INFO-1252 (Front End Dev)/Labs/Lab-6/style.css index 4611a22..ebf44b7 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-6/style.css +++ b/INFO-1252 (Front End Dev)/Labs/Lab-6/style.css @@ -1,24 +1,24 @@ -body { - background-color: crimson; - font-family: "Inter", sans-serif; - padding: 20px; -} - -h1, -h2 { - text-align: center; - margin-bottom: 20px; - font-weight: bold; -} - -form { - margin-top: 30px; - background: #ffffff; - padding: 25px; - border-radius: 14px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10); -} - -label { - font-weight: 600; +body { + background-color: crimson; + font-family: "Inter", sans-serif; + padding: 20px; +} + +h1, +h2 { + text-align: center; + margin-bottom: 20px; + font-weight: bold; +} + +form { + margin-top: 30px; + background: #ffffff; + padding: 25px; + border-radius: 14px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10); +} + +label { + font-weight: 600; } \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/contact.html b/INFO-1252 (Front End Dev)/Projects/Final Project/contact.html index fbc3e94..7b38b1e 100644 --- a/INFO-1252 (Front End Dev)/Projects/Final Project/contact.html +++ b/INFO-1252 (Front End Dev)/Projects/Final Project/contact.html @@ -1,58 +1,58 @@ - - - - - Pet Showcase - Contact - - - - - - -
-

Contact Page

- Contact the owner of the page with questions or concerns below - - - -
- -
- Contact requests will be answered within ∞ business days - - -
-
- Enter personal Information Below -
-
-
-
-
-
-
-
-
-
- - -
-
-
- - - - - + + + + + Pet Showcase - Contact + + + + + + +
+

Contact Page

+ Contact the owner of the page with questions or concerns below + + + +
+ +
+ Contact requests will be answered within ∞ business days + + +
+
+ Enter personal Information Below +
+
+
+
+
+
+
+
+
+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css b/INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css index 234cff7..fae5a65 100644 --- a/INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css +++ b/INFO-1252 (Front End Dev)/Projects/Final Project/css/style.css @@ -1,176 +1,176 @@ -/* Keyframe animation */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(30px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Mobile design */ -body { - font-family: Arial, Helvetica, sans-serif; - background: #f8f9fa; - color: #222; - margin: 0; - padding: 0 1rem; -} - -h1, -h2 { - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -h3 { - font-size: 1.6rem; - letter-spacing: 0.05em; - text-transform: uppercase; - margin-bottom: 0.75rem; - padding-bottom: 0.4rem; - border-bottom: 3px solid #444; -} - -nav ul { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 0; - margin: 1rem 0; - list-style: none; -} - -nav a { - background: #2980b9; - color: #fff; - padding: 0.5rem; - border-radius: 4px; - text-align: center; - text-decoration: none; - font-weight: bold; - transition: background 0.3s, transform 0.3s; -} - -nav a:hover { - background: #1c5a85; - transform: scale(1.07); -} - -section { - background: #fff; - margin: 1rem 0; - padding: 1rem; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05); - animation: fadeIn 1s ease; -} - -section img { - width: 100%; - height: auto; - border-radius: 8px; - margin-bottom: 0.5rem; - display: block; -} - -form { - background: #fff; - padding: 1rem; - border-radius: 8px; - margin: 1rem 0; - box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05); -} - -input, -textarea { - width: 100%; - padding: 0.5rem; - margin-bottom: 0.75rem; - border: 1px solid #bbb; - border-radius: 4px; -} - -button { - width: 48%; - padding: 0.5rem; - margin-bottom: 0.5rem; - background: #2980b9; - color: #fff; - border: none; - border-radius: 4px; - font-weight: bold; -} - -button[type="reset"] { - background: red; -} - -footer { - text-align: center; - margin: 2rem 0 1rem 0; - color: #888; - font-size: 0.95rem; -} - -.animal-grid { - display: grid; - grid-template-columns: 1fr; - gap: 3rem; -} - -/* Layouts for larger screens */ -/* Tablet/Medium screen */ -@media (min-width: 600px) and (max-width: 899px) { - body { - padding: 0 2rem; - } - - nav ul { - flex-direction: row; - justify-content: center; - gap: 1rem; - } - - section, - form { - max-width: 650px; - margin-left: auto; - margin-right: auto; - } - - h1 { - font-size: 2.2rem; - } -} - -/* Desktop/large Screen */ -@media (min-width: 900px) { - body { - padding: 0 4rem; - } - - nav ul { - flex-direction: row; - justify-content: center; - gap: 2rem; - } - - section, - form { - max-width: 900px; - margin-left: auto; - margin-right: auto; - } - - h1 { - font-size: 3rem; - } - - .animal-grid { - grid-template-columns: repeat(2, 1fr); - } +/* Keyframe animation */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(30px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Mobile design */ +body { + font-family: Arial, Helvetica, sans-serif; + background: #f8f9fa; + color: #222; + margin: 0; + padding: 0 1rem; +} + +h1, +h2 { + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +h3 { + font-size: 1.6rem; + letter-spacing: 0.05em; + text-transform: uppercase; + margin-bottom: 0.75rem; + padding-bottom: 0.4rem; + border-bottom: 3px solid #444; +} + +nav ul { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 0; + margin: 1rem 0; + list-style: none; +} + +nav a { + background: #2980b9; + color: #fff; + padding: 0.5rem; + border-radius: 4px; + text-align: center; + text-decoration: none; + font-weight: bold; + transition: background 0.3s, transform 0.3s; +} + +nav a:hover { + background: #1c5a85; + transform: scale(1.07); +} + +section { + background: #fff; + margin: 1rem 0; + padding: 1rem; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05); + animation: fadeIn 1s ease; +} + +section img { + width: 100%; + height: auto; + border-radius: 8px; + margin-bottom: 0.5rem; + display: block; +} + +form { + background: #fff; + padding: 1rem; + border-radius: 8px; + margin: 1rem 0; + box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05); +} + +input, +textarea { + width: 100%; + padding: 0.5rem; + margin-bottom: 0.75rem; + border: 1px solid #bbb; + border-radius: 4px; +} + +button { + width: 48%; + padding: 0.5rem; + margin-bottom: 0.5rem; + background: #2980b9; + color: #fff; + border: none; + border-radius: 4px; + font-weight: bold; +} + +button[type="reset"] { + background: red; +} + +footer { + text-align: center; + margin: 2rem 0 1rem 0; + color: #888; + font-size: 0.95rem; +} + +.animal-grid { + display: grid; + grid-template-columns: 1fr; + gap: 3rem; +} + +/* Layouts for larger screens */ +/* Tablet/Medium screen */ +@media (min-width: 600px) and (max-width: 899px) { + body { + padding: 0 2rem; + } + + nav ul { + flex-direction: row; + justify-content: center; + gap: 1rem; + } + + section, + form { + max-width: 650px; + margin-left: auto; + margin-right: auto; + } + + h1 { + font-size: 2.2rem; + } +} + +/* Desktop/large Screen */ +@media (min-width: 900px) { + body { + padding: 0 4rem; + } + + nav ul { + flex-direction: row; + justify-content: center; + gap: 2rem; + } + + section, + form { + max-width: 900px; + margin-left: auto; + margin-right: auto; + } + + h1 { + font-size: 3rem; + } + + .animal-grid { + grid-template-columns: repeat(2, 1fr); + } } \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/img/rocco.jpeg b/INFO-1252 (Front End Dev)/Projects/Final Project/img/rocco.jpeg deleted file mode 100644 index 4dede8b..0000000 Binary files a/INFO-1252 (Front End Dev)/Projects/Final Project/img/rocco.jpeg and /dev/null differ diff --git a/INFO-1252 (Front End Dev)/Projects/Final Project/index.html b/INFO-1252 (Front End Dev)/Projects/Final Project/index.html index 7acf774..9dcc388 100644 --- a/INFO-1252 (Front End Dev)/Projects/Final Project/index.html +++ b/INFO-1252 (Front End Dev)/Projects/Final Project/index.html @@ -1,127 +1,127 @@ - - - - - Pet Showcase - Home - - - - - - -
-

Levi's Pet Showcase

- A collection of pet images with facts about their personality - - - -
- -
-

Welcome!

-

Below will be 5 short showcases for each of my pets (past and current) featuring pictures and a small - description - of their personalities

- - -
-
-

Mierda

- picture of Mierda -

Mierda is 5 years old as of writing which makes her the oldest of the animals

-

Mierda likes:

-
    -
  • Sleeping with her head in a shoe
    • -
  • Wet food
    • -
  • Sleeping outside
    • -
  • Playing with Frank
    • -
-

Although she looks very sweet (which she can be), she also has a bit of an evil genius side, which my - family - loves to joke about

-
- -
-

Frank

- picture of Frank -

Frank is 3 years old and came directly after Mierda

-

Frank likes:

-
    -
  • Sleeping upside down
    • -
  • Wet food
    • -
  • Kibble
    • -
  • Food that falls on the floor
    • -
-

Frank LOVES food. We joke a lot about how he tends to beg like a dog, even sometimes sitting right - next - to Bo while he begs.

-
- -
-

Rocco

- picture of Rocco -

Rocco is 3 years old and was adopted very shortly after Frank, their almost the same age

-

Rocco likes:

-
    -
  • Cuddles in bed
    • -
  • Sleeping in boxes
    • -
  • Scratching the cat post
    • -
  • Drinking tap water from the faucet
    • -
-

Rocco is pretty quiet but he's got a lot of personality. He's the silliest of the animals and often - even - tends to slip and trip on himself. He's very easily startled too.

-
- -
-

Bo

- picture of Bo -

Bo is 9 months old and is the newest addition to our family

-

Bo likes:

-
    -
  • Jumping, a lot of jumping
    • -
  • Walking with his backpack on
    • -
  • Belly rubs
    • -
  • Dried pigs ear treats (delicious, I know)
    • -
-

Bo is still very young and figuring out his personality but he's very hyperactive and LOVES to jump - off - the - back of the porch and up on us when we come home. He's a Boxer-Border Collie mix.

-
- -
-

Jax

- picture of Jax -

Jax was 9 years old when he past, which was about a year ago now.

-

Jax Liked:

-
    -
  • Barking, he loved the sound of his own voice
    • -
  • The cats!
    • -
  • The dog park
    • -
  • Water, he was quite the swimmer
    • -
-

Jax (or Jackie) was our first family pet, we love him and miss him but remember him everyday. Jax was - a - Great - Pyranese mixed with a Shepherd breed of some sort. He had LOTS of fur and was very fluffy.

-
-
-
- - - - - + + + + + Pet Showcase - Home + + + + + + +
+

Levi's Pet Showcase

+ A collection of pet images with facts about their personality + + + +
+ +
+

Welcome!

+

Below will be 5 short showcases for each of my pets (past and current) featuring pictures and a small + description + of their personalities

+ + +
+
+

Mierda

+ picture of Mierda +

Mierda is 5 years old as of writing which makes her the oldest of the animals

+

Mierda likes:

+
    +
  • Sleeping with her head in a shoe
    • +
  • Wet food
    • +
  • Sleeping outside
    • +
  • Playing with Frank
    • +
+

Although she looks very sweet (which she can be), she also has a bit of an evil genius side, which my + family + loves to joke about

+
+ +
+

Frank

+ picture of Frank +

Frank is 3 years old and came directly after Mierda

+

Frank likes:

+
    +
  • Sleeping upside down
    • +
  • Wet food
    • +
  • Kibble
    • +
  • Food that falls on the floor
    • +
+

Frank LOVES food. We joke a lot about how he tends to beg like a dog, even sometimes sitting right + next + to Bo while he begs.

+
+ +
+

Rocco

+ picture of Rocco +

Rocco is 3 years old and was adopted very shortly after Frank, their almost the same age

+

Rocco likes:

+
    +
  • Cuddles in bed
    • +
  • Sleeping in boxes
    • +
  • Scratching the cat post
    • +
  • Drinking tap water from the faucet
    • +
+

Rocco is pretty quiet but he's got a lot of personality. He's the silliest of the animals and often + even + tends to slip and trip on himself. He's very easily startled too.

+
+ +
+

Bo

+ picture of Bo +

Bo is 9 months old and is the newest addition to our family

+

Bo likes:

+
    +
  • Jumping, a lot of jumping
    • +
  • Walking with his backpack on
    • +
  • Belly rubs
    • +
  • Dried pigs ear treats (delicious, I know)
    • +
+

Bo is still very young and figuring out his personality but he's very hyperactive and LOVES to jump + off + the + back of the porch and up on us when we come home. He's a Boxer-Border Collie mix.

+
+ +
+

Jax

+ picture of Jax +

Jax was 9 years old when he past, which was about a year ago now.

+

Jax Liked:

+
    +
  • Barking, he loved the sound of his own voice
    • +
  • The cats!
    • +
  • The dog park
    • +
  • Water, he was quite the swimmer
    • +
+

Jax (or Jackie) was our first family pet, we love him and miss him but remember him everyday. Jax was + a + Great + Pyranese mixed with a Shepherd breed of some sort. He had LOTS of fur and was very fluffy.

+
+
+
+ + + + + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Labs/Lab 1/Levi_Lab1.html b/INFO-1272 (JS 1)/Labs/Lab 1/Levi_Lab1.html index ab46cf8..b3ab188 100644 --- a/INFO-1272 (JS 1)/Labs/Lab 1/Levi_Lab1.html +++ b/INFO-1272 (JS 1)/Labs/Lab 1/Levi_Lab1.html @@ -1,35 +1,35 @@ - - - - - Lab 2 - - - -

Lab 2

- - - + + + + + Lab 2 + + + +

Lab 2

+ + + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Labs/Lab 2/levi_lab2.html b/INFO-1272 (JS 1)/Labs/Lab 2/levi_lab2.html index 8a6c749..1eb9f13 100644 --- a/INFO-1272 (JS 1)/Labs/Lab 2/levi_lab2.html +++ b/INFO-1272 (JS 1)/Labs/Lab 2/levi_lab2.html @@ -1,81 +1,81 @@ - - - - - Lab 2 - - - -

Theme Park Tickets

- - - + + + + + Lab 2 + + + +

Theme Park Tickets

+ + + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Labs/Lab 3/Levi_Lab3.html b/INFO-1272 (JS 1)/Labs/Lab 3/Levi_Lab3.html index 10d2cc9..cb13a8c 100644 --- a/INFO-1272 (JS 1)/Labs/Lab 3/Levi_Lab3.html +++ b/INFO-1272 (JS 1)/Labs/Lab 3/Levi_Lab3.html @@ -1,61 +1,61 @@ - - - - Lab 3 - - - - -

Lab 3

- - + + + + Lab 3 + + + + +

Lab 3

+ + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.html b/INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.html index 0c8958a..902020e 100644 --- a/INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.html +++ b/INFO-1272 (JS 1)/Labs/Lab 5/Levi_Lab5.html @@ -1,93 +1,93 @@ - - - - - Lab 5 - - - - -

Lab 5

- - - + + + + + Lab 5 + + + + +

Lab 5

+ + + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Labs/Midterm Part B/Levi_McLean_MidtermTest copy.html b/INFO-1272 (JS 1)/Labs/Midterm Part B/Levi_McLean_MidtermTest copy.html index c628293..87d3c71 100644 --- a/INFO-1272 (JS 1)/Labs/Midterm Part B/Levi_McLean_MidtermTest copy.html +++ b/INFO-1272 (JS 1)/Labs/Midterm Part B/Levi_McLean_MidtermTest copy.html @@ -1,130 +1,130 @@ - - - - Levi McLean Midterm Part B - - - - -

Levi McLean Midterm Part B

- - + + + + Levi McLean Midterm Part B + + + + +

Levi McLean Midterm Part B

+ + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Labs/Midterm Part B/Levi_McLean_MidtermTest.html b/INFO-1272 (JS 1)/Labs/Midterm Part B/Levi_McLean_MidtermTest.html index 65be2c8..7c6613f 100644 --- a/INFO-1272 (JS 1)/Labs/Midterm Part B/Levi_McLean_MidtermTest.html +++ b/INFO-1272 (JS 1)/Labs/Midterm Part B/Levi_McLean_MidtermTest.html @@ -1,138 +1,138 @@ - - - - Levi McLean Midterm Part B - - - - -

Levi McLean Midterm Part B

- - + + + + Levi McLean Midterm Part B + + + + +

Levi McLean Midterm Part B

+ + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Notes/Midterm/index.html b/INFO-1272 (JS 1)/Notes/Midterm/index.html index 8c7ee8a..a57e362 100644 --- a/INFO-1272 (JS 1)/Notes/Midterm/index.html +++ b/INFO-1272 (JS 1)/Notes/Midterm/index.html @@ -1,176 +1,176 @@ - - - - - Midterm Study - - - - -

Midterm Study

-

Introduction to Web Pages

-
    -
  1. A web page is a container for the following three technologies. Describe the purpose of each for a web page: -
    2. - -
-

Answers:

- -
- -

Introduction to javascript

-
    -
  1. Browser pop-up dialogue box functions
    2. - -
-

Answers:

- -
- -

Data Types and Variables

-
    -
  1. Name JavaScript's three data types. Describe the types of data they store
    2. -
  2. JavaScript is a weakly-typed language. Describe what this means.
    3. -
  3. What are the naming rules for a variables name? What are naming conventions?
    4. -
  4. What is a constant in JavaScript? Describe how you would declare a JavaScript constant.
    5. -
-

Answers:

-
    -
  1. Number, String and Boolean
    2. -
  2. 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
    3. -
  3. 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
    4. - - let customerAge = 23;
    - const ONT_TAX_RATE = 0.13; -     -
  4. A constant is a variable whose value cannot be changed once initialized, making it constant. To define a - constant, use the "const" keyword.
    5. -
-
- -

Operators

-
    -
  1. Explain the following binary operators: + - * / %
    2. -
  2. Explain the multiple uses of the + operator.
    3. -
  3. Describe how the increment/decrement operators (++ and --) work.
    4. -
-

Answers:

-
    -
  1. The + operator is used to get the sum, the - operator is to get the difference, the * operator multiplies, - the / operator divides and the % (modulus) operator determines if two numbers divided have a remainder and - how much of one
    2. -
  2. The + operator can be used to add two numbers together to find their sum, or you can use it to concatenate - multiple Strings together.
    3. -
  3. 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.
    4. -
-
- -

The JavaScript Math object

-
    -
  1. Describe the operation and the return for the following Math methods:
    2. - -
-

Answers:

- -
- -

JavaScript Number Methods

-
    -
  1. Describe the operation and the return for the following Number methods:
    2. - -
-

Answers:

- -
- -

JavaScript Global Functions

-
    -
  1. Describe the operation and the return for the following global functions:
    2. - -
-

Answers:

- -
- -

JavaScript String Methods

-
    -
  1. Describe the operation and the return for the following String methods.
    2. - -
-

Answers:

- - -

Playground

-

Interactive JavaScript follows

- - - - + + + + + Midterm Study + + + + +

Midterm Study

+

Introduction to Web Pages

+
    +
  1. A web page is a container for the following three technologies. Describe the purpose of each for a web page: +
    2. + +
+

Answers:

+ +
+ +

Introduction to javascript

+
    +
  1. Browser pop-up dialogue box functions
    2. + +
+

Answers:

+ +
+ +

Data Types and Variables

+
    +
  1. Name JavaScript's three data types. Describe the types of data they store
    2. +
  2. JavaScript is a weakly-typed language. Describe what this means.
    3. +
  3. What are the naming rules for a variables name? What are naming conventions?
    4. +
  4. What is a constant in JavaScript? Describe how you would declare a JavaScript constant.
    5. +
+

Answers:

+
    +
  1. Number, String and Boolean
    2. +
  2. 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
    3. +
  3. 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
    4. + + let customerAge = 23;
    + const ONT_TAX_RATE = 0.13; +     +
  4. A constant is a variable whose value cannot be changed once initialized, making it constant. To define a + constant, use the "const" keyword.
    5. +
+
+ +

Operators

+
    +
  1. Explain the following binary operators: + - * / %
    2. +
  2. Explain the multiple uses of the + operator.
    3. +
  3. Describe how the increment/decrement operators (++ and --) work.
    4. +
+

Answers:

+
    +
  1. The + operator is used to get the sum, the - operator is to get the difference, the * operator multiplies, + the / operator divides and the % (modulus) operator determines if two numbers divided have a remainder and + how much of one
    2. +
  2. The + operator can be used to add two numbers together to find their sum, or you can use it to concatenate + multiple Strings together.
    3. +
  3. 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.
    4. +
+
+ +

The JavaScript Math object

+
    +
  1. Describe the operation and the return for the following Math methods:
    2. + +
+

Answers:

+ +
+ +

JavaScript Number Methods

+
    +
  1. Describe the operation and the return for the following Number methods:
    2. + +
+

Answers:

+ +
+ +

JavaScript Global Functions

+
    +
  1. Describe the operation and the return for the following global functions:
    2. + +
+

Answers:

+ +
+ +

JavaScript String Methods

+
    +
  1. Describe the operation and the return for the following String methods.
    2. + +
+

Answers:

+ + +

Playground

+

Interactive JavaScript follows

+ + + + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Notes/Midterm/index.js b/INFO-1272 (JS 1)/Notes/Midterm/index.js index d5b8b3e..24132e3 100644 --- a/INFO-1272 (JS 1)/Notes/Midterm/index.js +++ b/INFO-1272 (JS 1)/Notes/Midterm/index.js @@ -1,190 +1,190 @@ -// for (var i = 1; i < 10; i++) { -// console.log("Ran " + i + " time(s).") -// }; - -// console.log(window.confirm("Feel prepared?")); // true or false - -// var question = ("50" === 50); -// console.log(question); - -// var question2 = (true && false); -// console.log(question2); - -// var question3 = (true || false); -// console.log(question3); - -// // VAR price = 35.6; <-- WRONG -// var price = 35.6; // <-- RIGHT - -// var city = "London"; - -// if (city.toLowerCase() === "london") { -// console.log("I live there too!"); -// } else { -// console.log("I dont know where that is.") -// } - -// var userName = window.prompt("Please enter your name:"); -// greetUser(userName); - -// var radius = window.prompt("Please enter circle radius:"); -// calcCirc(radius); - -// var testNum = window.prompt("Number to test for even:"); -// isEven(testNum); - -// function greetUser(userName) { -// alert("Hello " + userName + " welcome to the page"); -// } - -// function calcCirc(radius) { -// var Circ = ((2 * Math.PI) * radius).toFixed(2); -// alert("Circumference is: " + Circ + " Inches."); -// } - -// function isEven(number) { -// if (number % 2 == 0) { -// console.log(number + " is even"); -// } else { -// console.log(number + " is odd"); -// } -// } - -// NUMBER GUESSING GAME -// var randomNum = Math.floor((Math.random() * 100) + 1); -// console.log("Random Number: " + randomNum); - -// var userGuess; -// do { -// var input = window.prompt("Guess a number from 1-100: "); -// if (input === null) { -// window.alert("Game cancelled."); -// break; -// } - -// userGuess = parseInt(input, 10); -// if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) { -// window.alert("Please enter a valid number between 1 and 100."); -// } else if (userGuess !== randomNum) { -// window.alert("Incorrect number, try again!"); -// } -// } while (userGuess !== randomNum); - -// if (userGuess === randomNum) { -// window.alert("You guessed the right number! The number was " + randomNum); -// } - -// ROCK PAPER SCISSORS GAME -// var choices = ["rock", "paper", "scissors"]; -// var compChoice = choices[Math.floor(Math.random() * 3)]; -// console.log("Computer choice: " + compChoice); - -// var userChoice = window.prompt("Enter rock, paper or scissors: ").toLowerCase(); -// console.log("User choice: " + userChoice); - -// if (!choices.includes(userChoice)) { -// window.alert("Invalid choice!"); -// } else if (userChoice === compChoice) { -// window.alert("It's a tie!"); -// } else { -// var winsAgainst = { -// rock: "scissors", -// paper: "rock", -// scissors: "paper" -// }; - -// if (winsAgainst[userChoice] === compChoice) { -// window.alert("You win!"); -// } else { -// window.alert("Computer wins!"); -// } -// } - -// SAMPLE BANK ACCOUNT -// var bankBalance = 0; -// console.log("Bank balance: $" + bankBalance); - -// function getAmount(message) { -// var input = window.prompt(message); -// if (input === null) return null; -// var amount = parseInt(input, 10); -// if (isNaN(amount)) { -// window.alert("Please enter a valid number."); -// return null; -// } -// return amount; -// } - -// while (true) { -// var userChoice = window.prompt( -// "Welcome! Your bank balance is: $" + bankBalance + -// ". Would you like to (w)ithdraw, (d)eposit or (v)iew balance, or (q)uit?"); -// if (userChoice === null || userChoice.toLowerCase() === "q") break; -// userChoice = userChoice.toLowerCase(); -// console.log(userChoice); - -// if (userChoice === "w" || userChoice === "withdrawl") { -// var widthdrawlAmount = getAmount("How much would you like to widthdraw?"); -// if (widthdrawlAmount === null) continue; -// if (widthdrawlAmount > bankBalance) { -// window.alert("Not enough in balance to widthdraw, sorry!"); -// } else if (widthdrawlAmount <= 0) { -// window.alert("Cannot widthdraw negative or 0 dollars."); -// } else { -// bankBalance -= widthdrawlAmount; -// console.log("Bank balance: $" + bankBalance); -// } -// } else if (userChoice === "d" || userChoice === "deposit") { -// var depositAmount = getAmount("How much would you like to deposit?"); -// if (depositAmount === null) continue; -// if (depositAmount <= 0) { -// window.alert("Cannot deposit negative or 0 dollars."); -// } else { -// bankBalance += depositAmount; -// console.log("Bank balance: $" + bankBalance); -// } -// } else if (userChoice === "v" || userChoice === "view") { -// window.alert("Your balance is: $" + bankBalance + " dollars. Thank you for banking with us!"); -// console.log("Bank balance: $" + bankBalance); -// } else { -// window.alert("Invalid choice, please try again"); -// } -// } - -// ARRAY STATS CALCULATOR -// var stats = []; -// var sum = 0; - -// for (var i = 0; i < 50; i++) { -// var randomNum = Math.floor(Math.random() * 50); -// sum += randomNum; -// stats.push(randomNum); -// console.log(randomNum); -// } -// console.log(stats); - -// console.log("Sum of stats: " + sum); -// console.log("Average of stats: " + (sum / stats.length)); -// console.log("Min of stats: " + Math.min(...stats)); -// console.log("Max of stats: " + Math.max(...stats)); - -// PASSWORD STRENGTH CHECKER -var userPass = window.prompt("Enter a password to test: "); -var charCount, numCount, symCount; - -charCount = userPass.length; -console.log(charCount); - -numCount = (userPass.match(/\d/g) || []).length; -console.log(numCount); - -symCount = (userPass.match(/[^a-zA-Z0-9]/g) || []).length; -console.log(symCount); - -if (charCount >= 10 && numCount >= 3 && symCount >= 1) { - window.alert("Your password is STRONG"); -} else if (charCount >= 10 && numCount >= 1) { - window.alert("Your password is OKAY"); -} else { - window.alert("Your password is WEAK"); +// for (var i = 1; i < 10; i++) { +// console.log("Ran " + i + " time(s).") +// }; + +// console.log(window.confirm("Feel prepared?")); // true or false + +// var question = ("50" === 50); +// console.log(question); + +// var question2 = (true && false); +// console.log(question2); + +// var question3 = (true || false); +// console.log(question3); + +// // VAR price = 35.6; <-- WRONG +// var price = 35.6; // <-- RIGHT + +// var city = "London"; + +// if (city.toLowerCase() === "london") { +// console.log("I live there too!"); +// } else { +// console.log("I dont know where that is.") +// } + +// var userName = window.prompt("Please enter your name:"); +// greetUser(userName); + +// var radius = window.prompt("Please enter circle radius:"); +// calcCirc(radius); + +// var testNum = window.prompt("Number to test for even:"); +// isEven(testNum); + +// function greetUser(userName) { +// alert("Hello " + userName + " welcome to the page"); +// } + +// function calcCirc(radius) { +// var Circ = ((2 * Math.PI) * radius).toFixed(2); +// alert("Circumference is: " + Circ + " Inches."); +// } + +// function isEven(number) { +// if (number % 2 == 0) { +// console.log(number + " is even"); +// } else { +// console.log(number + " is odd"); +// } +// } + +// NUMBER GUESSING GAME +// var randomNum = Math.floor((Math.random() * 100) + 1); +// console.log("Random Number: " + randomNum); + +// var userGuess; +// do { +// var input = window.prompt("Guess a number from 1-100: "); +// if (input === null) { +// window.alert("Game cancelled."); +// break; +// } + +// userGuess = parseInt(input, 10); +// if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) { +// window.alert("Please enter a valid number between 1 and 100."); +// } else if (userGuess !== randomNum) { +// window.alert("Incorrect number, try again!"); +// } +// } while (userGuess !== randomNum); + +// if (userGuess === randomNum) { +// window.alert("You guessed the right number! The number was " + randomNum); +// } + +// ROCK PAPER SCISSORS GAME +// var choices = ["rock", "paper", "scissors"]; +// var compChoice = choices[Math.floor(Math.random() * 3)]; +// console.log("Computer choice: " + compChoice); + +// var userChoice = window.prompt("Enter rock, paper or scissors: ").toLowerCase(); +// console.log("User choice: " + userChoice); + +// if (!choices.includes(userChoice)) { +// window.alert("Invalid choice!"); +// } else if (userChoice === compChoice) { +// window.alert("It's a tie!"); +// } else { +// var winsAgainst = { +// rock: "scissors", +// paper: "rock", +// scissors: "paper" +// }; + +// if (winsAgainst[userChoice] === compChoice) { +// window.alert("You win!"); +// } else { +// window.alert("Computer wins!"); +// } +// } + +// SAMPLE BANK ACCOUNT +// var bankBalance = 0; +// console.log("Bank balance: $" + bankBalance); + +// function getAmount(message) { +// var input = window.prompt(message); +// if (input === null) return null; +// var amount = parseInt(input, 10); +// if (isNaN(amount)) { +// window.alert("Please enter a valid number."); +// return null; +// } +// return amount; +// } + +// while (true) { +// var userChoice = window.prompt( +// "Welcome! Your bank balance is: $" + bankBalance + +// ". Would you like to (w)ithdraw, (d)eposit or (v)iew balance, or (q)uit?"); +// if (userChoice === null || userChoice.toLowerCase() === "q") break; +// userChoice = userChoice.toLowerCase(); +// console.log(userChoice); + +// if (userChoice === "w" || userChoice === "withdrawl") { +// var widthdrawlAmount = getAmount("How much would you like to widthdraw?"); +// if (widthdrawlAmount === null) continue; +// if (widthdrawlAmount > bankBalance) { +// window.alert("Not enough in balance to widthdraw, sorry!"); +// } else if (widthdrawlAmount <= 0) { +// window.alert("Cannot widthdraw negative or 0 dollars."); +// } else { +// bankBalance -= widthdrawlAmount; +// console.log("Bank balance: $" + bankBalance); +// } +// } else if (userChoice === "d" || userChoice === "deposit") { +// var depositAmount = getAmount("How much would you like to deposit?"); +// if (depositAmount === null) continue; +// if (depositAmount <= 0) { +// window.alert("Cannot deposit negative or 0 dollars."); +// } else { +// bankBalance += depositAmount; +// console.log("Bank balance: $" + bankBalance); +// } +// } else if (userChoice === "v" || userChoice === "view") { +// window.alert("Your balance is: $" + bankBalance + " dollars. Thank you for banking with us!"); +// console.log("Bank balance: $" + bankBalance); +// } else { +// window.alert("Invalid choice, please try again"); +// } +// } + +// ARRAY STATS CALCULATOR +// var stats = []; +// var sum = 0; + +// for (var i = 0; i < 50; i++) { +// var randomNum = Math.floor(Math.random() * 50); +// sum += randomNum; +// stats.push(randomNum); +// console.log(randomNum); +// } +// console.log(stats); + +// console.log("Sum of stats: " + sum); +// console.log("Average of stats: " + (sum / stats.length)); +// console.log("Min of stats: " + Math.min(...stats)); +// console.log("Max of stats: " + Math.max(...stats)); + +// PASSWORD STRENGTH CHECKER +var userPass = window.prompt("Enter a password to test: "); +var charCount, numCount, symCount; + +charCount = userPass.length; +console.log(charCount); + +numCount = (userPass.match(/\d/g) || []).length; +console.log(numCount); + +symCount = (userPass.match(/[^a-zA-Z0-9]/g) || []).length; +console.log(symCount); + +if (charCount >= 10 && numCount >= 3 && symCount >= 1) { + window.alert("Your password is STRONG"); +} else if (charCount >= 10 && numCount >= 1) { + window.alert("Your password is OKAY"); +} else { + window.alert("Your password is WEAK"); } \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Notes/Week 1/index.html b/INFO-1272 (JS 1)/Notes/Week 1/index.html index 19dbae7..5e84ced 100644 --- a/INFO-1272 (JS 1)/Notes/Week 1/index.html +++ b/INFO-1272 (JS 1)/Notes/Week 1/index.html @@ -1,34 +1,34 @@ - - - - Week 1 Class 1 - - -

Javascript test

- - -

Button pressed!

-
-

Form example

- - - - -

You entered:

- - - + + + + Week 1 Class 1 + + +

Javascript test

+ + +

Button pressed!

+
+

Form example

+ + + + +

You entered:

+ + + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Notes/Week 1/index.js b/INFO-1272 (JS 1)/Notes/Week 1/index.js index 94bbf8c..3ca4bc5 100644 --- a/INFO-1272 (JS 1)/Notes/Week 1/index.js +++ b/INFO-1272 (JS 1)/Notes/Week 1/index.js @@ -1,19 +1,19 @@ -document.getElementById("buttonLabel").style.display = "none"; - -function testButton() { - const buttonLabel = document.getElementById("buttonLabel"); - if (buttonLabel.style.display === "block") { - buttonLabel.style.display = "none"; - } else { - buttonLabel.style.display = "block"; - } -} - -function repeatInfo() { - const formLabel = document.getElementById("formLabel"); - const firstName = document.getElementById("firstName").value; - const lastName = document.getElementById("lastName").value; - const email = document.getElementById("email").value; - const phone = Number(document.getElementById("phone").value); - formLabel.innerHTML += `${firstName} ${lastName}, ${email}, ${phone}` +document.getElementById("buttonLabel").style.display = "none"; + +function testButton() { + const buttonLabel = document.getElementById("buttonLabel"); + if (buttonLabel.style.display === "block") { + buttonLabel.style.display = "none"; + } else { + buttonLabel.style.display = "block"; + } +} + +function repeatInfo() { + const formLabel = document.getElementById("formLabel"); + const firstName = document.getElementById("firstName").value; + const lastName = document.getElementById("lastName").value; + const email = document.getElementById("email").value; + const phone = Number(document.getElementById("phone").value); + formLabel.innerHTML += `${firstName} ${lastName}, ${email}, ${phone}` } \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Notes/Week 2/index.html b/INFO-1272 (JS 1)/Notes/Week 2/index.html index 893f3c7..858fef9 100644 --- a/INFO-1272 (JS 1)/Notes/Week 2/index.html +++ b/INFO-1272 (JS 1)/Notes/Week 2/index.html @@ -1,18 +1,18 @@ - - - - Week 3 Class 1 - - - -

Week 3 Class 1

-

Enter some details

- - - - - -

Entered Details:

- - + + + + Week 3 Class 1 + + + +

Week 3 Class 1

+

Enter some details

+ + + + + +

Entered Details:

+ + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Notes/Week 2/index.js b/INFO-1272 (JS 1)/Notes/Week 2/index.js index 8d9e898..1de13f8 100644 --- a/INFO-1272 (JS 1)/Notes/Week 2/index.js +++ b/INFO-1272 (JS 1)/Notes/Week 2/index.js @@ -1,14 +1,14 @@ -function showDetails() { - var firstName = document.getElementById("firstNameBox").value; - var lastName = document.getElementById("lastNameBox").value; - var age = Number(document.getElementById("ageBox").value); - var password = document.getElementById("passwordBox").value; - console.log(`You entered: ${firstName}, ${lastName}, ${age}, ${password}`); - document.getElementById("detailsLabel").innerHTML += `${firstName}, ${lastName}, ${age}, ${password}`; - - console.log(10 + 10); - console.log(10 * 10); - console.log(10 - 3); - console.log(100 / 25); - console.log(100 % 3); +function showDetails() { + var firstName = document.getElementById("firstNameBox").value; + var lastName = document.getElementById("lastNameBox").value; + var age = Number(document.getElementById("ageBox").value); + var password = document.getElementById("passwordBox").value; + console.log(`You entered: ${firstName}, ${lastName}, ${age}, ${password}`); + document.getElementById("detailsLabel").innerHTML += `${firstName}, ${lastName}, ${age}, ${password}`; + + console.log(10 + 10); + console.log(10 * 10); + console.log(10 - 3); + console.log(100 / 25); + console.log(100 % 3); } \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Notes/Week 8/index.html b/INFO-1272 (JS 1)/Notes/Week 8/index.html index 9b089ed..ff6a169 100644 --- a/INFO-1272 (JS 1)/Notes/Week 8/index.html +++ b/INFO-1272 (JS 1)/Notes/Week 8/index.html @@ -1,11 +1,11 @@ - - - - Week 8 JS Object Practice - - - -

Week 8 JS Object Practice

- - + + + + Week 8 JS Object Practice + + + +

Week 8 JS Object Practice

+ + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Notes/Week 8/index.js b/INFO-1272 (JS 1)/Notes/Week 8/index.js index 7ebe2e5..9e38af6 100644 --- a/INFO-1272 (JS 1)/Notes/Week 8/index.js +++ b/INFO-1272 (JS 1)/Notes/Week 8/index.js @@ -1,63 +1,63 @@ -// Question 1 -function person(firstName, lastName, age, city) { - return { - firstName: firstName, - lastName: lastName, - age: age, - city: city - }; -} - -var testPerson = person("Levi", "McLean", 20, "Woodstock"); -console.log(testPerson.firstName); -console.log(testPerson.lastName); -console.log(testPerson.age); -console.log(testPerson.city); - -// Question 2 -function book(title, author, pages) { - return { - title: title, - author: author, - pages: pages - }; -} - -var testBook = book("1984", "George Orwell", 386); -console.log(testBook.title); -console.log(testBook.author); -console.log(testBook.pages); -console.log("Update pages to 555"); -testBook.pages = 555; -console.log(testBook.pages); - -// Question 3 -function movie(name, year, rating) { - return { - name: name, - year: year, - rating: rating - }; -} - -var testMovie = movie("Kill Bill", 2003, 9.5); -console.log(testMovie.name); -console.log(testMovie.year); -console.log(testMovie.rating); -console.log("Adding new property director"); -testMovie.director = "Quentin Tarantino"; -console.log(testMovie.director); - -// Question 4 -const playlist = { - name: "Cool Jams", - songs: ["Rap song", "Metal song", "Pop song"] -}; - -console.log(playlist.songs); -console.log("First Song"); -console.log(playlist.songs[0]); -console.log("Last Song"); -console.log(playlist.songs[playlist.songs.length - 1]); // Always get last entry - -// Question 5 +// Question 1 +function person(firstName, lastName, age, city) { + return { + firstName: firstName, + lastName: lastName, + age: age, + city: city + }; +} + +var testPerson = person("Levi", "McLean", 20, "Woodstock"); +console.log(testPerson.firstName); +console.log(testPerson.lastName); +console.log(testPerson.age); +console.log(testPerson.city); + +// Question 2 +function book(title, author, pages) { + return { + title: title, + author: author, + pages: pages + }; +} + +var testBook = book("1984", "George Orwell", 386); +console.log(testBook.title); +console.log(testBook.author); +console.log(testBook.pages); +console.log("Update pages to 555"); +testBook.pages = 555; +console.log(testBook.pages); + +// Question 3 +function movie(name, year, rating) { + return { + name: name, + year: year, + rating: rating + }; +} + +var testMovie = movie("Kill Bill", 2003, 9.5); +console.log(testMovie.name); +console.log(testMovie.year); +console.log(testMovie.rating); +console.log("Adding new property director"); +testMovie.director = "Quentin Tarantino"; +console.log(testMovie.director); + +// Question 4 +const playlist = { + name: "Cool Jams", + songs: ["Rap song", "Metal song", "Pop song"] +}; + +console.log(playlist.songs); +console.log("First Song"); +console.log(playlist.songs[0]); +console.log("Last Song"); +console.log(playlist.songs[playlist.songs.length - 1]); // Always get last entry + +// Question 5 diff --git a/INFO-1272 (JS 1)/Projects/Final Project/index.html b/INFO-1272 (JS 1)/Projects/Final Project/index.html index 291bd26..c8bef7d 100644 --- a/INFO-1272 (JS 1)/Projects/Final Project/index.html +++ b/INFO-1272 (JS 1)/Projects/Final Project/index.html @@ -1,116 +1,116 @@ - - - - Flowery Flower Shop - - - - - -

Flowery Flower Shop

- Browse our flowers below... - -

Available flowers

-
-
-

Rose

- -
- - -
-
-
-

Tulip

- -
- - -
-
-
-

Sunflower

- -
- - -
-
-
- -

Shopping Cart

-
- - - - - - - - - - - - - -
FlowerPriceQuantitySubtotalRemove
-
-

Subtotal: $0.00

-

Tax: $0.00

- Total: $0.00 -
- -
-
- -

Testimonials and Feedback

-
-
- - - - -
-
- -
-
- - + + + + Flowery Flower Shop + + + + + +

Flowery Flower Shop

+ Browse our flowers below... + +

Available flowers

+
+
+

Rose

+ +
+ + +
+
+
+

Tulip

+ +
+ + +
+
+
+

Sunflower

+ +
+ + +
+
+
+ +

Shopping Cart

+
+ + + + + + + + + + + + + +
FlowerPriceQuantitySubtotalRemove
+
+

Subtotal: $0.00

+

Tax: $0.00

+ Total: $0.00 +
+ +
+
+ +

Testimonials and Feedback

+
+
+ + + + +
+
+ +
+
+ + \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Projects/Final Project/index.js b/INFO-1272 (JS 1)/Projects/Final Project/index.js index e05efa8..481e68b 100644 --- a/INFO-1272 (JS 1)/Projects/Final Project/index.js +++ b/INFO-1272 (JS 1)/Projects/Final Project/index.js @@ -1,184 +1,184 @@ -// Object called flowers that contains 3 flower objects with their information -const flowers = { - "rose": { - name: "Rose", - price: 2.5, - category: "Romance", - stock: 20, - description: "The classic red rose for that someone special." - }, - "tulip": { - name: "Tulip", - price: 3.0, - category: "Springtime", - stock: 15, - description: "A perfect spring time flower for a bouquet." - }, - "sunflower": { - name: "Sunflower", - price: 5.0, - category: "Exclusives", - stock: 10, - description: "Large iconic flower perfect for an Autumn garden." - } -}; - -let feedback = [ - {flower: "Rose", rating: 5, content: "A beautiful bouqet delivered on time with care!"}, - {flower: "Tulip", rating: 4, content: "Reminds me of Spring any time of year!"}, - {flower: "Sunflower", rating: 5, content: "Sunflower was tall and healthy, so elegant!"} -]; - -// Function to add flower information (price, stock, description, category) to HTML catalog -function populateCatalog() { - Object.values(flowers).forEach(flower => { - const article = document.getElementById(`${flower.name.toLowerCase()}`) - if (article) { - const listItems = article.querySelectorAll("ul li"); - listItems[0].textContent = `Price: $${flower.price.toFixed(2)}`; - listItems[1].textContent = `Category: ${flower.category}`; - listItems[2].textContent = `Stock: ${flower.stock}`; - listItems[3].textContent = `Description: ${flower.description}`; - } - }); -} - -// Function to update items inside cart, used by addToCart() and at initialization -function updateCartDisplay() { - const tbody = document.querySelector("#cart-table tbody"); - tbody.innerHTML = ""; - let subtotal = 0; - cart.forEach((item, idx) => { - const row = document.createElement("tr"); - row.innerHTML = ` - ${flowers[item.name].name} - $${item.price.toFixed(2)} - ${item.quantity} - ${(item.price * item.quantity).toFixed(2)} - - ` - tbody.appendChild(row); - subtotal += item.price * item.quantity; - }); - - const tax = subtotal * 0.13; - const total = subtotal + tax; - - document.getElementById("subtotal").textContent = subtotal.toFixed(2); - document.getElementById("tax").textContent = tax.toFixed(2); - document.getElementById("total").textContent = total.toFixed(2); - - document.querySelectorAll(".remove-button").forEach(btn => { - btn.addEventListener("click", function() { - const idx = Number(btn.getAttribute("data-idx")); - const item = cart[idx]; - flowers[item.name].stock += item.quantity; - cart.splice(idx,1); - updateCartDisplay(); - populateCatalog(); - }) - }) -} - -// Function to handle getting the correct flower name and quantity to add to cart -function setupCartForms() { - document.querySelectorAll(".add-to-cart").forEach(form => { - form.addEventListener("submit", function(e) { - e.preventDefault(); - const article = form.closest("article"); - const flowerName = article.querySelector("h3").textContent; - const quantity = form.querySelector("input[name='quantity']").value; - addToCart(flowerName, quantity); - form.reset(); - }); - }); -} - -// Start with empty cart -let cart = []; - -// Funcion to add items to cart -function addToCart(flowerName, quantity) { - quantity = Number(quantity); - - const key = flowerName.toLowerCase(); - const flower = flowers[key]; - - if (!flower || quantity < 1 || quantity > flower.stock) { - alert("Too many or too few flowers added to cart, rejecting."); - return; - } - - const existing = cart.find(item => item.name === flowerName); - if (existing) { - if (quantity > flower.stock) { - alert("Added quantity goes over stock limit, rejecting."); - return - } - existing.quantity += quantity; - } else { - cart.push({ - name: key, - price: flower.price, - quantity: quantity - }); - } - flower.stock -= quantity; - updateCartDisplay(); - populateCatalog(); -} - -// Function to create feedback HTML elements from list -function renderFeedback() { - const feedbackList = document.getElementById("feedback-list"); - feedbackList.innerHTML = ""; - if (feedback.length === 0) { - feedbackList.innerHTML = "

No feedback yet. Be our first review?

"; - return; - } - feedback.forEach(fb => { - const div = document.createElement("div"); - div.className = "testimonial"; - div.innerHTML = ` - ${fb.flower} - (${fb.rating}★) -

${fb.content}

-
- ` - feedbackList.appendChild(div); - }) -} - -// Event listener for checkout button to show checkout message and reset cart -document.getElementById("checkout-button").addEventListener("click", function() { - if (cart.length === 0) { - document.getElementById("checkout-message").textContent = "Your cart is empty!"; - return; - } - const confirmed = confirm("Are you sure you want to finalize cart and check out?"); - if (confirmed) { - document.getElementById("checkout-message").textContent = "Thank you for your order!"; - cart = []; - updateCartDisplay(); - populateCatalog(); - } -}); - -document.getElementById("feedback-form").addEventListener("submit", function(e) { - e.preventDefault(); - const form = e.target; - const flower = form.flower.value; - const rating = Number(form.rating.value); - const content = form.content.value.trim() - - if (!flower || !rating || !content) return; - - feedback.unshift({ flower, rating, content }); - renderFeedback(); - form.reset(); -}) - -populateCatalog(); -setupCartForms(); -updateCartDisplay(); +// Object called flowers that contains 3 flower objects with their information +const flowers = { + "rose": { + name: "Rose", + price: 2.5, + category: "Romance", + stock: 20, + description: "The classic red rose for that someone special." + }, + "tulip": { + name: "Tulip", + price: 3.0, + category: "Springtime", + stock: 15, + description: "A perfect spring time flower for a bouquet." + }, + "sunflower": { + name: "Sunflower", + price: 5.0, + category: "Exclusives", + stock: 10, + description: "Large iconic flower perfect for an Autumn garden." + } +}; + +let feedback = [ + {flower: "Rose", rating: 5, content: "A beautiful bouqet delivered on time with care!"}, + {flower: "Tulip", rating: 4, content: "Reminds me of Spring any time of year!"}, + {flower: "Sunflower", rating: 5, content: "Sunflower was tall and healthy, so elegant!"} +]; + +// Function to add flower information (price, stock, description, category) to HTML catalog +function populateCatalog() { + Object.values(flowers).forEach(flower => { + const article = document.getElementById(`${flower.name.toLowerCase()}`) + if (article) { + const listItems = article.querySelectorAll("ul li"); + listItems[0].textContent = `Price: $${flower.price.toFixed(2)}`; + listItems[1].textContent = `Category: ${flower.category}`; + listItems[2].textContent = `Stock: ${flower.stock}`; + listItems[3].textContent = `Description: ${flower.description}`; + } + }); +} + +// Function to update items inside cart, used by addToCart() and at initialization +function updateCartDisplay() { + const tbody = document.querySelector("#cart-table tbody"); + tbody.innerHTML = ""; + let subtotal = 0; + cart.forEach((item, idx) => { + const row = document.createElement("tr"); + row.innerHTML = ` + ${flowers[item.name].name} + $${item.price.toFixed(2)} + ${item.quantity} + ${(item.price * item.quantity).toFixed(2)} + + ` + tbody.appendChild(row); + subtotal += item.price * item.quantity; + }); + + const tax = subtotal * 0.13; + const total = subtotal + tax; + + document.getElementById("subtotal").textContent = subtotal.toFixed(2); + document.getElementById("tax").textContent = tax.toFixed(2); + document.getElementById("total").textContent = total.toFixed(2); + + document.querySelectorAll(".remove-button").forEach(btn => { + btn.addEventListener("click", function() { + const idx = Number(btn.getAttribute("data-idx")); + const item = cart[idx]; + flowers[item.name].stock += item.quantity; + cart.splice(idx,1); + updateCartDisplay(); + populateCatalog(); + }) + }) +} + +// Function to handle getting the correct flower name and quantity to add to cart +function setupCartForms() { + document.querySelectorAll(".add-to-cart").forEach(form => { + form.addEventListener("submit", function(e) { + e.preventDefault(); + const article = form.closest("article"); + const flowerName = article.querySelector("h3").textContent; + const quantity = form.querySelector("input[name='quantity']").value; + addToCart(flowerName, quantity); + form.reset(); + }); + }); +} + +// Start with empty cart +let cart = []; + +// Funcion to add items to cart +function addToCart(flowerName, quantity) { + quantity = Number(quantity); + + const key = flowerName.toLowerCase(); + const flower = flowers[key]; + + if (!flower || quantity < 1 || quantity > flower.stock) { + alert("Too many or too few flowers added to cart, rejecting."); + return; + } + + const existing = cart.find(item => item.name === flowerName); + if (existing) { + if (quantity > flower.stock) { + alert("Added quantity goes over stock limit, rejecting."); + return + } + existing.quantity += quantity; + } else { + cart.push({ + name: key, + price: flower.price, + quantity: quantity + }); + } + flower.stock -= quantity; + updateCartDisplay(); + populateCatalog(); +} + +// Function to create feedback HTML elements from list +function renderFeedback() { + const feedbackList = document.getElementById("feedback-list"); + feedbackList.innerHTML = ""; + if (feedback.length === 0) { + feedbackList.innerHTML = "

No feedback yet. Be our first review?

"; + return; + } + feedback.forEach(fb => { + const div = document.createElement("div"); + div.className = "testimonial"; + div.innerHTML = ` + ${fb.flower} + (${fb.rating}★) +

${fb.content}

+
+ ` + feedbackList.appendChild(div); + }) +} + +// Event listener for checkout button to show checkout message and reset cart +document.getElementById("checkout-button").addEventListener("click", function() { + if (cart.length === 0) { + document.getElementById("checkout-message").textContent = "Your cart is empty!"; + return; + } + const confirmed = confirm("Are you sure you want to finalize cart and check out?"); + if (confirmed) { + document.getElementById("checkout-message").textContent = "Thank you for your order!"; + cart = []; + updateCartDisplay(); + populateCatalog(); + } +}); + +document.getElementById("feedback-form").addEventListener("submit", function(e) { + e.preventDefault(); + const form = e.target; + const flower = form.flower.value; + const rating = Number(form.rating.value); + const content = form.content.value.trim() + + if (!flower || !rating || !content) return; + + feedback.unshift({ flower, rating, content }); + renderFeedback(); + form.reset(); +}) + +populateCatalog(); +setupCartForms(); +updateCartDisplay(); renderFeedback(); \ No newline at end of file diff --git a/INFO-1272 (JS 1)/Projects/Final Project/style.css b/INFO-1272 (JS 1)/Projects/Final Project/style.css index 7324c37..323fc0a 100644 --- a/INFO-1272 (JS 1)/Projects/Final Project/style.css +++ b/INFO-1272 (JS 1)/Projects/Final Project/style.css @@ -1,82 +1,82 @@ -body { - font-family: Arial, Helvetica, sans-serif; - background: #fafafa; - color: #222; - margin: 0; - padding: 0; -} - -h1 { - text-align: center; - margin: 24px 0 12px 0; -} - -small { - display: block; - text-align: center; - margin: 0 0 18px 0; - color: #555; - font-size: 0.98em; -} - -h2 { - margin-top: 32px; - margin-bottom: 8px; - text-align: center; -} - -section { - margin: 0 auto 24px auto; - max-width: 700px; -} - -article { - border: 1px solid #ddd; - border-radius: 6px; - padding: 12px; - margin: 12px 0; - background: #fff; -} - -table { - width: 100%; - border-collapse: collapse; - margin-bottom: 12px; -} - -th, td { - border: 1px solid #ccc; - padding: 6px 8px; - text-align: center; -} - -form label { - display: block; - margin: 6px 0; -} - -input[type="number"], input[type="text"], select { - padding: 2px 4px; - margin-left: 4px; -} - -button { - margin-top: 6px; - padding: 4px 10px; - border: 1px solid #bbb; - border-radius: 3px; - background: #f0f0f0; - cursor: pointer; -} - -button:hover { - background: #e0e0e0; -} - -#feedback-list .testimonial { - background: #f9f9f9; - border: 1px solid #eee; - border-radius: 4px; - margin: 8px 0; - padding: 8px; +body { + font-family: Arial, Helvetica, sans-serif; + background: #fafafa; + color: #222; + margin: 0; + padding: 0; +} + +h1 { + text-align: center; + margin: 24px 0 12px 0; +} + +small { + display: block; + text-align: center; + margin: 0 0 18px 0; + color: #555; + font-size: 0.98em; +} + +h2 { + margin-top: 32px; + margin-bottom: 8px; + text-align: center; +} + +section { + margin: 0 auto 24px auto; + max-width: 700px; +} + +article { + border: 1px solid #ddd; + border-radius: 6px; + padding: 12px; + margin: 12px 0; + background: #fff; +} + +table { + width: 100%; + border-collapse: collapse; + margin-bottom: 12px; +} + +th, td { + border: 1px solid #ccc; + padding: 6px 8px; + text-align: center; +} + +form label { + display: block; + margin: 6px 0; +} + +input[type="number"], input[type="text"], select { + padding: 2px 4px; + margin-left: 4px; +} + +button { + margin-top: 6px; + padding: 4px 10px; + border: 1px solid #bbb; + border-radius: 3px; + background: #f0f0f0; + cursor: pointer; +} + +button:hover { + background: #e0e0e0; +} + +#feedback-list .testimonial { + background: #f9f9f9; + border: 1px solid #eee; + border-radius: 4px; + margin: 8px 0; + padding: 8px; } \ No newline at end of file