(Simple) JavaScript Framework Homework Overview: In this homework you will implement a picture gallery using object oriented JavaScript code in an external JavaScript file. This is a lab about learning JavaScript, so you MAY NOT use jquery. As always, you cannot submit code that is overly similar to any examples presented in class or on my web site or to any classmate. Functional Requirements: The HTML coder shall invoke a makepicgallery method passing in two parameters: the id of a DOM object (probably div) where they want the framework to build the picture gallery. an array of objects (each with picture file name and caption). Whenever the user clicks on a small image, that image shall show large and with its caption. Here is an example. Clicking on the first small image shall result in the visual on the left. Clicking on the middle small image, shall result in the visual on the right. The image list of the picture gallery shall provide all the images presented to the makepicgallery method and all images shall be the same width and collectively consume 100% of the width of their container. Your picture gallery shall be able to accept a list of 2..8 image/caption objects Demonstrating your framework. Find 3-6 images and then edit them (I use just MSPaint) so that they are all the same size - about 500 x 700 pixels. If the images are too small, they will not look good when in the large picture position. 1
The HTML coder can define his/her own style sheet elements based on your framework documentation (where you indicate the of classes and/or HTML elements that hold the various subparts of the Gallery - like big picture, big picture caption, small picture list, etc). For example, the HTML coder might decide to style the elements as follows: <style> html, body margin:0; padding:0; background-color: #AACCCC; #gallery /* overall styling for the picture gallery */ box-sizing: border-box; width: 50%; margin: auto; background-color: #999999; border-radius: 5px; #gallery.bigimage /* styling of the large picture within the picture gallery */ border-radius: 5px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; width: 100%; #gallery p /* styling of the large picture s caption */ margin: 0px; margin-bottom: 1ex; font-weight: bold; text-align: center; #gallery.piclist /* styling of the small picture list within the picture gallery */ box-sizing: border-box; padding-top:4px; padding-bottom:2px; width: 100%; margin: auto; margin-bottom: 5px; box-shadow: 6px 6px 6px #888888; background-color: #222222; </style> Note: you are not required to use advanced CSS techniques like border-radius and box-shadow. I have just added them to make it look nice. 2
Design Specifications: 1. Your external JavaScript file shall have a single method named makepicgallery with supporting methods/functions inside. Remember to reference your external JS file from your index page. 2. makepicgallery shall take two input parameters: an id that indicates where the picture gallery shall be built. An array of objects, each having an image file name and a caption. Here is an example of the JS code (in the HTML page) that invokes makepicgallery: var mygallery = makepicgallery ("gallery", [ imgfilename: 'pics/duck.jpg', caption: 'DUCK' imgfilename: 'pics/jetski.jpg', caption: 'jet ski' imgfilename: 'pics/kayak.jpg', caption: 'kayak' imgfilename: 'pics/pontoon.png', caption: 'pontoon' imgfilename: 'pics/rowboat.jpg', caption: 'row boat' imgfilename: 'pics/speedboat.jpg', caption: 'speed boat' imgfilename: 'pics/default.jpg', caption: 'default' ]); 3. The first line of your JavaScript code shall have the "use strict" directive as its first line of code (see below). By having this directive, you won't be able inadvertently declare a new variable by misspelling a variable name. "use strict"; 3
Originality and Other Requirements: 1. Originality. You must come up with something original. For this assignment (because it is so specific as to what it is looking for), there may be similarity between student submissions. However, if you have not done your own work, your test grade will reflect that. So, please be sure to do your own work and learn from this exercise. 2. Look and Feel. Your page may have the same look and feel as your home page or it may have a different layout, but to get full credit, you have to create a page that is professional and visually appealing. You have had two design labs so you should be in a position to come up with something that looks good. 3. Organization. Create a folder named 04_js_advanced (under web pages ) and name the page index.html. You are not required to have a nav bar or footer for this page so you do not need to use the Angular include directives. 4. Blog. For each lab, you will add a blog to your labs page and this lab is no exception. In your blog, link to the work you did ("03_js_intro/index.html") and describe your experience doing this lab. What aspects were easy? Which were hard? What were the most important things you learned in this lab? 5. Good Programming Style. At the top of the 3344 labs page, there is an entry entitled "Requirements For All Labs". Make sure you adhere to the "good programming and design practices" listed in there. 6. Read the entry at the top of the 3344 labs page entitled Requirements for all Labs and Project. This section has a list of requirements that I do not repeat in each lab assignment. What You May Need to Know Create an HTML element and attach it to another element that already exists on the page var galleryele = document.getelementbyid(galleryid); // get reference to element on the page var bigpic = document.createelement("img"); // create a new DOM element bigpic.src = ; // set properties galleryele.appendchild(bigpic); // attach the new DOM element to an element on the page Length of array: imgobjlist.length Setting click functions use this so that it references the picture that was clicked, not the last one used pic.onclick = function () bigpic.src = this.src; caption.innerhtml = this.caption; ; 4
Grading and Submission: 1. After completing all the requirements, test locally (and syntax check). Don t forget to add the blog entry to your labs page and provide a link to the page you created this week. Then publish, then test what you published. 2. Then submit into blackboard a zip file of your whole web site (including all the work you have done in all the labs so far). Make sure to include all the necessary files and folders in your zip file. Sample Deductions: -9 if no zip file submitted into Canvas (by the due date). -9 if page not published by the due date. Up to -2 for no blog on labs page. If we cannot find your work (you didn t link to it and you didn t name it exactly as requested), you ll get -9 as if it were not published. Up to -3 for poor layout/professionalism. Up to -2 if your page loads too slowly for example if you have selected images that are way larger than the suggested 500 x 700 pixels. Up to -2 for HTML/CSS syntax errors which show in red font from Firefox View Source. Up to -2 for poor coding style. Your code should be neat, properly indented, well named, and with no unused code. 5