diff --git a/PhotoGalleryLib.md b/PhotoGalleryLib.md index 9318114..1f62815 100644 --- a/PhotoGalleryLib.md +++ b/PhotoGalleryLib.md @@ -4,11 +4,11 @@ This library contains some functions which will be helpful for completing the assignments for this course. It has functions for detecting screen size changes, creating image tables of various sizes, creating modals, etc. -The JavaScript file can be found [here](https://github.com/shivanshu3/webAppsAssignments/blob/master/PhotoGalleryLib.js). +The JavaScript file can be found [here](PhotoGalleryLib.js). Simply add a `` +`` ## Functions diff --git a/README.md b/README.md index 3d0f4eb..cdef719 100644 --- a/README.md +++ b/README.md @@ -2,20 +2,20 @@ ## Assignments -- [Assignment 1](https://github.com/shivanshu3/webAppsAssignments/blob/master/assignment-1.md) -- [Assignment 2](https://github.com/shivanshu3/webAppsAssignments/blob/master/assignment-2.md) -- [Assignment 3](https://github.com/shivanshu3/webAppsAssignments/blob/master/assignment-3.md) -- [Assignment 4](https://github.com/shivanshu3/webAppsAssignments/blob/master/assignment-4.md) +- [Assignment 1](assignment-1.md) +- [Assignment 2](assignment-2.md) +- [Assignment 3](assignment-3.md) +- [Assignment 4](assignment-4.md) ## Resources -- All 8 images which you will use in the assignments can be found [here](https://github.com/shivanshu3/webAppsAssignments/tree/master/images). -- A basic UI wireframe is [here](https://github.com/shivanshu3/webAppsAssignments/blob/master/layout.pdf) -- The PhotoGalleryLib library is [here](https://github.com/shivanshu3/webAppsAssignments/blob/master/PhotoGalleryLib.js) -- The documentation for that library can be found [here](https://github.com/shivanshu3/webAppsAssignments/blob/master/PhotoGalleryLib.md) +- All 8 images which you will use in the assignments can be found [here](images). +- A basic UI wireframe is [here](layout.pdf) +- The PhotoGalleryLib library is [here](PhotoGalleryLib.js) +- The documentation for that library can be found [here](PhotoGalleryLib.md) ## Server The HTTP server you will use in the later assignments is hosted here: - +(TBD) http://165.227.3.253:3000/images diff --git a/assignment-1.md b/assignment-1.md index 8d8b1ab..d77a38e 100644 --- a/assignment-1.md +++ b/assignment-1.md @@ -22,7 +22,7 @@ To help you get started, you will need to structure your project into the follow For this particular assignment, you will write some basic HTML and CSS to build the homepage for the web app. There is no JavaScript required for this assignment, so you will be penalized if you use JavaScript for this assignment. -The file [layout.png](https://github.com/shivanshu3/webAppsAssignments/blob/master/layout.pdf) provides a wireframe of what the user interface should look like. You are free to choose colours and fonts of your own choice. +The file [layout.png](layout.pdf) provides a wireframe of what the user interface should look like. You are free to choose colours and fonts of your own choice. ## Tasks @@ -56,8 +56,8 @@ The file [layout.png](https://github.com/shivanshu3/webAppsAssignments/blob/mast - Add a shadow to the images when hovered over. - Make the border of the images rounded on the edges when hovered over. -Note that you do not need to setup any server to host the webpage you are creating. Simply open the html pape with any browser, and the webpage will be displayed. +Note that you do not need to setup any server to host the webpage you are creating. Simply open the html page with any browser, and the webpage will be displayed. ## Submission Instructions -- For each assignment, create a branch called assignment-, for ex: assignment-1, assignment-2, etc. -- Make sure you push your changes to that branch before midnight (11:59 PM) on the date of the assignment deadline. +- For each assignment, create a branch called assignment-, for ex: assignment-1, assignment-2, etc. **For this assignment, your branch name should be assignment-1.** +- Make sure you push your changes to that branch before midnight (11:59 PM) on the date of the assignment deadline (**July 23, 2018 11:59 PM**). diff --git a/assignment-2.md b/assignment-2.md index 75111a4..85387ce 100644 --- a/assignment-2.md +++ b/assignment-2.md @@ -2,9 +2,9 @@ ## Introduction -This assignment is a continuation of Assignment 1. If you have successfully completed the previous assignment, you may use your own code, or you can use the sample solution for Assignment 1, posted [here](http://example.com), to complete this assignment. +This assignment is a continuation of Assignment 1. If you have successfully completed the previous assignment, you may use your own code, or you can use the sample solution for Assignment 1, posted [here](http://ece.ubc.ca/~kumseok/src/vsp2018/solutions/assignment-1.zip), to complete this assignment. -In this assignment, you will make the web app responsive. That is, the app will be optimized for viewing across multiple devices and screen sizes. For this assignment, and some future ones, you will use the [PhotoGalleryLib](https://github.com/shivanshu3/webAppsAssignments/blob/master/PhotoGalleryLib.js) library provided by us, which includes a lot of helpful functions. The documentation and some examples of how to use this library can be found [here](https://github.com/shivanshu3/webAppsAssignments/blob/master/PhotoGalleryLib.md). +In this assignment, you will make the web app responsive. That is, the app will be optimized for viewing across multiple devices and screen sizes. For this assignment, and some future ones, you will use the [PhotoGalleryLib](PhotoGalleryLib.js) library provided by us, which includes a lot of helpful functions. The documentation and some examples of how to use this library can be found [here](PhotoGalleryLib.md). ## Tasks diff --git a/assignment-3.md b/assignment-3.md index 30169e7..59ce113 100644 --- a/assignment-3.md +++ b/assignment-3.md @@ -2,11 +2,11 @@ ## Introduction -This assignment is a continuation of Assignment 2. If you have successfully completed the previous assignment, you may use your own code, or you can use the sample solution for Assignment 2, posted [here](http://example.com), to complete this assignment. +This assignment is a continuation of Assignment 2. If you have successfully completed the previous assignment, you may use your own code, or you can use the sample solution for Assignment 2, posted [here](http://ece.ubc.ca/~kumseok/src/vsp2018/solutions/assignment-2.zip), to complete this assignment. In this assignment, you'll implement a presentation mode. The presentation mode should be opened when you click on an image, effectively making images enlargeable. You will implement the next and previous buttons in the presentation mode to switch through various images. Finally, you'll implement an automatic slideshow, which will switch through images in the presentation mode after a set period of time. -The presentation mode will be implemented using a modal window. You will use [PhotoGalleryLib](https://github.com/shivanshu3/webAppsAssignments/blob/master/PhotoGalleryLib.js) again for this assignment. The documentation and some examples of how to use this library can be found [here](https://github.com/shivanshu3/webAppsAssignments/blob/master/PhotoGalleryLib.md). +The presentation mode will be implemented using a modal window. You will use [PhotoGalleryLib](PhotoGalleryLib.js) again for this assignment. The documentation and some examples of how to use this library can be found [here](PhotoGalleryLib.md). ## Tasks diff --git a/assignment-4.md b/assignment-4.md index 7895dac..ca97b82 100644 --- a/assignment-4.md +++ b/assignment-4.md @@ -2,14 +2,38 @@ ## Introduction -This assignment is a continuation of Assignment 3. If you have successfully completed the previous assignment, you may use your own code, or you can use the sample solution for Assignment 3, posted [here](http://example.com), to complete this assignment. +This assignment is a continuation of Assignment 3. If you have successfully completed the previous assignment, you may use your own code, or you can use the sample solution for Assignment 3, posted [here](http://ece.ubc.ca/~kumseok/src/vsp2018/solutions/assignment-3.zip), to complete this assignment. + +In this assignment, you will remove the hardcoded list of images from your code, and will also stop using the local image files stored on your computer. You will be using asynchronous requests (AJAX) to receive image URLs from a server, and use them to display the images in the grid. + +You will need to first get the server code from [HERE](https://github.com/jungkumseok/ubc-vsp18-server/). Follow the instructions and then confirm that you can see your client application (assignment-3) at `http://localhost:3000/`. + +Just to clarify, your `assignment-4` branch should look like the following: + +``` +/public/ + /css/ + /js/ + /libs/ + /index.html +/.gitignore +/index.js +/package.json +``` + +* `index.js` and `package.json` files are from the server code we provided. + +* Make sure that `/public/` directory contains **your client-side code** and not the default `index.html` included in the server side code. + +* Make sure you have a `.gitignore` file. The file should include `**/node_modules/**` so that you do not commit the npm modules to your repository. + +* If you have `git clone`d the server repository, make sure you remove the `.git/` directory. -In this assignment, you will remove the hardcoded list of images from your code, and will also stop using the local image files stored on your computer. You will using asynchronous requests (AJAX) to receive image URLs from a server, and use them to display the images in the grid. ## Tasks -1. For this task, you do not need to change the code which displays images in the grid. Add code to send a GET HTTP request to http://165.227.3.253:3000/images endpoint which returns a list of image URLs. Print this list of URLs to the console. -2. For this task, you will use the list of image URLs downloaded in the previous task to display them in the grid. +1. For this task, you do not need to change the code which displays images in the grid. Add code to send a GET HTTP request to `http://localhost:3000/images` endpoint which returns a list of image URLs. **Print this list of URLs to the console.** +2. For this task, you will **use the list of image URLs downloaded (via AJAX) in the previous task** to display them in the grid. ## Submission Instructions