├── .gitignore ├── 01-front-end-basics ├── ajax-and-apis │ ├── 26 │ │ └── README.md │ └── 27-28 │ │ └── README.md ├── css-bootstrap │ ├── .gitkeep │ └── 27-28 │ │ └── README.md ├── css-class-based │ ├── 26 │ │ ├── .gitkeep │ │ ├── WDI26-HTML-with-CSS.pdf │ │ ├── readme.md │ │ ├── solution-code │ │ │ ├── css │ │ │ │ ├── emmet-theme-done.css │ │ │ │ └── style.css │ │ │ ├── emmet-basics-done.html │ │ │ ├── index.html │ │ │ └── js │ │ │ │ └── script.js │ │ └── starter-code │ │ │ ├── css │ │ │ ├── emmet-theme.css │ │ │ └── style.css │ │ │ ├── emmet-basics.html │ │ │ ├── index.html │ │ │ └── js │ │ │ └── script.js │ └── .gitkeep ├── how-the-internet-works │ ├── 22 │ │ └── README.md │ ├── 26 │ │ └── README.md │ └── 27-28 │ │ └── README.md ├── html-forms │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.md │ └── 27-28 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.md ├── jquery-dom-manipulation │ ├── 24 │ │ ├── README.md │ │ └── solutions.md │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ ├── jquery-github-hack-exercise │ │ │ ├── README.md │ │ │ ├── img │ │ │ │ ├── 1.png │ │ │ │ ├── 1b.png │ │ │ │ ├── 2.png │ │ │ │ ├── 2b.png │ │ │ │ ├── 3a.png │ │ │ │ ├── 3b.png │ │ │ │ ├── 4a.png │ │ │ │ ├── 4b.png │ │ │ │ ├── 5a.png │ │ │ │ ├── 5b.png │ │ │ │ ├── 6a.png │ │ │ │ ├── 6b.png │ │ │ │ ├── 7a.png │ │ │ │ ├── 7b.png │ │ │ │ ├── 8a.png │ │ │ │ └── 8b.png │ │ │ └── solutions.md │ │ └── solutions.md │ ├── 26 │ │ └── README.md │ ├── .gitkeep │ └── 27-28 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.md ├── jquery-event-binding │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.md │ ├── .gitkeep │ └── 27-28 │ │ ├── README.md │ │ ├── exercises.md │ │ ├── logo.png │ │ ├── solutions.md │ │ └── test.html ├── js-array-iterators │ ├── 24 │ │ ├── readme.md │ │ └── solutions.md │ ├── 25 │ │ ├── README.md │ │ ├── exercises_a.md │ │ ├── exercises_b.md │ │ ├── solutions_a.js │ │ └── solutions_b.js │ ├── 28 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.js │ └── 27-28 │ │ ├── README.md │ │ ├── exercises_a.md │ │ └── solutions_a.js ├── js-arrays │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.js │ └── 27-28 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.js ├── js-control-flow │ ├── 18 │ │ └── README.md │ ├── 24 │ │ └── readme.md │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.md │ └── 22-23 │ │ ├── README.md │ │ ├── exercises.md │ │ ├── lab │ │ ├── README.md │ │ └── solutions │ │ │ ├── login.js │ │ │ ├── security_questions.js │ │ │ └── sing.js │ │ └── solutions.md ├── js-functions-advanced │ └── 22 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.js ├── js-functions │ ├── 22 │ │ ├── README.md │ │ ├── core_exercises.md │ │ ├── core_solutions.md │ │ ├── stretch_exercises │ │ └── stretch_solutions.md │ ├── 24 │ │ └── README.md │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.js │ └── 27-28 │ │ └── README.md ├── js-iterators │ └── .gitkeep ├── js-object-primitives │ ├── 23 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.js │ └── 27-28 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.js ├── json-and-html-string │ └── .gitkeep ├── oo-objects-constructors │ ├── 21 │ │ └── README.md │ ├── 24 │ │ └── README.md │ ├── 25 │ │ └── README.md │ ├── 26 │ │ ├── README.md │ │ ├── solution │ │ │ └── monkey.js │ │ └── studentObjectifier.js │ ├── 30 │ │ └── README.md │ ├── .gitkeep │ ├── 22-23 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.js │ └── 27-28 │ │ └── README.md ├── oo-prototype-inheritance │ ├── 24 │ │ ├── readme.md │ │ └── solutions.md │ └── .gitkeep ├── oo-prototypes │ ├── 24 │ │ └── readme.md │ ├── 25 │ │ ├── README.md │ │ └── pie-example │ │ │ ├── Pie.js │ │ │ └── index.html │ └── 27-28 │ │ └── README.md └── templating-handlebars │ ├── 24 │ ├── readme.md │ └── solutions.md │ └── 27-28 │ ├── README.md │ └── solutions.md ├── 02-express-mongo-crud ├── .gitkeep ├── express-params-queries │ ├── 24 │ │ └── readme.md │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.md │ ├── 22-23 │ │ ├── README.md │ │ ├── exercises.md │ │ ├── imgs │ │ │ ├── folders.png │ │ │ └── simple_express.gif │ │ └── solutions.md │ └── 27-28 │ │ ├── README.md │ │ ├── exercises.md │ │ ├── middleware_reading.md │ │ └── solutions.md ├── intro-express │ ├── 24 │ │ └── README.md │ ├── 25 │ │ ├── README.md │ │ └── exercises.md │ ├── 26 │ │ └── README.md │ ├── 22-23 │ │ ├── README.md │ │ └── exercises.md │ └── 27-28 │ │ └── README.md ├── mongoose-embed │ ├── 24 │ │ ├── readme.md │ │ └── solutions.md │ ├── 25 │ │ ├── README.md │ │ ├── embedded-example │ │ │ ├── models │ │ │ │ ├── index.js │ │ │ │ └── shows.js │ │ │ ├── package.json │ │ │ └── seed.js │ │ ├── exercises.md │ │ └── solutions.md │ ├── 19-20 │ │ ├── README.md │ │ └── img │ │ │ ├── many_to_many.png │ │ │ ├── one_to_many.png │ │ │ └── one_to_one.png │ ├── 22-23 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.md │ └── 27-28 │ │ └── README.md ├── mongoose-intro │ ├── 22 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solution.md │ ├── 24 │ │ └── readme.md │ ├── 25 │ │ └── README.md │ ├── 26 │ │ ├── readme.md │ │ └── solution-code │ │ │ ├── .gitignore │ │ │ ├── controllers │ │ │ └── remindersController.js │ │ │ ├── db │ │ │ ├── console.js │ │ │ └── seed.js │ │ │ ├── index.js │ │ │ ├── models │ │ │ └── reminder.js │ │ │ ├── package.json │ │ │ └── views │ │ │ ├── layout.hbs │ │ │ └── reminders │ │ │ ├── index.hbs │ │ │ └── new.hbs │ ├── .gitkeep │ └── 27-28 │ │ └── README.md └── mongoose-reference-populate │ ├── 21 │ ├── game.js │ └── readme.md │ ├── 24 │ └── readme.md │ ├── 19-20 │ ├── README.md │ └── img │ │ ├── many_to_many.png │ │ ├── one_to_many.png │ │ └── one_to_one.png │ ├── 22-23 │ ├── README.md │ └── exercises.md │ └── 27-28 │ └── README.md ├── 03-angular-mean ├── .gitkeep ├── api-integration │ └── 27-28 │ │ └── readme.md ├── auth-angular │ └── 25 │ │ ├── README.md │ │ └── solutions.md ├── custom-directives │ ├── 23 │ │ └── README.md │ ├── 25 │ │ └── README.md │ ├── 27 │ │ └── README.md │ └── README.md ├── http-update-delete │ └── 27-28 │ │ └── README.md ├── http │ ├── 27 │ │ └── README.md │ └── 28 │ │ └── README.md ├── intro-angular │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.md │ ├── 22-23 │ │ └── README.md │ └── 27-28 │ │ └── README.md ├── intro-mean │ └── 25 │ │ └── README.md ├── ngRoute │ ├── 24 │ │ └── readme.md │ └── 27 │ │ ├── README.md │ │ ├── goats_app.png │ │ └── views_layouts_malcolm.png ├── review │ └── 27 │ │ └── README.md ├── services-promises-ngResource │ └── 27-28 │ │ └── README.md └── ui-router │ └── 25 │ └── README.md ├── 04-ruby-rails ├── asset-pipeline │ ├── 22 │ │ ├── additional_reading.md │ │ └── readme.md │ ├── 23 │ │ ├── README.md │ │ └── exercises.md │ ├── 24 │ │ ├── additional-reading.md │ │ ├── readme.md │ │ └── solutions.md │ └── 27 │ │ ├── additional-reading.md │ │ ├── exercises.md │ │ └── readme.md ├── cookies-and-sessions │ └── 28 │ │ └── README.md ├── cookies-sessions │ ├── 25 │ │ └── README.md │ └── 27 │ │ └── README.md ├── intro-rails │ ├── 24 │ │ ├── readme.md │ │ └── solutions.md │ ├── 25 │ │ ├── README.md │ │ └── further-reading.md │ ├── 27 │ │ └── README.md │ └── 27-28 │ │ ├── README.md │ │ └── further-reading.md ├── intro-ruby │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ ├── reading-arrays-hashes-blocks.md │ │ ├── reading-ruby-data-types.md │ │ ├── solutions.js │ │ └── solutions.rb │ └── 27-28 │ │ ├── README.md │ │ ├── ruby-data-types-variables.md │ │ └── solutions.md ├── intro-sql │ ├── 25 │ │ ├── README.md │ │ ├── challenges.md │ │ ├── friends.sql │ │ ├── joins.md │ │ └── solutions.sql │ ├── 27 │ │ ├── README.md │ │ ├── assets │ │ │ ├── README.md │ │ │ ├── postgresql-cheat-sheet.pdf │ │ │ ├── primary_foreign_key.png │ │ │ └── sqljoins.jpg │ │ ├── challenges.md │ │ ├── friends.sql │ │ ├── joins.md │ │ ├── solutions.sql │ │ └── startercode.sql │ └── 28 │ │ ├── README.md │ │ ├── assets │ │ ├── README.md │ │ ├── primary_foreign_key.png │ │ └── sqljoins.jpg │ │ ├── challenges.md │ │ ├── friends.sql │ │ ├── joins.md │ │ └── solutions.sql ├── js-and-turbolinks │ └── 27 │ │ ├── README.md │ │ └── exercises.md ├── migration-hell │ ├── README.md │ └── solutions.md ├── migrations-and-associations │ ├── 24 │ │ ├── many-to-many-challenges.md │ │ ├── one-to-many-challenges.md │ │ ├── readme.md │ │ └── solutions.md │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions.md │ ├── 27 │ │ ├── README.md │ │ ├── many_to_many_challenges.md │ │ ├── one_to_many_challenges.md │ │ └── solutions.md │ └── 22-23 │ │ ├── README.md │ │ ├── many_to_many_challenges.md │ │ ├── one_to_many_challenges.md │ │ └── solution_link.md ├── model-validations-error-handling │ ├── 27 │ │ ├── README.md │ │ └── github-500.png │ └── 28 │ │ ├── README.md │ │ └── github-500.png ├── rails-auth │ ├── 27 │ │ └── README.md │ └── 28 │ │ ├── README.md │ │ └── solution.md ├── rails-gems │ ├── image-upload.md │ ├── lightning-talks.md │ └── pretty-urls.md ├── rails-lightning-talks │ └── README.md ├── rails-view-helpers-and-partials │ ├── 25 │ │ ├── README.md │ │ ├── exercises.md │ │ ├── glossary.md │ │ └── solutions.md │ └── 27 │ │ ├── README.md │ │ ├── exercises.md │ │ └── glossary.md ├── rangular │ ├── 24 │ │ ├── README.md │ │ └── solutons.md │ └── 28 │ │ └── README.md ├── rock-n-rails │ └── README.md ├── rspec-integration-testing-with-capybara │ └── 27 │ │ ├── README.md │ │ └── exercises.md ├── rspec-unit-tests │ ├── 25 │ │ └── README.md │ └── 27 │ │ ├── README.md │ │ └── exercises.md ├── ruby-methods │ ├── 22 │ │ ├── README.md │ │ ├── exercises.md │ │ └── solutions │ │ │ ├── guessing_game.rb │ │ │ ├── httparty.rb │ │ │ └── primes.rb │ ├── 24 │ │ ├── readme.md │ │ └── solutions.md │ └── 27-28 │ │ ├── README.md │ │ ├── exercises.md │ │ ├── reading-arrays-hashes-blocks.md │ │ └── solutions.rb ├── ruby-oop │ ├── 27 │ │ ├── README.md │ │ ├── manual_test.rb │ │ ├── monster.rb │ │ ├── oop-reading.md │ │ ├── part2.md │ │ └── solutions │ │ │ ├── monster.rb │ │ │ └── stretch.rb │ ├── README.md │ ├── exercises.md │ └── solutions.rb └── ruby-regex │ └── 28 │ └── README.md ├── assessments ├── 24 │ ├── day-01 │ │ ├── readme.md │ │ └── solutions.md │ ├── week-01 │ │ ├── readme.md │ │ └── solutions.md │ ├── week-02 │ │ ├── readme.md │ │ └── solutions.md │ ├── week-03 │ │ ├── readme.md │ │ └── solutions.md │ ├── week-06 │ │ ├── readme.md │ │ └── solutions.md │ └── week-07 │ │ ├── readme.md │ │ └── solutions.md ├── 27 │ └── week-07 │ │ ├── readme.md │ │ ├── solutions.md │ │ └── week-7-assessment-wdi-27.pdf └── 27-28 │ ├── day-01 │ ├── day-1-assessment-wdi-27-28.pdf │ ├── readme.md │ └── solutions.md │ ├── week-01 │ ├── readme.md │ ├── solutions.md │ └── week-1-assessment-wdi-27-28.pdf │ ├── week-02 │ ├── readme.md │ ├── solutions.md │ └── week-2-assessment-wdi-27-28.pdf │ └── week-03 │ ├── readme.md │ ├── solutions.md │ └── week-3-assessment-wdi-27-28.pdf ├── dir-presentations └── intro-to-basic-objects.md ├── homework ├── 27 │ ├── week-07 │ │ ├── README.md │ │ └── docs │ │ │ └── Rails-For-Zombies-Slides.pdf │ ├── week-08 │ │ └── README.md │ ├── week-09 │ │ └── README.md │ ├── week-10 │ │ ├── README.md │ │ ├── lightning-talk.md │ │ ├── portfolio.md │ │ └── wireframes │ │ │ ├── case_study.png │ │ │ ├── photo_description.png │ │ │ └── project_cards.png │ └── week-11 │ │ └── README.md └── 27-28 │ ├── week-00-template.md │ ├── week-01 │ └── README.md │ ├── week-02 │ └── README.md │ ├── week-03 │ └── README.md │ ├── week-04 │ └── README.md │ ├── week-05 │ └── README.md │ ├── week-06 │ └── README.md │ ├── week-07 │ └── README.md │ ├── week-08 │ └── README.md │ ├── week-09 │ └── README.md │ ├── week-10 │ └── README.md │ ├── week-11 │ └── README.md │ └── week-12 │ └── README.md ├── how-to ├── assets │ ├── AWS_bill_cropped.jpg │ ├── AtomShortcuts.png │ └── keep_it_secret.jpg ├── custom-domain-with-cloudflare.md ├── deploy-rails-to-heroku.md ├── github-collaboration-workflow.md ├── heroku-mean-stack-deploy.md ├── hide-secrets-in-node.md ├── keyboard-shortcuts.md ├── lightning-talks.md ├── peer-review.md ├── report-an-issue.md ├── request-a-code-review.md ├── store-secrets-using-env-vars.md ├── submit-homework.md └── talk_the_talk--vocab_and_jargon.md └── miscellaneous-drills ├── git-collaboration.md ├── git-theory.md ├── ruby-bubble-sort ├── 24 │ └── README.md └── 27 │ └── README.md └── secret-keys.md /.gitignore: -------------------------------------------------------------------------------- 1 | **/.DS_Store 2 | -------------------------------------------------------------------------------- /01-front-end-basics/css-bootstrap/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/css-bootstrap/.gitkeep -------------------------------------------------------------------------------- /01-front-end-basics/css-bootstrap/27-28/README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap Grid and CSS 2 | | Objectives | 3 | | :--- | 4 | | Add the Bootstrap library to your projects | 5 | | Use the Bootstrap Grid and Buttons | 6 | | Wireframe and take inspiration from existing websites | 7 | 8 | ## What? 9 | 10 | Bootstrap is a front end styling framework that simplifies using **Conventional** front end patterns such as: 11 | 12 | * A Responsive Grid 13 | * Thumbnails 14 | * Typography 15 | * Error, Warning, and Success Text and Alerts 16 | * Tooltips 17 | * Modals 18 | * many more - [see docs](http://getbootstrap.com/css/) 19 | 20 | ## Analogy - Help from a Time Traveller 21 | 22 | Imagine you were a surgeon in 1850. You have no antibiotics, no anesthesia, no procedures to cure the thousands of ailments that befall your patients every day. 23 | 24 | Now imagine that a time traveling doctor from 2034 leaves a set of books on your doorstep written in the 1950's. These might not be the best medicine that the doctor had available in his time, but the books contain a treasure trove of improvements from what you are working with. 25 | 26 | Bootstrap is like these books from 1950. There is better stuff out there, but this is pretty good to start! 27 | 28 | ## Bootstrap Boilerplate 29 | 30 | Here is a boilerplate bootstrap html document. **NOTICE** that bootstrap is being loaded through the web from a CDN `https://maxcdn.bootstrapcdn.com`. 31 | 32 | ```html 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | Bootstrap Boilerplate 48 | 49 | 50 |
51 |
52 |
53 |

col-sm-6

54 |

These columns take up half the page.

55 |
56 |
57 |

col-sm-6

58 |

And they take up the whole page on small devices.

59 |
60 |
61 |
62 | 63 | 64 | ``` 65 | 66 | ## Exercises 67 | 1. [Bootstrap Lab](https://github.com/sf-wdi-27-28/bootstrap-boilerplate) 68 | 69 | ## Resources 70 | 1. [Bootstrap docs](http://getbootstrap.com/) 71 | 1. [Made with Bootstrap](http://builtwithbootstrap.com/) 72 | -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/css-class-based/.gitkeep -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/css-class-based/26/.gitkeep -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/WDI26-HTML-with-CSS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/css-class-based/26/WDI26-HTML-with-CSS.pdf -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/solution-code/css/emmet-theme-done.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f2f2f2; 3 | } 4 | ul li { 5 | padding:1.5em; 6 | list-style-type: none; 7 | max-width:200px; 8 | } 9 | /******************* 10 | * * 11 | * animal-specific IDs * 12 | * * 13 | *******************/ 14 | 15 | #mouse{ 16 | color: gray; 17 | } 18 | #canary{ 19 | color:orangered; 20 | } 21 | #penguin{ 22 | color:black; 23 | } 24 | #salmon{ 25 | color: salmon; 26 | } 27 | #cat{ 28 | color:sienna; 29 | } 30 | #goldfish{ 31 | color: gold; 32 | } 33 | #dog{ 34 | color:tan; 35 | } 36 | #sheep{ 37 | color:steelblue; 38 | } 39 | #parakeet{ 40 | color: lime; 41 | } 42 | #tuna{ 43 | color:purple; 44 | } 45 | 46 | 47 | /*********************** 48 | * * 49 | * kingdom-specific classes * 50 | * * 51 | ***********************/ 52 | 53 | .bird{ 54 | background-color: lightgray; 55 | } 56 | .fish{ 57 | background-color: lightyellow; 58 | } 59 | .mammal{ 60 | background-color: lavenderblush; 61 | } 62 | -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/solution-code/css/style.css: -------------------------------------------------------------------------------- 1 | ul { 2 | border: 3px plum solid; 3 | border-radius: 5px; 4 | } 5 | li { 6 | border-top: 5px seagreen solid; 7 | } 8 | li.mammal { 9 | background-color: lavenderBlush; 10 | font-weight: bold; 11 | } 12 | li.bird { 13 | background-color: lightGray; 14 | font-style: italic; 15 | } 16 | li.fish { 17 | background-color: lightYellow; 18 | text-decoration: underline; 19 | } 20 | header { 21 | border: 5px green groove; 22 | background-color: yellow; 23 | } 24 | #photo { 25 | border: 3px orange solid; 26 | background-color: blue; 27 | } 28 | #central{ 29 | border: 11px blanchedalmond dashed; 30 | background-color: brown; 31 | } 32 | li#mouse { 33 | color: gray 34 | } 35 | li#canary { 36 | color: orangeRed 37 | } 38 | li#penguin { 39 | color: black 40 | } 41 | li#salmon { 42 | color: salmon 43 | } 44 | li#cat { 45 | color: sienna 46 | } 47 | li#goldfish { 48 | color: gold 49 | } 50 | li#dog { 51 | color: tan 52 | } 53 | li#sheep { 54 | color: steelBlue 55 | } 56 | li#parakeet { 57 | color: lime 58 | } 59 | li#tuna { 60 | color: purple 61 | } 62 | -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/solution-code/emmet-basics-done.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | You usually put your logo and nav stuff here 9 |
10 |
11 | 23 |
24 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/solution-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Intro to CSS 5 | 6 | 7 |
8 |

Central Nervous System

9 |
10 | 22 |
23 |

Photosynthesis

24 |
25 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/solution-code/js/script.js: -------------------------------------------------------------------------------- 1 | // script.js 2 | 3 | function doSomething(){ 4 | console.log("done"); 5 | } -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/starter-code/css/emmet-theme.css: -------------------------------------------------------------------------------- 1 | body { 2 | } 3 | ul li { 4 | } 5 | 6 | /******************* 7 | * * 8 | * animal-specific IDs * 9 | * * 10 | *******************/ 11 | 12 | #mouse{ 13 | } 14 | #canary{ 15 | } 16 | #penguin{ 17 | } 18 | #salmon{ 19 | } 20 | #cat{ 21 | } 22 | #goldfish{ 23 | } 24 | #dog{ 25 | } 26 | #sheep{ 27 | } 28 | #parakeet{ 29 | } 30 | #tuna{ 31 | } 32 | 33 | 34 | /*********************** 35 | * * 36 | * kingdom-specific classes * 37 | * * 38 | ***********************/ 39 | 40 | .bird{ 41 | } 42 | .fish{ 43 | } 44 | .mammal{ 45 | 46 | } 47 | -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/starter-code/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/css-class-based/26/starter-code/css/style.css -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/starter-code/emmet-basics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 |
14 | You usually put your logo and nav stuff here 15 |
16 |
17 | 39 |
40 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Intro to CSS 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /01-front-end-basics/css-class-based/26/starter-code/js/script.js: -------------------------------------------------------------------------------- 1 | // script.js 2 | 3 | function doSomething(){ 4 | console.log("done"); 5 | } -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/.gitkeep -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/1.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/1b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/1b.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/2.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/2b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/2b.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/3a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/3a.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/3b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/3b.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/4a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/4a.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/4b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/4b.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/5a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/5a.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/5b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/5b.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/6a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/6a.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/6b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/6b.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/7a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/7a.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/7b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/7b.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/8a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/8a.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/8b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/img/8b.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/25/jquery-github-hack-exercise/solutions.md: -------------------------------------------------------------------------------- 1 | # Solutions - Hack Github with jQuery! 2 | 3 | ##Challenge 1 - Name Changer 4 | 5 | `$(".user-mention").text("anonymous")` 6 | 7 | 8 | ##Challenge 2 - Add some class! 9 | 10 | `$(".btn").addClass("btn-primary")` 11 | 12 | ##Challenge 3 - It's Shruggy! 13 | 14 | `$(".message").text("¯\\_(ツ)_/¯")` 15 | 16 | 17 | ##Challenge 4 - I'm the captain now. 18 | 19 | `$("#user-links").remove()` 20 | 21 | ##Challenge 5 - One big family 22 | 23 | `$(".social-count").text("∞")` 24 | 25 | ##Challenge 6 - JustinHub! 26 | 27 | `$(".header-logo-invertocat").html("")` 28 | 29 | ##Challenge 7 - Nuclear Option 30 | 31 | `$(".pagehead-actions").append("
    • ")` 32 | 33 | ##Challenge 8 - Ugh, script kiddies 34 | 35 | `$("h1.entry-title").append(" / H4X0R3D!")` 36 | -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/27-28/exercises.md: -------------------------------------------------------------------------------- 1 | # jQuery & DOM Exercises 2 | 3 | #### Nature Drawing 101: Draw a Tree! - [solutions](solutions.md) 4 | 1. Draw the structure (DOM tree) of the following HTML document: 5 | 6 | ``` html 7 | 8 | 9 | 10 | My Site 11 | 12 | 13 |
    14 | 19 |
    20 | 21 |
    22 |

    Welcome to my site!

    23 | 24 |

    Words and links

    25 |
    26 | 27 | 30 | 31 | 32 | ``` 33 | 34 | * How many children does `header` have? 35 | * Name a direct child of the `p` element. 36 | * Name a direct parent of the `p` element 37 | * What is the parent of the `html` element? 38 | 39 | #### CSS Selector Challenge - [solutions](solutions.md) 40 | Please refer to [this google doc](https://docs.google.com/document/d/1sKbuZaSio1o65iRdkNpB03pwJfJj98GPHUJQsoKJmE4/edit?usp=sharing). 41 | 42 | For each page, come up with as many CSS Selectors as you can think of to select the html elments in **red**, and *only* the elements in red. 43 | 44 | 62 | 63 | 64 | # Exercise - Hack Github with jQuery! 65 | 66 | [Hack Github with jQuery Challenges](https://github.com/sf-wdi-27-28/hack-github-with-jquery) - [Solutions](https://github.com/sf-wdi-27-28/hack-github-with-jquery/blob/master/solutions.md) 67 | -------------------------------------------------------------------------------- /01-front-end-basics/jquery-dom-manipulation/27-28/solutions.md: -------------------------------------------------------------------------------- 1 | # jQuery & DOM Exercises 2 | 3 | #### Nature Drawing 101: Draw a Tree! 4 | * How many children does `header` have? 5 | - just one: the `ul` element 6 | * Name a direct child of the `p` element. 7 | - the `a` elment 8 | * Name a direct parent of the `p` element 9 | - the `section` element 10 | * What is the parent of the `html` element? 11 | - Trick question! It turns out that `html` belongs to the `document` object, which lives inside your browser (not your html)! 12 | 13 | #### CSS Selector Challenge 14 | 1. 15 | * \#fancy 16 | * p#fancy 17 | * div p#fancy 18 | * .page #fancy 19 | * .page p#fancy 20 | * div.page p#fancy 21 | 22 | 2. 23 | * div .small 24 | * div a.small 25 | * .small 26 | * div.page a.small 27 | 28 | 3. 29 | * p a 30 | * div.page p a 31 | * .page p a 32 | * div p a 33 | 34 | 4. 35 | * .mad-favs li 36 | * ul.mad-favs li 37 | * div.page ul.mad-favs li 38 | * .page .mad-favs li 39 | 40 | 5. 41 | * .sparkles 42 | * p.sparkles 43 | * div p.sparkles 44 | * div.page p.sparkles 45 | 46 | 6. 47 | * p a.small 48 | * p .small 49 | * div p .small 50 | * div.page p a.small 51 | 52 | 64 | 65 | # Solutions - Hack Github with jQuery! 66 | 67 | ## Challenge 1 - Name Changer 68 | 69 | `$(".user-mention").text("anonymous")` 70 | 71 | 72 | ## Challenge 2 - Add some class! 73 | 74 | `$(".btn").addClass("btn-primary")` 75 | 76 | ## Challenge 3 - It's Shruggy! 77 | 78 | `$(".message").text("¯\\_(ツ)_/¯")` 79 | 80 | 81 | ## Challenge 4 - I'm the captain now. 82 | 83 | `$("#user-links").remove()` 84 | 85 | ## Challenge 5 - One big family 86 | 87 | `$(".social-count").text("∞")` 88 | 89 | ## Challenge 6 - JustinHub! 90 | 91 | `$(".header-logo-invertocat").html("")` 92 | 93 | ## Challenge 7 - Nuclear Option 94 | 95 | `$(".pagehead-actions").append("
    • ")` 96 | 97 | ## Challenge 8 - Ugh, script kiddies 98 | 99 | `$("h1.entry-title").append(" / H4X0R3D!")` 100 | -------------------------------------------------------------------------------- /01-front-end-basics/jquery-event-binding/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-event-binding/.gitkeep -------------------------------------------------------------------------------- /01-front-end-basics/jquery-event-binding/25/exercises.md: -------------------------------------------------------------------------------- 1 | ## Exercises - jQuery Events 2 | 3 | #### Octocat & Mouse - [solution](solutions.md) 4 | Open you Chrome Developer Console on [Github](https://github.com/sf-wdi-25/notes). 5 | 6 | 1. Whenever you mouseover the octocat icon/logo in the top left corner, `console.log` "i gotchew mowsie!" 7 | 2. Does it also work for the ocotocat in the footer? 8 | 9 | #### Infinite Scroll - [solution](solutions.md) 10 | Open you Chrome Developer Console on [Github](https://github.com/sf-wdi-25/notes). 11 | 12 | 1. Can you capture the `scroll` event? (hint: you need to listen to the `window` object using `$(window)`) 13 | 2. Can you add `

    to infinity... and beyond!

    ` to the bottom of the page every time the user scrolls? 14 | 15 | #### Hijack Click - [solution](solutions.md) 16 | Hijack the big red button on the [GA homepage](https://generalassemb.ly/)! 17 | 18 | When you click the button... 19 | 20 | 1. prevent the default link behavior, and print "Clicked!" to the console. 21 | 2. use `$(this)` to change the text of the link to say "1". 22 | 3. Display the number of times the link has been clicked. If I click it again it should say "2". 23 | 24 | #### Events Lab - [solution](https://github.com/sf-wdi-25/events_lab/tree/solutions) 25 | Please Fork & Clone the [Events Lab](https://github.com/sf-wdi-25/events_lab) 26 | 27 | 28 | -------------------------------------------------------------------------------- /01-front-end-basics/jquery-event-binding/25/solutions.md: -------------------------------------------------------------------------------- 1 | ## Events 2 | 3 | #### Octocat & Mouse 4 | 5 | ``` javascript 6 | $(".mega-octicon").on("mouseover", function handleHover(){ 7 | console.log("i gotchew mousie!"); 8 | }) 9 | ``` 10 | 11 | #### Infinite Scroll 12 | ``` javascript 13 | $(window).on("scroll", function handleScroll(){ 14 | $("body").append("

    to infinity... and beyond!

    "); 15 | }) 16 | ``` 17 | 18 | #### Hijack Click 19 | 20 | ``` javascript 21 | var clickCount = 0; 22 | $("a#san-francisco_cta").on("click", function handleClick(event){ 23 | event.preventDefault(); 24 | console.log("Clicked!"); 25 | 26 | clickCount = clickCount + 1; 27 | $(this).text( clickCount ); 28 | }) 29 | ``` 30 | 31 | #### Events Lab 32 | 33 | Please see the `solutions` branch of the events_lab repo: https://github.com/sf-wdi-27-28/events_lab/tree/solutions 34 | -------------------------------------------------------------------------------- /01-front-end-basics/jquery-event-binding/27-28/exercises.md: -------------------------------------------------------------------------------- 1 | ## Exercises - jQuery Events 2 | 3 | #### Octocat & Mouse - [solution](solutions.md) 4 | Open you Chrome Developer Console on [Github](https://github.com/sf-wdi-27-28). 5 | 6 | 1. Whenever you mouseover the octocat icon/logo in the top left corner, `console.log` "i gotchew mowsie!" 7 | 2. Does it also work for the ocotocat in the footer? 8 | 9 | #### Infinite Scroll - [solution](solutions.md) 10 | Open you Chrome Developer Console on [Github](https://github.com/sf-wdi-27-28). 11 | 12 | 1. Can you capture the `scroll` event? (hint: you need to listen to the `window` object using `$(window)`) 13 | 2. Can you add `

    to infinity... and beyond!

    ` to the bottom of the page every time the user scrolls? 14 | 15 | #### Hijack Click - [solution](solutions.md) 16 | Hijack the big red button on the [GA homepage](https://generalassemb.ly/)! 17 | 18 | When you click the button... 19 | 20 | 1. prevent the default link behavior, and print "Clicked!" to the console. 21 | 2. use `$(this)` to change the text of the link to say "1". 22 | 3. Display the number of times the link has been clicked. If I click it again it should say "2". 23 | 24 | #### Events Lab - [solution](https://github.com/sf-wdi-27-28/events_lab/tree/solutions) 25 | Please Fork & Clone the [Events Lab](https://github.com/sf-wdi-27-28/events_lab) 26 | 27 | 28 | -------------------------------------------------------------------------------- /01-front-end-basics/jquery-event-binding/27-28/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/jquery-event-binding/27-28/logo.png -------------------------------------------------------------------------------- /01-front-end-basics/jquery-event-binding/27-28/solutions.md: -------------------------------------------------------------------------------- 1 | ## Events 2 | 3 | #### Octocat & Mouse 4 | 5 | ``` javascript 6 | $(".mega-octicon").on("mouseover", function handleHover(){ 7 | console.log("i gotchew mousie!"); 8 | }) 9 | ``` 10 | 11 | #### Infinite Scroll 12 | ``` javascript 13 | $(window).on("scroll", function handleScroll(){ 14 | $("body").append("

    to infinity... and beyond!

    "); 15 | }) 16 | ``` 17 | 18 | #### Hijack Click 19 | 20 | ``` javascript 21 | var clickCount = 0; 22 | $("a#san-francisco_cta").on("click", function handleClick(event){ 23 | event.preventDefault(); 24 | console.log("Clicked!"); 25 | 26 | clickCount = clickCount + 1; 27 | $(this).text( clickCount ); 28 | }) 29 | ``` 30 | 31 | #### Events Lab 32 | 33 | Please see the `solutions` branch of the events_lab repo: https://github.com/sf-wdi-27-28/events_lab/tree/solutions 34 | -------------------------------------------------------------------------------- /01-front-end-basics/jquery-event-binding/27-28/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | JQuery Event Listeners 5 | 6 | 7 | 8 | 9 |
    10 |

    Hello There

    11 |

    12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 13 |

    14 | 15 | A fantastic link to another website 16 |
    17 | 18 | 19 | -------------------------------------------------------------------------------- /01-front-end-basics/js-array-iterators/24/solutions.md: -------------------------------------------------------------------------------- 1 | # Solutions 2 | 3 | 4 | ## filter 5 | ``` 6 | 7 | var array = [1,2,3,4,5,6,7,8,9,10]; 8 | 9 | array = array.filter(function(val){ 10 | return val < 5; 11 | }); 12 | ``` 13 | 14 | ## map 15 | ``` 16 | var array = [1,2,3,4,5]; 17 | array = array.map(function(val){ 18 | return val * 5; 19 | }); 20 | ``` 21 | 22 | ## reduce 23 | ``` 24 | var array = [4,5,6,7,8]; 25 | var multiply = function(a,b){ 26 | return a*b; 27 | }; 28 | ``` 29 | -------------------------------------------------------------------------------- /01-front-end-basics/js-array-iterators/25/exercises_a.md: -------------------------------------------------------------------------------- 1 | ## Challenge set A: Array iterators ## 2 | 3 | ###Challenge 1 (maps)### 4 | 5 | Elaine the Etsy Merchant thinks her prices are scaring off customers. Subtracting one penny might help: 6 | Help her out: 7 | 8 | ```javascript 9 | var prices = [3.00,4.00,10.00,2.25,3.01]; 10 | prices.map(callbackfn); 11 | //[2.99, 3.99, 9.99, 2.24, 3.00] 12 | ``` 13 | 14 | More Challenges: 15 | 16 | - On second thought, Elaine only wants to subtract a penny if it changes the dollars place, e.g.: 10.00 --> 9.99 17 | 18 | - Prices are going up! Elaine needs to raise her prices by 5%. 19 | 20 | 21 | ###Challenge 2 (filter)### 22 | Is there an interesting trend in birthdays? Do people tend to be born more on even-numbered dates or odd-numbered dates? This is a great chance to do some serious science! 23 | 24 | ```javascript 25 | var birthDates = [1, 1, 2, 4, 7, 4, 12, 30,...]; 26 | birthdates.filter(callbackfn); 27 | evenBirthdates = [2, 4, 4, 12, 30]; 28 | ``` 29 | - In an organized and semi-nonchaotic fashion, create a master list of all birthdates with every person in the class. We're only interested in the birthdate (1 - 31), we don't care about month or year. 30 | 31 | - Independently write a filter array function that creates an array for either odd or even birth dates. 32 | 33 | - Compare the results for even numbers with those for odd numbers. Write some code that reports the results. For example `6 out of 10 students were born on an even day. Evens are more common.` Or `60% of the class was born on an even-numbered day.` 34 | 35 | - Share your results with the class and bask in your great science! 36 | 37 | ###Challenge 3 (reduce)### 38 | Goyle has a lucrative dog walking business. He's made mucho moolah this summer. How much did he make? 39 | 40 | ```javascript 41 | var earnings = [20, 25, 60, 20, 85, 20]; 42 | earnings.reduce(callbackfn); 43 | // 210 44 | ``` 45 | Challenge: 46 | 47 | - Goyle already has $500 in the bank. How would you incorporate this into your method call? (YOU ARE NOT ALLOWED TO USE output + 500) 48 | - BONUS: Goyle's curious how many times he earned $20 this summer. (HINT: there's a method for this!) 49 | -------------------------------------------------------------------------------- /01-front-end-basics/js-array-iterators/25/exercises_b.md: -------------------------------------------------------------------------------- 1 | ## Challenge set B: function building ## 2 | 3 | Work together in groups of 3 to solve the following: 4 | 5 | DO NOT USE ANY BUILT IN ITERATOR METHODS: `forEach`, `map`, `reduce`, etc. 6 | 7 | Be sure to verify that your functions are working before moving on to the next step. Each of these is designed to build on your results from the previous ones. 8 | 9 | **Warm Up Challenges:** 10 | 11 | * Create a function `hereYaGo`. 12 | * Input: an array. 13 | * Output: the same array. 14 | ``` 15 | someArray === hereYaGo(someArray); // this should be true 16 | ``` 17 | * Create a function `first`. 18 | * Input: an array. 19 | * Output: the first item in that array. 20 | ``` 21 | first(["apple", "toast", "cheese"]); 22 | // "apple" 23 | ``` 24 | * Create a function `last`. 25 | * Input: an array. 26 | * Output: the last item in that array. 27 | ``` 28 | last(["apple", "toast", "cheese"]); 29 | // "cheese" 30 | ``` 31 | * Create a function `printEach`: 32 | * Input: an array. 33 | * On each iteration, print the item to the console. 34 | * Output: undefined; 35 | * Modify the above to become `printEachPlus`: 36 | * Input: an array and **another function**. Use `function() { return "!" }` as the function. 37 | * On each iteration, print the item to the console concatenated with the output of the callback function. 38 | * Output: undefined; 39 | ``` 40 | // example of printEachPlus definition 41 | function printEachPlus(arr, callback) { 42 | // your code here 43 | } 44 | // example of calling printEachPlus 45 | printEachPlus(["apple", "toast", "cheese"], function(){ 46 | return "!" 47 | }); 48 | // "apple!" 49 | // "toast!" 50 | // "cheese!" 51 | ``` 52 | * Modify the above to become `printEachSuperPlus`: 53 | * Input: an array and a function. When calling use the function: `function(v){return v + "!"}` 54 | * On each iteration, print the output of calling the callback function with the current item **as an argument** to the callback function. 55 | * Output: undefined; 56 | ``` 57 | printEachSuperPlus(["apple", "toast", "cheese"], function(item){ 58 | return item + "!" 59 | }); 60 | // "apple!" 61 | // "toast!" 62 | // "cheese!" 63 | ``` 64 | -------------------------------------------------------------------------------- /01-front-end-basics/js-array-iterators/25/solutions_b.js: -------------------------------------------------------------------------------- 1 | // ## Challenge set B: function building ## 2 | 3 | 4 | function hereYaGo(anArr) { 5 | return anArr; 6 | } 7 | 8 | 9 | function first(anArr) { 10 | return anArr[0]; 11 | } 12 | 13 | 14 | function last(anArr) { 15 | return anArr[anArr.length-1]; 16 | } 17 | 18 | 19 | 20 | function printEach(anArr) { 21 | for(var i=0; i 9.99 17 | 18 | - Prices are going up! Elaine needs to raise her prices by 5%. 19 | 20 | 21 | ### Challenge 2 (filter) ### 22 | Is there an interesting trend in birthdays? Do people tend to be born more on even-numbered dates or odd-numbered dates? This is a great chance to do some serious science! 23 | 24 | ```javascript 25 | var birthDates = [1, 1, 2, 4, 7, 4, 12, 30,...]; 26 | var evenBirthdates = birthDates.filter(callbackfn); 27 | // evenBirthdates = [2, 4, 4, 12, 30]; 28 | ``` 29 | - In an organized and semi-nonchaotic fashion, create a master list of all birthdates with every person in the class. We're only interested in the birthdate (1 - 31), we don't care about month or year. 30 | 31 | - Independently write a filter array function that creates an array for either odd or even birth dates. 32 | 33 | - Compare the results for even numbers with those for odd numbers. Write some code that reports the results. For example `6 out of 10 students were born on an even day. Evens are more common.` Or `60% of the class was born on an even-numbered day.` 34 | 35 | - Share your results with the class and bask in your great science! 36 | 37 | ### Challenge 3 (reduce) ### 38 | Goyle has a lucrative dog walking business. He's made mucho moolah this summer. How much did he make? 39 | 40 | ```javascript 41 | var earnings = [20, 25, 60, 20, 85, 20]; 42 | earnings.reduce(callbackfn); 43 | // returns: 230 44 | ``` 45 | Challenge: 46 | 47 | - Goyle already has $500 in the bank. How would you incorporate this into your method call? (YOU ARE NOT ALLOWED TO USE output + 500) 48 | - BONUS: Goyle's curious how many times he earned $20 this summer. (HINT: there's a method for this!) 49 | -------------------------------------------------------------------------------- /01-front-end-basics/js-array-iterators/28/exercises.md: -------------------------------------------------------------------------------- 1 | ## Exercises - Array iterators ## 2 | 3 | ### Challenge 1 (map) - [Solution](solutions.js) 4 | 5 | Elaine the Etsy Merchant thinks her prices are scaring off customers. Subtracting one penny might help: 6 | Help her out: 7 | 8 | ```javascript 9 | var prices = [3.00, 4.00, 10.00, 2.25, 3.01]; 10 | prices.map(callbackfn); 11 | // returns: [2.99, 3.99, 9.99, 2.24, 3.00] 12 | ``` 13 | 14 | More Challenges: 15 | 16 | - On second thought, Elaine only wants to subtract a penny if it changes the dollars place, e.g.: 10.00 --> 9.99 17 | 18 | - Prices are going up! Elaine needs to raise her prices by 5%. 19 | 20 | 21 | ### Challenge 2 (filter) - [Solution](solutions.js) 22 | Is there an interesting trend in birthdays? Do people tend to be born more on even-numbered dates or odd-numbered dates? This is a great chance to do some serious science! 23 | 24 | ```javascript 25 | var birthDates = [1, 1, 2, 4, 7, 4, 12, 30,...]; 26 | birthdates.filter(callbackfn); 27 | evenBirthdates = [2, 4, 4, 12, 30]; 28 | ``` 29 | - In an organized and semi-nonchaotic fashion, create a master list of all birthdates with every person in the class. We're only interested in the birthdate (1 - 31), we don't care about month or year. 30 | 31 | - Independently write a filter array function that creates an array for either odd or even birth dates. 32 | 33 | - Compare the results for even numbers with those for odd numbers. Write some code that reports the results. For example `6 out of 10 students were born on an even day. Evens are more common.` Or `60% of the class was born on an even-numbered day.` 34 | 35 | - Share your results with the class and bask in your great science! 36 | 37 | ### Challenge 3 (reduce) - [Solution](solutions.js) 38 | Goyle has a lucrative dog walking business. He's made mucho moolah this summer. How much did he make? 39 | 40 | ```javascript 41 | var earnings = [20, 25, 60, 20, 85, 20]; 42 | earnings.reduce(callbackfn); 43 | // 210 44 | ``` 45 | Challenge: 46 | 47 | - Goyle already has $500 in the bank. How would you incorporate this into your method call? (YOU ARE NOT ALLOWED TO USE output + 500) 48 | - BONUS: Goyle's curious how many times he earned $20 this summer. (HINT: there's a method for this!) 49 | -------------------------------------------------------------------------------- /01-front-end-basics/js-arrays/25/exercises.md: -------------------------------------------------------------------------------- 1 | #Exercises - Array Manipulation 2 | 3 | ## Challenge Set A ## 4 | 5 | ### Challenge 1 ### 6 | 7 | Use your chrome console `ctrl+opt+j` to perform the following activities. 8 | Each of the following tasks can be accomplished using a single Array method in 1 line of code. 9 | 10 | * create an array: `var cacti = ['barrel', 'columnar', 'hedgehog', 'cluster', 'prickly pear'];` 11 | * print out the 3rd element (hedgehog) 12 | * print out the length of the array 13 | * print out (console.log) the last element (prickly pear). Use a built-in array method. (Do not use `cacti[4]`) 14 | * put `epiphytic` on the end of the array 15 | * Use indexOf to find the index of 'columnar' and print it out. 16 | * remove 'barrel' (the first element) from the list 17 | * add 'barrel' back to the **front** of the list 18 | * remove the 4th element of the list (hint use splice) 19 | 20 | ### Challenge 2 ### 21 | 22 | Use `for` to print out each fruit from the list. 23 | ```js 24 | var fruits = ["Apple", "Banana", "Cherry", "Durian", "Elderberry", 25 | "Fig", "Guava", "Huckleberry", "Ice plant", "Jackfruit"]; 26 | ``` 27 | 28 | ### Challenge 3 ### 29 | 30 | Print the same list as above, in reverse order. 31 | 32 | 33 | 34 | **stop here until we reach the next exercise** 35 | 36 | ## Challenge Set B ## 37 | 38 | ### Challenge 1a (forEach)### 39 | 40 | ```js 41 | var dogs = ['Snoopy', 'Scooby', 'Pluto', 'Goofy', 'Astro', 'Mr. Peabody', 'Odie', "Santa's Little Helper", 'Brian']; 42 | ``` 43 | 44 | Use `forEach` to print each character in the list of famous cartoon dogs. 45 | 46 | 47 | ###Challenge 1b (forEach)### 48 | 49 | Use `forEach` and `String.toUpperCase` method to convert the list of characters into all capitals. That is, you should replace each character in the array with an all UPPERCASE version of that character's name. 50 | 51 | Use `console.log(dogs)` to verify your solution has changed the `dogs` array. 52 | 53 | 54 | ###Challenge 1c (forEach)### 55 | 56 | *Curry up now* has a line wrapped around the truck! It takes about two minutes per delicious curry burrito. Output the customer's name & their expected wait time. 57 | 58 | ```javascript 59 | // warning the below is pseudo-code! 60 | var customers: Justin, Ilias, Nathan, Camilo, Vikash, Adam, Brianna, Sarah, Ali, Jessie, Cameron 61 | customers.forEach(fn); 62 | 63 | 64 | /* sample output: 65 | Justin: 2 minutes 66 | Ilias: 4 minutes 67 | Nathan: 6 minutes 68 | Camilo: 8 minutes 69 | Vikash: 10 minutes 70 | ... 71 | Cameron: 22 minutes 72 | */ 73 | ``` 74 | -------------------------------------------------------------------------------- /01-front-end-basics/js-control-flow/22-23/exercises.md: -------------------------------------------------------------------------------- 1 | #Control Flow Exercises 2 | 3 | ## Boolean Expressions and Truthy Values 4 | 5 | 1. What is the outcome of the following expressions? 6 | 7 | * true || false 8 | * false && false 9 | * true && false 10 | * (false || true) && true 11 | * false && ((true || false) && (false || true)) 12 | 13 | 1. Which of the following are truthy values? (hint: try `if("abc"){console.log("I'm truthy!")}` in the JS console) 14 | * 1 15 | * 0 16 | * 3.14159 17 | * "abc" 18 | * "" 19 | * Array 20 | * [] 21 | * Object 22 | * {} 23 | 24 | 1. What is the outcome of the following expressions? 25 | * true && 6 26 | * 0 || "hi" 27 | * ["a","b","c"] || "123" 28 | * {"key":"value"} || false 29 | 30 | ## Conditionals! 31 | 32 | Remember, you can work in a file (like controlFlow.js) in Sublime Text to keep your code. Run it from the terminal by typing `node controlFlow.js`, or copy and paste sections into the Chrome developer console. 33 | 34 | Jimmy loves roller coasters, but there are a bunch of rules (ugh!) for riding: 35 | 36 | For starters, it costs 5 tokens. Here's how we might code that: 37 | 38 | ``` 39 | var tokens = 3; // Jimmy's tokens 40 | 41 | // Can he ride? 42 | if ( tokens >= 5 ) { 43 | console.log("Step right up!"); 44 | } else { 45 | console.log("Sorry, you can't ride") 46 | } 47 | ``` 48 | Edit the code above to check the following additional Requirements: 49 | 50 | 1. Must be at least 4ft tall 51 | 2. Must be at least 12 years old 52 | 3. Replace the prevoius rule: now riders under 12 must be accompanied by an adult 53 | 4. (If the boss isn't looking, you can sneak in!) 54 | 5. Riders with a park pass get in free. 55 | 56 | ## Loops! 57 | 58 | 2. Log to the console "This is awesome!" 25 times. 59 | 60 | 1. Create a new variable that is an array of 4 phrases: `"Howdy there"`, `"OMG"`, `"javascript"`, and `"Pair Programming"`. 61 | 62 | 5. Loop over the array and log each phrase to the console. 63 | 64 | -------------------------------------------------------------------------------- /01-front-end-basics/js-control-flow/22-23/lab/README.md: -------------------------------------------------------------------------------- 1 | # Control Flow Lab 2 | 3 | ## Instructions 4 | 5 | 1. Create a new file for each exercise. 6 | 1. Test your code for exercise 1 by running the file with `node sing.js` or by copying and pasting your code into the Chrome dev console. 7 | 1. Test your code for the exercises that require `prompt` in the browser, since the `prompt` method is only available in the browser! 8 | 9 | ##Exercise 1: Sing! 10 | 11 | Hint: Be mindful of infinite loops. They will crash your browser! 12 | 13 | 2. Write code that console logs the "Bottles of beer on the wall" song: 14 | 15 | 5 bottles of beer on the wall, 16 | 5 bottles of beer! 17 | Take one down and pass it around, 18 | 4 bottles of beer on the wall! 19 | 20 | 21 | * How would you fix "1 bottles of beer"? 22 | * How would you change "0" to "No more"? 23 | * Use a JavaScript `prompt` to ask the user how many verses they want to hear. 24 | 25 | ###Exercise 2: Login 26 | 27 | 4. Create a `userLogin` object with one key for a user's name and one key for the user's password. Just make up a user name and password. Write code that prompts the user for their password with a message customized to the user. For example, if the user name you created is `octocat_rules`, the message should be `"Enter password for user octocat_rules."` 28 | 29 | 5. Extend your previous code to check whether the password the user gives matches the password in the `userLogin` object. The code should communicate whether the passwords matched to the user with console logs or JavaScript `alert`. 30 | 31 | Bonus: Modify your user login to give the user three chances to enter the correct password. 32 | 33 | ###Stretch Exercise: Security Questions 34 | 35 | 1. Create an array called `securityQuestions`. Each element of `securityQuestions` will be an object with two keys: `question` and `expectedAnswer`. 36 | 37 | 1. Populate (fill) `securityQuestions` with at least three such objects. Feel free to just make them up. For example, one security question object might be: 38 | ``` 39 | { question: "What was your first pet's name?", expectedAnswer: "FlufferNutter" } 40 | ``` 41 | 42 | 43 | 1. Write code that goes through each of the security questions doing the following: 44 | * prompt the user with the question 45 | * check whether the user's input matches the expected answer 46 | * if the answer does match, ask the next question 47 | * if the answer doesn't match, stop asking questions and pop up an alert message. 48 | -------------------------------------------------------------------------------- /01-front-end-basics/js-control-flow/22-23/lab/solutions/login.js: -------------------------------------------------------------------------------- 1 | // login 2 | 3 | var userLogin = {userName: "octocat_rules", password: "abacadabra"} 4 | 5 | var password; 6 | 7 | for (var i=0; i < 3; i++){ 8 | password = prompt("Enter password for user " + userLogin["userName"] + ".") 9 | if (password === userLogin["password"]){ 10 | console.log("Passwords match!"); 11 | break; 12 | } else { 13 | console.log("Passwords do not match!"); 14 | if (i===2){ 15 | alert("No more password attempts!"); 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /01-front-end-basics/js-control-flow/22-23/lab/solutions/security_questions.js: -------------------------------------------------------------------------------- 1 | // security questions 2 | var securityQuestions = [ 3 | { 4 | question: "What was your first pet's name?", 5 | expectedAnswer: "FlufferNutter" 6 | }, 7 | { 8 | question: "What was the model year of your first car?", 9 | expectedAnswer: "1985" 10 | }, 11 | { 12 | question: "What city were you born in?", 13 | expectedAnswer: "NYC" 14 | } 15 | ] 16 | 17 | 18 | var thisAnswer = ""; 19 | for (var i=0; i < securityQuestions.length; i++){ 20 | thisAnswer = prompt(securityQuestions[i]["question"]); 21 | if (thisAnswer !== securityQuestions[i].expectedAnswer){ 22 | alert("Incorrect security question response!"); 23 | break; 24 | } 25 | } -------------------------------------------------------------------------------- /01-front-end-basics/js-control-flow/22-23/lab/solutions/sing.js: -------------------------------------------------------------------------------- 1 | // sing 2 | 3 | var numBottles = prompt("How many bottles of beer on the wall?"); 4 | 5 | var bottles = "bottles" 6 | while (numBottles > 0){ 7 | console.log(numBottles + " " + bottles + " of beer on the wall,"); 8 | console.log(numBottles + " " + bottles + " of beer"); 9 | console.log("Take one down and pass it around,"); 10 | numBottles = numBottles - 1; 11 | if (numBottles === 1){ 12 | bottles = "bottle" 13 | } 14 | if (numBottles === 0){ 15 | console.log("No more bottles of beer on the wall!"); 16 | } else { 17 | console.log(numBottles + " " + bottles + " of beer on the wall!"); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /01-front-end-basics/js-functions-advanced/22/solutions.js: -------------------------------------------------------------------------------- 1 | // Looping Exercise 1 Solution: 2 | for (var key in myFirstJSON){ 3 | for (var i = 0; i < myFirstJSON['language basics'][0]['Spanish']['letters'].length; i++){ 4 | console.log(myFirstJSON['language basics'][0]['Spanish']['letters'][i]); 5 | } 6 | } 7 | 8 | // Looping Exercise 2 Solution: 9 | function languageBasics(language, type){ 10 | var tempArrayRoot = myFirstJSON['language basics']; 11 | if(language === 'Spanish'){ 12 | for (var i = 0; i < tempArrayRoot[0][language][type].length; i++){ 13 | if (type === 'letters'){ 14 | console.log(tempArrayRoot[0][language][type][i]); 15 | } else if (type === 'numbers') { 16 | console.log(tempArrayRoot[0][language][type][i]); 17 | } 18 | } 19 | } else if (language === 'Japanese'){ 20 | for (var j = 0; j < tempArrayRoot[1][language][type].length; j++){ 21 | if (type === 'letters') { 22 | console.log(tempArrayRoot[1][language][type][j]); 23 | } else if (type === 'numbers'){ 24 | console.log(tempArrayRoot[1][language][type][j]); 25 | } 26 | } 27 | } else { 28 | console.log("Please enter either 'Spanish' or 'Japanese' and either 'letters' or 'numbers'"); 29 | } 30 | } 31 | 32 | // Stretch: Refactor the function above. There are many ways. Consider using forEach, map, reduce or similar jQuery methods 33 | 34 | 35 | 36 | // Closure Exercise 1: 37 | var closeCall = function(firstNum){ 38 | var secondNum = 6; 39 | var addStuff = function(secondNum){ 40 | return firstNum + secondNum; 41 | }; 42 | return addStuff(secondNum); 43 | }; 44 | 45 | // Closure Exercise 2: 46 | var Animal = function(){ 47 | return { 48 | 'name': 'beaver', 49 | 'age': 2, 50 | 'gender': 'male', 51 | 'catchPhrase': 'Dam!', 52 | speak: function(words){ 53 | console.log("hi there, " + words); 54 | }, 55 | doSomething: function(placeholder){ 56 | console.log(placeholder + " I just cut down a tree!"); 57 | } 58 | }; 59 | }; 60 | 61 | var chucky = new Animal(); 62 | 63 | chucky.speak('I am a beaver!'); 64 | 65 | 66 | // Closure Exercise 3: 67 | 68 | var Car = {}; 69 | 70 | Car.brand = "Toyota"; 71 | Car.model = "Corolla"; 72 | Car.year = 1984; 73 | Car.horsePower = 250; 74 | Car.hitPoints = 10; 75 | Car.shields = 5; 76 | Car.maxSpeed = 50; 77 | Car.weapons = [{"machine gun": 80}, {"oil slick": 30}, {"wheel swords": 55}]; 78 | Car.attack = function(){ 79 | var weapons = this.weapons; 80 | for(var i = 0; i < weapons.length; i++){ 81 | for (var key in weapons[i]){ 82 | console.log( key + ' attack! Damage done: ' + weapons[i][key] ); 83 | } 84 | } 85 | } 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /01-front-end-basics/js-functions/22/core_exercises.md: -------------------------------------------------------------------------------- 1 | ## Challenges 2 | 3 | ### Instructions 4 | 5 | >Create a new directory in your dev folder called javascript-functions. CD into this directory and create a new JavaScript file by running 'touch functions.js' in your terminal. Open this file in Sublime. This is where you will be writing all of your functions! You can run your code by typing 'node functions.js' in your terminal so long as you are still in the same directory. Make sure to call your functions as well as define them! This is how you will test your code. To avoid calling every function that you write every time, comment out where you have called the function on your functions.js document. Rock on. 6 | 7 | 1. Write a 'sayHello' function that logs 'Hello' to the console. 8 | 9 | 2. Rewrite 'sayHello' to accept a name as a parameter, and logs 'Hello' + the name to the console. 10 | 11 | 3. Write a `multiply` function that finds the product of two numbers. 12 | 13 | ```js 14 | multiply(5, 7) => 35 15 | ``` 16 | 3. Write a 'negative' function that takes an integer, and if that integer is positive, it turns it into a negative integer and returns that integer. 17 | 18 | 2. Write a function that takes in a number and returns `true` if the number is even and `false` if the number is odd (**Hint:** Look up the `%` operator). 19 | 20 | ```js 21 | isEven(4) => true 22 | ``` 23 | 24 | 25 | 4. Write a function that generates a random number in a specified range (**Hint:** Look up Math.random()). 26 | 27 | ```js 28 | getRand(5, 10) => 8 (any number between 5 and 10) 29 | ``` 30 | 31 | 32 | 5. Write a function that generates an array of specified length that contains random numbers from 1 to 100. 33 | 34 | ```js 35 | randArr(3) => [23, 11, 82] 36 | ``` 37 | 38 | 3. Write a function that swaps two values at two different indexes in an array. 39 | 40 | ```js 41 | swap(["moe", "larry", "curly"], 0, 2) => ["curly", "larry", "moe"] 42 | ``` 43 | -------------------------------------------------------------------------------- /01-front-end-basics/js-functions/22/core_solutions.md: -------------------------------------------------------------------------------- 1 | ## Solutions 2 | 3 | 1. Write a 'sayHello' function that logs 'Hello' to the console. 4 | ```js 5 | function sayHello(){ 6 | console.log('Hello'); 7 | }; 8 | ``` 9 | 10 | 1. Rewrite 'sayHello' to accept a name as a parameter, and logs 'Hello' + the name to the console. 11 | ```js 12 | function sayHello(name){ 13 | console.log('Hello ' + name); 14 | }; 15 | ``` 16 | 17 | 1. Write a `multiply` function that finds the product of two numbers. 18 | 19 | ```js 20 | function multiply(x, y){ 21 | return x * y 22 | } 23 | ``` 24 | 1. Write a 'negative' function that takes an integer, and if that integer is positive, it turns it into a negative integer and returns that integer. 25 | 26 | ```js 27 | function negative(integer){ 28 | if (integer > 0){ 29 | return integer * -1; 30 | } 31 | else { 32 | return integer 33 | } 34 | } 35 | ``` 36 | 37 | 1. Write a function that takes in a number and returns `true` if the number is even and `false` if the number is odd (**Hint:** Look up the `%` operator). 38 | 39 | ```js 40 | function isEven(integer){ 41 | return ( integer % 2 === 0 ); 42 | } 43 | ``` 44 | 45 | 1. Write a function that generates a random number in a specified range (**Hint:** Look up Math.random()). 46 | 47 | ```js 48 | function getRand(min, max){ 49 | return Math.floor(Math.random() * (max - min) + min); 50 | } 51 | 52 | ``` 53 | 54 | 1. Write a function that generates an array of specified length that contains random numbers from 1 to 100. 55 | 56 | ```js 57 | function randArr(length){ 58 | var array = []; 59 | for(var i=0; i < length; i++){ 60 | var randomNum = Math.floor(Math.random() * 100); 61 | array.push(randomNum); 62 | } 63 | return array 64 | } 65 | randArr(3) => [23, 11, 82] 66 | ``` 67 | 68 | 1. Write a function that swaps two values at two different indexes in an array. 69 | 70 | ```js 71 | function swap(array, index1, index2){ 72 | var temp = array[index1]; 73 | array[index1] = array[index2]; 74 | array[index2] = temp; 75 | return array 76 | } 77 | 78 | ``` 79 | -------------------------------------------------------------------------------- /01-front-end-basics/js-functions/22/stretch_exercises: -------------------------------------------------------------------------------- 1 | ## Stretch Challenges 2 | 3 | 1. Write a `getMax` function that finds the maximum number in an array. 4 | 5 | 2. Write a function called `explainMather` that takes in three arguments: two numbers and a function called `mather`. The `explainMather` function should pass the two numbers into `mather` and write out a message in the console to show the two number inputs and the output from `mather`. Test `explainMather` by passing in your `multiply` function from challenge #1. 6 | 7 | 3. Write a `vowels` function that counts the number of vowels in a given string. 8 | 9 | 4. merge(arr1, arr2) 10 | 11 | Write a function that takes two sorted arrays of numbers and returns a merged array of the sorted numbers. For example, if the input arrays were `var arr1 = [3,6,11]` and `var arr2 = [2,4,5,8,9]`, the returned array would be: `[2,3,4,5,6,8,9,11]`. 12 | 13 | 5. letterCount(word) 14 | 15 | Write a function that counts the number of times each letter occurs in a given string. It should return an object containing the count for each letter. For example, the string "apple" would return the following: 16 | 17 | ```js 18 | { 19 | a: 1, 20 | p: 2, 21 | l: 1, 22 | e: 1 23 | } 24 | ``` 25 | 26 | **Bonus**: Make sure that lower case letters and upper case letters count for the same character. Also, ignore spaces and punctuation. 27 | 28 | 7. numSquare(max) 29 | 30 | Create a function called `numSquare` that will return an array of all perfect square numbers up to, but not exceeding a max number. 31 | 32 | ## Extra-Stretch Challenges 33 | 34 | 1. isPrime(num) 35 | 36 | Create a function that returns `true` if the number passed in is a prime number and `false` if not. 37 | 38 | 2. primes(max) 39 | 40 | Using your `isPrime` function, create a function `primes` that will return an array of all prime numbers up to, but not exceeding a max number. 41 | -------------------------------------------------------------------------------- /01-front-end-basics/js-iterators/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/js-iterators/.gitkeep -------------------------------------------------------------------------------- /01-front-end-basics/json-and-html-string/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/json-and-html-string/.gitkeep -------------------------------------------------------------------------------- /01-front-end-basics/oo-objects-constructors/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/01-front-end-basics/oo-objects-constructors/.gitkeep -------------------------------------------------------------------------------- /01-front-end-basics/oo-objects-constructors/22-23/exercises.md: -------------------------------------------------------------------------------- 1 | ###Quick Challenge 2 | - Copy the object above and save it to a javaScript file, `data.js` 3 | - Add some properties that logically fit into an object describing our class (address, floor number, and a list of instructors. 4 | - Run your file using 'node data.js' in your console. 5 | - Add some lines to 'data.js' to console.log some of your new properties! 6 | 7 | If everything worked out, you should have a fully functioning data object, only now with even MORE properties with us to play with! 8 | 9 | 10 | ###Quick Challenge - She loves me, she loves me not... 11 | Create an object method for flower that will play the age old game ['He loves me, he loves me not...'](https://en.wikipedia.org/wiki/He_loves_me..._he_loves_me_not) 12 | - Count down from the petal number down to 1 13 | - Alternately display 'He loves me' or 'He loves me not' to the console for each petal count decrement. 14 | - Display the final phrase with an exclamation; that's the end of the game! 15 | 16 | 17 | There are many more aspects to objects that we will discover tomorrow. For now, play with objects and think up some great object examples that we might use in class. 18 | -------------------------------------------------------------------------------- /01-front-end-basics/oo-objects-constructors/22-23/solutions.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | school: "General Assembly", 3 | city: "San Francisco", 4 | course: "Web Development Immersive", 5 | course_id: "WDI22", 6 | classrootm: "1", 7 | floor: 5, 8 | students: [{ 9 | id: 0, 10 | last_name: "Aramayo", 11 | first_name: "Angelo", 12 | github_username: "angelo2dot0" 13 | }, { 14 | id: 1, 15 | last_name: "Bia", 16 | first_name: "Racha", 17 | github_username: "racha_bella" 18 | }, { 19 | id: 2, 20 | last_name: "Gabot", 21 | first_name: "Brian", 22 | github_username: "bgabot89" 23 | }], 24 | instructors: [{ 25 | id: 0, 26 | last_name: "White", 27 | first_name: "Alex", 28 | }, { 29 | id: 1, 30 | last_name: "Veenstra", 31 | first_name: "Brianna", 32 | }, { 33 | id: 2, 34 | last_name: "Hulan", 35 | first_name: "Ben", 36 | }] 37 | } 38 | 39 | console.log(data.instructors[0].first_name) //=> Alex 40 | 41 | 42 | 43 | 44 | 45 | // He/ She Loves Me 46 | 47 | function Flower(petals){ 48 | this.petals = petals; 49 | this.countDown = function(pronoun){ 50 | var lovesMe = pronoun + " loves me!" 51 | var lovesMeNot = pronoun + " loves me not!" 52 | var n; 53 | for ( n=0; n <= this.petals; n++ ){ 54 | if (n === this.petals){ 55 | lovesMe = lovesMe.toUpperCase() + "!!!!"; 56 | lovesMeNot = lovesMeNot.toUpperCase() + "!!!!"; 57 | } 58 | var oddOrEven = n % 2 59 | switch(oddOrEven){ 60 | case 0: 61 | console.log(lovesMe); 62 | break; 63 | case 1: 64 | console.log(lovesMeNot); 65 | } 66 | } 67 | } 68 | } 69 | 70 | var bud = new Flower(12); 71 | bud.countDown('She'); 72 | 73 | // --------------------------------- 74 | // More Advanced Prototypal Solution 75 | // --------------------------------- 76 | 77 | 78 | // function Flower(petals){ 79 | // this.petals = petals; 80 | // }; 81 | 82 | // Flower.prototype.countDown = function(pronoun){ 83 | // var lovesMe = pronoun + " loves me!" 84 | // var lovesMeNot = pronoun + " loves me not!" 85 | // var n; 86 | // for ( n=0; n <= this.petals; n++ ){ 87 | // if (n === this.petals){ 88 | // lovesMe = lovesMe.toUpperCase() + "!!!!"; 89 | // lovesMeNot = lovesMeNot.toUpperCase() + "!!!!"; 90 | // } 91 | // var oddOrEven = n % 2 92 | // switch(oddOrEven){ 93 | // case 0: 94 | // console.log(lovesMe); 95 | // break; 96 | // case 1: 97 | // console.log(lovesMeNot); 98 | // } 99 | // } 100 | // } 101 | 102 | // var bud = new Flower(8); 103 | // bud.countDown('She'); 104 | -------------------------------------------------------------------------------- /01-front-end-basics/oo-objects-constructors/26/solution/monkey.js: -------------------------------------------------------------------------------- 1 | // Create a constructor function that makes a monkey 2 | function Monkey(name, species) { 3 | this.name = name; 4 | this.species = species; 5 | this.foodsEaten = []; 6 | this.eatSomething = function(food) { 7 | this.foodsEaten.push(food); 8 | } 9 | this.introduce = function() { 10 | console.log("My name is "+ this.name +". I come from the "+ this.species + " family. I have eaten "+ this.foodsEaten.join(", ") + "."); 11 | } 12 | } 13 | 14 | var monkey1 = new Monkey("Jack", "Howler"); 15 | monkey1.eatSomething("banana"); 16 | monkey1.introduce(); 17 | 18 | var monkey2 = new Monkey("James", "Pygmy Marmoset"); 19 | monkey2.eatSomething("peach"); 20 | monkey2.eatSomething("plum"); 21 | monkey2.introduce(); 22 | 23 | var monkey3 = new Monkey("James", "Squirrel Monkey"); 24 | monkey3.eatSomething("pineapple"); 25 | monkey3.introduce(); 26 | 27 | // Getting properties using the dot syntax / bracket syntax 28 | console.log(monkey1.name); 29 | console.log(monkey1["name"]); 30 | -------------------------------------------------------------------------------- /01-front-end-basics/oo-prototype-inheritance/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /01-front-end-basics/oo-prototype-inheritance/24/solutions.md: -------------------------------------------------------------------------------- 1 | ## Challenges 2 | 3 | 1. Create an `Animal` constructor with the properties `name`, `age`, `color`, and `sound`. 4 | 5 | ```js 6 | function Animal(name, age, color, sound) { 7 | this.name = name; 8 | this.age = age; 9 | this.color = color; 10 | this.sound = sound; 11 | } 12 | ``` 13 | 14 | 2. Animals should have a method called `speak` which outputs the `sound` they make. 15 | 16 | ```js 17 | Animal.prototype.speak = function() { 18 | return this.sound; 19 | }; 20 | ``` 21 | 22 | 3. Create a `Cat` constructor with the same properties as `Animal` (bonus if you use the `call` method). Cats should also have a property called `isFluffy`. 23 | 24 | ```js 25 | function Cat(name, age, color, isFluffy) { 26 | Animal.call(this, name, age, color); 27 | this.sound = "meow"; 28 | this.isFluffy = isFluffy; 29 | }; 30 | ``` 31 | 32 | 4. Implement prototypal inheritance with `Cat` as a subclass of `Animal`. 33 | 34 | ```js 35 | Cat.prototype = new Animal; 36 | Cat.prototype.constructor = Cat; 37 | ``` 38 | 39 | 5. Create a new instance of `Cat` and make them speak! 40 | 41 | ```js 42 | cat = new Cat("Sprinkles", 3, "brown", true); 43 | //=> Cat {name: "Sprinkles", age: 3, color: "brown", sound: "meow", isFluffy: true} 44 | 45 | cat.speak(); 46 | //=> "meow" 47 | ``` 48 | 49 | 6. Check if the cat you just created is an `instanceof` `Cat`. How about an `instanceof` `Animal`? 50 | 51 | ```js 52 | cat instanceof Cat 53 | //=> true 54 | 55 | cat instanceof Animal 56 | //=> true 57 | ``` 58 | 59 | 7. Start tonight's homework! 60 | 61 | * apartment-oop (solution branch) 62 | -------------------------------------------------------------------------------- /01-front-end-basics/oo-prototypes/25/pie-example/Pie.js: -------------------------------------------------------------------------------- 1 | function Pie( crust, filling ) { 2 | // Attributes 3 | this.crust = crust; 4 | this.filling = filling; 5 | this.container = 'my stomach'; 6 | this.mold = false; 7 | this.slices = 0; 8 | } 9 | 10 | 11 | 12 | 13 | 14 | Pie.prototype.slice = function() { 15 | this.slices += 2; 16 | console.log("slices : " + this.slices); 17 | }; 18 | 19 | Pie.prototype.serve = function( name ) { 20 | if ( this.slices > 0 ) { 21 | console.log("Here's a slice, " + name ); 22 | this.slices--; 23 | } else { 24 | console.log("No pie for you!"); 25 | } 26 | }; 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | Pie.prototype = { 36 | slice : function() { 37 | 38 | this.slices += 2; 39 | console.log("slices : " + this.slices); 40 | }, 41 | 42 | serve : function( name ) { 43 | if ( this.slices > 0 ) { 44 | console.log("Here's a slice, " + name ); 45 | this.slices--; 46 | } else { 47 | console.log("No pie for you!"); 48 | } 49 | }, 50 | }; 51 | 52 | 53 | $( document ).ready(function() { 54 | 55 | var apple = new Pie("heavenly", "Apple"); 56 | var pumpkin = new Pie("buttery", "Pumpkin"); 57 | var pecan = new Pie("flakey", "Pecan"); 58 | var pies = [apple, pumpkin, pecan]; 59 | pies.forEach(function appendToPiesList(pie) { 60 | pie.slice(); 61 | pie.slice(); 62 | pie.slice(); 63 | pie.slice(); 64 | $('#pieslist').append('
  • I have ' + pie.slices + ' slices of ' + pie.filling+' pie!
    • '); 65 | }); 66 | apple.serve("Justin"); 67 | console.log(apple.slices); 68 | 69 | }); 70 | -------------------------------------------------------------------------------- /01-front-end-basics/oo-prototypes/25/pie-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /01-front-end-basics/templating-handlebars/24/solutions.md: -------------------------------------------------------------------------------- 1 | ## Challenges 2 | 3 | * spotify-search (solution-handlebars branch) 4 | 5 | ## Stretch Challenge 6 | 7 | * geoquakes (solution branch) 8 | -------------------------------------------------------------------------------- /01-front-end-basics/templating-handlebars/27-28/solutions.md: -------------------------------------------------------------------------------- 1 | ## Challenge Solutions 2 | 3 | * spotify-search (solution-handlebars branch) 4 | 5 | -------------------------------------------------------------------------------- /02-express-mongo-crud/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/02-express-mongo-crud/.gitkeep -------------------------------------------------------------------------------- /02-express-mongo-crud/express-params-queries/22-23/exercises.md: -------------------------------------------------------------------------------- 1 | **Express Routing** -- Exercises 2 | 3 | ### Pick A Color -- [solution](solutions.md) 4 | Create a route that responds with "You picked: blue" or "You picked: green" depending on the path. For instance, if I visit: `localhost:3000/pick-a-color/orange` I should see the the color I chose (randomly) named in the response. 5 | 6 | ### Which Taco (Indexing a Collection) -- [solution](solutions.md) 7 | 8 | Hardcode some data in index.js: 9 | ``` javascript 10 | 11 | var burgers = [ 12 | "Hamburger", 13 | "Cheese Burger", 14 | "Dble Cheese Burger" 15 | ]; 16 | 17 | var tacos = [ 18 | "Soft Taco", 19 | "Crunchy Taco", 20 | "Super Taco" 21 | ]; 22 | ``` 23 | 24 | * Write a route with to allow you to access a `taco` by it's index in the array, such that one could go to the route: "/taco/2" and get back a server response with the text "Super Taco". 25 | * Write a route with to allow you to access a `burger` by it's index in the array, similar to above. 26 | 27 | ### The Number Guessing Game -- [solutions](solutions.md) 28 | 29 | * Build a simple number guessing game using query parameters. 30 | 31 | ``` javascript 32 | app.get("/pickanumber", function (req, res) { 33 | var number = req.query.number; 34 | if (number === 7) { 35 | res.send("You picked " + number + "!"); 36 | } 37 | }); 38 | ``` 39 | 40 | * When the user goes to `/pickanumber?number=10` the server should respond with either "Too High", "Too Low" or "Nailed it!" 41 | 42 | 43 | ### Building Cities 44 | 45 | * Write a route that serves a template which shows all of the cities. 46 | * Write a route that allows you to add a new city to the list of cities. **Hint: use a form.** 47 | * Write a route that allows you to delete a city from your list. What will you need to do this? **Hint: you'll need to handle the specific cities in both the HTML and in the server-side JS code.** 48 | 49 | ## Stretch Exercises 50 | ### Calculator app (Using Query Parameters) -- [solutions](solutions.md) 51 | 52 | * Create a `/multiply` route that uses query params `x` and `y` to multiple two numbers and send the result back: `"10 is the result"`. 53 | * Create an `/add` route, similar to above. 54 | -------------------------------------------------------------------------------- /02-express-mongo-crud/express-params-queries/22-23/imgs/folders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/02-express-mongo-crud/express-params-queries/22-23/imgs/folders.png -------------------------------------------------------------------------------- /02-express-mongo-crud/express-params-queries/22-23/imgs/simple_express.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/02-express-mongo-crud/express-params-queries/22-23/imgs/simple_express.gif -------------------------------------------------------------------------------- /02-express-mongo-crud/express-params-queries/22-23/solutions.md: -------------------------------------------------------------------------------- 1 | **Express Routing** -- Solutions 2 | 3 | The following solutions assume that the following boiler-plate is present in the `index.js` server code: 4 | 5 | ``` javascript 6 | var express = require("express"); 7 | var app = express(); 8 | 9 | // SOLUTION HERE 10 | 11 | var port = 3000; 12 | app.listen(port, function(){ 13 | console.log("Server Running at localhost:3000/") 14 | }); 15 | ``` 16 | 17 | ### Pick A Color 18 | ``` javscript 19 | app.get("/color/:choice", function(req, res){ 20 | var choice = req.params.choice; 21 | res.send("Your color is: " + choice); 22 | }); 23 | ``` 24 | 25 | ### Which Taco -- Indexing a Collection 26 | 27 | ``` javascript 28 | 29 | var burgers = [ 30 | "Hamburger", 31 | "Cheese Burger", 32 | "Dble Cheese Burger" 33 | ]; 34 | 35 | var tacos = [ 36 | "Soft Taco", 37 | "Crunchy Taco", 38 | "Super Taco" 39 | ]; 40 | 41 | app.get("/taco/:index", function(req, res){ 42 | var index = req.params.index; 43 | var selection = tacos[index] || "Sorry, that's not a taco option"; 44 | res.send( selection ); 45 | }); 46 | 47 | app.get("/burger/:index", function(req, res){ 48 | var index = req.params.index; 49 | var selection = burgers[index] || "Sorry, that's not a burger option"; 50 | res.send( selection ); 51 | }); 52 | ``` 53 | 54 | ### The Number Guessing Game 55 | 56 | Using `params` ("localhost:3000/pick-a-number/100"): 57 | ``` javascript 58 | var correct_number = 7; 59 | 60 | app.get("/pick-a-number/:num", function(req, res){ 61 | var num = req.params.num; 62 | if (num === correct_number){ 63 | res.send("Nailed it!"); 64 | } else if (num > correct_number){ 65 | res.send("Too High!") 66 | } else { 67 | res.send("Too Low") 68 | } 69 | }); 70 | ``` 71 | 72 | Using `query` ("localhost:3000/pick-a-number?num=100"): 73 | 74 | ``` javascript 75 | var correct_number = 7; 76 | 77 | app.get("/pick-a-number", function(req, res){ 78 | var num = req.query.num; 79 | if (num === correct_number){ 80 | res.send("Nailed it!"); 81 | } else if (num > correct_number){ 82 | res.send("Too High!") 83 | } else { 84 | res.send("Too Low") 85 | } 86 | }); 87 | ``` 88 | 89 | ### Calculator app -- Using Query Parameters 90 | 91 | ``` javascript 92 | app.get("/add", function(req, res){ 93 | var x = req.query.x; 94 | var y = req.query.y; 95 | var total = x+y; 96 | res.send( total ); 97 | }); 98 | 99 | app.get("/multiply", function(req, res){ 100 | var x = req.query.x; 101 | var y = req.query.y; 102 | var total = x*y; 103 | res.send( total ); 104 | }); 105 | ``` 106 | 107 | -------------------------------------------------------------------------------- /02-express-mongo-crud/express-params-queries/25/exercises.md: -------------------------------------------------------------------------------- 1 | **Express Routing** -- Exercises 2 | 3 | ### Pick A Color -- [solution](solutions.md) 4 | Create a route that responds with "You picked: blue" or "You picked: green" depending on the path. For instance, if I visit: `localhost:3000/pick-a-color/orange` I should see the the color I chose (orange) named in the response. 5 | 6 | ### Which Taco (Indexing a Collection) -- [solution](solutions.md) 7 | 8 | Hardcode some data in index.js: 9 | ``` javascript 10 | 11 | var burgers = [ 12 | "Hamburger", 13 | "Cheese Burger", 14 | "Dble Cheese Burger" 15 | ]; 16 | 17 | var tacos = [ 18 | "Soft Taco", 19 | "Crunchy Taco", 20 | "Super Taco" 21 | ]; 22 | ``` 23 | 24 | * Write a route that will allow you to access a `taco` by it's index in the array, such that one could go to the route: "/taco/2" and get back a server response with the text "Super Taco". 25 | * Write a route that will allow you to access a `burger` by it's index in the array, similar to above. 26 | 27 | ### The Number Guessing Game -- [solutions](solutions.md) 28 | 29 | * Build a simple number guessing game using query parameters. 30 | 31 | ``` javascript 32 | app.get("/pickanumber", function (req, res) { 33 | var number = req.query.number; 34 | if (number === 7) { 35 | res.send("You picked " + number + "!"); 36 | } 37 | }); 38 | ``` 39 | 40 | * When the user goes to `/pickanumber?number=10` the server should respond with either "Too High", "Too Low" or "Nailed it!" 41 | 42 | 43 | ### Building Cities 44 | 45 | * Write a route that shows all of the cities. 46 | * Write a route that allows you to add a new city to the list of cities. **Hint: use a form.** 47 | 48 | ## Stretch Exercises 49 | ### Calculator app (Using Query Parameters) -- [solutions](solutions.md) 50 | 51 | * Create a `/multiply` route that uses query params `x` and `y` to multiple two numbers and send the result back: `"10 is the result"`. 52 | * Create an `/add` route, similar to above. 53 | -------------------------------------------------------------------------------- /02-express-mongo-crud/express-params-queries/25/solutions.md: -------------------------------------------------------------------------------- 1 | **Express Routing** -- Solutions 2 | 3 | The following solutions assume that the following boiler-plate is present in the `index.js` server code: 4 | 5 | ``` javascript 6 | var express = require("express"); 7 | var app = express(); 8 | 9 | // SOLUTION HERE 10 | 11 | var port = 3000; 12 | app.listen(port, function(){ 13 | console.log("Server Running at localhost:3000/") 14 | }); 15 | ``` 16 | 17 | ### Pick A Color 18 | ``` js 19 | app.get("/color/:choice", function(req, res){ 20 | var choice = req.params.choice; 21 | res.send("Your color is: " + choice); 22 | }); 23 | ``` 24 | 25 | ### Which Taco -- Indexing a Collection 26 | 27 | ``` javascript 28 | 29 | var burgers = [ 30 | "Hamburger", 31 | "Cheese Burger", 32 | "Dble Cheese Burger" 33 | ]; 34 | 35 | var tacos = [ 36 | "Soft Taco", 37 | "Crunchy Taco", 38 | "Super Taco" 39 | ]; 40 | 41 | app.get("/taco/:index", function(req, res){ 42 | var index = req.params.index; 43 | var selection = tacos[index] || "Sorry, that's not a taco option"; 44 | res.json( selection ); 45 | }); 46 | 47 | app.get("/burger/:index", function(req, res){ 48 | var index = req.params.index; 49 | var selection = burgers[index] || "Sorry, that's not a burger option"; 50 | res.json( selection ); 51 | }); 52 | ``` 53 | 54 | ### The Number Guessing Game 55 | 56 | Using `params` ("localhost:3000/pick-a-number/100"): 57 | ``` javascript 58 | var correct_number = 7; 59 | 60 | app.get("/pick-a-number/:num", function(req, res){ 61 | var num = req.params.num; 62 | if (num === correct_number){ 63 | res.send("Nailed it!"); 64 | } else if (num > correct_number){ 65 | res.send("Too High!") 66 | } else { 67 | res.send("Too Low") 68 | } 69 | }); 70 | ``` 71 | 72 | Using `query` ("localhost:3000/pick-a-number?num=100"): 73 | 74 | ``` javascript 75 | var correct_number = 7; 76 | 77 | app.get("/pick-a-number", function(req, res){ 78 | var num = req.query.num; 79 | if (num === correct_number){ 80 | res.send("Nailed it!"); 81 | } else if (num > correct_number){ 82 | res.send("Too High!") 83 | } else { 84 | res.send("Too Low") 85 | } 86 | }); 87 | ``` 88 | 89 | ## Stretch Exercises 90 | ### Calculator app -- Using Query Parameters 91 | 92 | ``` javascript 93 | app.get("/add", function(req, res){ 94 | var x = req.query.x; 95 | var y = req.query.y; 96 | var total = x+y; 97 | res.send( total ); 98 | }); 99 | 100 | app.get("/multiply", function(req, res){ 101 | var x = req.query.x; 102 | var y = req.query.y; 103 | var total = x*y; 104 | res.send( total ); 105 | }); 106 | ``` 107 | -------------------------------------------------------------------------------- /02-express-mongo-crud/express-params-queries/27-28/exercises.md: -------------------------------------------------------------------------------- 1 | ## Express Routing Exercises 2 | 3 | ### Pick A Color -- [solution](solutions.md) 4 | Create a route that responds with "You picked: blue" or "You picked: green" depending on the path. For instance, if I visit: `localhost:3000/pick-a-color/orange` I should see the the color I chose (orange) named in the response. 5 | 6 | ### Which Taco (Indexing a Collection) -- [solution](solutions.md) 7 | 8 | Hardcode some data in index.js: 9 | ``` javascript 10 | 11 | var burgers = [ 12 | "Hamburger", 13 | "Cheese Burger", 14 | "Dble Cheese Burger" 15 | ]; 16 | 17 | var tacos = [ 18 | "Soft Taco", 19 | "Crunchy Taco", 20 | "Super Taco" 21 | ]; 22 | ``` 23 | 24 | * Write a route that will allow you to access a `taco` by it's index in the array, such that one could go to the route: "/taco/2" and get back a server response with the text "Super Taco". 25 | * Write a route that will allow you to access a `burger` by it's index in the array, similar to above. 26 | 27 | ### The Number Guessing Game -- [solutions](solutions.md) 28 | 29 | * Build a simple number guessing game using query parameters. 30 | 31 | ``` javascript 32 | app.get("/pickanumber", function (req, res) { 33 | var number = req.query.number; 34 | if (number === 7) { 35 | res.send("You picked " + number + "!"); 36 | } 37 | }); 38 | ``` 39 | 40 | * When the user goes to `/pickanumber?number=10` the server should respond with either "Too High", "Too Low" or "Nailed it!" 41 | 42 | 43 | ### Building Cities 44 | 45 | * Write a route that shows all of the cities. 46 | * Write a route that allows you to add a new city to the list of cities. **Hint: use a form.** 47 | 48 | ## Stretch Exercises 49 | ### Calculator app (Using Query Parameters) -- [solutions](solutions.md) 50 | 51 | * Create a `/multiply` route that uses query params `x` and `y` to multiple two numbers and send the result back: `"10 is the result"`. 52 | * Create an `/add` route, similar to above. 53 | -------------------------------------------------------------------------------- /02-express-mongo-crud/express-params-queries/27-28/solutions.md: -------------------------------------------------------------------------------- 1 | ## Express Routing -- Solutions 2 | 3 | The following solutions assume that the following boiler-plate is present in the `index.js` server code: 4 | 5 | ``` javascript 6 | var express = require("express"); 7 | var app = express(); 8 | 9 | // SOLUTION HERE 10 | 11 | var port = 3000; 12 | app.listen(port, function(){ 13 | console.log("Server Running at localhost:3000/") 14 | }); 15 | ``` 16 | 17 | ### Pick A Color 18 | ``` js 19 | app.get("/color/:choice", function(req, res){ 20 | var choice = req.params.choice; 21 | res.send("Your color is: " + choice); 22 | }); 23 | ``` 24 | 25 | ### Which Taco -- Indexing a Collection 26 | 27 | ``` javascript 28 | 29 | var burgers = [ 30 | "Hamburger", 31 | "Cheese Burger", 32 | "Dble Cheese Burger" 33 | ]; 34 | 35 | var tacos = [ 36 | "Soft Taco", 37 | "Crunchy Taco", 38 | "Super Taco" 39 | ]; 40 | 41 | app.get("/taco/:index", function(req, res){ 42 | var index = req.params.index; 43 | var selection = tacos[index] || "Sorry, that's not a taco option"; 44 | res.json( selection ); 45 | }); 46 | 47 | app.get("/burger/:index", function(req, res){ 48 | var index = req.params.index; 49 | var selection = burgers[index] || "Sorry, that's not a burger option"; 50 | res.json( selection ); 51 | }); 52 | ``` 53 | 54 | ### The Number Guessing Game 55 | 56 | Using `params` ("localhost:3000/pick-a-number/100"): 57 | ``` javascript 58 | var correct_number = 7; 59 | 60 | app.get("/pick-a-number/:num", function(req, res){ 61 | var num = req.params.num; 62 | if (num === correct_number){ 63 | res.send("Nailed it!"); 64 | } else if (num > correct_number){ 65 | res.send("Too High!") 66 | } else { 67 | res.send("Too Low") 68 | } 69 | }); 70 | ``` 71 | 72 | Using `query` ("localhost:3000/pick-a-number?num=100"): 73 | 74 | ``` javascript 75 | var correct_number = 7; 76 | 77 | app.get("/pick-a-number", function(req, res){ 78 | var num = req.query.num; 79 | if (num === correct_number){ 80 | res.send("Nailed it!"); 81 | } else if (num > correct_number){ 82 | res.send("Too High!") 83 | } else { 84 | res.send("Too Low") 85 | } 86 | }); 87 | ``` 88 | 89 | ## Stretch Exercises 90 | ### Calculator app -- Using Query Parameters 91 | 92 | ``` javascript 93 | app.get("/add", function(req, res){ 94 | var x = req.query.x; 95 | var y = req.query.y; 96 | var total = x+y; 97 | res.send( total ); 98 | }); 99 | 100 | app.get("/multiply", function(req, res){ 101 | var x = req.query.x; 102 | var y = req.query.y; 103 | var total = x*y; 104 | res.send( total ); 105 | }); 106 | ``` 107 | -------------------------------------------------------------------------------- /02-express-mongo-crud/intro-express/25/exercises.md: -------------------------------------------------------------------------------- 1 | See: https://github.com/sf-wdi-25/express-intro 2 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/19-20/img/many_to_many.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/02-express-mongo-crud/mongoose-embed/19-20/img/many_to_many.png -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/19-20/img/one_to_many.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/02-express-mongo-crud/mongoose-embed/19-20/img/one_to_many.png -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/19-20/img/one_to_one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/02-express-mongo-crud/mongoose-embed/19-20/img/one_to_one.png -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/22-23/exercises.md: -------------------------------------------------------------------------------- 1 | ## Exercises 2 | 3 | ### Base Exercises 4 | 5 | **Setting up an Embedded Model** 6 | 7 | 1. Write a file called `post.js` that has a post model with an attribute `comments` that contains an embedded comment schema. 8 | 9 | **Writing User/Tweets Routes** 10 | 11 | The following challenges are psuedo code. Write a method for example. 12 | 13 | Here's an example where **Monsters have many Broods**: 14 | 15 | 1. Write a route to create a new Monster. 16 | 17 | ```js 18 | app.post('/monsters', function(req, res) { 19 | var monster = req.body.monster; 20 | Monster.create(monster, function (err, monster) { 21 | res.status(200).json(monster); 22 | }); 23 | }); 24 | ``` 25 | 26 | 1. Write a route to create a new Brood that belongs to a Monster. 27 | 28 | ```js 29 | app.post('/monsters/:id/broods', function(req, res) { 30 | Monster.findById(req.params.id, function(err, monster) { 31 | var brood = req.body.brood; 32 | monster.brood.push(brood); 33 | monster.save(function(err) { 34 | res.status(200).json(brood); 35 | }); 36 | }); 37 | }); 38 | ``` 39 | 40 | In the following challenges imagine that **Users have many Tweets** 41 | 42 | 1. Write a route to create a new User. 43 | 1. Return an array of all the users. 44 | 1. Return an array of all tweets of a specific user. 45 | 1. Create a new tweet that belongs to a user (who's id is in the `req.params.id`). 46 | 1. Delete a tweet that belongs to a user (make sure to build the route to include the user and the tweet's id's - see example above). 47 | 1. Update a tweet that belongs to a user (ditto on their id's!). 48 | 49 | 50 | **Questions** 51 | 52 | 1. What are three examples of times when you would use embedded association pattern? 53 | 1. What are three you would use a reference association pattern? 54 | 55 | 56 | ### Stretch 57 | 58 | 1. Add a Comment model to your Microblog app and embed comments in the posts. 59 | 1. Add [validations](http://mongoosejs.com/docs/validation) to both the `Question` and `Answer` models. Both the question `text` and answer `content` should be [required](http://mongoosejs.com/docs/api.html#schematype_SchemaType-required). 60 | 1. In your API routes to create and update questions, respond with an error if the required validation is not met. **Hint:** Send back the validation error from Mongoose. Also, take a look at this guide to Express error-handling. 61 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/22-23/solutions.md: -------------------------------------------------------------------------------- 1 | ## Solutions 2 | 3 | 1. Write a `post.js` file with a Post model with embedded Comment. 4 | 5 | ```js 6 | var mongoose = require('mongoose'); 7 | var Schema = mongoose.Schema; 8 | 9 | var commentSchema = new Schema({ 10 | body: { 11 | type: String, 12 | default: "" 13 | } 14 | }); 15 | 16 | var postSchema = new Schema({ 17 | title: { 18 | type: String, 19 | default: "" 20 | }, 21 | body: String, 22 | comments: [commentSchema] // EMBEDDING :D 23 | }); 24 | 25 | var Post = mongoose.model('Post', postSchema); 26 | module.exports = Post; 27 | ``` 28 | 29 | 1. Write a route to create a new User. 30 | 31 | ```js 32 | app.post('/users', function(req, res) { 33 | var user = req.body.user; 34 | User.create(user, function (err, user) { 35 | res.status(200).json(user); 36 | }); 37 | }); 38 | ``` 39 | 40 | 1. Return an array of all the users. 41 | 42 | ```js 43 | app.get('/users', function(req, res) { 44 | User.find({}, function (err, users) { 45 | res.status(200).json(users); 46 | }); 47 | }); 48 | ``` 49 | 50 | 51 | 1. Return an array of all tweets of a specific user. 52 | 53 | ```js 54 | app.get('/users/:userId/tweets', function(req, res) { 55 | User.find({ _id: req.params.userId }, function (err, user) { 56 | res.status(200).json(user.tweets); 57 | }); 58 | }); 59 | ``` 60 | 61 | 1. Create a new tweet that belongs to a user (who's id is in the `req.params.id`). 62 | 63 | ```js 64 | app.post('/users/:userId/tweets', function(req, res) { 65 | User.find({ _id: req.params.userId }, function (err, user) { 66 | user.tweets.push(req.body.tweet); 67 | user.save(function(err) { 68 | res.status(200).json(user); 69 | }); 70 | }); 71 | }); 72 | ``` 73 | 74 | 1. Delete a tweet that belongs to a user (make sure to build the route to include the user and the tweet's id's - see example above). 75 | 76 | ```js 77 | app.delete('/users/:userId/tweets/:tweetId', function(req, res) { 78 | User.find({ _id: req.params.userId }, function (err, user) { 79 | user.tweets.findByIdAndRemove({ _id: req.params.tweetId }); 80 | res.status(200).json(user); 81 | }); 82 | }); 83 | ``` 84 | 85 | 1. Update a tweet that belongs to a user (ditto on their id's!). 86 | 87 | ```js 88 | app.put('/users/:userId/tweets/:tweetId', function(req, res) { 89 | User.find({ _id: req.params.userId }, function (err, user) { 90 | var tweet = req.body.tweet; 91 | user.tweets.findByIdAndUpdate(tweet, function (err, user) { 92 | res.status(200).json(user); 93 | }); 94 | }); 95 | }); 96 | ``` 97 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/24/solutions.md: -------------------------------------------------------------------------------- 1 | ## Solutions 2 | 3 | 1. Write a `post.js` file with a Post model with embedded Comment. 4 | 5 | ```js 6 | var mongoose = require('mongoose'); 7 | var Schema = mongoose.Schema; 8 | 9 | var commentSchema = new Schema({ 10 | body: { 11 | type: String, 12 | default: "" 13 | } 14 | }); 15 | 16 | var postSchema = new Schema({ 17 | title: { 18 | type: String, 19 | default: "" 20 | }, 21 | body: String, 22 | comments: [commentSchema] // EMBEDDING :D 23 | }); 24 | 25 | var Post = mongoose.model('Post', postSchema); 26 | module.exports = Post; 27 | ``` 28 | 29 | 1. Write a route to create a new User. 30 | 31 | ```js 32 | app.post('/users', function(req, res) { 33 | var user = req.body.user; 34 | User.create(user, function (err, user) { 35 | res.status(200).json(user); 36 | }); 37 | }); 38 | ``` 39 | 40 | 1. Return an array of all the users. 41 | 42 | ```js 43 | app.get('/users', function(req, res) { 44 | User.find({}, function (err, users) { 45 | res.status(200).json(users); 46 | }); 47 | }); 48 | ``` 49 | 50 | 51 | 1. Return an array of all tweets of a specific user. 52 | 53 | ```js 54 | app.get('/users/:userId/tweets', function(req, res) { 55 | User.find({ _id: req.params.userId }, function (err, user) { 56 | res.status(200).json(user.tweets); 57 | }); 58 | }); 59 | ``` 60 | 61 | 1. Create a new tweet that belongs to a user (who's id is in the `req.params.id`). 62 | 63 | ```js 64 | app.post('/users/:userId/tweets', function(req, res) { 65 | User.find({ _id: req.params.userId }, function (err, user) { 66 | user.tweets.push(req.body.tweet); 67 | user.save(function(err) { 68 | res.status(200).json(user); 69 | }); 70 | }); 71 | }); 72 | ``` 73 | 74 | 1. Delete a tweet that belongs to a user (make sure to build the route to include the user and the tweet's id's - see example above). 75 | 76 | ```js 77 | app.delete('/users/:userId/tweets/:tweetId', function(req, res) { 78 | User.find({ _id: req.params.userId }, function (err, user) { 79 | user.tweets.findByIdAndRemove({ _id: req.params.tweetId }); 80 | res.status(200).json(user); 81 | }); 82 | }); 83 | ``` 84 | 85 | 1. Update a tweet that belongs to a user (ditto on their id's!). 86 | 87 | ```js 88 | app.put('/users/:userId/tweets/:tweetId', function(req, res) { 89 | User.find({ _id: req.params.userId }, function (err, user) { 90 | var tweet = req.body.tweet; 91 | user.tweets.findByIdAndUpdate(tweet, function (err, user) { 92 | res.status(200).json(user); 93 | }); 94 | }); 95 | }); 96 | ``` 97 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/25/embedded-example/models/index.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | mongoose.connect('mongodb://localhost/my-tv-db'); 3 | 4 | module.exports.Shows = require('./shows.js'); 5 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/25/embedded-example/models/shows.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'), 2 | Schema = mongoose.Schema; 3 | // Character = require('./character.js'); 4 | 5 | var CharacterSchema = new Schema({ 6 | name: String, 7 | actor_name: String, 8 | }); 9 | 10 | var ShowSchema = new Schema({ 11 | name: String, 12 | characters: [CharacterSchema], 13 | network: String 14 | }); 15 | 16 | 17 | 18 | var Character = mongoose.model('Character', CharacterSchema); 19 | var Show = mongoose.model('Show', ShowSchema); 20 | 21 | module.exports = Character; 22 | module.exports = Show; 23 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/25/embedded-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mongo_tv_drills", 3 | "version": "1.0.0", 4 | "description": "This lab is designed to drill you on CRUDing resources in MongoDB.", 5 | "main": "seed.js", 6 | "dependencies": { 7 | "mongoose": "^4.2.9" 8 | }, 9 | "devDependencies": {}, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/sf-wdi-25/mongo_tv_drills.git" 16 | }, 17 | "author": "", 18 | "license": "ISC", 19 | "bugs": { 20 | "url": "https://github.com/sf-wdi-25/mongo_tv_drills/issues" 21 | }, 22 | "homepage": "https://github.com/sf-wdi-25/mongo_tv_drills#readme" 23 | } 24 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/25/embedded-example/seed.js: -------------------------------------------------------------------------------- 1 | var db = require("./models"); 2 | 3 | // db.Characters.create( 4 | // {name: "Jon Snow", actor_name: "Kit Harington", show_title: "Game of Thrones"}, function (err, snow) { 5 | // if (err) {console.log("Error")}; 6 | // console.log(snow); 7 | // }); 8 | // 9 | // 10 | // db.Characters.create( 11 | // {name: "Arya Stark", actor_name: "Maisey Williams", show_title: "Game of Thrones"}, function (err, snow) { 12 | // if (err) {console.log("Error")}; 13 | // console.log(snow); 14 | // }); 15 | 16 | // db.Shows.create( 17 | // { 18 | // name: "Game of Thrones", 19 | // network: "HBO" 20 | // }, function(err, success) { 21 | // if (err) {return console.log("Error")}; 22 | // console.log(success); 23 | // } 24 | // 25 | // ); 26 | 27 | // db.Characters.find({}, function(err, success) { 28 | // if (err) {console.log("Error")}; 29 | // success.forEach(function (entry) { 30 | // console.log('------------------------------------\n' , entry); 31 | // }); 32 | // }); 33 | 34 | // db.Shows.find({}, function(err, success) { 35 | // if (err) {console.log("Error")}; 36 | // success.forEach(function (entry) { 37 | // console.log('------------------------------------\n' , entry); 38 | // }); 39 | // }); 40 | 41 | db.Shows.findOne({name: "Game of Thrones"}, function (err, show) { 42 | if(err){return console.log("ERR");} 43 | show.characters.push({name: "The Mountain", actor_name: "Hafthor Bjornsonn"}); 44 | 45 | show.save(function (err, success) { 46 | if(err){return console.log("ERR");} 47 | //console.log(success); 48 | console.log(show); 49 | }); 50 | }); 51 | 52 | // db.Characters.findById( '5665d92e0f66635f30bb563a', function(err, success) { 53 | // if (err) {console.log("Error")}; 54 | // console.log(success); 55 | // 56 | // }); 57 | 58 | // db.Characters.findOneAndUpdate({name: "Arya Stark"}, {name: "Faceless One"}, function(err, success) { 59 | // if (err) {console.log("Error")}; 60 | // console.log(success); 61 | // console.log("Successfully updated entry"); 62 | // }) 63 | 64 | // db.Characters.findOneAndRemove({name: "Arya Stark"}, function(err, success) { 65 | // if (err) {console.log("Error")}; 66 | // console.log(success); 67 | // console.log("Successfully removed character"); 68 | // }); 69 | 70 | // db.Shows.remove({}, function(err, success) { 71 | // if (err) { return console.log("Error", err)}; 72 | // console.log("Successfully Removed All Characters and Shows"); 73 | // }); 74 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/25/exercises.md: -------------------------------------------------------------------------------- 1 | 2 | ## Challenges 3 | 4 | **Setting up an Embedded Model** 5 | 6 | 1. Write a file called `post.js` that has a post model with an attribute `comments` that contains an embedded comment schema. 7 | 8 | **Writing User/Tweets Routes** 9 | 10 | The following challenges are psuedo code. Write a method for each example. 11 | 12 | Here's an example where **Monsters have many Broods**: 13 | 14 | Example: Write a route to create a new Monster. 15 | 16 | ```js 17 | app.post('/monsters', function(req, res) { 18 | var monster = req.body.monster; 19 | Monster.create(monster, function (err, monster) { 20 | res.status(200).json(monster); 21 | }); 22 | }); 23 | ``` 24 | 25 | Example: Write a route to create a new Brood that belongs to a Monster. 26 | 27 | ```js 28 | app.post('/monsters/:id/broods', function(req, res) { 29 | Monster.findById(req.params.id, function(err, monster) { 30 | var brood = req.body.brood; 31 | monster.brood.push(brood); 32 | monster.save(function(err) { 33 | res.status(200).json(brood); 34 | }); 35 | }); 36 | }); 37 | ``` 38 | 39 | In the following challenges imagine that **Users have many Tweets** 40 | 41 | 2. Write a route to create a new User. 42 | 3. Return an array of all the users. 43 | 4. Return an array of all tweets of a specific user. 44 | 5. Create a new post that belongs to a user (who's id is in the `req.params.id`). 45 | 6. Delete a post that belongs to a user (make sure to build the route to include the user and the post's id's - see example above). 46 | 7. Update a post that belongs to a user (ditto on their id's!). 47 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-embed/25/solutions.md: -------------------------------------------------------------------------------- 1 | ## Solutions 2 | 3 | 1. Write a `post.js` file with a Post model with embedded Comment. 4 | 5 | ```js 6 | var mongoose = require('mongoose'); 7 | var Schema = mongoose.Schema; 8 | 9 | var commentSchema = new Schema({ 10 | body: { 11 | type: String, 12 | default: "" 13 | } 14 | }); 15 | 16 | var postSchema = new Schema({ 17 | title: { 18 | type: String, 19 | default: "" 20 | }, 21 | body: String, 22 | comments: [commentSchema] // EMBEDDING :D 23 | }); 24 | 25 | var Post = mongoose.model('Post', postSchema); 26 | module.exports = Post; 27 | ``` 28 | 29 | 1. Write a route to create a new User. 30 | 31 | ```js 32 | app.post('/users', function(req, res) { 33 | var user = req.body.user; 34 | User.create(user, function (err, user) { 35 | res.status(200).json(user); 36 | }); 37 | }); 38 | ``` 39 | 40 | 1. Return an array of all the users. 41 | 42 | ```js 43 | app.get('/users', function(req, res) { 44 | User.find({}, function (err, users) { 45 | res.status(200).json(users); 46 | }); 47 | }); 48 | ``` 49 | 50 | 51 | 1. Return an array of all tweets of a specific user. 52 | 53 | ```js 54 | app.get('/users/:userId/tweets', function(req, res) { 55 | User.find({ _id: req.params.userId }, function (err, user) { 56 | res.status(200).json(user.tweets); 57 | }); 58 | }); 59 | ``` 60 | 61 | 1. Create a new tweet that belongs to a user (who's id is in the `req.params.id`). 62 | 63 | ```js 64 | app.post('/users/:userId/tweets', function(req, res) { 65 | User.find({ _id: req.params.userId }, function (err, user) { 66 | user.tweets.push(req.body.tweet); 67 | user.save(function(err) { 68 | res.status(200).json(user); 69 | }); 70 | }); 71 | }); 72 | ``` 73 | 74 | 1. Delete a tweet that belongs to a user (make sure to build the route to include the user and the tweet's id's - see example above). 75 | 76 | ```js 77 | app.delete('/users/:userId/tweets/:tweetId', function(req, res) { 78 | User.find({ _id: req.params.userId }, function (err, user) { 79 | user.tweets.findByIdAndRemove({ _id: req.params.tweetId }); 80 | res.status(200).json(user); 81 | }); 82 | }); 83 | ``` 84 | 85 | 1. Update a tweet that belongs to a user (ditto on their id's!). 86 | 87 | ```js 88 | app.put('/users/:userId/tweets/:tweetId', function(req, res) { 89 | User.find({ _id: req.params.userId }, function (err, user) { 90 | var tweet = req.body.tweet; 91 | user.tweets.findByIdAndUpdate(tweet, function (err, user) { 92 | res.status(200).json(user); 93 | }); 94 | }); 95 | }); 96 | ``` 97 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/02-express-mongo-crud/mongoose-intro/.gitkeep -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/22/exercises.md: -------------------------------------------------------------------------------- 1 | # Express Mongoose Exercises 2 | 3 | ### Base Challenges 4 | 5 | **Adding Mongoose to toEatly** 6 | 7 | 1. Clone [this repo](https://github.com/sf-wdi-22-23/toEatly_mongoose/tree/master) as starter code. Run `npm install`. 8 | 1. Install `nodemon` globally on your computer 9 | 1. Install `mongo` - follow [these instructions](http://docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x/) 10 | 1. Run mongo on your computer with the `mongod` method. 11 | 1. Install `mongoose` locally to your project with npm. require and connect to your `mongoose` database. 12 | 1. Create a `Food` Model & Schema 13 | 1. Seed your database with `seed.js` 14 | 1. Use your new `Food` model in your Index route to send your foods to the client. 15 | 1. Update your Create route to use your new `Food` model to save new food document to your food collection to your DB. 16 | 1. Update your Delete route to use your new `Food` model to delete a food document from your food collection in your DB. 17 | 1. Update your Update route to use your new `Food` model . . . you get the idea! 18 | 19 | ### Stretch Challenges 20 | 21 | 1. Add Mongoose and `Post` model to your Project 0 Microblog. 22 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/22/solution.md: -------------------------------------------------------------------------------- 1 | ## Express Mongoose Solution 2 | 3 | Find the solution [here](https://github.com/sf-wdi-22-23/toEatly_mongoose/tree/solution) 4 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/26/solution-code/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/26/solution-code/controllers/remindersController.js: -------------------------------------------------------------------------------- 1 | var Reminder = require("../models/reminder") 2 | 3 | var remindersController = { 4 | index: function(req, res) { 5 | Reminder.find({}, function(err, docs) { 6 | res.render("reminders/index", {reminders: docs}); 7 | }); 8 | }, 9 | new: function(req, res) { 10 | res.render("reminders/new") 11 | }, 12 | create: function(req, res) { 13 | // strong params 14 | var title = req.body.title; 15 | var body = req.body.body; 16 | Reminder.create({title: title, body: body}, function(err, doc) { 17 | // if there there is an error: redirect to reminders#new; else: redirect to reminders#index 18 | err ? res.redirect("/reminders/new") : res.redirect("/reminders"); 19 | }) 20 | } 21 | } 22 | 23 | module.exports = remindersController; 24 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/26/solution-code/db/console.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | mongoose.connect('mongodb://localhost/reminders'); 3 | var REPL = require("repl"); 4 | 5 | var repl = REPL.start("> "); 6 | 7 | // model requirements 8 | repl.context.Reminder = require("../models/reminder"); 9 | 10 | // listen for an `exit` event 11 | repl.on("exit", function () { 12 | console.log("Ciao!"); 13 | // disconnect the database connection 14 | mongoose.disconnect(function() { 15 | // exit the repl 16 | process.exit(); 17 | }); 18 | }) 19 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/26/solution-code/db/seed.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | var conn = mongoose.connect('mongodb://localhost/reminders'); 3 | var Reminder = require("../models/reminder"); 4 | Reminder.remove({}, function(err) { 5 | if (err) { 6 | console.log("ERROR:", err); 7 | } 8 | }) 9 | 10 | var reminders = [ 11 | { 12 | title: "Cat", 13 | body: "Figure out his halloween costume for next year" 14 | }, 15 | { 16 | title: "Laundry", 17 | body: "Color-code socks" 18 | }, 19 | { 20 | title: "Spanish", 21 | body: "Learn to count to ten to impress the ladies" 22 | } 23 | ]; 24 | 25 | Reminder.create(reminders, function(err, docs) { 26 | if (err) { 27 | console.log("ERROR:", err); 28 | } else { 29 | console.log("Created:", docs) 30 | mongoose.connection.close(); 31 | } 32 | }); 33 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/26/solution-code/index.js: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | var express = require('express'); 3 | var app = express(); 4 | var mongoose = require('mongoose'); 5 | var bodyParser = require('body-parser'); 6 | var methodOverride = require('method-override'); 7 | 8 | // Configuration 9 | mongoose.connect('mongodb://localhost/reminders'); 10 | process.on('exit', function() { mongoose.disconnect() }); // Shutdown Mongoose correctly 11 | app.set("view engine", "hbs"); // sets view engine to handlebars 12 | app.use(bodyParser.json()); // allows for parameters in JSON and html 13 | app.use(bodyParser.urlencoded({extended:true})); 14 | app.use(methodOverride('_method')); // allows for put/delete request in html form 15 | app.use(express.static(__dirname + '/public')); // looks for assets like stylesheets in a `public` folder 16 | var port = 3000; // define a port to listen on 17 | 18 | // Controllers 19 | var remindersController = require("./controllers/remindersController"); 20 | 21 | // Routes 22 | app.get("/reminders", remindersController.index); 23 | app.get("/reminders/new", remindersController.new); 24 | app.post("/reminders", remindersController.create); 25 | 26 | // Start server 27 | app.listen(port, function() { 28 | console.log("app is running on port:", port); 29 | }); 30 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/26/solution-code/models/reminder.js: -------------------------------------------------------------------------------- 1 | // requiring mongoose dependency 2 | var mongoose = require('mongoose'); 3 | 4 | // defining schema for reminders 5 | var ReminderSchema = new mongoose.Schema({ 6 | title: String, 7 | body: String, 8 | createdAt: { type : Date, default: Date.now() } 9 | }); 10 | // define the model 11 | var Reminder = mongoose.model("Reminder", ReminderSchema); 12 | // export the model to any files that `require` this one 13 | module.exports = Reminder; 14 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/26/solution-code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminders", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.15.0", 13 | "express": "^4.13.4", 14 | "hbs": "^4.0.0", 15 | "method-override": "^2.3.5", 16 | "mongoose": "^4.4.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/26/solution-code/views/layout.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
    8 |

    Reminder.ly

    9 | + Reminder 10 |
    11 |
    12 | 13 | {{{body}}} 14 | 15 | 16 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/26/solution-code/views/reminders/index.hbs: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-intro/26/solution-code/views/reminders/new.hbs: -------------------------------------------------------------------------------- 1 |

    Create a New Reminder

    2 |
    3 | 4 | 5 | 6 | 7 | 8 |
    9 | -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-reference-populate/19-20/img/many_to_many.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/02-express-mongo-crud/mongoose-reference-populate/19-20/img/many_to_many.png -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-reference-populate/19-20/img/one_to_many.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/02-express-mongo-crud/mongoose-reference-populate/19-20/img/one_to_many.png -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-reference-populate/19-20/img/one_to_one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/02-express-mongo-crud/mongoose-reference-populate/19-20/img/one_to_one.png -------------------------------------------------------------------------------- /02-express-mongo-crud/mongoose-reference-populate/22-23/exercises.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Exercises 4 | 5 | ### Setup 6 | To run mongoose commands in terminal: 7 | 8 | 1. `cd ~/dev` 9 | 1. `mkdir w04-d1-dusk` 10 | 1. `cd w04-d1-dusk` 11 | 1. `touch server.js` --> this is where your mongoose code will go 12 | 1. `npm install mongoose` 13 | 1. to run: `nodemon server.js` --> this takes you to the node console 14 | 15 | ### Base Exercises 16 | 17 | 1. Assemble the code in this module's README into your `server.js` file and refactor it to create your own models that use referenced documents. Be creative and make it interesting and relevant (easier said than done). 18 | 1. Create at least 5 'top-level' documents (in my case, five games) and at least 3 referenced documents (in my case, three consoles). 19 | 1. Demonstrate the ability to display the documents with just an ObjectId for the referenced documents. 20 | 1. Finally, call `populate()` on a query and demonstrate the **full** referenced documents as in the README with the Legend of Zelda: Ocarina of Time and the Nintendo 64. 21 | 22 | ### Stretch Exercises 23 | 24 | 1. Add another model to your code to create a multi-tiered structure. 25 | 1. Incorporate both embedded and referenced models. 26 | 27 | ### Tips: 28 | 29 | * Use `.remove` or `.findOneAndRemove` if your database gets cluttered. 30 | 31 | * This `server.js` file might not work exactly because of the *asynchronous* nature of the database operations we're doing. (They can finish in any order -- test this out with console logs in every callback.) Still, each individual snippet of code will be something we can incorporate into our server code later. 32 | -------------------------------------------------------------------------------- /03-angular-mean/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/03-angular-mean/.gitkeep -------------------------------------------------------------------------------- /03-angular-mean/api-integration/27-28/readme.md: -------------------------------------------------------------------------------- 1 | ![GA Logo](https://raw.github.com/generalassembly/ga-ruby-on-rails-for-devs/master/images/ga.png) 2 | 3 | ## Angular Movie API Integration 4 | 5 | | Objectives | 6 | | :--- | 7 | | Create a single page Angular app from scratch. | 8 | | Make requests to an external API and display the results in a presentable format. | 9 | | Separate appropriate functionality into services and directives. | 10 | 11 | 12 | #### [Starter code](https://github.com/sf-wdi-27-28/angular_movie_project) 13 | 14 | #### Specs 15 | 16 | - The page should have a form that uses the [OMDB api](http://www.omdbapi.com/) to search for matching movies and then display the results. 17 | - *Example*: If a user searches for `Star Wars`, a card for each Star Wars movie result will be displayed. 18 | 19 | - The card display of each movie should include a poster image, the movie title, and the year of release. The display of cards should be responsive and use Bootstrap. 20 | 21 | - When the user clicks on a search result, go to a show page for that movie. 22 | - *Example*: If a user is viewing a list of every Star Wars movie and clicks on `Star Wars: A New Hope`, you will navigate to a show view with a single movie card. 23 | 24 | - Once you have basic API functionality, you should abstract all of the access to the [OMDB api](http://www.omdbapi.com/) into a custom service called `MovieService`. You should be able to ask the `MovieService` to get search results and to get one single movie. 25 | 26 | - Once you have basic display working, you should abstract the card away into a directive called `wdiMovieCard` that takes in a movie object to display. 27 | -------------------------------------------------------------------------------- /03-angular-mean/auth-angular/25/solutions.md: -------------------------------------------------------------------------------- 1 | # Angular Auth with Satellizer - Solutions 2 | 3 | angular_auth_satellizer (solution branch) 4 | -------------------------------------------------------------------------------- /03-angular-mean/custom-directives/README.md: -------------------------------------------------------------------------------- 1 | ##Custom Directives, yay! 2 | -------------------------------------------------------------------------------- /03-angular-mean/intro-angular/25/solutions.md: -------------------------------------------------------------------------------- 1 | # Intro Angular - Solutions 2 | 3 | ## Challenges 4 | ```html 5 |
    6 | 
    {{ catchphrase | uppercase }}
    7 | 
    {{ pokemon | json : spacing }}
    8 |
    9 | ``` 10 | 11 | `index.html` 12 | ```html 13 | 14 | 15 | 16 | 17 | 18 | First Angular App 19 | 20 | 21 | 22 | 23 | 24 | 25 |
    26 |

    Trainer: {{ pc.trainer.name || "Ash" }}

    27 | 28 | Enter your name: 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | Search Pokemon: 49 | 50 | 51 | 52 | 53 | 54 | ``` 55 | 56 | `app.js` 57 | ```js 58 | var app = angular.module("ngFun", []) 59 | .controller("pokemonController", pokemonController) 60 | .filter('reverse', reverse); 61 | 62 | function pokemonController() { 63 | this.pokemon = [ 64 | { 65 | id: 25, 66 | name: 'Pikachu', 67 | type: 'Electric' 68 | }, 69 | { 70 | id: 10, 71 | name: 'Caterpie', 72 | type: 'Bug' 73 | }, 74 | { 75 | id: 39, 76 | name: 'Jigglypuff', 77 | type: 'Fairy' 78 | }, 79 | { 80 | id: 94, 81 | name: 'Gengar', 82 | type: 'Ghost' 83 | }, 84 | { 85 | id: 143, 86 | name: 'Snorlax', 87 | type: 'Normal' 88 | } 89 | ]; 90 | this.catchphrase = "Gotta catch 'em all!"; 91 | }; 92 | 93 | function reverse() { 94 | return function(items) { 95 | return items.slice().reverse(); 96 | }; 97 | } 98 | ``` 99 | -------------------------------------------------------------------------------- /03-angular-mean/ngRoute/27/goats_app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/03-angular-mean/ngRoute/27/goats_app.png -------------------------------------------------------------------------------- /03-angular-mean/ngRoute/27/views_layouts_malcolm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SF-WDI-LABS/shared_modules/13522fd4c4a9ceb0be487c0b6197cc7e77035566/03-angular-mean/ngRoute/27/views_layouts_malcolm.png -------------------------------------------------------------------------------- /04-ruby-rails/asset-pipeline/24/solutions.md: -------------------------------------------------------------------------------- 1 | # Rails Asset Pipeline - Solutions 2 | 3 | * asset_pipeline_poem (solution branch) 4 | * asset_pipeline_poem (solution_bootstrap_sass branch) 5 | -------------------------------------------------------------------------------- /04-ruby-rails/asset-pipeline/27/exercises.md: -------------------------------------------------------------------------------- 1 | # Rails Asset Pipeline Exercises 2 | 3 | ### Asset Pipeline Poem 4 | 5 | Start with the [asset pipeline poem lab](https://github.com/sf-wdi-27-28/asset_pipeline_poem). Move on to the "Take it Further!" challenges below when you have these steps complete: 6 | 7 | 1. Put the lines of the file and title in the correct order. 8 | 2. Show the character count (see screenshot in lab readme). 9 | 3. Precompile so that all of your JavaScript and CSS assets are combined into one file each. 10 | 11 | ### Take it Further! 12 | 13 | #### Displaying Images 14 | 15 | 1. Add two images of your choice to your `app/assets/images` folder 16 | 2. Add one image to your main site index view by calling the file name in an `image_tag` erb view helper. 17 | 18 | ``` 19 | <%= image_tag 'rails.png' %> 20 | ``` 21 | 22 | 1. Check out [other asset tag helpers](http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html), and add one more of any kind (could be another image) to your asset pipeline poem. 23 | 24 | #### Using `asset_path` 25 | 26 | 1. Use jQuery to add a click event handler to the title of the poem. Start by logging a sanity check message in your console. Test this. 27 | 28 | 1. Update the click event handler to change the image displayed on your index page. Use the `asset_path` helper to access the correct path for the asset from inside your JavaScript code (see [this reference in the additional reading](https://github.com/SF-WDI-LABS/shared_modules/blob/master/04-ruby-rails/asset-pipeline/27/additional-reading.md#erb-and-asset-path-helpers)). 29 | -------------------------------------------------------------------------------- /04-ruby-rails/intro-rails/24/solutions.md: -------------------------------------------------------------------------------- 1 | # Intro Rails - Solutions 2 | 3 | 1. Create a new route: a `GET` request to `/about` that hits the controller#action `site#about`. 4 | 5 | ```ruby 6 | # 7 | # config/routes.rb 8 | # 9 | 10 | get "/about", to: "site#about" 11 | ``` 12 | 13 | 2. Have `site#about` render a view in `app/views/site/about.html.erb`. 14 | 15 | ```ruby 16 | # 17 | # app/controllers/site_controller.rb 18 | # 19 | 20 | class SiteController < ApplicationController 21 | def about 22 | end 23 | end 24 | ``` 25 | 26 | *Also create a view `app/views/site/about.html.erb`*. The `site#about` controller method automatically renders the `about.html.erb` view. 27 | 28 | 3. Set a variable equal to your favorite programming language in your `site#about` controller method, and have the controller pass that variable to the view. 29 | 30 | ```ruby 31 | # 32 | # app/controllers/site_controller.rb 33 | # 34 | 35 | class SiteController < ApplicationController 36 | def about 37 | @favorite_language = "Ruby" 38 | end 39 | end 40 | ``` 41 | 42 | 4. Update the `app/views/site/about.html.erb` view template to show the variable you passed in. Your view should now display your favorite programming language! 43 | 44 | ```html 45 | 46 | 47 |

    About Me

    48 |

    Favorite Programming Language: <%= @favorite_language =%>

    49 | ``` 50 | 51 | 5. Create an array of your favorite programming libraries and/or frameworks in your `site#about` controller method. Pass them into your view and iterate through each of them inside a `
    idNameType
    {{value.id}}{{value.name}}{{value.type}}