Add labs

class-01/lab/README.md

@@ -0,0 +1,38 @@
+# Lab 01: SMACSS and Responsive Web Design
+
+## Overview
+
+In lab today, you will be building a single responsive web page based off of the provided design comp assets.  These contain images of what you are striving to build in HTML and CSS, so be sure to open them up and keep them handy, but note that they are not for actual use on the page. You can also print out these comps and use them to mark up and sketch out page structure.
+
+Your document must be designed in a ***mobile-first*** approach and must be responsive when the screen size changes and the page is refreshed. The details of the media query specifications are up to you, but your breakpoint must be at 768 pixels.
+
+This is an independent project, but your are free to collaborate with your classmates.
+
+## Resources
+
+- [SMACSS Official Documentation](http://smacss.com/)
+- [Desktop wireframe](./comps/desktop-view.png)
+- [Mobile wireframe](./comps/mobile-view.png)
+
+## Feature Tasks
+
+- Create a new repository named `lab-01`.
+- Work on a non-master branch.
+- Use good HTML structure to scaffold this site, using semantic elements where possible.
+- Container elements (a box outside of your content box that might contain multiple content boxes) are very useful in managing layout. You will need to think about the relationship between parent and child / descendant elements as well as the order in which you place them in the HTML. Be thoughtful about your layout strategy.
+- Add a `reset.css` file to your project, like [this one.](https://meyerweb.com/eric/tools/css/reset/)
+- Use SMACSS-style modularity to organize your CSS.
+- Style the page using float-based layout to reflect the comp images provided as closely as possible. The only text you should have in each box is the identifying letter, which should be centered horizontally and vertically.
+- For the desktop view, the content should be inside of a channel that is a maximum of 960 pixels wide and is centered on wider screen sizes.
+- Each box should have a unique background color in mobile view and in desktop view. We are not working with jQuery events yet, so these changes should be observed when the screen size changes and the page is refreshed.
+
+## Stretch Goal
+
+- Create an additional breakpoint for a new set of colors when the page is viewed on a tablet.
+- Use jQuery to change the color of each box based on the screen size.
+
+## Submission Instructions
+
+- Complete your Feature Tasks for the day
+- Create a Pull Request (PR) back to the `master` branch of your repository
+- On Canvas, submit a link to your PR

class-01/lab/lab/README.md

@@ -0,0 +1,38 @@
+# Lab 01: SMACSS and Responsive Web Design
+
+## Overview
+
+In lab today, you will be building a single responsive web page based off of the provided design comp assets.  These contain images of what you are striving to build in HTML and CSS, so be sure to open them up and keep them handy, but note that they are not for actual use on the page. You can also print out these comps and use them to mark up and sketch out page structure.
+
+Your document must be designed in a ***mobile-first*** approach and must be responsive when the screen size changes and the page is refreshed. The details of the media query specifications are up to you, but your breakpoint must be at 768 pixels.
+
+This is an independent project, but your are free to collaborate with your classmates.
+
+## Resources
+
+- [SMACSS Official Documentation](http://smacss.com/)
+- [Desktop wireframe](./comps/desktop-view.png)
+- [Mobile wireframe](./comps/mobile-view.png)
+
+## Feature Tasks
+
+- Create a new repository named `lab-01`.
+- Work on a non-master branch.
+- Use good HTML structure to scaffold this site, using semantic elements where possible.
+- Container elements (a box outside of your content box that might contain multiple content boxes) are very useful in managing layout. You will need to think about the relationship between parent and child / descendant elements as well as the order in which you place them in the HTML. Be thoughtful about your layout strategy.
+- Add a `reset.css` file to your project, like [this one.](https://meyerweb.com/eric/tools/css/reset/)
+- Use SMACSS-style modularity to organize your CSS.
+- Style the page using float-based layout to reflect the comp images provided as closely as possible. The only text you should have in each box is the identifying letter, which should be centered horizontally and vertically.
+- For the desktop view, the content should be inside of a channel that is a maximum of 960 pixels wide and is centered on wider screen sizes.
+- Each box should have a unique background color in mobile view and in desktop view. We are not working with jQuery events yet, so these changes should be observed when the screen size changes and the page is refreshed.
+
+## Stretch Goal
+
+- Create an additional breakpoint for a new set of colors when the page is viewed on a tablet.
+- Use jQuery to change the color of each box based on the screen size.
+
+## Submission Instructions
+
+- Complete your Feature Tasks for the day
+- Create a Pull Request (PR) back to the `master` branch of your repository
+- On Canvas, submit a link to your PR

class-02/lab/README.md

@@ -0,0 +1,137 @@
+# Lab 02: jQuery Selectors and Events
+
+## Configuration
+
+_Your repository must include the following config files:_
+
+- `README.md` - with an overview of the project for a new visitor to your repo
+- `.gitignore` - with standard NodeJS configurations (see the provided `.gitignore` file)
+- `.eslintrc.json` - with Code 301 course standards for the linter (see the provided file in the *configs* folder of the class repo)
+
+- Organize your files into folders as you see fit. Here is an example file tree:
+
+```sh
+lab-02-repository
+├── css
+│   ├── base.css
+│   ├── layouts.css
+│   ├── modules.css
+│   └── reset.css
+├── data
+│   └── page-1.json
+├── index.html
+├── js
+│    └── app.js
+├── .eslintrc.json
+├── .gitignore
+└── README.md
+```
+
+## User Acceptance Tests
+
+### Overview
+
+In labs 2 and 3, you and your partner(s) will be using the provided JSON files to create a photo gallery. You will style it using floats.
+
+You have the option of using the provided `index.html` file, but it is not a requirement.
+
+## Resources
+
+- [page-1.json](./starter-code/page-1.json)
+- [index.html](./starter-code/index.html)
+
+### Time Estimate
+
+For each of the features listed below, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```
+Number and name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+### Feature #1: Display images
+
+#### Why are we implementing this feature?
+
+- As a user, I want to view the images on the page so that I can browse the photo collection.
+
+#### What are we going to implement?
+
+Given that a user opens the application in the browser
+When the user navigates to the home page
+Then the photo gallery should display all of the images in the gallery
+
+#### How are we implementing it?
+
+- Use AJAX, specifically `$.ajax()`, to read the provided JSON file.
+- Each object should become a new instance of a constructor function. Refer to the data to determine the necessary properties.
+- Use jQuery to make a copy of the HTML template of the photo component. For each object, fill in the duplicated template with its properties, then append the copy to the DOM.
+
+### Feature #2: Filter images
+
+#### Why are we implementing this feature?
+
+- As a user, I want to be able to filter the images so that I can view only images that match a keyword.
+
+#### What are we going to implement?
+
+Given that a user clicks on the dropdown menu
+When the user selects one of the options
+Then only the images whose keyword matches the option should be displayed
+
+#### How are we implementing it?
+
+- Create a `<select>` element which contains unique `<option>` elements extracted dynamically from the JSON file, one for each keyword.
+- Use an event handler to respond when the user chooses an option from the select menu. Hide all of the images, then show those whose keyword matches the option chosen.
+
+### Feature #3: Style the application
+
+#### Why are we implementing this feature?
+
+- As a user, I want a simple, clean looking UI so that my photo gallery clearly displays the images in a grid like pattern.
+
+#### What are we going to implement?
+
+Given that a user opens the application in the browser
+When the user navigates to the home page
+Then the images should be displayed in rows across the screen
+
+#### How are we implementing it?
+
+- Style your application using floats.
+- Utilize at least one Google font.
+
+### Stretch Goal: Sort the images
+
+#### Why are we implementing this feature?
+
+- As a user, I want to be able to sort the images so there is an order to how they render.
+
+#### What are we going to implement?
+
+Given that a user is presented with sort options
+When the user clicks on one option
+Then the images should be sorted accordingly
+
+#### How are we implementing it?
+
+- Add the ability for the user to sort the images by either title or by number of horns.
+- Sort the images by one of the properties on page load. This should also apply to the second page of images.
+
+## Submission Instructions
+
+- Complete your Feature Tasks for the day
+- Create a Pull Request (PR) back to the `master` branch of your repository
+- On Canvas, submit a link to your PR and a link to your deployed application on GitHub pages. Add a comment in your Canvas assignment which includes the following:
+  - A question within the context of today's lab assignment
+  - An observation about the lab assignment, or related 'Ah-hah!' moment
+  - How long you spent working on this assignment

class-02/lab/lab/README.md

@@ -0,0 +1,137 @@
+# Lab 02: jQuery Selectors and Events
+
+## Configuration
+
+_Your repository must include the following config files:_
+
+- `README.md` - with an overview of the project for a new visitor to your repo
+- `.gitignore` - with standard NodeJS configurations (see the provided `.gitignore` file)
+- `.eslintrc.json` - with Code 301 course standards for the linter (see the provided file in the *configs* folder of the class repo)
+
+- Organize your files into folders as you see fit. Here is an example file tree:
+
+```sh
+lab-02-repository
+├── css
+│   ├── base.css
+│   ├── layouts.css
+│   ├── modules.css
+│   └── reset.css
+├── data
+│   └── page-1.json
+├── index.html
+├── js
+│    └── app.js
+├── .eslintrc.json
+├── .gitignore
+└── README.md
+```
+
+## User Acceptance Tests
+
+### Overview
+
+In labs 2 and 3, you and your partner(s) will be using the provided JSON files to create a photo gallery. You will style it using floats.
+
+You have the option of using the provided `index.html` file, but it is not a requirement.
+
+## Resources
+
+- [page-1.json](./starter-code/page-1.json)
+- [index.html](./starter-code/index.html)
+
+### Time Estimate
+
+For each of the features listed below, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```
+Number and name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+### Feature #1: Display images
+
+#### Why are we implementing this feature?
+
+- As a user, I want to view the images on the page so that I can browse the photo collection.
+
+#### What are we going to implement?
+
+Given that a user opens the application in the browser
+When the user navigates to the home page
+Then the photo gallery should display all of the images in the gallery
+
+#### How are we implementing it?
+
+- Use AJAX, specifically `$.ajax()`, to read the provided JSON file.
+- Each object should become a new instance of a constructor function. Refer to the data to determine the necessary properties.
+- Use jQuery to make a copy of the HTML template of the photo component. For each object, fill in the duplicated template with its properties, then append the copy to the DOM.
+
+### Feature #2: Filter images
+
+#### Why are we implementing this feature?
+
+- As a user, I want to be able to filter the images so that I can view only images that match a keyword.
+
+#### What are we going to implement?
+
+Given that a user clicks on the dropdown menu
+When the user selects one of the options
+Then only the images whose keyword matches the option should be displayed
+
+#### How are we implementing it?
+
+- Create a `<select>` element which contains unique `<option>` elements extracted dynamically from the JSON file, one for each keyword.
+- Use an event handler to respond when the user chooses an option from the select menu. Hide all of the images, then show those whose keyword matches the option chosen.
+
+### Feature #3: Style the application
+
+#### Why are we implementing this feature?
+
+- As a user, I want a simple, clean looking UI so that my photo gallery clearly displays the images in a grid like pattern.
+
+#### What are we going to implement?
+
+Given that a user opens the application in the browser
+When the user navigates to the home page
+Then the images should be displayed in rows across the screen
+
+#### How are we implementing it?
+
+- Style your application using floats.
+- Utilize at least one Google font.
+
+### Stretch Goal: Sort the images
+
+#### Why are we implementing this feature?
+
+- As a user, I want to be able to sort the images so there is an order to how they render.
+
+#### What are we going to implement?
+
+Given that a user is presented with sort options
+When the user clicks on one option
+Then the images should be sorted accordingly
+
+#### How are we implementing it?
+
+- Add the ability for the user to sort the images by either title or by number of horns.
+- Sort the images by one of the properties on page load. This should also apply to the second page of images.
+
+## Submission Instructions
+
+- Complete your Feature Tasks for the day
+- Create a Pull Request (PR) back to the `master` branch of your repository
+- On Canvas, submit a link to your PR and a link to your deployed application on GitHub pages. Add a comment in your Canvas assignment which includes the following:
+  - A question within the context of today's lab assignment
+  - An observation about the lab assignment, or related 'Ah-hah!' moment
+  - How long you spent working on this assignment

class-02/lab/lab/starter-code/index.html

@@ -0,0 +1,27 @@
+<!-- Note: you may use this starter code, but it is not a requirement -->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>The Gallery of Horns</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <header>
+      <h1>The Gallery of Horns</h1>
+      <select>
+        <option value="default">Filter by Keyword</option>
+      </select>
+    </header>
+    <main>
+      <section id="photo-template">
+        <h2></h2>
+        <img src="" alt="">
+        <p></p>
+      </section>
+    </main>
+    <footer>
+      &copy; 2018 Code Fellows
+    </footer>
+  </body>
+</html>