JavaScript DOM Scripting By Example Improving the Application Code Fix Function that Should be Creating Links

Justin Wheeler
Justin Wheeler
4,434 Points

This code should create a sequence of div elements that each hold a headline above and a link below. Currently only the

Completely stumped on this challenge. I have found a solution but the program said it is not the 'right' way to do it. Please help I spent 2 hours on this problem and I cannot find a way around it.

app.js
const languages = ['Python', 'JavaScript', 'PHP', 'Ruby', 'Java', 'C'];
const section = document.getElementsByTagName('section')[0];

// Accepts a language name and returns a wikipedia link
function linkify(language) {
  const a = document.createElement('a');
  const url = 'https://wikipedia.org/wiki/' + language + '_(programming_language)';
  a.href = url;
  return a;
}

// Creates and returns a div
function createDiv(language) {
  const div = document.createElement('div');
  const h2 = document.createElement('h2');
  const p = document.createElement('p');
  const link = linkify(language);

  h2.textContent = language;
  p.textContent = 'Information about ' + language;
  link.appendChild(p);

  div.appendChild(h2);

  // Your code below
   div.lastElementChild;
  //div.insertBefore(link, h2);

  //h2.appendChild(link);

  // end

  return div;
}

for (let i = 0; i < languages.length; i += 1) {
  let div = createDiv(languages[i]);

  section.appendChild(div);
}
index.html
<!DOCTYPE html>
<html>
<head>
  <title>Programming Languages</title>
  <style>
    body {
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Programming Languages</h1>
  <section></section>
  <script src="app.js"></script>
</body>
</html>

1 Answer

Brendan Whiting
MOD
Brendan Whiting
Front End Web Development Treehouse Moderator 81,973 Points

What you want is:

div.appendChild(link);

The goal is to create a structure like this for each language:

<div>
  <h2>Python</h2>
  <a href="'https://wikipedia.org/wiki/Python_(programming_language)"><p>Information about Python</p></a>
</div>

So far they've given us this:

1) We create some empty <div>, <h2>, <p> elements:

const div = document.createElement('div');
const h2 = document.createElement('h2');
const p = document.createElement('p');

2) We create the <a> element using the linkify function defined earlier and the name of the language:

 const link = linkify(language); // this will make <a href="'https://wikipedia.org/wiki/Python_(programming_language)"></a>

3) We've filedl the contents of the <h2> with the language name.

h2.textContent = language; // this will make <h2>Python</h2>

4) We've filled the contents of the <p> with the language name and text

p.textContent = 'Information about ' + language; // this will make <p>Information about Python</p>

5) We've stuck the <p> element inside the <a> element:

link.appendChild(p); // this will make <a href="'https://wikipedia.org/wiki/Python_(programming_language)"><p>Information about Python</p></a>

6) We've stuck the <h2> element inside the <div>:

div.appendChild(h2); 

So now we have:

 <div>
  <h2>Python</h2>
</div>

So now we just need to finish it off, and stick the link variable, which has the <a> with the <p> inside it, inside the <div> as well:

 div.appendChild(link);
Justin Wheeler
Justin Wheeler
4,434 Points

Thank you so much! Not sure how I missed this. Sometimes you can't see the trees from the forest. Have a great day!