Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

yousif alyousif
yousif alyousif
2,322 Points
Posted by yousif alyousif
yousif alyousif
2,322 Points

can some one please give me some hint?

I am trying to solve this challenge but did not come up with a way to solve it. can any one please give me a hint or guide me to solve it? the challenge task is: This code should create a sequence of div elements that each hold a headline above and a link below. Currently, only the headlines display, and the links do not. Can you figure out how to fix this to make the links display under each headline?

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


  // 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>

4 Answers

Alexandra Barnett
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alexandra Barnett
Front End Web Development Techdegree Graduate 46,473 Points
Alexandra Barnett
.a{fill-rule:evenodd;}techdegree seal-36
Alexandra Barnett
Front End Web Development Techdegree Graduate 46,473 Points

Hi Yousif! The challenge wants you to add the link variable to the div, but below the h2 element. There has been a place marked in the code below the h2 element (that has already been added: div.appendChild(h2)) - it's very very similar to that line of code :)

div.appendChild(h2);

  // Your code below


  // end

I hope that helps you, if you need any more guidance, just ask!

yousif alyousif
yousif alyousif
2,322 Points
yousif alyousif
yousif alyousif
2,322 Points

thanks a lot for your time and explanation

Vassil Kurktcheiv
Vassil Kurktcheiv
3,248 Points
Vassil Kurktcheiv
Vassil Kurktcheiv
3,248 Points

Nice, thanks for not giving the answer as well :)

Eden Gomez
Eden Gomez
22,787 Points
Eden Gomez
Eden Gomez
22,787 Points

please im lost, can you guys gime me another hint??

John Collins
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
John Collins
Full Stack JavaScript Techdegree Graduate 28,593 Points
John Collins
.a{fill-rule:evenodd;}techdegree seal-36
John Collins
Full Stack JavaScript Techdegree Graduate 28,593 Points 
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.appendChild(link);

  // end

  return div;
}

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

  section.appendChild(div);

}