WDD 230: Web Frontend Development I

Applied JavaScript

Overview

This module is a review of some basic JavaScript concepts, application, and DOM (Document Object Model) manipulation. JavaScript is a core web technology in web frontend design and development along with HTML and CSS. This course will require the application of JavaScript to meet functional and developmental specifications.

Prepare

Activity Instructions

  1. What is the correct HTML markup to reference an external JavaScript file named app.js located in the scripts folder?
    Answer
    <script src="scripts/app.js"></script>
    Where should this script reference be located in the HTML document?
    Answer

    Even though we could reference this script in the head and in other places within the HTML document, we reference the script tag right before the closing </body> tag as a standard in this course in order to allow the HTML to load first for performance reasons and to avoid run-time errors.

  2. Screenshot of Fork button in CodePen
    Screenshot of Fork button in CodePen
    Create your own, free CodePen account, if you have not already done so, in order for you to be able to fork content and build your own pens (code snippets) for your own reference.
  3. Fork (copy) this βš™οΈ CodePen.
  4. In your forked Pen, change the given date output to this format: mon dd, year (for example, Apr 04, 2024)
    Hints
    1. Modify the given variable options object settings.
    2. Change the locale parameter from "en-UK" to "en-US" in the toLocaleDateString method.
  5. Replace this concatenated string using a template literal.
    "<strong>Volume</strong>: " + volume + " liters"
    Answer
    `<strong>Volume</strong>: ${volume} liters`
  6. Declare a variable named quantity and assign it the value of the HTML input element with an id of q using the querySelector method.
    Answer
    let quantity = document.querySelector('#q').value;
  7. Output this string, "Welcome to <mark>our</mark> neighborhood!", to the first <aside> in the document.
    Answer
    document.querySelector('aside').innerHTML = 'Welcome to <em>our</em> neighborhood!';
    Why use innerHTML versus textContent in this specific case? Try It.
    Is is OK to use double quotes to contain the output string? πŸ‘πŸ½
    Is it OK to use backticks (`) to contain the output string? πŸ‘πŸ½
  8. Output the returned value of a function named getCelsius to an HTML input element with an id of temp. Feed the getCelsius literal value of 33 (which represents 33°F). The getCelsius function is already included in the provided CodePen code.
    Answer
    document.querySelector('#temp').value = getCelsius(33);

    An HTML input element does not have an innerHTML nor textContent property. Instead we can change the value property which is displayed in the input element.

    πŸ’ͺ🏽Stretch

    Format the output to include only one decimal place and label it with the Celsius symbol, e.g., "0.6°C".

  9. Select all the div elements in a document and assign the result to a const variable named divs using querySelectorAll. Output to the provided div element with an id of divs in the CodePen.
    Answer
    const divs = document.querySelectorAll('div');
    The resulting NodeList is a collection of nodes from the document driven by querySelectorAll. It has a length and is zero-based indexed.
    πŸ’ͺ🏽Stretch

    Format the output like this (assuming the result was 10): "There are 10 div elements on the page."

  10. Filter an array named citynames to return only city names in the array that start with the letter "C" and store the resulting array into a variable named filterC. Output to the provided div element with an id of c-names in the CodePen.
    Answer
    let filterC = citynames.filter(city => city.charAt(0) === 'C');
Example Solution βš™οΈ CodePen with expanded output examples.

Submission

  1. Be sure to save your changes and record the CodePen URL. You can always pull it up again from your CodePen account and listing of Pens.
  2. There is no submission requirement at this point.