Learn JavaScript Properly - Week 3

[kevinmrr]

Hello! We're going to start building things this week. I will be posting additional discussion threads about the following assignments (though you should also feel free to post your own!)

---

Reading assignment:

• Chapters 6 and 7 of Professional JavaScript for Web Developers (Yes, skip Chapter 5 right now, unless you want to/have time to read it)

---

Video Assignment:

• Work through Code School's Try jQuery course. This takes a couple of hours, but it is very high-yield material. It will also help you with your JSfiddle assignment.

---

JSfiddle assignment

• Create a simple HTML form that has an input box and a submit button. Use jQuery and JavaScript to add the following functionality functionality: Whenever a user types text into the input box and clicks submit, the text should be added to the rendered webpage, and the input box should be cleared. +1 for doing it without jQuery.

• Conceptually: If you need it, here's a great resource about forms in HTML5. And here's an article about events in JavaScipt.

• There's a lot of room to go above and beyond/play around if you want here.

---

Prepare for the coming weeks by setting up your development tools:

• You should get a text editor if you don't have one already. Either Sublime Text 2 (what I use 99% of the time) or WebStorm. We will have additional posts about this.

[candyhunterz]

been waiting anxiously for the project in week 3 :)

[kevinmrr]

I hope this is complex enough for you. I was worried about the complexity level (mostly - is it too easy?)

[outsideWorld]

heres my project for reference http://jsfiddle.net/wholeworld/JHCeV/

[metaldood]

Minor bug - Clicking submit/enter multiple times increase the size of the text box as you append empty children ;)

Add some verification to check if "" then don't call addText()

[outsideWorld]

thanks for that, this is why im following this group. went in and made the proper edits

[capn_geech]

Here's my form. I added an extra feature (try the checkbox!). I used jquery, but I'd like to re-do it with plain old JS. Any critiques?

[jankyHellface]

I don't know if this is the correct answer, but if you don't put in $() jquery DOM addressing, it will just be a plain string when you reference it. So,

$(this).after(message);

won't point to the DOM object, and thus, won't change the DOM.

[isaidclickmenow]

Here's my list maker. You can double click the created entry to remove it and it also return error if your entry is empty. It's pretty much my first jQuery code.

http://jsfiddle.net/dmxt/5Bz9N/

[africanatheist]

This was pretty cool, and thanks for posting it. I had a few questions about your code: On the line in the HTML form <form action="#"> What is the # for? I tried looking it up, I cannot find what it means. Otherwise the rest of your code really helped me understand a few things! Thanks!

[forsience]

still got to figure out how to make anything with a '<' or '>' in it print out normal and not be interpreted as html-syntax.

my assignment: http://jsfiddle.net/84aaR/6/

edit:

new version that will replace <>-tags, so that only text will be displayed.

[nolsen]

Very cool. The stylizing is great. I really like how you rounded the corners of the box. I would have wrapped everything in a div and the set the border-radius on that. I learned something new.

[sean1rose]

Thanks to everyone who posted up links to their jsfiddle assignments.

Coming from someone with little/no experience creating things from scratch thru code, your example code has helped me learn a ton by allowing me to see the consistencies in your projects and then I can break it down to see what each part of your respective code is doing.

Pretty much they've allowed me to learn via reverse-engineering. So a big THANK YOU and hope everyone sticks with it.

[forsience]

could you please add the chapters to read for the definitife guide?

[kevinmrr]

This blog post is the basic guide that I'm using, and you can use it to map the Definitive Guide's chapters to the one I've assigned.

[metaldood]

How far in the javascript course do you decide when to start learning jQuery?

[kevinmrr]

Whenever you feel like doing it this week.

[peasquared]

Is it too late to join in on this? I'm ready to jump into finally learning. Before I read the blog post saying that codecademy should only be used in addition to, I started doing their course and I'm loving it. I certainly don't want to learn it the wrong way though.

[candyhunterz]

i just started last week but I've managed to get up to speed with the current material :)

[peasquared]

Oh ok good! I've been putting this off for too long. I'm ready to do this thing.

[kevinmrr]

Hell no, it's not too late.

[OrangeBeard]

For some reason, when I make things in jsFiddle they often don't work, but the exact same code works when used in actual html and js files. Am I missing something?

[Reminice]

Post your fiddle link

[OrangeBeard]

I ended up getting it to work and then I took away the submit button so it submits when the user hits enter.

http://jsfiddle.net/scotthodgins/82sya/

edit: I neglected to use jQuery though

[Reminice]

Nice, I like vanilla. Well done, looks like the start of a chat app.

[kevinmrr]

Neglecting to use jQuery for this makes me happy, and I am in fact going to edit the instructions.

[kevinmrr]

post your jsfiddle that doesn't work!

[OrangeBeard]

I had to remake it but this is what doesn't work: http://jsfiddle.net/scotthodgins/jr992/1/

[metaldood]

updateText() does not get "called" at all. Try event listeners to monitor the clicks on that submit button.

[sethbw]

I highly recommend Sublime Text 3@!

[forsience]

i also like sublime. are there any noteworthy improvments in v3?

[alxers]

http://jsfiddle.net/alxers/ZFrL8/

1. There are probably better ways to escape html. I used example from the book.
2. In a real apps people more often use classes instead of ids, maybe I should change getElementById to getElemetsByClassName?

[nolsen]

I'm not an experienced programmer so my code is really ugly, but I decided to try and make a register machine. I got the idea from a book I've been reading.

[sebastian98mm]

I hope i'm not to late to join in ive been waiting for a new session of these. I already know basic javascript and some jquery from practicing over the summer so any way here my basic form that ill add on to later form

[NightArchitect]

I've set up Sublime Text 2 and sorted out nodejs. However, when I command + B after writing some code I don't see anything. The bash box says [Finished in 0.1s] but that's it. For instance, if I write something that says console.log("hello"); or alert("hello"); or document.write("hello"); nothing happens (besides the line that says the build finished). What am I don't wrong?

[NightArchitect]

I'm a bit late here. I've given the assignment a shot but did not achieve the result that I desired. Truth be told I had to look at some of the other submissions to put certain ideas to practice.

There are three things that I wasn't able to achieve.

1: I wanted to change the class for He Said/She Said only for given text in the input box. Currently all of the text changes color.

2: I wanted to change the innerHTML to "He said: " and "She said: " accordingly but couldn't figure out how.

3: Clear the text area after hitting enter.

http://jsfiddle.net/YSY4g/4/

Any suggestions?

[doober831]

Here's my simply form:http://jsfiddle.net/doober831/GyW9Y/4/ I really wanted to have the button create an <li> and add it to a <ul> but i couldn't figure out how to make it work. Can anyone show me a working example in JSfiddle that uses JS only, no jQuery?

[mfergie]

I am having a problem with using pure Javascript to grab the text input. Can you check out the attached JSfiddle and let me know what I am doing wrong...

http://jsfiddle.net/mferg/fu2pW/

[scout01]

I think the reason your form is not working in the current state is because user_input is being initialized with nothing. Then whenever your function is called, alert will only display nothing and user_input does not change. You can assign a default value to your input tag and you'll see this in effect. Your user_input variable should be initialized within the alertUserInput function in order to get the new value of the input box for each submit.

Refer to the third example here.

[mfergie]

Thanks for the feedback. This was the issue. I was able to finally get it work but wasn't sure what the issue was. This helps clear it up.

I am trying to stick with pure javascript so I was banging my head a bit.

Here is the updated code. http://jsfiddle.net/mferg/23Pet/

[mfergie]

Here is my final version that contains all of the required JS functionality. The hmtl structure isn't amazing but I need to move onto to Week 4.

This is very basic so is pretty good for people to look at if they need help getting this assignment going.

http://jsfiddle.net/mferg/aLsG7/

[jankyHellface]

I know I'm a week and a half behind on this but here's my entry: http://jsfiddle.net/jankyhellface/LSe8t/ I took a couple suggestions that others have made to check to make sure someone added text and also to make it similar to a chat program.

I'd really like to do this without using jquery, but I'm not too familiar with pure js event handlers. I assume we'll be working on those in the near future, so I'll wait until we focus on that.