1 T h e Unive r sity of the W est I n dies C a ve H ill Cam pu s Fa c u lty o f S c ience and Te c hn o l o gy De p art m e n t of C om p u t e r S c ie nc e, Math e m ati c s a n d P h ysics SWE N 1 0 0 5 : M o b ile Web P r og r amm i n g Assig n ment O n e Photo Gallery App using HTML, CSS and JavaScript IN S TRUCTIO N S For th is assignment, you are to create a simple pho to gallery mobile web application for your phone. The app will consist of two screens. Screen 1 This screen is a thumbnail a rray It shows 24 images a t a time in a 4x 6 array (four thumbnails horizontally ) The thumbnails are all the same dimensions and should be sized to fit the 24 images easily on which ever mobile device i t is being displayed on [ 20 marks] Basic Behaviour : When the user swipes right or left – or taps the right or left side of the screen – he or she should see the next 24 thumbnails (swipe/tap right) , or the previous 24 thumb nails ( swipe /tap left) . Tapping once on an image will bring it up on Screen 2, whose behaviour is described in the Screen 2 section [ 1 8 marks] Advanced Behaviour: Pinching and zooming the screen will enlarge or shrink the thumbnails respectively. This will change the array to two thumbnails wide at its largest and six thumbnails wide at the smallest scale respectively. The number of images di splayed vertically will adjust based on the screen space available. [1 2 marks] Screen 2 This screen displays the image that was tapped in S cree n 1 at a scale that allows the user to see the whole image [20 marks] 2 Basic Behaviour: Double tapping the image will in crease the scale by two , effectively zooming in on the image . Double tapping on an e nlarged image returns it to th e def ault scale. Swiping up will slightly reduce the image size so that three lines of simple image information can be displayed below image. Th e information that must be display ed is the image name , the imag e size in MB , and the image resolution in pixels. [1 8 marks] Advanced Behaviour: Pin ching and zooming the image will slowl y decrease / increase the image scale. Pinc hing an image that is at it default scale will return the user to S creen 1. The use r can zoom the image to the highest scale permitted by the device. [1 2 marks ] G r a ph i cal Us e r In te r f a ce Use HTML, CSS3 and J a vaScript t o c r e a t e the applica tion The interface design s h o u l d b e : • C le a r • C o n c ise • Familiar • Resp on sive • C o n sis t e n t • A tt ra c t ive • E ff i c i e n t • F o rgivi n g T a k e f u ll a d va n t age o f w h at H T M L , C SS and JavaScript o f f e r w h en c r e a t i n g yo u r i n t e r f ace F e e l f r e e t o u se W3 Scho o ls , MDN or other trusted web sites f or a ssi s t a n c e ; h owever, r e u s i n g a t empla t e /code is p lag i a r ism (review T h e Universi t y’s p olicy on p l a giarism HER E ) Su b m i ss i o n 1. Y ou r d e a d li n e f or s ub mi s sion is Friday March 3, 2023 , on the eLearning system 2. Uplo a d a zip f o l d er call ed Assignment_One c o nt a i n i n g the files for the app including the images used by the app. Ensure that the zipped file is under the file size limit allowed by the e Learning system.