Morning:
Afternoon:
contenteditable - MDN documentation> combinator - child selector+ combinator - adjacent sibling selector):first-child pseudo-class selector:last-child pseudo-class selectorconstructor functioncontentEditablecontentEditable is a property that, like the name suggests, allows the content of an HTML element to be edited through user interaction with the DOM (similar to a text input field).
<div class="person-name">Mark</div>
<button>Click to Edit Name</button>
const nameDiv = document.querySelector('.person-name')
console.log(nameDiv.isContentEditable) // => false
const button = document.querySelector('button')
button.addEventListener('click', (ev) => {
nameDiv.contentEditable = true
console.log(nameDiv.isContentEditable)
})
button.click() // => true (and div content will be editable)
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
Categorize stuff! Separate flicks into genres, or separate movies from TV shows! Make a whole new thing with categories, like messages separated into channels! Use your tremendous creativity! Exclamation point!
Or heck, just make separate lists based on the second input field you added in the weekend homework!
Add a search field, and only show the results that match the search criteria. Here are some things you may wish to use while implementing search:
Array.prototype.find() (very similar to findIndex())HTMLElement.dataset (remember those IDs we stored?)display: none (Heck, you could add a class that includes this rule, and add and move that class from elements you wish to hide.)