Description
SYNOPSIS You are going to build a web page to introduce yourself, with a basic comment system. This page should be well-decorated and responsive. There are also some special features. BASIC CONTENTS (10%) (Done in Lab 1) The contents should be about yourself. You are not required to put in completely factual contents, but at least your name and department should be correct. These HTML elements must be included in your HTML5 file: ¨ Heading ¨ Paragraph ¨ List ¨ Table ¨ Image / Picture ¨ Flex / Grid These HTML5 semantic elements must be used appropriately: ¨
¨
¨
¨
STYLING (10%) (Tried in Lab 1) Using CSS and Bootstrap, at least these must be applied to your page: ¨ There should be at least one obvious example using Bootstrap column layout ¨ Header background image ¨ Horizontal link items in navbar ¨ Sections with background color ¨ Web font and icons CSCI2720/ESTR2106 Building Web Applications: Assignment 1 2 DYNAMIC CONTENTS (25%) Implement these items using JavaScript in one external JS file. 0. “Special” link in navbar Include an extra “Special” link to hide or show an extra bar of buttons for 3 Tasks, with their features described below. The extra bar should be hidden by default. There is no other style requirements for this bar. Here is an example: 1. Task 1: Align When this button is clicked, all the section headings should change the alignment once. Further clicks will change the alignment in this sequence: Left >> Center >> Right >> Left >> … It is illustrated like this, Note: the classes in Bootstrap is .text-start, .text-center, and .text-end 2. Task 2: New Hobby When this button is clicked, a dialog box (using prompt()) asks the user to enter a new hobby. If the user entered something, a new item should be added to the group of “hobbies” in your page. If nothing is entered, no new item should be created. Hobby here is only an example. You can use this button to create items for any list/table/flex/… groups in your page. Adjust the text appropriately. 3. Task 3: Scroll When this button is clicked, a Bootstrap progress bar (https://getbootstrap.com/docs/5.1/components/progress) is shown or hidden below the button bar. If it is shown, when the user scrolls the page, the progress bar adjusts according to the scroll position, i.e. 0% at the top and 100% at the bottom. The progress bar should be applied a .sticky-top class, so that it remains visible on the screen when the page is scrolled. CSCI2720/ESTR2106 Building Web Applications: Assignment 1 3 You may find these helpful: window.scrollY, document.body.clientHeight, window.innerHeight Here is an example: You may choose to use Bootstrap classes or CSS styles for all styling tasks in this section. RESPONSIVE WEB FEATURES (10%) Incorporate at least 3 design ideas/elements which would change according to screen size. Visually different layouts must be applied for a mobile phone screen (width < ~500–600px) and a large screen (width >= ~500–600px). Describe what you have done in a separate section in the page with ~50 words. ACCEPTING COMMENTS (10%) (Done in Lab 3) You could use materials from this file: http://www.cse.cuhk.edu.hk/~chuckjee/2720lab3/index.html Add the web form into this page to collect the following information from the user: ¨ Email address ¨ Comment ¨ Color: Red/Green/Yellow/Blue You are recommended to use input boxes for the shorter text, a textarea for the comment paragraph, and a group of radio buttons for the color. You may also decide your own implementation achieving similar user experience. There should be an Add comment button which adds the comment to the bottom of all comments. After the new comment appears, the form should become blank again. It is okay for your page to come with default comments included, and a comment data file. CSCI2720/ESTR2106 Building Web Applications: Assignment 1 4 FORM VALIDATION (15%) When the user choose Add comment, there could be issues, in particular: ¨ Incorrect email format (not x@y) ¨ Empty comment/ email Both should avoid the form submission. At the beginning when processing the form, check .validity.valid of the #new-email and #new-comment boxes . If it is not valid, apply .classList.add(“is-invalid”) to the box and return (end the function prematurely). Else, use .classList.remove(“is-invalid”) to clear the error highlight. LOADING AND SAVING COMMENTS (10%) (Done in Lab 3) There should be a Save file button to save the comments to a file. This can be done using JS Fetch, with Web Server for Chrome. Your comment file can be in text or json. After saving, when the page is reloaded, all the comments except the original one should disappear. But you should be able to see the contents in the generated file in the web server directory, which will further be loaded using Fetch with a Load file button. Always use a relative path since your files will be tested on a different platform. AUTO SAVE AND LOAD (10%) To relieve users from using a save button, you will further simplify the program flow by: l Loading the comments from the save file when page is loaded, and l Saving the comments whenever a new comment is added After this, you can remove the Load and Save buttons and still get the 10% from that part. The requirements here override that of the previous part on Loading and Saving Comments. CHALLENGE REQUIREMENTS (20%) This part is compulsory for ESTR2106 students. This assignment has a full score at 120%. For CSCI2720 students, if you finish this part correctly, a 0.5% bonus will be given to the “Assignment” course assessment, capped at 30% maximum in the course total. A separate paragraph in the page should describe briefly the work here, with ~100 words. CSCI2720/ESTR2106 Building Web Applications: Assignment 1 5 1. Implement dark mode vs. light mode, determined by the prefers-color-scheme setting at the browser. If you are customizing Bootstrap stylesheets with Sass, submit the compiled .css file as well, and link appropriately in your HTML file. The Bootstrap Sass files should also be submitted. The styles of two modes must be visibly different. 2. The JavaScript file in the part “Dynamic Contents” above should be written with TypeScript instead. Submit both the .ts and compiled .js files. ¨ Additional files for submission: 1 .css file, 1 Bootstrap folder, 1 .ts file, 1 .js file FEATURES AND FRAMEWORKS You are welcome to implement extra styles and features at your own ability. For Bootstrap, please use the current CDN versions: ¨ Bootstrap (5.1 or later) https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css You may also use Google Font, Bootstrap Icons, or Font Awesome. Do NOT use any extra plugins, libraries (e.g. jQuery) or frameworks other than these. SUBMISSION We will only visit your web page submission using Google Chrome (almost-latest versions) with extension Web Server for Chrome. Please utilize the Developer Tools for debugging. Plagiarism is heavily penalized. NEVER share your code other than those given in labs. Please read this article carefully: http://www.cuhk.edu.hk/policy/academichonesty Include your full name and student ID in all code files using comments. Check that the file name and formats are correct. Zip all your files and submit it on the course site on Blackboard. Only these files should be included: ¨ 1 .html file ¨ Optional .css file ¨ 1 .js file ¨ Image files / comment data file REFERENCE POINTS Bootstrap: https://getbootstrap.com/docs/5.1 Google Font: https://fonts.google.com
