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

Posted by Ernest Son
Ernest Son
13,532 Points

charting songs with html,css, js

Hey fellow treehousers,

I am in the initial throes of prototyping a "song layout tool". It would look something like this, and generally function as follows - click in a box, and it and every box directly underneath turn red/blue/etc. I'm thinking the view shown here could double-triple (in terms of "box quantity"). My main question is how to best go about constructing this, html-wise? a table? a grid-like <div> system? Any input to this idea is appreciated!

[link]https://moqups.com/ernestson/xL9cHiBh/p:a3fed5d08

MIke Allen
MIke Allen
9,727 Points

Hi Ernest,

It looks to me like this would be totally appropriate for a table. Really crude and quick, but I drafted this up pretty rapidly.

HTML

<table>
  <tr>
    <td class="red"></td>
    <td class="red"></td> 
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td class="red"></td> 
    <td></td>
    <td class="red"></td>
  </tr>
</table>

CSS

td {
  border: black 2px solid;
  width: 50px;
  height: 50px;
}

.red {
  background-color: red;
}

Obviously you would then just use JS to update the table sections to whichever colour you needed.

If you wanted it a bit more advanced you could maybe use Canvas element or something.

Hope that helps.

2 Answers

Ernest Son
Ernest Son
13,532 Points

so, would I set up an ID for each <td> and then set up some sort of eventhandler for onclick? thanks for the feedback!

MIke Allen
MIke Allen
9,727 Points

That sounds about right. Use an onclick method with an .addClass() so whenever the user clicks the particular square it adds a class of whatever colour you need.

Ernest Son
Ernest Son
13,532 Points
Ernest Son
Ernest Son
13,532 Points

what about adding the class to that square and all those below it? thank you so much for your responses!

MIke Allen
MIke Allen
9,727 Points

Hi Ernest,

You would probably have to give all td's an initial class for example -

<table>
  <tr>
    <td class="first"></td>
    <td class="second"></td> 
    <td class="third"></td>
    <td class="fourth"></td>
  </tr>
  <tr>
    <td class="first"></td>
    <td class="second"></td> 
    <td class="third"></td>
    <td class="forth"></td>
  </tr>
</table>

That way when someone clicks on first you could then set all tds with the first class to a specific colour.