Remember Superwars stage 1? However, here is a quick recap of things.
Dustin and Lucus are best friends. They spend their weekends watching superhero series and playing superhero games. One Friday at school Mr.Hooper, their computer science faculty taught them HTML, CSS, and JavaScript. Dustin & Lucus realised they could build super cool super hero stuff using their knowledge.
The subsequent weekend, they decided to do it. Lucus and Dustin are now all set to build something super cool.
Lucus always loves protagonists like most of us. But Dustin is quite crazy, he likes antagonists. So they decided to collect a bunch of their favorite Super Heroes and Super Villains names along with their pictures. Did they tell you about the game that they are gonna build?
Okay, let us explain. They are going to facilitate the ultimate war between Super Heroes and Super Villains. As they are new to these technologies, they need a ProGrad to help them build this game.
Fork this repo
Clone this repo
Practice JavaScript Basics - Operators, Conditions, Loops
Upon completion, run the following commands:
git add .
git commit -m "ProGrad ID"
git push origin master
And finally, create a pull request so your ProGrad Mentor (PM) can review your work.
The src/app.js
contains an array of 20 Super Heroes and Super-Villains. We are talking about the array of 20 strings containing each Super Heroes and Super-Villains names. Here is one example of how the data is displayed:
[
"Spiderman"
]
Open the SpecRunner.html
file on your browser and start coding to pass the test. Remember to focus on one test at a time and read carefully the instructions to understand what you have to do.
Dustin and Lucus wants to create players.In initPlayers()
, loop through passed constant and create JSON Objects, such that each player contains name, strength, image url and type.
- Use default
strength
as any number. image
can be sequential i.e. "images/super-"+(i+1)+".png"type
of player can alternating between hero and villain or your own logic- It should return an array of player objects.
[ { name:"Super Man", strength:100, image:"images/hero-1.png", type:"hero|villain" } ]
Add your logic in getRandomStrength()
method, such that it should return a random strength from 1 to 100. The strength is what is gonna decide the winner.
In buildPlayers()
, loop through the created JSON objects and accumulate HTML template as below and return HTML element.
<div class="player">
<img src="${players[i].image}">
<div class="name">${players[i].name}</div>
<div class="strength">${players[i].strength}</div>
</div>
Happy Coding ProGrad ❤️