Morning:
Afternoon:
localStorage ↓localStorageJSON.stringify
JSON.stringifyJSON.parse
JSON.parse> combinator - child selector+ combinator - adjacent sibling selector):first-child pseudo-class selector:last-child pseudo-class selectorArray.prototype documentation on MDNreverse()find() - MDN | w3schoolsfindIndex() - MDN | w3schoolsconstructor function$0-$4 (official docs)localStorage is storage in your web browser that conforms to Web Storage API. It is scoped by domain, meaning other websites cannot access data stored by your website and vice versa. The data in localStorage persists in the browser until removed, even if the browser is closed and re-opened.
To set an item, use localStorage.setItem, and retrieve data using localStorage.getItem. It is important to remember that values stored will always be strings, so it may be use necessary to use the JSON.stringify and JSON.parse methods to set and retrieve non-string data. JSON stands for JavaScript Object Notation. To learn more about JSON, click here.
const myObject = {
thisIsCool: true
}
localStorage.setItem('myObject', myObject)
localStorage.getItem('myObject') // => "[object Object]"
// localStorage saves the result of the implicit myObject.toString() call
localStorage.setItem('myObject', JSON.stringify(myObject))
// calling JSON.stringify converts the object to a JSON string representation
// so it can be stored in localStorage without loss of data
const retrievedObject = localStorage.getItem('myObject') // => "{"thisIsCool":true}"
JSON.parse(retrievedObject) // => {thisIsCool: true}
// JSON.parse converts the retrieved JSON string back into a JavaScript object
Font Awesome provides hundreds of vectorized, professional-looking icons for free. Once you have the Font Awesome stylesheet downloaded and included in your project, use <i> tags with appropriate classes to render the icons you want.
<-- Sample link tag to include Font Awesome in HTML -->
<link rel="stylesheet" href="css/font-awesome.min.css"><i>
<-- Renders a sweet camera icon -->
<i class="fa fa-camera-retro"></i>
<div>
<p>paragraph one</p>
<p>paragraph two</p>
<p>paragraph three</p>
</div>
<p>paragraph four</p>
p:first-child {
/* selects any paragraph that is the first child of its parent (paragraph one) */
}
p:last-child {
/* selects any paragraph that is the last child of its parent (paragraph three) */
}
div > p {
/* selects any paragraph that is a child of a div (paragraphs one, two, and three) */
}
JavaScript is not a class-based language like C++, Java, or Ruby. It uses prototypal inheritance instead. However, as of ES2015, the class keyword was added to the language to provide a more concise syntax and similarity to popular class-based languages.
A class is essentially a constructor of Objects. Methods and properties in the class will be inherited by each object that is constructed by the class. Object instances are created by using the new keyword. Classes have a constructor method, which is called when instances are created and allows for configuration of the object.
class Dog {
constructor() {
this.furColor = 'brown'
}
bark() {
console.log('WOOF')
}
}
const bowser = new Dog();
bowser.furColor // => 'brown'
bowser.bark() // => 'WOOF'
Classes can also inherit from another class. Inheritance is specified using the extends keyword. When a class inherits from another, it has access to the methods and properties of both classes, although if both classes implement the same property or method, the child class will take precedence.
class Animal {
constructor() {
this.furColor = 'brown'
}
speak() {
console.log('Some sort of noise')
}
}
class Dog extends Animal {
constructor() {
this.furColor = 'black'
}
bark() {
console.log('WOOF')
}
}
const bowser = new Dog()
bowser.furColor // => 'black'
bowser.speak() // => 'Some sort of noise'
bowser.bark() // => 'WOOF'
const rodent = new Animal()
rodent.furColor // => 'brown'
rodent.speak() // => 'Some sort of noise'
rodent.bark() // => Uncaught TypeError: rodent.bark is not a function
Have a nice weekend!