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!

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

Derrick Mull
Derrick Mull
18,518 Points
Posted by Derrick Mull
Derrick Mull
18,518 Points

Feedback: Javascript hurts my brain

So in an attempt to make myself better at javascript I started coding a small concept page that relies a lot more on javascript/jquery. Just wanting some review on the javascript to see if there is a way to make it DRYer.

http://codepen.io/yahtaa/pen/ahxsf

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Use an array instead of a series of if statements for element changing and use innerHTML instead of prepend to not have to replace html.

Also your CSS could use some DRY-ing out as well, weighing in at 300 lines for one small page.

Derrick Mull
Derrick Mull
18,518 Points
Derrick Mull
Derrick Mull
18,518 Points

Thanks.

Some of the CSS is for parts of the page not posted.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Some of the CSS is for parts of the page not posted.

In that case, I'd read up on reduced test cases

Derrick Mull
Derrick Mull
18,518 Points
Derrick Mull
Derrick Mull
18,518 Points

Trying to wrap my brain around using an array as you described, but coming up short after lookin' around the webs... Know of any examples I could look at that are close to this?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Derrick Mull -

Earlier I was thinking of using the indexOf property with 2 arrays. Then I remembered there are associative arrays in JavaScript.

    var element = { 'au':'Gold','ag':'Silver','pt':'Platium','pd':'Palladium' };
    document.getElementById("metal-head").innerHTML = element[id];

Note that I've changed the HTML markup for metal-head from a class to an id. Also note that I'm using the innerHTML property instead of empty and html properties.