Created
December 2, 2016 15:03
-
-
Save Bijesse/9733eb74379188b0a8ebf968f29337a9 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=9733eb74379188b0a8ebf968f29337a9
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Red's Happy Face</title> | |
| </head> | |
| <body> | |
| <main> | |
| <div> | |
| <h1 class="hMood"></h1> | |
| <img class="imgPicture" src="www.fake.com" > | |
| <p></p> | |
| </div> | |
| <div id="dvChange"> | |
| <button class="btnChangeMood">Change Red's Mood</button> | |
| </div> | |
| </main> | |
| <section> | |
| In this project, you are only using JQuery to manipulate the page. | |
| </section> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Directions: move through the steps below using jQuery code. | |
| //Step 1: Import jQuery | |
| // H1 TITLE | |
| // change the header color to red and add an underline | |
| // using the .text() set it to Red's Happy Face | |
| //Image | |
| // using .attr() | |
| // assign src as "https://s-media-cache-ak0.pinimg.com/736x/8e/4e/83/8e4e83ad0b968d50e13da48cf2dad35d.jpg"; | |
| // using .css() | |
| // give a width of 150 and display as block | |
| // change the div using .css() | |
| // create a border with dashed lines and assign it a color | |
| // make a margin bottom border of 75px | |
| // P TEXT | |
| // using the .text() assign it as "Red's Chill Face" | |
| // using css() make the font color red, size 32 and font-weight bolder | |
| // BUTTON | |
| // remove the border around the button div | |
| // make button float right | |
| // BUTTON | |
| // use .mouseenter() tochange the button background color to yellow | |
| // need a hint? try Googling "jquery mouseenter" | |
| // use .mouseleave() | |
| // change button background color to lightgreen | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: white; | |
| } | |
| div { | |
| height: 350px; | |
| width: 300px; | |
| margin-right: 25px; | |
| padding-left: 10px; | |
| } | |
| button { | |
| height: 50px; | |
| background-color: lightgreen; | |
| font-size: 18px; | |
| padding: 0 30px; | |
| } | |
| #dvChange { | |
| height: 100px; | |
| } | |
| main { | |
| display: block; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment