代做CSCI1170 W24 Wehbe Assignment 3: HTML, CSS, & JS

日期：2024-04-05 11:21

Assignment 3: HTML, CSS, & JS

CSCI1170 W24 Wehbe

Objective

Create an improved version of your professional website using HTML, CSS, JS (EMCS v6 only, all code must be compatible with browsers: Apple iOS, Mozilla Firefox, and Google Chrome) and

everything else you learnt in this course. Optionally, you may reuse code from Assignment 1 and 2, if you indicate your have done so in your README.

Part 1: Design Desktop, Mobile, & Tablets [10 marks]

Present a design for your website in desktop, mobile, and tablets using all you have learnt about design in the course. Your website should dynamically serve in 3 forms: mobile, web, and tablet. The website should size dynamically when the window size is changed.

Part 2: JS [40 marks]

Implement the following JS features. Each implementation should be separate:

•    [1 mark]  Notifications: Use at least one notification

•    [4 marks] Event Handler: Use an event handler to respond to user any interaction (Should be different than implemented notification).

•    [5 marks] Conditional: Create one website feature that uses a conditional (nested if, ifelse, and else OR switch case)

•    [10 marks] Colour Changer: create a set of 2 buttons that when clicked changes CSS

elements of the webpage to give you three different colour schemes. All colour schemes should follow a design colour pallet, be legible, and accessible in all colour forms.

The 10 marks allotted here are for the code. If your website becomes inaccessible because of these colour changes, you lose the marks in Part 4.

•    [20 marks] Form.: Create a form that has at least 5 required questions and a submit

button. Use at least three types of input, and a textarea. All input should be checked with conditionals and at least one pattern is used to validate the input.

Part 3: Accessibility [10 marks]

Review the international accessibility guidelines and teachings from class to ensure your website it accessible. Refer to the syllabus for more details on marking. Use the developer tools in your browser to complete an accessibility check and include a screenshot of the report.

Must be accessible for all colour changer choices, see note above.

Part 4: Reflection [5 marks]

Reflect on the website you made. How does it compare to your expectations in A1? Will you be able to use it for the purpose you outlined now that class is finished? 100 – 1 000 words. This is a completion mark, please feel free to write honestly and give feedback about the assignment.

Part 5: READ ME [9 marks]

In a README file which explains the structure of your code including all relative paths in a text file: README.txt Here is where you will document your code. For each function, include a purpose, and as applicable: input and output, example, dependent code structures.

•    Include any references to materials used (e.g., photos or stock images) using full ACM reference format

•    Include an asset list that details the assets included in your folder.

•    Include a file structure

•    Indicate if you have reused code from A1 or A2

•    Follow syllabus instructions for use of AI/LLMs/ChatGTP/etc.

Bonus:  Free Hosting [15 marks]

Put your portfolio online! Use Free hosting platform. of your choice to host your webpage. Suggested: github pages <link:https://pages.github.com/>

Submission

Parameters

For full marks, your website must:

•    Be submitted properly in accordance to submission instructions (i.e. zipfolder)

•    Be complete as specified by the objectives

•   You may only use relative links

•   You must use JS EMCS v6

•    Results must be compatible with browsers: Apple iOS, Google Chrome, Mozilla Firefox

•   You may use anything you have learnt in CSCI1170

Submission Instructions

Please follow these instructions to get full marks. The submission will be marked in accordance to what the file opens, so if the file fails to render a webpage, your project is incomplete.

-     Submit by the deadline specified by the course plan

-     All policy (lates, SDAs, etc.) outlined in syllabus

-     Submit on Brightspace:

o Use the Brightspace submission box

o Zip your project folder (only .zip files will be accepted)

. Submit a zip of your folder that includes all your work.  Doing this preserves the structure of the relative paths. The zip should include all the parts of your assignment including the requested PDFs alongside the html, assets (videos, pictures, etc.)

o All assets (pictures, video, code, etc.) must be included

-     Your project must work and contain no viruses or malicious code

-     Following Naming of A#_StudentNetID.zip (e.g., A3_w2n00.zip) (do not include @dal.ca)

Category	Value	Details
Part 1: Design Mobile, Web, Tablet	5	Each interface type is designed with the user in mind. There are clear differences between each  layout. The layouts do not remove content or navigation options, but instead enhances them for the device settings.
Part 2: JS Code	40	All requested features are included (notification, event listener, colour changer, and form). All code is JS EMCS v6. For full marks, resulting website must be compatible with browsers: Apple iOS, Google Chrome, Mozilla Firefox Requested code is executed effectively without error. The code is neat with proper indentation. Comments are used appropriately. Code style is excellent with neat with proper indentation and all tags are closed properly. All code is functional. All assets are included. No broken links are rendered. Website is accessible. Comments are used appropriately.
Part 3: Accessibility	10	All content is accessible and follows international guidelines. E.g., All images have alt tag. No broken or empty links. Colours have good contrast and easy read. All CRAP principles have been followed. Spacing and organization is appropriate.
Part 4: Reflection	5	Wrote 100- 1000 words on topic.
Part 5: Readme	10	Named README.txt. (case and space sensitive). Purpose is explained for each coding piece. Where needed additional information is included (e.g., input and output, example of function, etc.). A list  of included assets is presented. The directory of the files is included. Code could effectively be passed to a teammate to finish the project without need for supplementary explanation. Full ACM citation style is used. Be aware that all AIO violations will be followed upon. Remember, if it is your own work (i.e., your paint it or took this video, you do not need to cite it, instead write  it as an included asset (e.g., “Title of Art” “Your mediums” “Year” “Your (Artist’s) Name”).
Parameters and Submission Instructions followed		Naming conventions are followed. Files are zipped correctly without error.  Everything executes/interprets/compiles/runs. If submission instructions and parameters are not followed, you will receive a 0 on the assignment.
Bonus: Free hosting	10	Hosted online for free. Loads correctly, webpage matches local version submitted as a zip.  Note the executed website’s URL in the readme
	/70 + 10	1% overall bonus for early submission, capped at 100%, see syllabus.