WDD 131: Dynamic Web Fundamentals

W03 Assignment

Overview

In this assignment, you will apply the concepts from the learning activities to the design and development of a web page. The subject of the page is a country or place where you live, have visited, or wish to visit. There are specific, functional and developmental requirements for the page's layout, design, and content.

Associated Course Learning Outcomes
  1. Develop responsive web pages that follow best practices and use valid HTML and CSS.
  2. Demonstrate proficiency with JavaScript language syntax.
  3. Use JavaScript to respond to events and dynamically modify HTML.
  4. Demonstrate the traits of an effective team member including clear communication, collaboration, fulfilling assignments, and meeting deadlines.

Task

Design and build a single webpage using the following wireframe as the layout and content location guide:

Wireframe Designs and Example Screenshots
Wireframe in Mobile View
Wireframe design of the page in mobile view
Wireframe in a Wider View
Wireframe design of the page in a wider view
Screenshot example of Place page in mobile view
Example Page in Mobile View
Screenshot example of Place page in a wider view
Example Page in a Wider View

You can create your own free wireframe designs using the online application jGraph-Diagrams.net, or you can download and install the JGraph program on your computer. There are many other viable wireframe design applications, including Moqups. Note that you will need to create your own wireframe designs later in the course.

Instructions

File and Folder Setup

  1. In your wdd131 local repository folder, add a new HTML file named "place.html".
  2. Add a CSS file or files in the appropriate subfolder.

    You may elect to organize this assignment's media queries using one CSS file or multiple CSS files.

  3. Add a JavaScript file to the appropriate subfolder.

HTML

  1. Include the standard HTML document and <head> elements.

    Refer to the course development standards if you need to review standards.

  2. Be sure to link your css file(s).
  3. Reference your js file using a defer attribute.
  4. Create the structure and layout for the page by referencing the wireframe and example screenshots given above.

    Important: It is required that you match the wireframe components and basic positioning of those components as shown in the wireframes.

  5. The "hero" images must utilize the srcset responsive design method to provide different images based on screen size. You can choose to implement this requirement by using either the picture element or a basic img approach. Ensure that the images subjects and dimensions support the page's subject, design, and layout.

Assets

You have the option to use your own images or select from stock photos available on pexels.com or unsplash.com, as well as other resources.

Ensure compliance with licensing requirements and provide appropriate credentials if necessary. Many images on these sites are free to use and do not require attributions, however it is always important to review the licensing terms.

Screenshot of IconFinder.com download for SVG
Screenshot of iconfinder.com download options
  1. Use the WebP image format for the hero images.
  2. Use the SVG image format for the weather icon in the mobile view.

    An svg can be downloaded via most icon service sites like iconfinder.com.

  3. Use an emoticon or equivalent for the weather icon ⛅ in the wider view by the "Weather" heading.

    The weather will be static at this point, so pick an image/icon that matches your stated conditions.

CSS

Important: You are responsible to implement good design principles of alignment, color contrast, proximity, repetition, white space, and general usability in all of your work.

  1. Select a color scheme that supports the country or place.

    For example, the webpages screenshotted above use the colors of the Madagascar's flag.

  2. The typography choice is up to you.
  3. The minimum styling requirements include:
    1. Matching the layouts shown in the wireframes
    2. Using a media query or queries.
    3. Using global CSS variables.
    4. Using a pseudo element for the weather icon in the large view located after the heading "Weather".

JavaScript

  1. The footer of the page must include the current year and the date the document was last modified.
  2. In your JavaScript file, provide the code to support the following requirements:
    1. Use JavaScript to display the windchill factor in the "Weather" section of the page as shown in the examples. The windchill factor should be calculated and displayed when the page loads.
    2. At this point in the course, you should define variables that use static values for the temperature and wind speed, matching the static, displayed values you have in your weather section content.

      The next course will cover how to use third-party APIs to get real-time weather data.

    3. Write a function named "calculateWindChill" that returns the windchill factor when passed the necessary arguments (temperature and wind speed). The function should use one line of code that returns the result of the windchill calculation. Your formula should be based upon the location's preferred units (°C or °F).

      Using AI to help determine this formula might be a good approach.

    4. Do not call the calculateWindChill function unless the following conditions are met:
      Viable Wind Chill Calculations
      Metric Imperial (English)
      Temperature <= 10 °C <= 50 °F
      Wind speed > 4.8 km/h > 3 mph
      If the conditions are not met, then display "N/A", which means "not applicable".

      Right now your code is using static inputs, but you want to have this provision coded in preparation for using dynamic, real-time inputs.

Testing

  1. Continuously check your work by rendering the page locally using Live/Five Server in VS Code.
  2. Use the browser's DevTools to check for JavaScript runtime errors in the console or click the red error icon in the upper right corner of DevTools.
  3. Use DevTools CSS Overview to check your color contrast.
  4. Generate the DevTools Lighthouse report and run diagnostics for Accessibility, Best Practices, and SEO in both the mobile and desktop views.

    It is best to test your page in a Private or Incognito browser window.

    Do not worry if the Best Practices report comes back low for the use of a content delivery network. We are using the Church's media library on purpose.

Audit and Submission

  1. Commit your local repository and push or upload your work to your GitHub Pages enabled wdd 131 repository on GitHub.
  2. Use this ☑️ audit tool to check basic HTML and CSS standards and requirements.
  3. Share your work by posting your URL in the course's Microsoft Teams weekly forum and comment on your peers' work by providing constructive feedback.
  4. Return to Canvas and submit the correct GitHub Pages enabled URL. 
    https://your-github-username.github.io/wdd131/place.html