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

Matt Campbell
Matt Campbell
9,767 Points
Posted by Matt Campbell
Matt Campbell
9,767 Points

Adding HTML to stuff with jQuery - I'm stuck!!!

I've been making a countdown timer.

http://codepen.io/Th3M8dH8tt3r/pen/cugsJ

That's the code. There's jQuery there which I've just learnt and I have no idea if it's correct because I've never come across it before but, it works, at least it does outside of codepen.io. Don't know why, but half the stuff I put in codepen doesn't work. Anyway...

What I'm after knowing is this.

There's 4 blue boxes with numbers in, as we can see. What I'd like to do is make that 8 boxes. Each digit in its own box with a slight gap between digits to make up a number. Because jQuery populates these numbers, there's nothing to grab hold of and make changes to. It needs to be done with jQuery but I don't know how or have the first idea where to start.

Hoping for some help! Thanks.

Tagging Andrew Chalkley for this one...hoping for an appearance on the forum! ;)

1 Answer

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

To get code pen to work. Click the cog and select the latest version of jQuery.

As for your other issue, you can convert the number to a string and then "split" it.

Here's an example.

(27 + "").split("")

This would result in the array of ["2", "7"].

Here's the same code split over multiple lines.

var number = 27;
var convertedNumberToString = number + "";
var arrayOfCharacters = convertedNumberToString.split("")

arrayOfCharacters[0]; //"2"
arrayOfCharacters[1]; //"7"

Hope that helps :)

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Did not know about the cog. lol.

Thanks Andrew Chalkley. I've still got a long way to go with jQuery. I'll give this a go, not sure where to put it in my code but, I'll work it out! Thanks again.

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

(Plus I'm working on JavaScript code challenges with another developer at the moment to flesh out our content.)

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Andrew Chalkley - That sounds really awesome and much much needed. Things like writing this. $.fn.countdown, I'm guessing the .fn. denotes a function but I have no idea why or what it does and the script breaks without it. I'm starting to get to grips with the parse thing, sending stuff to a function to put it all in one place in the code so it works together, getting that slowly.

I've done some other jQuery stuff, learnt it as I went, but this was something new again.

Last thing, I've got it so it's working having put the number in the array. 

select.find('.days').text((daysArray[0]) + (daysArray[1]));

Now's where I always fall down...adding a class so I can control each digit. I've tried lots of different methods but I don't even know if this is the right way to do it.

I enjoyed your MySQL videos by the way, need to finish them but been rather busy. Would be nice to control my databases without having to go to PHP MyAdmin all the time.

Thanks Andrew.

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

If I understand what you want to do it's something like this.

 <div id="firstDayDigit" class="days">
0
</div>

<div id="lastDayDigit" class="days">
0
</div>

I'd use an id for each unique digit to add say daysArray[0] to the first and daysArray[1] to the last.

ids are unique. Whereas classes are more generic. Maybe style on the class but specifically select on the id with jQuery to manipulate the text.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Andrew Chalkley - I think I've nailed. Just seen your reply too. Yeah, that's what I realised I need to do. Give each digit it's own span and class of one or two.

I'll be moving the selectors for days, hours, minutes etc into IDs as they are now IDs even more so there's styling. I'll do that in my editor but for now, here's the result of your help: http://codepen.io/Th3M8dH8tt3r/pen/cugsJ

Thank you very much Andrew and I look forward to some new jQuery videos. Hopefully something with the principals of writing jQuery.

Thanks again.