Morning:
Afternoon:
bind()bind() on MDNbind function blog post by Krasimir TsonevlocalStorage ↓localStorageJSON.stringify
JSON.stringifyJSON.parse
JSON.parseconstructor function.cloneNodeSometimes it may be easier to clone an existing node rather than build an entirely new one, especially if the markup is complex. In our ‘Tatum Tots’ project, we kept a hidden li in the DOM that we cloned every time we needed to render a new list item.
<li class="flick grid-x align-middle template">
<span class="flick-name cell auto">sdfkjhgds</span>
<span class="actions button-group cell shrink">
<button class="fav button warning">fav</button>
<button class="remove button alert">del</button>
</span>
</li>
/* hides any 'li' with a 'template' class */
li.template {
display: none;
}
const list = document.querySelector('ul')
const templateItem = document.querySelector('li.template')
// Make a copy of the templateItem
// Pass 'true' as an argument to clone all children as well
const newItem = templateItem.cloneNode(true)
// remove 'template' class so it is no longer hidden
newItem.classList.remove('template')
list.appendChild(newItem)
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’ve linked to the CDN or have Font Awesome downloaded and included in your project, use <i> tags with appropriate classes to render the icons you want.
<-- Sample script tag to include Font Awesome in HTML -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<-- Renders a sweet camera icon -->
<i class="fas fa-camera-retro"></i>
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
Do whatever practice is necessary to better understand the topics we’ve covered this week.
Try the official React Tutorial
contentEditable).