LAB #6 Event, DOM, and Prototype Library Solution

Read the lab instructions in this document and take the pre-lab quiz for Lab #6 -- the TAs will not mark your lab if you do not show them you have not scored 100% on the pre-lab quiz.



Please have a look at the examples posted for JavaScript DOM (here) and JavaScript Events (here).




GOALS & OUTCOMES FOR THIS LAB



To learn and apply JavaScript programming
To learn more about DOM and adding and deleting elements
To learn how to use events with the Prototype library to modify a webpage



LAB 5 – TASK



[Task 1] – Changing Faces – (JS mouse events + element modification)




[Task 2] – Simple forms with JS - (Keyboard events and checking input field values [timer optional])




[Task 3] – Completing Pull-Down Lists (Inserting values into pull-down lists -- no events, but you can use prototype library)




[Task 4] – Adding/Deleting Boxes (Mouse events and generating elements)







Further details to all tasks are provided below. Also see accompanying video.







4. SUBMISSIONS




1) [Manual verification by a TA]




As with the previous labs, when you have completed all tasks, ask the TA to come and verify your code and output.




2) Moodle submission

You will see an assignment submission link for Lab6 on Moodle.




Create a folder named “Lab6” and copy all of your files into it. Compress this file and upload the compressed file to Moodle. To upload, please follow the instructions in the following video that we used for Lab 1:



https://www.youtube.com/watch?v=stEOh6ntV5o

TASK 1. Task 1 involves six files: task1.html, task2.js, face1.png, face2.png, face3.png, and face4.png.




Modify your task1.html and task2.js such that you randomly show one of the face images when: (1) the browser window loads, and (2) anytime a mouse moves over the image. (see video)




IMPORTANT: Each time you select a new random image it cannot be the current image. For example, if the current image is face2.png, if your new random image is also face2.png you have to get a new random image. HINT – consider using a while loop, be careful not to get into an infinite loop!




This task should be unobtrusive. You are welcome to create global variables.







When you move the mouse over the image, the image should randomly




change to one of the faces below.

Task 2. For this task you will need to modify task2.js. Your JS code should provide the following behaviour. Below shows the default values of the input fields. Anytime a key is pressed for the first time, you should delete the default content (see video).




Also, when you click submit, instead of having the button submit the form, you should use JavaScript to submit the form (see lecture on events). Before you submit, you should make sure all fields have been entered. For example, if any field’s value is equal to an empty string, show an error message in the paragraph below the buttons.




OPTIONAL: Have the error message delete itself after 2 seconds.










When a key is pressed,




delete the default




content.




This is not an HTML submit button. It is just a button <button type=”button”. This means it will not submit the form. Instead your JavaScript should submit the form.







If submit is clicked but




any of the fields are




empty, show an error.

Task 3: Modify task3.js to add in the options to the three pulldown-lists (Day, Month, Year). The task3.html defines the <select for each, but has no options in the HTML file. Your task is to add these options using JavaScript. This is related to the DOM lecture (not the JS Event lecture). Hint: You’ll need to create an HTML element and insert it using JS. This was similar to the last task from Lab 5.




Day pulldown-list should add the days of the week (Sunday, Monday, .., Saturday).




Month pulldown-list should add the 12 months (Jan, Feb, Mar, .. Dec).




Year pulldown-list should had from 1970 until 2018.




You do not need to modify your task3.html file, only the task3.js.




Task 4. You should only modify task4.js. The task4.html and task4.js code given to you already creates a single box that is placed inside a div with id container (at a fixed location).




Modify the code provided to instead create 100 boxes at random locations in the container div (see below).




When a box is clicked, you should remove it from the div. When the div has no more children, pop up an alert that says "last child!".




Also, if the user clicks on the button, your JS cod should generate 100 more boxes (even if you have existing boxes on the screen).




See accompanying video to get an idea of the behaviour of this task.










This is the behavior of




what you are given.




The code generates a




single box.










Your code should




generate 100 boxes




when the page is




loaded. Their locations




should be random

between 0-400 for the




top position and 0-400




for the left position.







When the last box is




being deleted, create




an alert that says “Last




one!”.




If the user clicks the




“Generate More”




button, add 100 more




random boxes.












































































When the mouse moves over a box, have it remove itself.




Hint: consider the “this” variable.