With our current tool set, the code we write is hard to keep organized. The ideas can get lost and hard to maintain going forward
Use code paradigm to help give us guidelines to organize our code
When we have an entity (a thing) inside our system (our webpage) that has both functionality and properties
class Cat {
constructor (name) {
this.name = name
}
meow () {
return this.name + ' goes meow'
}
}
const main = () => {
const _mine = new Cat('Iroh')
console.log(_mine.meow())
}
class Cat {
constructor (name) {
this.name = name
this.happiness = 0
}
speak () {
if (this.happiness > 5) {
return 'purrrrr'
} else if (this.happiness >= 0) {
return this.name + ' goes meoow'
} else {
return 'hiss'
}
}
chase () {
this.happiness -= 3
}
eat () {
this.happiness++
}
pet (location) {
if (location === 'behind ears') {
this.happiness += 2
} else if (location === 'mouth') {
this.happiness -= 1
} else if (location === 'butt') {
this.happiness += 3
}
}
}
const myCat = new Cat('Ozai')
// add 2 to happiness
myCat.pet('behind ears')
// add 3 to happiness
myCat.pet('butt')
// add 1 to happiness
myCat.eat()
// will print out "purrrr"
console.log(myCat.speak())
class ErrorMessageList {
constructor (parentSelector) {
this.parent = document.querySelector(parentSelector)
}
addMessage (message) {
const msg = document.createElement('p')
msg.textContent = message
this.parent.appendChild(msg)
}
}
// somewhere else
const list = new ErrorMessageList('.errors')
list.addMessage(message)