jQuery Unit 6 Projects "Forecast"


#1

I'm stuck at step 4:

When a .day div is clicked, change the element to be a minus sign by toggling the class glyphicon-minus. Use .find() the element inside the .weekday div.

This is my code so far.

var main = function() {
  
};

$(document).ready(main);

$('.day').click(function() {
        $('.hourly').toggle('slow')
        $('.glyphicon-plus').toggle(function(
        		find(
                                    };
        });

What do I need to do?


#2

@textrockstar34699,
Could you also provide the HTML-code
you are using....


#3

Here is the html from the project. It is unchanged from what was provided.

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link rel='stylesheet' href='style.css'/>
  
  </head>
  <body>
    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-offset-7">
            <h1>70&deg;</h1>
            <h2>5-day forecast</h2>
            <div class="forecast">
              
              <div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>today</p>
                </div>
                <div class="weather col-xs-3">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg">
                </div>
                <div class="weather col-xs-1">
                </div>
                <div class="high col-xs-2">
                  <p>68&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>37&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">44&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">68&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">59&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">46&deg;</p>
                </div>
              </div>


              <div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>tomorrow</p>
                </div>
                <div class="weather col-xs-4">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg">
                </div>
                <div class="high col-xs-2">
                  <p>68&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>37&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">44&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">68&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">59&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">46&deg;</p>
                </div>
              </div> 


              <div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>wednesday</p>
                </div>
                <div class="weather col-xs-4">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/rain.svg">
                </div>
                <div class="high col-xs-2">
                  <p>46&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>14&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">38&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/rain.svg"></p>
                  <p class="temp">44&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/rain.svg"></p>
                  <p class="temp">32&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">19&deg;</p>
                </div>
              </div>


              <div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>thursday</p>
                </div>
                <div class="weather col-xs-4">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg">
                </div>
                <div class="high col-xs-2">
                  <p>46&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>28&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">20&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">38&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">34&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">31&deg;</p>
                </div>
              </div>


              <div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>friday</p>
                </div>
                <div class="weather col-xs-4">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg">
                </div>
                <div class="high col-xs-2">
                  <p>59&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>32&deg;</p>
                </div>
              </div>
              <div class="hourly last row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">38&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">56&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">45&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">40&deg;</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

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

#4

@textrockstar34699,
Could you provide the CSS data from the style.css file...


#5
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  color: #211f1e;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/2/forecast/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
  height: 100%;
}

.main {
  height: 100%;
}

.container {
  position: relative;
  padding-top: 100px;
  min-height: 100%;
}

h1 {
  font-family: "HelveticaNeue-UltraLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 80px;
  font-weight: normal;
  margin: 0;
  text-align: right;
}

h2 {
  border-top: 1px solid #211f1e;
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0 40px 0;
  padding: 30px 0 0 0;
  text-align: right;
}

.day {
  cursor: pointer;
}

.day > div {
  line-height: 48px;
}

.weekday span {
  font-size: 10px;
}

.weekday p {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

.weather img {
  width: 48px;
}

.high p,
.low p,
.hourly .temp {
  font-size: 16px;
}

.hourly {
  text-align: center;
  display: none;
}

.hourly .hour {
  font-weight: bold;
  font-size: 16px;
}

.hourly img {
  width: 24px;
}

.hourly p {
  margin: 16px 0;
}

.last {
  margin-bottom: 100px;
}

@media (max-width: 720px) {
  .container {
    background: rgba(255,255,255,0.8);
  }
}


`

#6

@textrockstar34699,
First you have to understand that
if your Browser =loads= this HTML-document
your Browser will create a memory layout
using the rules as described in the Document Object Model in short the DOM

           html
            |
     +- - - +- - - - - - - - - - -+
     |                            |
    head                         body
     |                            |
     |              + - - - - - - + - -+ - - - - - +
 +---++----+       div (.main)        proc        proc
 |    |    |        |                jQuery       Your
link link link     div (.container)             script.js
-google-Css-font    |
-bootstrap.css     div (.row)
-your               |
  style.css        div (.col-sm-5 .col-offset-7)
                    |
          + - - -+ -+ -+
          |      |     |
          h1     h2   div (.forecast)
                       |
 + - - -+ . . . . + - -+-+ . . . . + - - -+ . . . . + - - -+ . . . . + - - -+ 
div    div       div    div       div    div       div    div       div    div  
(.day  (.hourly  (.day  (.hourly  (.day  (.hourly  (.day  (.hourly  (.day  (.hourly  
 .row)  .row)     .row)  .row)     .row)  .row)     .row)  .row)     .row)  .row)

As you can see
the forecast-div has 10 children
which you can see as 5 pairs of [ div.day , div.hourly]

                                        div (.day
                                         |   .row)
                                         |
   +- - - - - - - - - + - - - - - - -+ - + - - - - - + - - - - - - -+
  div(.weekday       div(.weather   div(.weather    div(.high     div(.low
   |  .col-xs-4       |  .col-xs-3)     .col-xs-1)   |  .col-xs-2) |  .col-xs-2)
 + + - - - - - - -+  img                             p             p
 |                |
span              p
(.glyphicon-plus)

       div(.hourly
        |  .row)
+ - - - + - - - 4x ->->->
|               |
div            div(.col-xs-2)
 .col-xs-4      |
                |
          + - - + - -+ - +
          |          |   |
          p(.hour)   p   p(.temp)
                     |
                    img

#7

@textrockstar34699 Hi,
All of your code is fine just your brackets are a bit off
Remember after a function you have { }

see below :arrow_down: should be like this

$('.glyphicon-plus').toggle(function(){ //opening function
    find();   
        }); //closing second function
        }); // closing first function

#8

@textrockstar34699,

                                        div (.day
                                         |   .row)
                                         |
   +- - - - - - - - - + - - - - - - -+ - + - - - - - + - - - - - - -+
  div(.weekday       div(.weather   div(.weather    div(.high     div(.low
   |  .col-xs-4       |  .col-xs-3)     .col-xs-1)   |  .col-xs-2) |  .col-xs-2)
 + + - - - - - - -+  img                             p             p
 |                |
span              p
(.glyphicon-plus)

The Instruction:

  • When a .day div is clicked,
    $('.day').click( function () { });
    we now have a $(this) which is a jQuery-Selection-Object
    containing all HTML-Elements which are it's descendants

  • change the element to be a minus sign
    by toggling the class glyphicon-minus.
    Meaning we will have to do a
    http://getbootstrap.com/components/#glyphicons
    removeClass("glyphicon-plus") and subsequent addClass("glyphicon-minus")
    From http://api.jquery.com/toggleclass/
    we are going to use, though a bit modified

    $( selector ).toggleClass(function() {
      if ( $( this ).is( ".glyphicon-plus" ) ) {
        return "glyphicon-minus";
      } else {
        return "glyphicon-plus";
      }
    });
  • Use .find() the element inside the .weekday div.
    In the diagram you can see that
    it is the span-Tag which is carrying the class-attribute glyphicon-plus
    and the span-Tag is a =child= of the weekday-div

    $('.day').click( function () {
        $(this).children('.weekday')
        // we now have the =span=-Tag AND the =p=-Tag
     });

Given a jQuery object that represents a set of DOM elements,
 the .find() method 
  allows us to search 
   through the descendants of these elements in the DOM tree
 and construct a new jQuery object from the matching elements.

Thus

$('.day').click( function () {
    $(this).children('.weekday').find("span")
    // we now have the =span=-Tag on which we have to =toggle=
 });

Thus

$('.day').click( function () {
    $(this).children('.weekday').find("span").toggleClass(function() {
               if ( $( this ).is( ".glyphicon-plus" ) ) {
                   return "glyphicon-minus";
               } else {
                   return "glyphicon-plus";
               }
             });
});

We pack this jQuery-code in a =main= FUNCTION
like

var main = function () {
$('.day').click( function () {
    $(this).children('.weekday').find("span").toggleClass(function() {
               if ( $( this ).is( ".glyphicon-plus" ) ) {
                   return "glyphicon-minus";
               } else {
                   return "glyphicon-plus";
               }
             });
});
};

and we are going to execute this =main= function
as soon as the Browser has set the ready-Event-flag
indicating that it is safe to manipulate DOM-Elements
using

$(document).ready(main);

Conclusion

in your script.js file put

var main = function () {
$('.day').click( function () {
    $(this).children('.weekday').find("span").toggleClass(function() {
               if ( $( this ).is( ".glyphicon-plus" ) ) {
                   return "glyphicon-minus";
               } else {
                   return "glyphicon-plus";
               }
             });
});
};
$(document).ready(main);

#9

Pretty heavy-duty stuff!

It seems that the code exposes all the child divs rather than only the child divs of the clicked day. So I guess I'm not targettign the correct thing.

Thanks for all this. I will re-read all this and hopeflly it will sink in.


#10

Hi Leon:

Where can I find the code to generate the DOM trees that you exposed here?


#11

@textrockstar34699
I did by hand, creating a what you see as a result...


#13

Okay for anyone else who was confused immensely by the explanations in this and wants another solution/explanation that might be similar, here is my work.

var main = function() {
  $('div.day').click(function() {
//We start by setting up a basic click function for div.day.
    $(this).next().toggleClass();
//The next row we target the .hourly class by using the ".next()" modifier combined with
//"this", which will target the first child of 'div.day' (in this case, '.hourly'). 
//Then we use .toggleClass() to toggle that div on/off every time we click it.
    $(this).find('span').toggleClass('glyphicon-minus');
//Final line, we know that 'span' is somewhere inside of every div with the class of 
//"day" ('div.day'). So we just use (this) again, and combine it with .find('span') to
// isolate our target, which is the span within every .day div. Then we use toggleClass 
//to add/remove a class of "glyphicon-minus' to our span every time that div.day is clicked.
  });
};

$(document).ready(main);

Hopefully that makes more sense to people, I know that this thread confused the ■■■■ out of me at first and I think the solution I found makes it more condensed and easier to understand.

If you want to know how I found the keywords to use like the ".next()" function, "glyphicon-minus" class, etc, I just used google and the jquery databases that you can find online.


#14

hi there. excellent explanation. thanks for saving my hours


#15