Skip to content

Instantly share code, notes, and snippets.

@acidtone

acidtone/README.md

Last active July 26, 2022 21:39
Show Gist options
  • Save acidtone/d7685ba337620ce4c01e2767211efb95 to your computer and use it in GitHub Desktop.
Save acidtone/d7685ba337620ce4c01e2767211efb95 to your computer and use it in GitHub Desktop.
Download ZIP
JS Activity: Strings and Dates in HTML
Raw
README.md

JS Activity: Strings and Dates in HTML

Overview

This activity focuses on outputting/manipulating strings and dates as content of HTML elements.

Topics covered

Instructions

  1. Download or fork/clone this Gist to your workspace.

  2. Using the Date methods provided below, template literals and common string methods refactor the printed date to create a sentence with the following structure (but using the current date and time):

    You last accessed this page on Oct 8 at 8:45pm

  3. Using the paraElement variable and your knowledge of strings and string methods to:

    • Count the number of characters in the paragraph;
    • Count the number of words in the paragraph;
    • Count the number of times "wizard" is mentioned in the paragraph.

  4. Output each of the above counts in the span elements provided under "Paragraph Stats".

Stretch Activity

After completing Step 2, you may have found the Date object difficult to work with. You're not alone! Many libraries have been written to improve the experience of working with dates.

Try installing one or more of the following date libraries and repeat Step 2 above:

Attributions

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strings and Dates</title>
<script src="strings-dates.js" defer></script>
</head>
<body>
<time class="date"></time>
<h1>Harry Potter</h1>
<p>Harry Potter is a series of seven fantasy novels written by British author J. K. Rowling. The novels chronicle the lives of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Harry's struggle against Lord Voldemort, a dark wizard who intends to become immortal, overthrow the wizard governing body known as the Ministry of Magic and subjugate all wizards and Muggles (non-magical people).</p>
<h2>Paragraph Stats</h2>
<ul>
<li class="characters">Characters: <span></span></li>
<li class="words">Words: <span></span></li>
<li class="wizards">Wizards: <span></span></li>
</ul>
</body>
</html>
Raw
strings-dates.js
/* What day is it?!? */
const currentDate = new Date();
// console.log('getDate() ->', currentDate.getDate());
// console.log('getDay() ->', currentDate.getDay());
// console.log('getFullYear() ->', currentDate.getFullYear());
// console.log('getHours() ->', currentDate.getHours());
// console.log('getMilliseconds() ->', currentDate.getMilliseconds());
// console.log('getMinutes() ->', currentDate.getMinutes());
// console.log('getMonth() ->', currentDate.getMonth());
// console.log('getSeconds() ->', currentDate.getSeconds());
// console.log('getTime() ->', currentDate.getTime());
// console.log('getTimezoneOffset() ->', currentDate.getTimezoneOffset());
// console.log('toDateString() ->', currentDate.toDateString());
// console.log('toISOString() ->', currentDate.toISOString());
// console.log('toLocaleDateString() ->', currentDate.toLocaleDateString());
// console.log('toLocaleString() ->', currentDate.toLocaleString());
// console.log('toLocaleTimeString() ->', currentDate.toLocaleTimeString());
// console.log('toString() ->', currentDate.toString());
// console.log('toTimeString() ->', currentDate.toTimeString());
// console.log('valueOf() ->', currentDate.valueOf());
/* Output to DOM */
// Find target elements and assign them to a variable
const dateElement = document.querySelector('.date'); // class selector
// Display day date as content of the target element
dateElement.textContent = currentDate.toString();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment