- Notifications
You must be signed in to change notification settings - Fork6.5k
A JavaScript exercise to practice Object Oriented Programming
ironhack-labs/lab-javascript-vikings
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
This exercise allows you to practice and apply the concepts and techniques taught in class.
Upon completion of this exercise, you will be able to:
- Run predefined tests in Jasmine to verify that the program meets the technical requirements.
- Identify expected code behavior by reading and understanding test results and errors.
- Define a
class
and use it to create objects (instances). - Create a subclass that extends a parent class using
extends
andsuper()
to inherit properties and methods. - Define class methods that use the
this
keyword to access object properties. - Add or remove items from an array using the array methods (
push
,pop
,shift
,unshift
, andsplice
). - Iterate over arrays using the
for
andforEach
loops. - Pass values as arguments to functions.
- Use the
return
keyword to return a value from a function.
We have learned Object-oriented programming and howclass
and inheritance work in JavaScript. Now let's work with our Viking friends, applying the concepts we have just learned.
- Fork this repo.
- Clone this repo.
- Upon completion, run the following commands:
git add.git commit -m"Solved lab"git push origin master
- Create a Pull Request and submit your assignment
This LAB is equipped with unit tests to provide automated feedback on your lab progress. In case you want to check the tests, they are in thetests/viking.spec.js
file.
To run the tests and your JavaScript code, open theSpecRunner.html
file using theLive Server VSCode extension.
To see the outputs of theconsole.log
in your JavaScript code, open theConsole in the Developer Tools.
You will work on thesrc/viking.js
file.
Your task is to write the correct code in thesrc/viking.js
file to make the tests pass. In this file, you will find the following starter code:
// SoldierclassSoldier{}// VikingclassViking{}// SaxonclassSaxon{}// WarclassWar{}
Let's have a look at the first test case together to get you started.
The first test case says that "Soldier class >> should receive 2 arguments (health & strength)", so we have to write the correct code to pass this test. Let's make theSoldier
class receive two arguments:
// SoldierclassSoldier{constructor(health,strength){}}// VikingclassViking{}// SaxonclassSaxon{}// WarclassWar{}
Modify theSoldier
class and add 2 methods to it:attack()
, andreceiveDamage()
.
- should receive2 arguments (health & strength)
- should receive the
health
property as its1st argument - should receive the
strength
property as its2nd argument
- should be a function
- should receive0 arguments
- should returnthe
strength
property of theSoldier
- should be a function
- should receive1 argument (the damage)
- should remove the received damage from the
health
property - shouldn't return anything
AViking
is aSoldier
with an additional property, theirname
. They also have a differentreceiveDamage()
method and a new method,battleCry()
.
Modify theViking
class, have it inherit fromSoldier
, re-implement thereceiveDamage()
method forViking
, and add a newbattleCry()
method.
Viking
shouldextendSoldier
- should receive3 arguments (name, health & strength)
- should receive the
name
property as its1st argument - should receive the
health
property as its2nd argument - should receive the
strength
property as its3rd argument
(This method should beinherited fromSoldier
, no need to re-implement it.)
- should be a function
- should receive0 arguments
- should returnthe
strength
property of theViking
This method needs to bere-implemented forViking
because theViking
version needs to have different return values.
- should be a function
- should receive1 argument (the damage)
- should remove the received damage from the
health
property - if the
Viking
is still alive, it should return"NAME has received DAMAGE points of damage" - if the
Viking
dies, it should return"NAME has died in act of combat"
Learn more about battle cries.
- should be a function
- should receive0 arguments
- should return"Odin Owns You All!"
ASaxon
is a weaker kind ofSoldier
. Unlike aViking
, aSaxon
has no name. TheirreceiveDamage()
method will also be different than the originalSoldier
version.
Modify theSaxon
, constructor function, have it inherit fromSoldier
and re-implement thereceiveDamage()
method forSaxon
.
Saxon
should extendSoldier
- You don't have to include a constructor method since this class will inherit perfectly from the parents class, both the health and the strength (it
extends
Soldier class 😉 )
This method should beinherited fromSoldier
, no need to re-implement it.
- should be a function
- should receive0 arguments
- should returnthe
strength
property of theSaxon
This method needs to bere-implemented forSaxon
because theSaxon
version needs to have different return values.
- should be a function
- should receive1 argument (the damage)
- should remove the received damage from the
health
property - if the Saxon is still alive, it should return"A Saxon has received DAMAGE points of damage"
- if the Saxon dies, it should return"A Saxon has died in combat"
Now we get to the good stuff: WAR! OurWar
class will allow us to have aViking
army and aSaxon
army that battle each other.
Modify theWar
class and add 5 methods to itsclass
:
addViking()
addSaxon()
vikingAttack()
saxonAttack()
showStatus()
When we first create aWar
, the armies should be empty. We will add soldiers to the armies later.
- should receive0 arguments
- should assign an empty array to the
vikingArmy
property - should assign an empty array to the
saxonArmy
property
Adds 1Viking
to thevikingArmy
. If you want a 10Viking
army, you need to call this 10 times.
- should be a function
- should receive1 argument (a
Viking
object) - should add the received
Viking
to the army - shouldn't return anything
TheSaxon
version ofaddViking()
.
- should be a function
- should receive1 argument (a
Saxon
object) - should add the received
Saxon
to the army - shouldn't return anything
ASaxon
(chosen at random) has theirreceiveDamage()
method called with the damage equal to thestrength
of aViking
(also chosen at random). This should only perform a single attack and theSaxon
doesn't get to attack back.
- should be a function
- should receive0 arguments
- should make a
Saxon
receiveDamage()
equal to thestrength
of aViking
- should remove dead Saxons from the army
- should returnresult of calling
receiveDamage()
of aSaxon
with thestrength
of aViking
TheSaxon
version ofvikingAttack()
. AViking
receives damage equal to thestrength
of aSaxon
.
- should be a function
- should receive0 arguments
- should make a
Viking
receiveDamage()
equal to thestrength
of aSaxon
- should remove dead Vikings from the army
- should returnresult of calling
receiveDamage()
of aViking
with thestrength
of aSaxon
Since there is a lot of repetitive code in the previous two iterations, methodsvikingAttack() andsaxonAttack(), try to create onegeneric method and call it in the case ofvikingAttack and in the case ofsaxonAttack instead of using almost the same code for both methods. (This iteration doesn't have the test, so ask your TAs and your instructor to give you feedback on the quality of your code after the refactor.)
Returns the current status of theWar
based on the size of the armies.
- should be a function
- should receive0 arguments
- if the
Saxon
array is empty, should return"Vikings have won the war of the century!" - if the
Viking
array is empty, should return"Saxons have fought for their lives and survived another day..." - if there are at least 1
Viking
and 1Saxon
, should return"Vikings and Saxons are still in the thick of battle."
Happy Coding! ❤️
I am stuck in the exercise and don't know how to solve the problem or where to start.
If you are stuck in your code and don't know how to solve the problem or where to start, you should take a step back and try to form a clear question about the specific issue you are facing. This will help you narrow down the problem and come up with potential solutions.
For example, is it a concept that you don't understand, or are you receiving an error message that you don't know how to fix? It is usually helpful to try to state the problem as clearly as possible, including any error messages you are receiving. This can help you communicate the issue to others and potentially get help from classmates or online resources.
Once you have a clear understanding of the problem, you will be able to start working toward the solution.
All of the Jasmine tests are failing and in red. Why did this happen?
One possible reason why all of the Jasmine tests are failing is that there is a syntax error in the code being tested. If the code contains a syntax error, it will not be loaded properly and none of the tests will be able to run. This will cause all of the tests to fail.
To troubleshoot this issue, you will need to examine the code being tested for syntax errors. Look for missing brackets, semicolons, or other syntax issues that could be causing the problem. If you find a syntax error, correct it and try running the tests again.
Another possibility is that there is an issue with the tests. It is possible that you may have modified the test file and caused an issue. If you have made changes to the test file, try copying and pasting the original test file and running the tests again to see if this resolves the issue.
How do I loop over an array using theforEach()
method?
TheforEach()
method executes a provided function once for each array element. It does not return a new array but rather executes the function on each element in the array.
The syntax of theforEach()
method is as follows:
array.forEach(function(element){// code to be executed for each element});
Here is an example that uses theforEach()
method to log each element and its index in an array to the console:
constfruits=['apple','banana','cherry'];fruits.forEach(function(element,index){console.log(`${index}:${element}`);});
You can also use an arrow function as the callback function forforEach()
:
fruits.forEach((element,index)=>{console.log(`${index}:${element}`);});
How do I remove an element from an array?
You should use thesplice()
method to remove an array element at a specified index. Thesplice()
method modifies the original array and returns an array containing the removed elements.
Syntax:
array.splice(start,deleteCount,item1,item2, ...)
start
: The index of the first element to be removed.deleteCount
: The number of elements to be removed.item1, item2, ...
: (optional) The elements to add to the array, starting at thestart
index.
For example, to remove an array element at index2
(which is"c"
):
letnumbers=["a","b","c","d","e"];// Remove 1 element starting at index 2 (removes "c")letremoved=numbers.splice(2,1);console.log(numbers);// Output: ["a", "b", "d", "e"]console.log(removed);// Output: ["c"]
For more information, check:MDN: splice()
How can I extend a class and reuse methods through inheritance?
In JavaScript, you can use theextends
keyword to create asubclass that extends asuperclass (also called a base class).
The subclass inherits methods and properties from the superclass and can also have its own methods and properties.
Here is an example of extending a class and reusing its methods in #"auto" data-snippet-clipboard-copy-content="class Dog { constructor (name) { this.name = name; } bark() { console.log(`${this.name} is barking.`); }}class Labradoodle extends Dog { constructor (name, color) { super(name); this.color = color; }}const dog1 = new Labradoodle("Daisy", "white");dog1.bark(); // Output: "Daisy is barking."">
classDog{constructor(name){this.name=name;}bark(){console.log(`${this.name} is barking.`);}}classLabradoodleextendsDog{constructor(name,color){super(name);this.color=color;}}constdog1=newLabradoodle("Daisy","white");dog1.bark();// Output: "Daisy is barking."
In this example, theLabradoodle
classextends theDog
class and inherits thename
property and thebark()
method. TheLabradoodle
class also defines its own propertycolor
.
When thebark()
method is called on thedog1
object, it uses the methodbark()
coming from theDog
class, because theLabradoodle
class extends theDog
class and inherits its methods and properties.
I am unable to push changes to the repository. What should I do?
There are a couple of possible reasons why you may be unable topush changes to a Git repository:
- You have not committed your changes: Before you can push your changes to the repository, you need to commit them using the
git commit
command. Make sure you have committed your changes and try pushing again. To do this, run the following terminal commands from the project folder:
git add.git commit -m"Your commit message"git push
- You do not have permission to push to the repository: If you have cloned the repository directly from the main Ironhack repository without making aFork first, you do not have write access to the repository.To check which remote repository you have cloned, run the following terminal command from the project folder:
git remote -v
If the link shown is the same as the main Ironhack repository, you will need to fork the repository to your GitHub account first and then clone your fork to your local machine to be able to push the changes.
Note: You should make a copy of your local code to avoid losing it in the process.
About
A JavaScript exercise to practice Object Oriented Programming
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors10
Uh oh!
There was an error while loading.Please reload this page.