Armando Perez project task #2, need help


#1

Hello,

I am having issues with this task:

In app.js, when a nav

  • is clicked, its class is retrieved using .attr() and saved into the variable category. If category is "nav-consumer", first select all the .thumbnail elements and remove the class selected. Then select all the .consumer elements, and add the class selected.

    This code is supposed to highlight borders of the img's like in the website: https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/index.html

    Here is my code in app. js

    var main = function() {
    $('.nav li').click(function() {
    var category = $(this).attr('class');

    $('.nav li').removeClass('active');
    $(this).addClass('active');

    if(category == ".nav-consumer") {
    //select all thumbnail elements and remove class selected
    $('.mobile thumbnail, .commerce thumbnail, .enterprise thumbnail').removeClass('.selected');
    $('.consumer thumbnail').addClass('.selected');

    };

    });
    };

    $(document).ready(main);

    ***Here is the HTML:**












    Armando Pérez



            <ul class="nav nav-pills">
              <li class="nav-all active"><a href="#">All</a></li>
              <li class="nav-consumer"><a href="#">Consumer</a></li>
              <li class="nav-mobile"><a href="#">Mobile</a></li>
              <li class="nav-commerce"><a href="#" >Commerce</a></li>
              <li class="nav-enterprise"><a href="#">Enterprise</a></li>
            </ul>
    
          </div>
        </div>
      </div>
    </div>
    
    <div class="main">
      <div class="container">
        
        <div class="row">
          <div class="col-md-4">
            <a class="consumer thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p1.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="enterprise thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p2.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="consumer thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p3.jpg">
            </a>
          </div>
        </div>
    
        <div class="row">
          <div class="col-md-4">
            <a class="commerce thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p4.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="enterprise thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p5.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="mobile thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p6.jpg">
            </a>
          </div>
        </div>
    
        <div class="row">
          <div class="col-md-4">
            <a class="mobile thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p7.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="commerce thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p8.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="mobile thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p9.jpg">
            </a>
          </div>
        </div>
      </div>
    </div>
    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src="app.js"></script>



  • #2

    @capozzic,
    -1
    You will have to change

    removeClass('.selected');
    addClass('.selected');

    into

    removeClass('selected');
    addClass('selected');

    as the removeClass() and addClass() expects a class-name

    -2
    You are developing for =desktop= as you use .col-md ??

    ++ bootstrap
    http://getbootstrap.com/getting-started/
    http://getbootstrap.com/2.3.2/components.html
    We now have .col-xs (phones), .col-sm (tablets), .col-md (desktops), and .col-lg (large desktops)

    -3
    To have a complete HTML-code
    Please re-edit your Post

    • leave one blank-line above of your code
    • select your code in the Post
    • then =click= on the </>-symbol-of-this-editor

    Your code will then be in a pre-code state
    and you will be able to make/present the proper indentations.

    or even better use
    = http://discuss.codecademy.com/t/using-backticks-to-format-your-code/3697
    [extra's]
    https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet


    #3

    The wording is so freaking confusing. Is like a 3 years old has written the instruction. The class selected should be written in quotes - "selected".

    Then check out the instruction at number 3:

    > Else if category is "nav-mobile", select all the .thumbnail elements and remove the class selected; then select all the .mobile elements and remove the class selected.

    What's wrong with it??? 1000 points for the one who see it!!!


    #4

    Wouldn't this be the correct syntax?

    $('.thumbnail').removeClass('selected');
    $('.consumer').addClass('selected');


    #5

    It is so so confusing.

    I can't tell if I need to make the class that adds the red border to the thumbnails myself or "selected " is the name of the class that i should add.

    I'm still stuck on it because of the unclear instructions.


    #7

    This topic is inactive.