The assignment attached is a web design assignment that needs to be completed using only HTML5/CSS3 and JavaScript.
You must create the following page using only HTML5/CSS3 and JavaScript.
You may also use jQuery but only the standard distribution. You may not use any plugins, etc.
All code you submit must be written by you (with the exception of the standard jQuery distribution if you use it).
You will create a Flickr search tool. Create a section with a text field for the user to enter a search term and a button that will start a search of flickr.
Provide a button that will add an extra text field to the page (for adding an extra tag to the search).
The new text field will be placed on the page where we can enter an new search term.
When you press the button that starts the search you collect the terms in each text field and use them to construct a search term to send to Flickr.
Each extra text field should include a button that will remove it from the page.
There should always be at least one tag field available. I.e. you shouldn't be able to delete the first tag field.
Clicking on the search button should give some feedback that a search is taking place.
The button should go back to its original state when the search is over.
When the button is pressed you should construct the final search term from the text fields, urlencode it (using the JavaScript encodeURI() function), and add it to the request URL for the Flickr JSONP API.
Once the data is received from the server you should place thumbnail images on the page. (You can specify the size of the image you want from Flickr when constructing the URL of the image)
Your script should be able to gracefully handle the possibilities that no tag was entered or that no images match the search terms.
When you select a new image the element containing the images should move until the new selection is in the center and highlighted.
When you hover over the left-most part of the carousel the "left" panel should appear. Clicking on this (or pressing the left key) will select the next image.
Similarly a panel will appear on the right-hand side. Clicking on it (or pressing the right key) will select the previous image.
The following parts of the carousel should be animated (see movies for a demonstration).
The movement of the carousel to place the chosen image in the centre.
The change in opacity of the images.
The appearance of the side navigation panels.
When an image is chosen the larger version should be placed in the main display area. However, the image should not be displayed until it has fully downloaded (a loader GIF should be displayed until the image downloads).
Depending on which side of the image is longer, that side should fill the display area.
Depending on which side of the image is longer, that side should fill the display area.
There is a minimal responsive design requirement to this assignment.
The carousel/main display area should be a percentage width of the window.
If the user changes the size of the window the chosen image must stay in the centre of the carousel. This may require recalculating the centre (see included movie)
Attachment:- AIWD-Assignment.rar