Web代写：COMP2116 Flight Selectin Website

发表于   |   分类于

使用JavaScript读取文件中的内容，并通过交互动态更新到HTML页面中。

JavaScript

Assignment goals

This assignment tests your knowledge in the following aspects:

  • Using JavaScript to read and display content, and dynamically update HTML content on the page with user interaction.
  • Implement a responsive layout based on provided design using CSS Grids.
  • Ensuring separation of concerns between content, presentation and behaviour layers in web pages.

Assignment overview

A4 requires you to use the starting code provided to implement a flight selectin website.

Note

The focus of this assignment is JavaScript. Please plan your work and manage your time well in the next weeks to work on this assignment.

Do not modify the HTML that is given to you, if you do you will get a 0 (zero). This is a CSS and JS assignment.

Instructions

Step 1: Download the starter code

Download the starter code using the link below. This gives you all the files and folders, organized as required into sub-folders, etc., that you are required to use to develop a solution for this assignment.

Step 2: Using JS, read content from the JS object and display in main container

Your first main task is to read the flight content provided in the file named flight-data.js available in the js folder and display it as a collection of elements inside the main container.

Hint: Think about this like you are reading each flight information into a box. Choose an appropriate semantic box, and then use headings, paragraphs, and buttons appropriately to display the content as shown in the reference.

NOTES

  1. The flight content must not be hard coded into the HTML.
  2. Do not modify any HTML.
  3. Do not modify flight-data.js
  4. Update only the CSS file named main.css and JS file named script.js.

Step 3: Using JS, change web page behaviour when the user clicks on the button.

  1. Using JS, add an event listener to the button (“select”) so that when a user clicks on the button to choose a flight,
    • a. the flight code and destination are retrieved from the correct content information box, and,
    • b. the flight code and destination are written in the aside named “flight selection bag” as a paragraph.
    • c. Basically, you are implementing something like a “shopping cart” for flights in this assignment.
  2. Things to keep in mind:
    • a. Remember that you are reading content for each flight using JS.
    • b. Think about how you can dynamically set event listeners to buttons created in this way.
    • c. Use console.log() to verify whether you are reading the correct content at each step of your implementation.

Step 4: Update website appearance using CSS

  1. Update the CSS code in main.css
  2. Using CSS Grids and Flexbox, make this website responsive and make needed changes in the appearance to make it look the way you see in the pdf.
  3. Some style classes are given to you in the starting code that are empty.
    • a. Use them to style the content that is appearing dynamically.
    • b. You might need to add additional styles classes.
    • c. You will need to use CSS along with JavaScript.
  4. Responsive behaviour:
    • a. You will only have 2 views, mobile and desktop. The breakpoint for the mobile view is 840px.
    • b. Make sure that the desktop view appears beyond 840px, and you change some appearance based on the reference.
      • i. The header and footer change a bit in the mobile view.
      • ii. The main content also change.

Step 5 Organize your code correctly and use citations

  1. Make sure that you organize your code well.
    • a. Your code must be readable and properly indented.
  2. Use comments appropriately.
    • a. Do not use comments for each line of the code.
    • b. Use comments to describe parts of your web page and what each part does.
  3. Citations:
    • a. If you have learned any concept from content other than those provided in the course, include a citation in both the comments in the code and in the README.md file that is in your submission.

Step 6: Validate your code

  1. Validate your CSS file - fix ALL errors and warnings:
    • a. Validate main.css.
    • b. Validate it.
  2. Save these validation files as PDF files in this folder named files.
    • a. Name these PDF files with the name of the CSS file name was main.css, save the PDF as W3C-main-css.pdf

Step 7: Organize your code correctly and use citations

  1. If you have created folders, etc., as specified above, your folder structure must look as shown below.
  2. Folder structure for this website.

Step 8: Save the folder in .ZIP format

  1. Compress the folder named A4 into ZIP format, i.e., to get A4.zip
  2. Submit A4.zip on Brightspace, in the assignment submission drobox.