Intermediate JavaScript

06.18.18 ∙ GDI MPLS ∙ Amy Gebhardt
Wifi
Network: training
Password: classroom
Slides: https://gdiminneapolis.github.io/intermediate-js/class-three.html
Project Files: https://tinyurl.com/yd9bo3y6

Welcome Back!

You belong here.

Expectations

Review
Vanilla JavaScript is ugly
Define library and framework
Learn how to research, implement, and use a library
Hear what the "cool" kids are using these days
Do some cool stuff with jQuery (today!)

get excited.

Remember this?


            

        


    


      


        
jQuery


        


        

            It's already in your project's lib directory!
        


        


        

            Include a reference in a script tag
in the head
            of your index.html.
        


    


    


        
Selecting DOM elements is way easier.


        

            

            

        


        

            

            

        



    


    


        
Getting the content of an element is easy, too.


        

            

            

        


        

            

            

        


    


    


        
Let's try it!


        


        

            Add the following DOM elements to your index.html
        


        

            

            

        


    


    


        
Let's try it!


        


        

            Using jQuery selectors and the text() function,
            display the first name and the_best interest in an alert() box.
        


    


    


        
Just like with vanilla JavaScript,
you set text() and html() too.


        

            

            

        


    


    


        

            Adding and removing classes makes a lot more sense.
        


        

            

            

        


        


        

            And changing inline styles is easy, too.
        


        

            

            

        


    


    


        

            The best part? event handlers.
        


        

            

            

        


    


    


        
Let's try it!


        


        

            When last_name is clicked, change
the size of the text to 100pt.
        


    


    


        
Showing/Hiding Elements


        

            

            

        


    


    


        
Let's try it!


        


        

            When the h1 is clicked, toggle the

            visibility of the ul list.
        


        


        

            Hint: check out jQuery's slideToggle() http://api.jquery.com/slidetoggle/
        


    


    


      
Building an
interactive form


  


  


      
Here's what we're building:

      https://gdiminneapolis.github.io/intermediate-js/form-example/demo.html

  


  


      
You need to know how to read documentation and find answers on your own.


  


  


      
Your new project files:


      


      

          index.html

          Has a whole bunch of new DOM elements already made for you
      


      


      

          styles.css

          Has all of the styles you'll need for the form and is already linked to in index.html
      


      


      

          scripts.js

          Is already linked to in index.html (along with jQuery in your lib directory)
      


      


      

          All of your steps can be found in the comments of the form/scripts.js file.
      


  


  


    

  


  


      
Thanks for coming!


      


      

          We love your feedback!
      


      

          https://goo.gl/forms/98nIDJepzBajGDt13
      


      


      

          Take the survey before you go, and you'll have a chance to win a prize!