Week 4 final pull request (complete)

01_Core/week02/README.md

@@ -1,5 +1,8 @@
-Instructions for this week:
+# Instructions for this week:
 
 1. Watch videos assigned in https://thecurve.redventures.com/pages/72/ita-front-end
 2. Read the Toy Problems in this directory 
 3. Submit your solutions in the submissions directory by Monday of next week at noon.
+
+## Resources
+How to create a pull request: https://help.github.com/en/desktop/contributing-to-projects/creating-a-pull-request

01_Core/week03/README.md

@@ -25,6 +25,9 @@ Install Sass - https://sass-lang.com/install
   * Grid Game: https://cssgridgarden.com/
   * Google Fonts: https://fonts.google.com/
   * Transitions and Transforms: https://thoughtbot.com/blog/transitions-and-transforms
+  * CSS Reference: https://cssreference.io/
+  * CSS Flexbox Cheatsheet: https://devhints.io/css-flexbox
+  * HTML and CSS is Hard (but it doesn't have to be): https://internetingishard.com/html-and-css/
 
 
 ## Key Vocabulary:

01_Core/week03/submissions/README.MD

@@ -0,0 +1 @@
+Add this week's toy problem solutions to this directory.

01_Core/week04/README.md

@@ -0,0 +1,39 @@
+# Instructions for this week:
+
+We are going to take a break from the videos this week and we're going to start building the front-end to our final project in the ecommerce directory.
+
+## E-Commerce Site
+
+You will be building an e-commerce site in four phases. We will build the front-end now and will layer in a database, an API, and an admin page that is password protected as the course progresses. You may choose to “sell” whatever you like, but please consider the following:
+- The products must be mainstream and professional.
+- You must be able to categorize the products into a minimum of 4 categories
+- Each product will have a photo, name, description, and price.
+
+## The website must have the following pages:
+
+**Home page:** Have a featured products area that will show several products marked as featured in the database (hard-coded this for now). There should also be a banner image slideshow. The rest of the home page content is up to you.
+
+**Products page:** This page should be a visual list of all the products on your site. Each product should show an image, the price and a quick description. The user should be able to click on the product and go to a product detail page (only one example of this page is needed. Use the link to this page for all products). The user should also be able to choose to only display products from a particular category. This will obviously just be a mockup for now and now functionality is expected.
+
+**Product Detail page:** Must show a minimum of one image of the product. Multiple images are encouraged. Price & description must be shown. User should be able to access a form that lets them select the number they wish to purchase. If the product requires other selections (like size or color), they should be able to do that, too. The form should have an add to cart button.This will obviously just be a mockup for now and now functionality is expected.
+
+**Search page:** This page should allow the user to type in a search term and it should return a list of products. The search term should search the category, the name and the description. The search page should also let you filter by price. This will obviously just be a mockup for now and now functionality is expected.
+
+**Contact page:** Standard contact form asking for name, email, phone, preferred contact method (radio button, phone/email), How did you hear about us? (checkboxes: conference, TV, Radio, Word of Mouth, other) and comments.
+
+## Visual requirements:
+
+Colors, logo, fonts and icons are entirely up to you. Just try to make things neat and organized.
+The site should use media queries to do 2 different layouts. One for less than 800 pixels and one for greater than 800 pixels. Set a max width so the site doesn’t look bad as the screen size widens.
+
+## JavaScript:
+
+- Implement a form validation for the contact form 
+- Implement a slider for the home page.
+
+## The project will be assessed on the following criteria:
+
+- HTML semantic structure. Validate your HTML!
+- CSS validation & usage. Use of media query
+- JavaScript: working scripts
+- Website must be live on GitHub pages.

01_Core/week04/ecommerce/README.MD

@@ -0,0 +1 @@
+Add the ecommerce site to this directory.

01_Core/week04/ecommerce/contact.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="Your source for all apps RV related!">
+<link rel="stylesheet" type="text/css" href="styles.css">
+
+ <!-- <link rel="favicon" href="https://img.icons8.com/android/24/000000/shopping-cart.png" type="image/png" /> -->
+<title>
+  RV IT Catalog
+</title>
+</head>
+<body>
+
+    <div class="headfootwrap"> 
+        <div class="flex navbar transition">
+            <a class="rv-logo transition" href="index.html"><img src="assets/rv-header-logo.png"></a>
+            <div class="flex btn-wrap transition">
+                <a href="index.html">HOME</a>
+                <div class="dropdown">
+                    <button class="dropbtn">CATEGORIES
+                        <i class="fa fa-caret-down"></i>
+                    </button>
+                    <div class="dropdown-content">
+                        <a href="products.html">View All</a>
+                        <a href="index.html">Productivity</a>
+                        <a href="index.html">Communication</a>
+                        <a href="index.html">Development</a>
+                        <a href="index.html">Hosting</a>
+                    </div>
+                </div>
+                <a href="search.html">SEARCH</a>
+                <a href="contact.html">CONTACT</a>
+                <a href="attribute.html">ATTRIBUTIONS</a>
+            </div>
+        </div>
+    </div>
+    <br><br>
+    <div class="txtcenter">Contact Us:</div>
+<div class="contactform txtcenter">
+    <div class="contactbox textleft">
+    Name:<br>
+    <input type="text" name="fullname" value="John Doe">
+    <br><br>
+    Email:<br>
+    <input type="email" name="email" value="johndoe@email.com"><br><br>
+    Phone:<br>
+    <input type="tel" name="phone" value="1234567890"><br><br>
+    </div>
+    <div class="contactbox textright">
+        Preferred contact method:<br><br><br><br>
+        How did you hear about us?<br>
+    </div>
+    <div class="contactbox textleft">
+    <input type="radio" name="contact" value="email" checked> Email<br>
+    <input type="radio" name="contact" value="text"> SMS Text<br>
+    <input type="radio" name="contact" value="visit"> Invasive At-Home Visit
+    <br><br>
+    <input type="checkbox" name="heard1" value="Friend"> Friend<br>
+    <input type="checkbox" name="heard2" value="Coworker"> Coworker<br>
+    <input type="checkbox" name="heard3" value="Yellowpages"> YellowPages Ad<br> <br><br>
+    </div>
+    <div class="contactbox">
+    Comments:<br>
+    <textarea name="comments" rows="8" cols="30">Have a comment? Let us know!</textarea><br>
+    <input type="submit" value="Submit">
+    </div>
+</div>
+
+
+
+<div class="footer headfootwrap">
+        <div class="footwrap headfootwrap">
+            <div class="footbox txtcenter">
+                Subscribe to our newsletter to hear the latest about new RV arrivals and apps!<br>
+                <input type="text"><button type="button">Go</button>
+            </div>
+            <div class="footbox txtcenter">
+                <a href="contact.html">SEARCH</a><br>
+                <a href="contact.html">CONTACT US</a><br>
+                <a href="contact.html">ATTRIBUTIONS</a><br>
+            </div>
+            <div class="footbox txtcenter">
+                704.971.2300<br>
+                1101 Red Ventures Dr,<br>
+                Fort Mill, SC 29707
+            </div>
+        </div>
+        <div class="footerfooter headfootwrap">copyright info</div>
+    </div>
+
+
+                <script src="javascript.js"></script>
+    </body>
+    </html>

01_Core/week04/ecommerce/index.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="Your source for all apps RV related!">
+<link rel="stylesheet" type="text/css" href="styles.css">
+
+ <!-- <link rel="favicon" href="https://img.icons8.com/android/24/000000/shopping-cart.png" type="image/png" /> -->
+<title>
+  RV IT Catalog
+</title>
+</head>
+<body>
+
+    <div class="headfootwrap"> 
+        <div class="flex navbar transition">
+            <a class="rv-logo transition" href="index.html"><img src="assets/rv-header-logo.png"></a>
+            <div class="flex btn-wrap transition">
+                <a href="index.html">HOME</a>
+                <div class="dropdown">
+                    <button class="dropbtn">CATEGORIES
+                        <i class="fa fa-caret-down"></i>
+                    </button>
+                    <div class="dropdown-content">
+                        <a href="products.html">View All</a>
+                        <a href="index.html">Productivity</a>
+                        <a href="index.html">Communication</a>
+                        <a href="index.html">Development</a>
+                        <a href="index.html">Hosting</a>
+                    </div>
+                </div>
+                <a href="search.html">SEARCH</a>
+                <a href="contact.html">CONTACT</a>
+                <a href="attribute.html">ATTRIBUTIONS</a>
+            </div>
+        </div>
+    </div>
+    <div class="slideshow-container">
+
+            <div class="mySlides fade">
+              <div class="numbertext">1 / 4</div>
+              <a href="index.html"><img src="https://i.imgur.com/NdRUbcW.png" style="width:100%"></a>
+            </div>
+
+            <div class="mySlides fade">
+              <div class="numbertext">2 / 4</div>
+              <a href="index.html"><img src="https://i.imgur.com/JSjM2sj.png" style="width:100%"></a>
+            </div>
+
+            <div class="mySlides fade">
+              <div class="numbertext">3 / 4</div>
+              <a href="index.html"><img src="https://i.imgur.com/2ETkYzf.png" style="width:100%"></a>
+            </div>
+
+            <div class="mySlides fade">
+                <div class="numbertext">4 / 4</div>
+                <a href="index.html"><img src="https://i.imgur.com/NooUUCT.png" style="width:100%"></a>
+            </div>
+
+            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+            <a class="next" onclick="plusSlides(1)">&#10095;</a>
+
+            </div>
+            <br>
+
+            <div class="txtcenter">
+              <span class="dot" onclick="currentSlide(1)"></span> 
+              <span class="dot" onclick="currentSlide(2)"></span> 
+              <span class="dot" onclick="currentSlide(3)"></span>
+              <span class="dot" onclick="currentSlide(4)"></span> 
+            </div>
+
+        <div class="main-col">
+            <div class="featitemstext txtcenter">Featured Items</div>
+            <div class="featwrap">
+            <div class="imgbox">
+                <img class="imgfeat" src="https://i.imgur.com/iXD0gr4.png">
+                <div class="imgtrans txtcenter">
+                    <a class="reglink" href="index.html">REQUEST</a>
+                </div>
+            </div>
+            <div class="imgbox">
+                <img class="imgfeat" src="https://i.imgur.com/waBZ3c0.png">
+                <div class="imgtrans txtcenter">
+                    <a class="reglink" href="index.html">REQUEST</a>
+                </div>
+            </div>
+            <div class="imgbox">
+                <img class="imgfeat" src="https://i.imgur.com/EEoUNim.png">
+                <div class="imgtrans txtcenter">
+                    <a class="reglink" href="index.html">REQUEST</a>
+                </div>
+            </div>
+            </div>
+        </div>
+
+<div class="footer headfootwrap">
+    <div class="footwrap headfootwrap">
+        <div class="footbox txtcenter">
+            Subscribe to our newsletter to hear the latest about new RV arrivals and apps!<br>
+            <input type="text"><button type="button">Go</button>
+        </div>
+        <div class="footbox txtcenter">
+            <a href="search.html">SEARCH</a><br>
+            <a href="contact.html">CONTACT US</a><br>
+            <a href="attribute.html">ATTRIBUTIONS</a><br>
+        </div>
+        <div class="footbox txtcenter">
+            704.971.2300<br>
+            1101 Red Ventures Dr,<br>
+            Fort Mill, SC 29707
+        </div>
+    </div>
+    <div class="footerfooter headfootwrap">copyright info</div>
+</div>
+<script src="javascript.js"></script>
+</body>
+</html>

01_Core/week04/ecommerce/javascript.js

@@ -0,0 +1,22 @@
+// Slideshow script //
+var slideIndex = 0;
+showSlides();
+
+function showSlides() {
+  var i;
+  var slides = document.getElementsByClassName("mySlides");
+  var dots = document.getElementsByClassName("dot");
+  for (i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";  
+  }
+  slideIndex++;
+  if (slideIndex > slides.length) {slideIndex = 1}    
+  for (i = 0; i < dots.length; i++) {
+    dots[i].className = dots[i].className.replace(" active", "");
+  }
+  slides[slideIndex-1].style.display = "block";  
+  dots[slideIndex-1].className += " active";
+  setTimeout(showSlides, 3000); // Change image every 2 seconds
+}
+
+// end slideshow script //

01_Core/week04/ecommerce/product_detail.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="Your source for all apps RV related!">
+<link rel="stylesheet" type="text/css" href="styles.css">
+
+ <!-- <link rel="favicon" href="https://img.icons8.com/android/24/000000/shopping-cart.png" type="image/png" /> -->
+<title>
+  RV IT Catalog
+</title>
+</head>
+<body>
+
+    <div class="headfootwrap"> 
+        <div class="flex navbar transition">
+            <a class="rv-logo transition" href="index.html"><img src="assets/rv-header-logo.png"></a>
+            <div class="flex btn-wrap transition">
+                <a href="index.html">HOME</a>
+                <div class="dropdown">
+                    <button class="dropbtn">CATEGORIES
+                        <i class="fa fa-caret-down"></i>
+                    </button>
+                    <div class="dropdown-content">
+                        <a href="products.html">View All</a>
+                        <a href="index.html">Productivity</a>
+                        <a href="index.html">Communication</a>
+                        <a href="index.html">Development</a>
+                        <a href="index.html">Hosting</a>
+                    </div>
+                </div>
+                <a href="search.html">SEARCH</a>
+                <a href="contact.html">CONTACT</a>
+                <a href="attribute.html">ATTRIBUTIONS</a>
+            </div>
+        </div>
+    </div>
+<div class="main-col">
+    <div class="img-large">
+        <img src="https://itcatalog/Shopping/RequestItem/Thumbnail/129">
+    </div>
+    <div class="prod-title">Slack</div>
+</div>
+<div class="price">
+    $0.00
+        <select name="version">
+                <option value="default">Version:</option>
+                <option value="mac">Mac</option>
+                <option value="windows">Windows</option>
+                <option value="linux">Linux</option>
+        </select>
+        <button type="button">Request</button>
+</div>
+<div class="proddescription">
+        Slack is an American cloud-based set of proprietary team collaboration software tools and online services, developed by Slack Technologies. 
+</div>
+
+    <div class="footer headfootwrap">
+            <div class="footwrap headfootwrap">
+                <div class="footbox txtcenter">
+                    Subscribe to our newsletter to hear the latest about new RV arrivals and apps!<br>
+                    <input type="text"><button type="button">Go</button>
+                </div>
+                <div class="footbox txtcenter">
+                    <a href="search.html">SEARCH</a><br>
+                    <a href="contact.html">CONTACT US</a><br>
+                    <a href="attribute.html">ATTRIBUTIONS</a><br>
+                </div>
+                <div class="footbox txtcenter">
+                    704.971.2300<br>
+                    1101 Red Ventures Dr,<br>
+                    Fort Mill, SC 29707
+                </div>
+            </div>
+            <div class="footerfooter headfootwrap">copyright info</div>
+        </div>
+        <script src="javascript.js"></script>
+        </body>
+        </html>