%3D-frontend-yellow.svg){kind=icon}
This is a tiny task for those who are not familiar with Object-Oriented Programing concepts yet. And with JavaScript OOP in particular.
This place can be useful to you if you
- know JavaScript basics
- don't know any OOP or at least JavaScript specific OOP
There is a tiny world inhabited by a dog, a cat, a woman, a man, and sometimes by a cat-woman.
You will be creating a JavaScript model of this world.
-
Fork this repo
-
Clone your fork locally
-
index.jsis what you will work with. Put your code into it. It is also a good practice to work in a dedicated branch, notmaster. So start withcheckout -B populate-worldbefore committing any changes.
- Define objects representing this world inhabitants:
a dog, a cat, a woman, and a man.
- Each inhabitant has legs, hands (optional, naturally), a name, is of certain gender and also can say something relevant, like "meow" or "Hello Jenny!".
- List inhabitants using project built-in
print(message)function. Each list entry should look likehuman; John; male; 2; 2; Hello world!- if inhabitant has no hands then
skip it or report
0orundefined, it is totally up to you
- if inhabitant has no hands then
skip it or report
- Optional: each inhabitant can be friendly to 1 or
more other inhabitants (or to none). If you implement
this then the output should also list friends, i.e.
human; John; male; 2; 2; Hello world!; Rex, Tom, Jenny - Optional: Define an object representing cat-woman.
- cat-woman's saying should be exactly the same as cat's
- whenever you change cat's saying cat-woman's saying should change accordingly, they are strongly tied on some astral level
Read following Keep things simple and Testing your app sections before you start coding.
NB! At this stage you don't need anything beyond what you already know. Do not study any OOP. Anything like example below would work.
const dog = {
species: 'dog',
name: 'Toby',
gender: 'male',
legs: 4,
hands: 0,
saying: 'woof-woof!'
};
// ... other objects ...
print(dog.species + ';' + dog.name + ';' + dog.gender + ';' +
dog.legs + ';' + dog.hands + ';' + dog.saying);
// ... other print-outs ...If you know how to improve the code sample above e.g. employing
#Array.join
or a function that takes an object as an argument
and returns a string to feed to print() then go ahead.
You will have the opportunity to improve your skills later on and your current solution at your current level of knowledge will become a milestone to measure your improvement against. That is the aim of incremental studying process: Do - Learn - Improve
To see how things work just open index.html with your browser.
Press Ctrl-Shift-J in Google Chrome or Mozilla Firefox to see
developer's console for possible errors.
You may want to prettify the output, but try focusing more on code itself.
Doing var object1 = object2 and object2.name='Anny'
results in changing name of object1 to Anny as well?
Click me!
Read about Copying Objects in JavaScript
Once you are happy with your app, or at least id doesn't report any errors in dev console you may consider it to be of release quality and worth merging into master:
git checkout master && git merge populate-world
However proceed with any further changes when on populate-world or
another feature branch, merging into master from time to time.
Push your repo to github.
You may want to publish your world on GitHub Pages. The following commands will help you.
git fetch
git checkout gh-pages
git pull origin gh-pages
git merge master
git push origin gh-pages
git checkout master
The above script updates gh-pages branch from the remote, then
from master, and pushes updated branch to the remote.
Now your world is published at
https://<YourGithubUsername>.github.io/a-tiny-JS-world/
When you want to update your site with latest changes in master
do the following:
git checkout gh-pages
git merge master
git push origin gh-pages
git checkout master
NB! Your project may not be published or updated immediately.
Try refreshing your page in 5 to 10 minutes after pushing gh-pages.
If you want to have your fork published before any changes pushed
(i.e. original gh-pages) then do the following to trigger
publishing:
git push -f origin origin/gh-pages^:gh-pages
git push origin origin/gh-pages:gh-pages
You're done? Congratulations!
Did you like the experience? Grant this repo a ⭐!
-
Navigate to A Tiny JS World root repo worlds list
-
Edit the file
-
Click Edit this file button
-
Copy the very first line in the table, go all way down to the end of the table, insert the copy as the last row in the table, and edit it as appropriate specifying:
- current date as YYYY-MM-DD
- number of objects you created
- number of code lines your object definitions take
- your github nick in square brackets and link to your repository in parentheses
-
Add an extra new line so additions from other contributors do not affect yours.
-
Switch to Preview tab to check if the table still looks nice.
-
-
Submit changes
- Scroll down to Propose file change
- Type "List a tiny JS world by " in commit subject
- Click Propose file change button, then Create pull request and then Create pull request once again to complete.
You are done here!
Please, note that PRs may not be merged very soon. Thank you for your patience.
If you have completed this task as a part of Kottans Front-End Course ask a course mentor or classmates to support you. Check this task intro within the course for instructions.
Otherwise, ask someone to review your code and come up with explanations on how it could be completed with OOP in mind. It is always good to explain yet another approach on some working code.
Keep in mind that this was just a tiny world and whenever you need to build bigger worlds Object Oriented Programming concepts come to your rescue.
Imagine you have to build a big world populated with billions of inhabitants and a great variety of species, and your world project code base will be distributed across many files.
Now, here are the problems.
- How do you create many similar objects?
- How do you add an attribute to all e.g. humans?
- How do you access your world inhabitants across your code base?
- How do you deal with common attributes for multiple species?
- How do you aggregate inhabitants into communities (families, countries etc.)?
- What if you decide to add a family name and want that a person being asked for her or his name would include family name in their response? (And you already have these questions posed in multiple locations across your code base)
In other words how do you make your code scalable?
Object-Oriented Programing (OOP) concepts come to your rescue.
The following will help you to make yourself familiar with OOP and JavaScript OOP.
- How to explain object-oriented programming concepts to a 6-year-old
- Object-oriented JavaScript for beginners
- Object oriented programming in javascript
- Fundamental Object Design Patterns
- Composition over Inheritance
- MDN reference:
- “Super” and “Extends” In JavaScript ES6 - Understanding The Tough Parts How ES6 class syntax maps onto ES5 prototype features.
- ES6 classes cheat snippet
Consider completing Object-Oriented Javascript from Kottans Front-End Course if not yet.
Some extras related to OOP:
If you feel now that you can improve your code being armed with OOP knowledge then go ahead! Don't forget to fix your row in the worlds.md submitting an update PR.
Grats! You've done a great job! You have improved your OOP skills and hopefully feel happier and self-confident.
Your repo fork reflects your progress, so feel free exposing it to whoever might be interested in your learning path proofs.
This repo is dedicated to my elder son Yaroslav who turned 18 on this repo creation date.
This Tiny JS World project wouldn't ever happen without Kottans and awesome Kottans Front-End Course (it's free and initial part is completely remote) I have completed as a student in 2017 and since then have a chance to contribute thus paying back.
Special thanks to Anastasiya Mashoshyna, Yevhen Orlov and other Kottans for the discussion, feedback, and support that resulted in this project creation.