├── .canvas ├── .github └── workflows │ └── canvas-sync-ruby-update.yml ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE.md └── README.md /.canvas: -------------------------------------------------------------------------------- 1 | --- 2 | :lessons: 3 | - :id: 239965 4 | :course_id: 6638 5 | :canvas_url: https://learning.flatironschool.com/courses/6638/pages/phase-1-project-guidelines 6 | :type: page 7 | - :id: 296253 8 | :course_id: 7550 9 | :canvas_url: https://learning.flatironschool.com/courses/7550/pages/phase-1-project-guidelines 10 | :type: page 11 | -------------------------------------------------------------------------------- /.github/workflows/canvas-sync-ruby-update.yml: -------------------------------------------------------------------------------- 1 | name: Sync with Canvas Ruby v2.7 2 | 3 | on: 4 | push: 5 | branches: [master, main] 6 | paths: 7 | - 'README.md' 8 | 9 | jobs: 10 | sync: 11 | name: Sync with Canvas 12 | 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v2 17 | 18 | - name: Set up Ruby 19 | uses: ruby/setup-ruby@v1 20 | with: 21 | ruby-version: 2.7 22 | 23 | - name: Install github-to-canvas 24 | run: gem install github-to-canvas 25 | 26 | # Secret stored in learn-co-curriculum Settings/Secrets 27 | - name: Sync from .canvas file 28 | run: github-to-canvas -a -lr 29 | env: 30 | CANVAS_API_KEY: ${{ secrets.CANVAS_API_KEY }} 31 | CANVAS_API_PATH: ${{ secrets.CANVAS_API_PATH }} 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea 3 | 4 | log 5 | node_modules 6 | out 7 | tmp 8 | 9 | *.iml 10 | *.log 11 | *.swp 12 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Learn.co Curriculum 2 | 3 | We're really excited that you're about to contribute to the 4 | [open curriculum](https://learn.co/content-license) on 5 | [Learn.co](https://learn.co). If this is your first time contributing, please 6 | continue reading to learn how to make the most meaningful and useful impact 7 | possible. 8 | 9 | ## Raising an Issue to Encourage a Contribution 10 | 11 | If you notice a problem with the curriculum that you believe needs improvement 12 | but you're unable to make the change yourself, you should raise a Github issue 13 | containing a clear description of the problem. Include relevant snippets of the 14 | content and/or screenshots if applicable. Curriculum owners regularly review 15 | issue lists and your issue will be prioritized and addressed as appropriate. 16 | 17 | ## Submitting a Pull Request to Suggest an Improvement 18 | 19 | If you see an opportunity for improvement and can make the change yourself go 20 | ahead and use a typical git workflow to make it happen: 21 | 22 | - Fork this curriculum repository 23 | - Make the change on your fork, with descriptive commits in the standard format 24 | - Open a Pull Request against this repo 25 | 26 | A curriculum owner will review your change and approve or comment on it in due 27 | course. 28 | 29 | ## Why Contribute? 30 | 31 | Curriculum on Learn is publicly and freely available under Learn's 32 | [Educational Content License](https://learn.co/content-license). By embracing an 33 | open-source contribution model, our goal is for the curriculum on Learn to 34 | become, in time, the best educational content the world has ever seen. 35 | 36 | We need help from the community of Learners to maintain and improve the 37 | educational content. Everything from fixing typos, to correcting out-dated 38 | information, to improving exposition, to adding better examples, to fixing 39 | tests—all contributions to making the curriculum more effective are welcome. 40 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # Learn.co Educational Content License 2 | 3 | Copyright (c) 2021 Flatiron School, Inc 4 | 5 | The Flatiron School, Inc. owns this Educational Content. However, the Flatiron 6 | School supports the development and availability of educational materials in the 7 | public domain. Therefore, the Flatiron School grants Users of the Flatiron 8 | Educational Content set forth in this repository certain rights to reuse, build 9 | upon and share such Educational Content subject to the terms of the Educational 10 | Content License set forth [here](http://learn.co/content-license) 11 | (http://learn.co/content-license). You must read carefully the terms and 12 | conditions contained in the Educational Content License as such terms govern 13 | access to and use of the Educational Content. 14 | 15 | Flatiron School is willing to allow you access to and use of the Educational 16 | Content only on the condition that you accept all of the terms and conditions 17 | contained in the Educational Content License set forth 18 | [here](http://learn.co/content-license) (http://learn.co/content-license). By 19 | accessing and/or using the Educational Content, you are agreeing to all of the 20 | terms and conditions contained in the Educational Content License. If you do not 21 | agree to any or all of the terms of the Educational Content License, you are 22 | prohibited from accessing, reviewing or using in any way the Educational 23 | Content. 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phase 1 Project Guidelines 2 | 3 | ## Learning Goals 4 | 5 | - Design and architect features across a frontend 6 | - Communicate and collaborate in a technical environment 7 | - Integrate JavaScript and an external API 8 | - Debug issues in small- to medium-sized projects 9 | - Build and iterate on a project MVP 10 | 11 | ## Introduction 12 | 13 | Welcome to JavaScript Project Mode! 14 | 15 | You’ve worked so hard to get here and have learned a ton. Now it's time to bring 16 | it all together! 17 | 18 | For this project, you're going build a Single Page Application (**SPA**). 19 | Building this application will be challenging because it will integrate 20 | everything you've learned up to this point. Your frontend will be built with 21 | HTML, CSS, and JavaScript and will communicate with a public API. 22 | 23 | ### Project Requirements 24 | 25 | 1. Your app must be a HTML/CSS/JS frontend that accesses data from a public API or 26 | from a db.json file using json-server. Your API or db.json should return a 27 | collection of at least 5 objects with each object having at least 3 attributes. 28 | All interactions between the client and the API should be handled 29 | asynchronously and use JSON as the communication format. Try to avoid using 30 | an API that requires a key. APIs that are free and require no authorization 31 | will be easiest to use. For ideas, see this [list of no-auth APIs][APIs]. If 32 | you would like to use an API that requires a key, please consult with your 33 | instructor on how to protect that key. **NEVER push your API key to github!** 34 | 35 | 2. Your entire app must run on a single page. There should be NO redirects or 36 | reloads. In other words, your project will contain a single HTML file. 37 | 38 | 3. Use at least 3 distinct [event listeners][event-listeners] (3 events of different 39 | types) that enable interactivity. What this means is that, if you had 3 click 40 | events, that would only count as 1 distinct event and you would need to add at 41 | least 2 more. Think search or filter functionality, toggling dark/light mode, 42 | upvoting posts, etc. Each of your event listeners should also have its own unique 43 | callback function. These must be added using JavaScript's .addEventListener() 44 | method. Events embedded into HTML elements and CSS will not count toward the 45 | total. Please ask your instructor if you have questions regarding this requirement. 46 | 47 | 4. Your project must implement at least one instance of array iteration using 48 | available array methods (`map`, `forEach`, `filter`, etc). Manipulating your 49 | API data in some way should present an opportunity to implement your array 50 | iteration. 51 | 52 | 5. Follow good coding practices. Keep your code DRY (Do not repeat yourself) by 53 | utilizing functions to abstract repetitive code. 54 | 55 | ### Stretch Goals 56 | 57 | 1. Use [json-server][] in your project to persist your app's interactivity. 58 | 59 | ## Strategy, Timeline, and Tips 60 | 61 | ### Planning 62 | 63 | - Plan out your features 64 | - Develop user stories 65 | - “As [ a user ], I want [ to perform this action ] so that 66 | [ I can accomplish this goal ].” 67 | - Features should not need you there to explain them to users 68 | - Plan out the structure of your JSON requests 69 | 70 | ### Project Pitches 71 | 72 | Before you start working on your project, you'll pitch your project idea to your 73 | instructors for approval and feedback. 74 | 75 | For your project pitch, you should include: 76 | 77 | - The basic story of your application 78 | - The core features of your MVP 79 | - The API data you'll be using and how you'll use it 80 | - Challenges you expect to face 81 | - How you are meeting the requirements of the project 82 | 83 | Feel free to send this pitch to your instructor via slack asynchronously. 84 | 85 | ### MVP ASAP 86 | 87 | - Build a Minimum Viable Product (MVP) as quickly as possible. 88 | - Pick an API and explore it early on to ensure it will work for your need 89 | 90 | ### Instructor Guidance 91 | 92 | You should strive to solve problems independently, but you also shouldn't waste 93 | your time stuck on a problem. A good guideline for a small bug is the rule of 94 | 10s: 95 | 96 | - 10 minutes debugging the code 97 | - 10 minutes using Google and StackOverflow to try to find an answer 98 | - 10 minutes asking your fellow students for help 99 | - Asking an instructor 100 | 101 | If you seek out instructor guidance on your design from the start, they might 102 | help steer you into design and architectural decisions that will help you down 103 | the road. That will also give the instructors context for what your app is 104 | supposed to do, so you won't need to explain everything to them when asking for 105 | help debugging. 106 | 107 | ### Guidelines for Staying Organized 108 | 109 | **Write down** the decisions you make about your project. This will not only 110 | help you think more clearly, it will also help you communicate your project to 111 | instructors when asking for help. In addition to writing everything down, we 112 | also recommend the following to help stay organized and on track: 113 | 114 | - Describe/sketch your ideas (use diagrams!). 115 | - Start by creating a frontend directory with the basic files you'll need 116 | - Next, build enough code to get some API data to work with. Don't worry about 117 | building all of your async code yet, just get to the point where you can 118 | access one endpoint on an API, then start working on getting that data 119 | displayed. 120 | - Then, continue to build additional async code and frontend features. 121 | - Continue building features one by one. 122 | 123 | Check in with your instructors to make sure your scope and timeline are 124 | manageable. 125 | 126 | ### JSON Server Instructions 127 | 128 | > **Note**: Using `json-server` is a stretch goal, so make sure you have a 129 | > working MVP before trying to set up `json-server`! 130 | 131 | You can use this [json-server template][] to generate your backend code. Using 132 | this template will make it easier to deploy your backend later on. 133 | 134 | [json-server template]: https://github.com/learn-co-curriculum/json-server-template 135 | 136 | If you prefer, instead of using the template, you can create a `db.json` file 137 | with a structure in the root of your project that looks like this: 138 | 139 | ```json 140 | { 141 | "toys": [ 142 | { 143 | "id": 1, 144 | "name": "Woody", 145 | "image": "http://www.pngmart.com/files/3/Toy-Story-Woody-PNG-Photos.png", 146 | "likes": 8 147 | }, 148 | { 149 | "id": 2, 150 | "name": "Buzz Lightyear", 151 | "image": "http://www.pngmart.com/files/6/Buzz-Lightyear-PNG-Transparent-Picture.png", 152 | "likes": 14 153 | } 154 | ] 155 | } 156 | ``` 157 | 158 | Then, assuming you have `json-server` installed globally, you can run this 159 | command to run the server: 160 | 161 | ```console 162 | $ json-server --watch db.json 163 | ``` 164 | 165 | Whatever top-level keys exist in your `db.json` file will determine the routes 166 | available. In the example above, since we have a key of `toys` pointing to an 167 | array of toy objects, `json-server` will generate the following routes: 168 | 169 | - `GET /toys` 170 | - `POST /toys` 171 | - `GET /toys/:id` 172 | - `PATCH /toys/:id` 173 | - `DELETE /toys/:id` 174 | 175 | You can consult the [json-server docs][] for more information. 176 | 177 | [json-server docs]: https://www.npmjs.com/package/json-server 178 | 179 | ## Resources 180 | 181 | - [Public APIs](https://github.com/public-apis/public-apis) 182 | - [Fun APIs](https://apilist.fun/) 183 | - [json-server][] 184 | 185 | [json-server]: https://www.npmjs.com/package/json-server 186 | [event-listeners]: https://developer.mozilla.org/en-US/docs/Web/Events 187 | [APIs]: https://mixedanalytics.com/blog/list-actually-free-open-no-auth-needed-apis/ 188 | --------------------------------------------------------------------------------