Bonsai


#1

In app.js, attach a keyup event handler to the #top-text input so that it can respond to when a user types a key. Check out how to use .keyup().

How to do that?


#2

Maybe if you can show me what you have I can point out what needs to be corrected or added in ?


#3

Its the first thing to do in the project so havent written anything yet.


#4

Okay you can start of by setting up your jQuery document/ using document.ready and adding a function

In the function select '#top-text' and add .keyup() ;

Show me your code once we done and we can go on from there


#5

OK thnx!

This is how it starts om app.js:

var main = function() {

}

$(document).ready(main);


#6

Check out how to use .keyup().

The lesson that describes this event listener is here.

keyup() is used when we wish to prevent key repeat. Holding a key down has no effect, only releasing the key does.


#7

Thats .keydown()

Dont find anything about keyup()


#8

Same general usage, though. See the documentation:

https://api.jquery.com/keyup/


#9

I can change the top and bottom text but I cant figure out how to change the url... This is the code I've got this far:

var main = function() {
	$("#top-text").keyup(function(){
  	var valueTop = $(this).val();
    $(".top-caption").text(valueTop);
  });
  $("#bottom-text").keyup(function(){
  	var valueBottom = $(this).val();
    $(".bottom-caption").text(valueBottom);
  });
  $("#image-url").keyup(function(){
  	var url = $(this).val();
    $(".meme").first().attr("src", url);
  });
}
 
$(document).ready(main);

So does anyone know what I'm doing wrong? I've tried all different ways... Why should we use .attr? the .val worked in the preceding code...

Thanks!


#10

We need to write the value into the src attribute so it does not display, but rather binds to the link text. We should be able to write it back on the main selector:

    $("#image-url").attr("src", url);

#11

Hi!
sorry a question, why the project begin with the variable "main"?


#14