Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pull! #1

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
4 changes: 2 additions & 2 deletions PhotoGalleryLib.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<script>` tag like the following to use this in your code:

`<script src="https://raw.githubusercontent.com/shivanshu3/webAppsAssignments/master/PhotoGalleryLib.js"></script>`
`<script src="https://raw.githubusercontent.com/juliengs/vsp2018webapp-assignments/master/PhotoGalleryLib.js"></script>`

## Functions

Expand Down
18 changes: 9 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
8 changes: 4 additions & 4 deletions assignment-1.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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**).
4 changes: 2 additions & 2 deletions assignment-2.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions assignment-3.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
32 changes: 28 additions & 4 deletions assignment-4.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down