ISTA 330 – Project 2 – Part II (due on Wednesday March 4th at 9am)
Exercise 1 – (reading assignment) Read the following chapters:
1. (HTML Canvas) https://www.w3schools.com/graphics/canvas_intro.asp
2. (Node.js) https://www.w3schools.com/nodejs/nodejs_intro.asp
3. (JavaScript Promises) https://developers.google.com/web/fundamentals/primers/promises
4. (Webservices)https://www.reply.com/solidsoft-reply/en/content/webservices-soap-and-rest-a-simple-introduction
There will be a quiz on Monday March 2nd covering these topics.
Exercise 2 – (Adding themes, images and labels )
In this project we develop an html page using which users can add new themes, add new images to themes and add labels to the
images.
Add a new html file, admin.html, to the frontend. Initially the admin page should look like the following:
When users click inside the text input, the frontend should fetch the list of the current themes from the server and should show them as a select-able list (use the datalist tag: https://www.w3schools.com/tags/tag_datalist.asp):
Advanced web design 1 Spring 2020
ISTA 330 – Project 2 – Part II (due on Wednesday March 4th at 9am)
Now the user can either select a theme from the list or can enter the name of a new theme. If they select a theme from the list the next step will be shown as follows:
Now the user can select an image from the list (if there are any images already associated with the theme) or can upload a new image:
Advanced web design 2 Spring 2020
ISTA 330 – Project 2 – Part II (due on Wednesday March 4th at 9am)
When the user selects an image from the list or uploads a new image the next step will be shown:
Now if the user clicks on a point on the image a label with a number (a circle with a number inside) should be put on that point:
Advanced web design 3 Spring 2020
ISTA 330 – Project 2 – Part II (due on Wednesday March 4th at 9am)
If in the first step the user enters a new theme instead of selecting an existing theme, then the following step should be shown as below:
Then when the user clicks ’Choose File’ button and selects an image, the next step is shown:
Advanced web design 4 Spring 2020
ISTA 330 – Project 2 – Part II (due on Wednesday March 4th at 9am)
Now if the user clicks any point on the image, a circle with a number inside should be drawn on the image. (All the images in this document are taken from Oxford Picture Dictionary.)
Advanced web design 5 Spring 2020