web page development

web page development


1 PROG2002 Assignment 1 Weight: 30% of your final mark Due: Week 3 (16 May 2022, Mondays, 11.59pm AEST) Please note that this is a group assignment (2 students per group). Note: Each student must submit their work to the Grade system individually, and the answer should not be exactly the same with your group partner. The idea of group is to provide more opportunity to discuss the assignment with your group partner. Please introduce yourself to the Discussion Board (in the Assessment thread) to find your partner. Specifications Your task is to develop a dynamic website with a minimum of three pages for a real estate company as follows: • Page one is a home page • Page two contains a form to allow a user to express interest in a property • Page three contains a contact form The website should also contain an appropriate menu on all pages so users can navigate around the website. Getting Help This assignment is to be completed individually. It is the opportunity to gain an understanding of the concepts of building a dynamic website. It is important that you master these concepts yourself. You are permitted to work from the examples in the study guide or textbook but you must acknowledge assistance from other textbooks or classmates. In particular, you must not use online material or help from others, as this would prevent you from mastering these concepts. Who can you get help from? Use this diagram to determine from whom you may seek help with your program. Lecturer Tutors Online Forums Relatives Students outside unit Hired coders Classmates Private Tutors Other 2 Encouraged Attribution Required Ask tutor Not acceptable Please note that if your marker has any suspicion that you had help with your code or that your work is not your own you will be asked to come to a meeting with your marker to explain your code. Any student who is unable to explain their code will be submitted for academic misconduct. Part 1 – Home page The homepage should be a simple page that is suitable for a real estate company. Whenever a user goes to the home page, the user should be asked whether they adhere to the companies COVID policies via a JavaScript confirmation. If the user clicks the OK button, the home page should be displayed. If the user clicks the cancel button, a JavaScript alert should display a message telling the user they cannot visit any of the properties in person unless they adhere to the company’s COVID policies. Part 2 – Expression of interest form The second page should contain a form to capture potential buyers' expression of interest following a property inspection. The form should contain the following fields: • Name • Phone number • Address of the property the user is interested in • The price that the user is offering on the property When the form is submitted, all fields in the form should be validated on the client side using JavaScript according to the following rules: • All fields must be filled out • The phone number field should only contain numbers • The price that the user is offering on the property must not be negative 3 If the form validation is not successful, an alert should inform the user what field has an error and what the error is. If the form validation is successful an alert should inform the user that the form has been submitted. When this happens, you should reset all fields in the form. Additionally, you must use at least three of the following events in your form: Onblur, Onchange, Onsubmit, Onfocus and Onreset. Part 3 – Contact form The contact form page must contain a form that contains the following fields: • Name • Email • The message that the user wants to send When the form is submitted, all fields must be checked to make sure they have been filled out. If the form validation is not successful, a bold red error message should be displayed to the user on the page by manipulating the DOM. If the form validation is successful, a bold green success message should be displayed to the user on the page by manipulating the DOM. The message should say: “Dear Name, Thank you for your inquiry. One of our team members will be in touch with you shortly” In the above message Name should be replaced by the user’s name from the form. Part 4 – Contact form continued Most forms on websites will usually have some sort of test to confirm that the user is a human and not a bot. Update the contact form that you created in Part 3. Add a field to the form that asks the user for the answer to a simple maths problem. The form should only be submitted if the user provides the successful answer to the maths problem. For example you may ask the user what 3 + 4 equals. The form will only be successfully submitted if the user provides 7 as the answer. 4 If the user provides the incorrect answer to the maths problem, you should display a bold red error message to the user on the page by manipulating the DOM. The message should be diplayed in the same location on the page as the form validation error message from Part 3. If the user provides the correct answer to the maths problem, then the form should be submitted and the user should receive the bold green success message from part 3. Once part 4 is complete the user should receive an error message if: • The form validation fails i.e. not all fields have been filled out OR • The user provides an incorrect answer to the maths problem Once part 4 is complete the user should receive the success message if: • The form validation passes i.e. all fields have been filled out AND • The user provides the correct answer to the maths problem IMPORTANT: Please note that the same maths problem can not be displayed every time the page is loaded. You must dynamically build the maths problem each time the form is displayed so that it is always unique. You will be provided with some hints on how to do this in the workshop.