Clarification on a title attribute in a span

elmn1 · October 3, 2023, 3:17pm

Hello,

from this exercise:

gist.github.com

https://gist.github.com/codecademydev/a71ba0bcb853788038a58aa5aecd6c02

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>Form a Story</title>
  </head>
  <body>
    <section id="top">

This file has been truncated. show original

main.js

// Grab values from the submitted form in the URL
const words = new URLSearchParams(window.location.search);

// Cleans up and capitalizes the names of the animals
function cleanAndCap (str){
  if(!str) return null
  let temp = str.trim()
  return temp[0].toUpperCase() + temp.substring(1)
}

This file has been truncated. show original

original.html

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Completed Story</title>
    <script type="text/javascript" src="main.js" defer></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section id="top">
      <img src="https://content.codecademy.com/courses/learn-html-forms/formAStoryLogo.svg" alt="Form A Story Logo">

This file has been truncated. show original

There are more than three files. show original

Please, I would like some clarification about the goal of the title attribute in this span:

const story = <p>A <span class="word">${firstAnimal} title="id: animal-1"</span>

Usually, it is use for tooltip, but in this scenario, I don’t understand the point of it since we just fill the “gaps” with data gathered from a form.

taylorsabbag · October 4, 2023, 4:12pm

Can you link the exercise?

elmn1 · October 4, 2023, 7:26pm

Here it is: https://www.codecademy.com/journeys/front-end-engineer/paths/fecj-22-building-interactive-websites/tracks/fecj-22-building-interactive-websites/modules/wdcp-22-html-forms-313aacc5-db5e-4896-bd8f-ee712dc6ddf5/projects/form-a-story