Bonsai! Help!


#1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>


https://www.codecademy.com/en/courses/jquery-ext/projects/jquery-prj_bonsai


<In what way does your code behave incorrectly? Include ALL error messages.>
Hello everyone!
My meme generator does’t work. :confounded:
Can anyone help me?
I read about .text(), .val() and I think understand this, but not about .attr().
And can anyone explain me about .attr() with examples, please :slight_smile:


SCRIPT.JS



var main = function() {
  
}
 
$(document).ready(main);

$(document).ready(function() {
	$('#top-text').keyup(function() {
  	$('#top-text').val(function() {
    	$('#top-text').text('<h1 class="top-caption">');
    });
  });
 	$('#bottom-text').keyup(function() {
  	$('#bottom-text').val(function () {
    	$('#bottom-text').text('<h1 class="bottom-caption">');
    	});  
    });
	$('#image-url').keyup(function() {
  	$('#image-url').val(function() {
    	$('#image-url').attr('src');
    });
  });
});


And I used this code too:
var main = function() {
  
}
 
$(document).ready(main);

$(document).ready(function() {
	$('top-text').keyup(function() {
  	$('.top-text').val();
    	$('.top-text').text('<h1 class="top-caption">');
   
  });
 	$('.bottom-text').keyup(function() {
  	('.bottom-text').val();
    	$('.bottom-text').text('<h1 class="bottom-caption">');
    	
    });
	$('.image-url').keyup(function() {
  	$('.image-url').val();
    	$('.image-url').attr('src');
    });
 
});

INDEX.HTML



<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="container">
        <img src="logo.svg">
        <h1>Bonsai</h1>
      </div>
    </div>
    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            
            <div class="meme thumbnail">
              <img src="cat.jpg">
              <h1 class="top-caption">U say something?</h1>
              <h1 class="bottom-caption">I'm all ears</h1>
            </div>

          </div>
          <div class="col-md-6">
            
            <div class="tool">
              <h2>Create a meme</h2>
              <form role="form">
                <div class="form-group">
                  <label>Image URL</label>
                  <input id="image-url" type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label>Top text</label>
                  <input id="top-text" type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label>Bottom text</label>
                  <input id="bottom-text" type="text" class="form-control">
                </div>
              </form> 
            </div>

          </div>
        </div>
      </div>
    </div>

    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>


I’ll be very grateful if you help me to understand this :slight_smile:


#2

@scriptcoder08888,
May i ask what you are trying to achieve ???


#3

Make a meme generator like this: https://s3.amazonaws.com/codecademy-content/projects/2/bonsai/index.html


#5

I had a hard time with this as well. This is what I learned.

  1. how to use the .attr(). It goes like this. You need to select your target in JQuery, in this case it is an img element, ('img'). Then we add the attribute thing to it and it requires two things, what attribute you are targeting from your element and the value you want to change it to. .attr( attribute , value). We already have the thing selected so we can use (this), and then we grab the value by the .val().
    ('img').attr( 'src' , (this).val());

  2. But the code above will cause the logo of the cat face to change as well since it targets ALL img elements. I read some other posts about it to figure it out, but it required we add to the HTML by adding a class to it. Read around if you want to figure it out.

Hope that helps!