Help me with JQUERY BONSAI PROJECT


#1

2.
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().
3.
Inside the keyup event handler, get the text entered into the #top-text input using .val(). Then set it as the text of

using .text().

I do both of them and then i put my text dont work.

Heres my app.js
var main = function() {
$('#top-text').keyup(function() {
$('#top-text').val(function() {
$('.top-caption').text();
});
});
}

$(document).ready(main);


#2

i found the way on the forum . dont searched so good as should need


#3

Hey doncerebro, I am also working on the bonsai project and realize that I am having serious trouble with it. How did you finally solve task 3?


#4

i just found the way how to solve first 2 tasks but the third i still searching right now . if you find first text me too :wink:


#5

hey padu01 , i found the solution for the 3rd look :
var main = function() {
$('#top-text').keyup(function(){
var toAdd = $("#top-text").val();
$('.top-caption').text(toAdd);
});
$('#bottom-text').keyup(function(){
var toAdd = $("#bottom-text").val();
$('.bottom-caption').text(toAdd);
});
$('#image-url').keyup(function(){
var toAdd = $('#image-url').val();
$('img').attr('src', toAdd);
});

}

$(document).ready(main);


#6

Thanks for sharing doncerebro!


#7

you are welcome padu01


#8

For the lat bit of code I used:

$("#image-url").keyup(function(){
var imageUrl = $(this).val();
$('.thumbnail').find('img').attr('src', imageUrl);
});

If you don't find the img element within thumbnail it causes the logo in the header to change as well. You could also apply a class or id tag to the img so its easier to specify in your code.


#11

I had been annoyed that the logo would change. I found another way to fix it but I had to add a class to the img element. I like the way you did it better. Didn't know about the .find() option. Thanks!