| .racer_table td { | |
| height: 200px; | |
| width: 200px; | |
| border: 3px solid black; | |
| } | |
| .racer_table td.active { | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| #player1_race td.active { |
| // 1. Create an object that has four properties. One property should be set so that the value is a number, another property set to a string, the third to an array, and the fourth to a function. This function should simply console.log the value of the first property. | |
| const obj = { | |
| num: 1, | |
| string: 'string', | |
| array: [1,2,3], | |
| func: function() { | |
| // remember that arrow functions don't work with this keyword | |
| console.log(this.num) | |
| } |
| const array = [ 1, 2, 3, 1, 2, 3 ] | |
| const uniq = array.filter(function(element, i) { | |
| return array.indexOf(element) === i | |
| }) | |
| console.log(uniq) | |
| // => [ 1, 2, 3 ] |
| var findAndUpdate = function(personName, done) { | |
| // need a bit more clarification on what the done function is actually doing | |
| var ageToSet = 20 | |
| const person = Person.findOneAndUpdate({name: personName}, {age: ageToSet}, {new: true}, function(err, data){ | |
| if (err) { | |
| return done(err) | |
| } | |
| else { | |
| return done(null, data) | |
| // why do we pass null as the first argument in the success method call |
use the following two arrays to console.log the lyrics of the twelve days of christmas
hint: use a for loop within a for loop
const days = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth", "eleventh", "twelfth"];
const gifts = [
Bootstrap is a CSS library that allows you to quickly make your front end look pretty 🌈. It was built by Twitter so you'll notice that many of the components in Bootstrap (like the buttons) look like components on Twitter itself.
The crux of Bootstrap is that it's a plain old CSS stylesheet already written for us! We can chuck it into cleancss to actually get something readable or we can just read the docs to learn about how to apply some of these rules.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | |
| <style> | |
| .wrapper { |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <style> | |
| .wrapper { | |
| max-width: 700px; |
| babel examples | |
| typing out normal html gives us back a React.createElement in the polyfill | |
| ReactDom.render takes only one parent component, can't pass in multiple parents, pass in one parent (usually as a <div> with multiple children) | |
| moving the navbar logic into a seperate component, we would want to reuse that navbar over and over again | |
| stateless functional components, returning navbar in a function, returning something on different lines we wrap them in parenthesis |
| import React, { Component } from 'react' | |
| class Animal extends Component { | |
| constructor(props) { | |
| super(props) | |
| } | |
| clickAnimal() { | |
| this.props.updateCount(this.props.name) | |
| } |