Final Answer correct?


#1

<PLEASE USE THIS 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/courses/jquery-ext/projects/jquery-prj_bonsai

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
My code was accepted and seems to be operating as expected, but I did it completely differently than what I’m seeing in other comments. Can someone tell me if this would be accepted as ‘correct’ by the community at large, or if I should change what I’m doing to better match everyone else? Thanks in advance.

```

var main = function() {
('#top-text').keyup(function() { (’.top-caption’).text((this).val()); }); (’#bottom-text’).keyup(function() {
('.bottom-caption').text((this).val());
});
('#image-url').keyup(function() { (‘img’).attr(‘src’, $(this).val());
});
};

$(document).ready(main);

<do not remove the three backticks above>

#2

Asking others to vote on our code is like asking the mirror to lie.

It is our responsibility to seek out and remedy the weaknesses in our code. Does the code meet OUR expectations?


#3

I’m not so much asking for people to vote on it as I am for constructive criticism. My habit when completing exercises is to read through the Q&A to see if there’s a better way to write the code, even if what I had ‘passed’ Codecademy’s acceptor, but there aren’t many responses to this project. The ones that are there are substantially different than mine, which is why I’m asking more experienced programmers for their advice.

The code I wrote is concise and does what I expected it to, but is it also easy for others to read and work with? What’s the best practice in this scenario?

Thank you for your response.


#4

@cmccrea23 Your code looks good and it works, those are the main things to worry about :slight_smile:

My code is the same as yours, so don’t worry about yours being too different. The people who ask here are often the ones having trouble with their code.


#5

I think it is fair to say that this is the least of our concerns at this stage. Does it do what you expect, as @zystvan asked? How, on such a small project does one improve anything or make it more efficient or easier to read? Not really much we can do in that regard.

This is the sort of project that we can play around with a number of different ways for the practice. Say for instance someone were to say, “It would be easier to read if you wrote the value into a variable.”

  $('#image-url').blur(function(e){
    $url = $(this).val();
    $('.meme img').attr('src', $url);
  });

Now it is clear what we are passing to the src attribute. Not much different from yours, but how some programmers may prefer to write it.

Notice in this one I use a blur event so nothing happens until the complete URL is typed in and the user clicks away from that form element? That’s another consideration. We don’t want the browser requesting a whole raft of incomplete URL’s.

Another consideration is specificity. In the above I zero in on the image by including its parent class. This would be just in case there are other images that we do not wish to affect by a general rule such as yours.

If there happened to be other elements with .top-caption or .bottom-caption we could up the ante by specifying the element:

  $('#top-text').keyup(function(e){
    $txt = $(this).val();
    $('h1.top-caption').text($txt);
  });

It’s moot, here, but as your project grows…

Then we could go all out and try our hand at DOM tree traversal. What an experiment that would make. All in the name of learning, mind. The above is rather efficient in real terms.

You see where I’m going with this? There is so much subjectivity in programming that we cannot hope to completely elliminate it from our perspective. Granted, we should limit it, and having a style guide and a best practices guideline are how we can do that, but it is still up to us in the end.

Now is the time to learn the tools and syntax and usage. When it comes time to write for production we don’t want to be held up because there are holes in our knowledge base left there while we were chasing around trying to learn best practices. Focus on the knowledge base, for now and the rest will fall into place.


#6

For the fun of it…

var main = function() {
  var $controls = $('form input');
  var $meme = $('.meme').children();

  $controls.first().blur(function(e){
    $url = $(this).val();
    $meme.first().attr('src', $url);
  });

  $controls.eq(1).keyup(function(e){
    $txt = $(this).val();
    $meme.first().next().text($txt);
  });

  $controls.last().keyup(function(e){
    $txt = $(this).val();
    $meme.last().text($txt);
  });
};
 
$(document).ready(main);

Step 4 - check my syntax please
#7

Thanks for your responses and advice, everyone. I’m still in the mode of looking for the ‘one perfect answer,’ when, in fact, it doesn’t exist. As long as it’s clean and works, it’s good. Thanks for helping me understand the right mindset in addition to increasing my knowledge :slight_smile:


#8

That, in fact would be the last sentiment I would have. As long as it works, it’s a start. ‘Good’ does not come into it. Every version we write is a model from which we can gain perspective and insight. Next we set out to break it. Whatever survives, persists. It’s a long road.


#9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.