Description
This assignment aims to expose you to client-side JavaScript, Cascading Style Sheets (CSS), the Document Object Model (DOM), and dynamic server-side synthesis of HTML. You will refactor and build upon your first homework assignment to accomplish this. Specifically, when you complete this your website will consist of the following 4 pages: 1. A Schedule Page (You should add your own events(s), and their info/picture) 2. A Form Input Page 3. An About Me Page 4. A Form Submission Page named MyForm(which is dynamically constructed by your server), and 5. an updated version of the server (provided with the assignment, and found in the file server.py) This assignment description is 11 pages long, and you should complete it on your own. This assignment requires the following tasks i.) The navigation bar should be styled and updated to enable navigation between all three pages of your updated website. ii.) Update your Schedule page (MySchedule.html) as follows: a. Each event should contain a thumbnail image related to the event in some way. When the mouse hovers over the event’s row, the thumbnail should appear, and this image is shown enlarged next to the table. Use your best judgment in selecting the pictures and do not use copyrighted material. Note: you can use pictures you create or take. iii.) Create a new page named MyForm.html consisting of an event input form that will be used to add events to your table in later assignments. a. The form should use HTML5 input elements and/or JavaScript to perform basic validation on the form’s input fields for an entry in the table. b. Upon successfully filling out the form, submitted (i.e., submitted without displaying an error) to the server. You will add the functionality to the server to create and return a new HTML page named EventLog.html to the client (e.g. a Browser). The browser will then display the page EventLog.html in a table with the data entered in the form. iv.) Update your About Me page (AboutMe.html) as follows a. Add an Instagram post. b. Add a clock widget written solely in JavaScript. c. Organize the widgets with a table.
v.) Style all your web pages with CSS. Specifically, create and use external style file(s) to style the pages on your Website. Your web pages should not contain any inline or embedded styling (except for those styles that come with the embedded widgets). Your styling should be accomplished using CSS commands (i.e., CSS code) that are specified in your css file(s). vi.) Update the server we provide (in the file: server.py) to use the directory structure specified in the grading criteria at the end of this write-up; change the server to return the locally stored images, external JavaScript file(s); and external css files specific to your solution, and create the HTML table used by the HTML page dynamically constructed by the server in response to a post request by the form page you are creating for this assignment. 2. Required Functionality Updates to the Schedule Page Once the Schedule page is loaded into the browser, it should display the event information and the image of the event as shown in the screenshots below. Figure 1. Event information displayed when the page is initially displayed i) The rows of your Schedule table should be displayed in alternating colors like those displayed in Figure 1. Note, you can choose the colors, they don’t have to be the same as in Figure 1, but they should enhance the readability of your events. ii) The placeholder image shown (provided with the assignment) should be displayed as pictured next to your Schedule table. The table and picture should be able to fit on a reasonably sized screen.
iii) When you hover over a row in the Schedule table with a pointing device (e.g., a mouse or your finger on a touch screen), a small (thumbnail) image of the location of the corresponding event should be displayed and the larger version of the image should be displayed next to the table. The larger image should persist even on mouse-out. Specifically, as depicted in Figure 2, a small thumbnail image is displayed in each event’s Name cell, and a larger version of the image is displayed next to the table If the pointing device is moved to another row on the Schedule table, a thumbnail and large image of that event should be displayed. If the mouse moves off the table, the last large image displayed should remain, but the thumbnail image should disappear. When hovering from one row to another, the large image should maintain the same size. Figure 2. Events page as displayed when pointing device hovers over a row of event information on the event table Add a Form Page: Using HTML, CSS and JavaScript as necessary, create and add a Web page with a form for adding new events to your Schedule table (we will not implement its functionality in this assignment). The form should use HTML5 input elements wherever possible to obtain the following mandatory input: Event Name; Day of Week; Start Time; Stop Time; Phone Number; Location; Extra Info; a uniform resource locator (URL) specifying information about the event, and the Submit button (Note, the form should be submitted using “POST” method). Optionally, you can also add a Clear button (not shown).
Figure 4．An example of what your form might look like (the final styling is up to you). On the form page, you must ensure all data entered on the form is syntactically legal input (using HTML-5 elements and/or JavaScript and Regular Expressions). Specifically, i) All the fields are required to be filled. Upon submission, an error message should be displayed if any field is left blank. Figure 5: Example error message displayed if there is an unfilled field. ii) The Event Name should accept only alphanumeric characters. Acceptable Alphanumeric characters are specified in the following ranges: number: 0-9, lower case characters: a-z, upper-case characters: A-Z and spaces. Upon (or before) submitting the form, an error message should be displayed if nonalphanumeric characters are included in the event name fields.
Figure 6: Example error message displayed if there is an error in the event name input to the form. iii) “Day of Week” input is the HTML dropdown list as shown in Figure 7. Figure 7: “Day of Week” Dropdown List iv) Finally, the URL should be syntactically validated to ensure it is formed as a syntactically legal URL (it may not really exist, but the form should be correct). An error should be displayed if a syntactically incorrect URL is entered. Once the form is filled out with legal input (as pictured in Figure 8 below) and submitted (by leftclicking when your mouse is on the submit button), an HTML page with a table of your input data should be displayed, indicating that the form was successfully submitted (as pictured in Figure 9 on the next page).
Figure 8: A form that has been successfully filled out by the user – there are no errors. When an error-free form is submitted, the action specified by the form’s action attribute is executed. Specifically, the form should be submitted to the /EventLog.html endpoint in your server. To achieve this, the action attribute on your form should specify the URL of the server script (above) – see https://www.w3schools.com/tags/att_form_action.asp for a discussion on how to accomplish this. When the form is submitted, the server should construct an HTML page with a 1 row table and return it to the Client (for example, the browser you used to submit the form). Figure 9 shows how an HTML page that has been successfully submitted using the form is successfully be displayed by the browser that submitted the form. A scaffold for server-side code you must write to create the HTML page with the table is provided to you in the updated server (see the file server.py provided in the HW2 assignment on Canvas. You must modify the submission_to_table function to return a table that is embedded HTML containing the submitted data.
Figure 9: Example of an HTML (Web) page that is displayed upon successful submission of the form. Updates to the About Me Page 1. Embed an Instagram widget as pictured in Figure 11 on the next page onto the About Me page using the following link as a reference. https://www.instagram.com/developer/embedding/ Note – If only the Instagram icon is showing, you should add https to the source link you obtain from Instagram (see: https://stackoverflow.com/questions/37322148/why-is-instagram-embed-code-onlyshowing-an-instagram-icon-not-the-image for an explanation). Figure 10: An Instagram widget should be added to your About Me page (yours might be a little bit different from the screenshot due to styling and system language)
2. Implement a clock widget on the About Me page. This will update every second to show the current time in a 12-hour format. Hours can be 1 or 2 digits, while minutes and seconds should always appear as two digits, with a leading 0 if needed. Each part of the clock should be its own cell in a table as shown in Figure 11. Hints: a. You can access the current time by creating a new Date object every time the clock is updated (i.e., call new Date();) b. When getting the hour from the date object, it will be on a 0-23 hour (i.e., military time) scale. i. How do you determine if an hour is AM or PM? ii. How do you show midnight and noon correctly? Figure 11: Example of the date calculator, with a future date as the target, the widget shall print the calculated result (this example is made on 01/27/2023). 3. You should style your About Me page, so the widgets are aligned and organized like the alignment and organization shown in Figure 12 on the next page. Note, that alignment and organization do not have to be exactly the same as in Figure 12, but they should be similar (styling and spacing can be different)
Figure 12: An example of the About Me page. Grading Criteria a. The navigation bar should be styled and updated to enable navigation between all three pages of your updated website. Note, the navigation bar styling can differ from the styling illustrated in this write-up (5 points) b. Update your Schedule page as follows: ○ A thumbnail image relating to the event should be displayed when your mouse hovers over the corresponding row in the table. (5 points) ○ A larger pop-up image of the thumbnail image should be displayed to the center right of the events table; image should be displayed at a reasonable size. (10 points) ○ When the mouse moves off the table, the last large image displayed should remain, but the thumbnail image should disappear. When images change, the size of the large image stays consistent. (5 points) c. Create a new page named MyForm.html consisting of an event input form that will be used to add events in later assignments. (5 points) ○ The form should use HTML5 input elements and/or JavaScript to perform basic validation on the form’s input files from the events as specified in the required functionality discussion above (10 points) ○ Upon successfully entering data into the form, it can be submitted without displaying an error to the URL provided. (5 points) ○ The page returned by the server (should be an HTML page with an HTML table (you are required to write the code to create the HTML for the table in the pg.
function: submission_to_table) that displays the information entered into the form as shown in Figure 9. (10 points) ○ BONUS – Update the server to return an HTML page that lists all submissions made since it was last started. Each successful form submission should be included in its own row in a Table – and all entries the table returned by the server should be successfully displayed by the client (e.g., A browser). You can include a menu item in the navigation bar to ask the sever to return the HTML page with the history of form submissions. (10 points BONUS) d. Update your About Me page according to the requirements discussed previously as follows: ○ Add an Instagram widget. (5 points) ○ Add the clock widget to the About Me page (5 points) ○ The widgets are well organized by using a table as shown in Figure 15. (5 points) e. Style all your web pages with CSS. Specifically, create and use external style file(s) to style the pages on your Website. Your web pages should not contain any inline or embedded styling (except for those styles that come with the embedded widgets). Your styling should be accomplished using CSS commands (i.e., CSS code) that are specified in your css file(s). (10 points) f. Your assignment is amended to use the following directory/folder structure (folder/directory) server.py (an updated version of the file we gave you with the assignment) static (folder/directory) html (folder / directory) All your html files should be stored here – MySchedule.html, AboutMe.html, and MyForm.html img (folder / directory) The img folder should contain all the local images you use in your HTML Pages (that is, in your MySchedule.html, AboutMe, and HTML Form Submission Page) js The js folder/directory should contain all the external javascript you use in your HTML Pages css The css folder/directory should contain all the external css files you use in your HTML Pages (5 points) g. Server is updated to return local image files, external javascript files, and external css files for your solution (we have given you a file with Dr. C’s references, you need to change those references to refer to the files you use!!!) (10 points) h. With the exception of the embedded widgets on the updated About Me page, your HTML and CSS should files pass the w3 organizations validators (http://validator.w3.org and https://jigsaw.w3.org/css-validator ) without errors. Warnings are accepted. (5 points)
SUBMISSION INSTRUCTIONS: Your submission should be packaged in a tar file or zip file. When opened, it must create a directory named: ‘’ containing all of your files ( in the HTML, CSS, Pictures, and any additional external JavaScript files (If used). You will be penalized 10 points if you do not do this correctly. Submit your homework via the class Canvas item named Homework 2 Submission Link in the week 3 module on the class Canvas site. Additional: We have provided some images you can use with the assignment in the images folder with the assignment on Canvas. You are responsible for legally obtaining any other images you use.
