https://github.com/bankole2000/booklist
Simple Booklist with ES5 & ES6 Classes
https://github.com/bankole2000/booklist
classes constructor dom es5 es6 events localstorage objects prototype
Last synced: 12 months ago
JSON representation
Simple Booklist with ES5 & ES6 Classes
- Host: GitHub
- URL: https://github.com/bankole2000/booklist
- Owner: Bankole2000
- Created: 2019-02-05T00:55:54.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-18T14:39:24.000Z (about 7 years ago)
- Last Synced: 2025-04-09T18:13:28.817Z (12 months ago)
- Topics: classes, constructor, dom, es5, es6, events, localstorage, objects, prototype
- Language: JavaScript
- Homepage: https://bankole2000.github.io/booklist/
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# The BookList
[]()
A simple project to demonstrate syntactical differences between ES5 and ES6 classes - [View Demo](https://bankole2000.github.io/booklist/)
## What it is
Its a simple book list app using ES5 constructors vs ES6 classes. built with:
* HTML
* Vanilla JS - ES5 & ES6
* [Skeleton CSS]() - Minimalist light-weight CSS framework
* [Understanding]() - Mindfulness + Comprehension
## Learning Points
* ES5 Constructors and Prototypes
* ES6 Classes
* DOM Manipulation & Traversal
* Event Handing & Delegation
* Local Storage Object Methods
## The gist of it
Constructors and Prototypes in ES5
```javascript
function Book(prop1,prop2){
this.prop1 = prop1;
this.prop2 = prop2;
} // Constructor with properties
Book.prototype.someMethod = function(arg){
// prototype method
}
const book = new Book(value1, value2); // Instantiate
ui.someMethod(arg); // Use prototype method
```
Here's the same thing but with ES6 classes
```javascript
class UI {
constructor(prop1,prop2){
this.prop1 = prop1;
this.prop2 = prop2;
}
someMethod(arg){
// prototype method
}
static someStaticMethod(){
// a Static prototype method
}
} // props & methods neatly in class
const book = new Book(prop1, prop2)
```
_sweet sweet syntactical sugar_
But either way is good to go really.
## Acknowledgements
* Special thanks to [@bradtraversy](https://github.com/bradtraversy) for his sheer awesomeness - _Gomenasai Sensei sama_
* And Lord [@torvalds](https://github.com/torvalds) - Lord and Master of Open source.
* And you, ofcourse, for bothering to read this... bro fist!
_
"Adieu, while I meditate on these things. May the `git push --force` be with you"_
