Created
September 17, 2021 02:43
-
-
Save natafaye/8cc56e7caaca1f4ac05d1221b0545de3 to your computer and use it in GitHub Desktop.
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 { | |
| margin: 0; | |
| background-color: #fafafa; | |
| font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; | |
| } | |
| button { | |
| border: 0; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-left: 15px; | |
| } | |
| button:hover { | |
| background-color: #a1a1a1; | |
| } | |
| button.bg-green { | |
| background-color: #557213; | |
| color: white; | |
| } | |
| button.bg-green:hover { | |
| background-color: #43580f; | |
| } | |
| /***** Navbar *****/ | |
| nav.navbar { | |
| background-color: #4F5D61; | |
| color: white; | |
| padding: 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| nav.navbar ul { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| } | |
| nav.navbar ul li { | |
| margin: 0 15px; | |
| } | |
| nav.navbar a { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| /***** Rows *****/ | |
| .row { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| margin-bottom: 20px; | |
| } | |
| .jumbo { | |
| background-image: url(images/chair.jpg); | |
| background-size: cover; | |
| height: 500px; | |
| overflow: hidden; | |
| } | |
| .jumbo h2 { | |
| color: #4F5D61; | |
| opacity: 0.9; | |
| font-size: 4rem; | |
| margin: 20px; | |
| background-color: #fafafabb; | |
| width: 270px; | |
| padding: 15px; | |
| border-radius: 10px; | |
| } | |
| /***** Footer *****/ | |
| footer { | |
| background-color: #C2B8AD; | |
| padding: 15px; | |
| } |
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chairs</title> | |
| <link rel="stylesheet" href="week2.css"> | |
| </head> | |
| <body> | |
| <nav class="navbar"> | |
| <div>Chairs</div> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <div class="container"> | |
| <div class="row jumbo"> | |
| <h2>This is a catchy sentence about chairs</h2> | |
| <button class="bg-green">See More</button> | |
| </div> | |
| <div class="row"> | |
| <div> | |
| <p>And here is some more</p> | |
| <button>See More</button> | |
| </div> | |
| <div> | |
| <p>Text about nothing</p> | |
| <button>See More</button> | |
| </div> | |
| <div> | |
| <p>To take up space</p> | |
| <button>See More</button> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <p>Mauris id hendrerit libero. Nunc pulvinar lorem at ligula sodales | |
| suscipit ut vitae nisi. Proin nec eleifend nisi. Mauris augue quam, | |
| semper et orci sed, rutrum luctus tortor. Donec tincidunt ex a nibh | |
| euismod luctus. Sed facilisis metus at tortor sollicitudin, ac | |
| suscipit risus hendrerit. Proin justo justo, consequat in maximus a, | |
| rhoncus eget turpis. Morbi ac tellus nisi. Duis nisi odio, blandit | |
| vitae risus ut, aliquet fermentum massa. In id velit vestibulum, | |
| consequat mauris a, tincidunt felis. Cras dui sapien, faucibus id | |
| semper vel, malesuada sit amet dui. Suspendisse finibus, dolor sed | |
| fringilla condimentum, diam eros sagittis lectus, non aliquam nisl | |
| nisi vitae nisl. Aliquam dictum, arcu eu scelerisque mollis, libero | |
| nisi tempor magna, sit amet dictum leo nunc eget mauris.</p> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="row"> | |
| Copyright 2021 | |
| </div> | |
| </footer> | |
| </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
| // An array of objects | |
| let animals = [ | |
| { | |
| id: 0, | |
| type: "cat", | |
| name: "Floof", | |
| votes: 0 | |
| }, | |
| { | |
| id: 1, | |
| type: "dog", | |
| name: "Spot", | |
| votes: 0 | |
| }, | |
| { | |
| id: 2, | |
| type: "cat", | |
| name: "Max", | |
| votes: 0 | |
| }, | |
| { | |
| id: 3, | |
| type: "elephant", | |
| name: "Elle", | |
| votes: 0 | |
| } | |
| ] | |
| /**** Find ****/ | |
| function getAnimalWithId(id) { | |
| let animalWithId; | |
| // We could use a for loop: | |
| for(let animal of animals) { | |
| if(animal.id === id) { | |
| animalWithId = animal; | |
| } | |
| } | |
| // We could use a normal function: | |
| animalWithId = animals.find(function(animal) { | |
| return animal.id === id; | |
| }) | |
| // But most commonly experienced developers will write it like this: | |
| animalWithId = animals.find(a => a.id === id) | |
| } | |
| // We could get the animal with the id of 2 | |
| const animalWithId2 = getAnimalWithId(2); | |
| /**** Map ****/ | |
| const animalNames = animals.map(animal => animal.name) | |
| // animalNames will contain this array: | |
| // [ | |
| // "Floof", | |
| // "Spot", | |
| // "Max", | |
| // "Elle" | |
| // ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment