nethravathi-m / project-angular-superwars-array

ProGrad Lab | Superwars Stage 3

Well, in case you forgot the story line, then here it is.

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.

Learning Goals

After this lesson, you will be able to:

• Create a static Angular application with Angular CLI.
• Build an Angular application with components.
• Use maps and filters in your typescript.

Requirements

• Fork this repo.
• Clone this repo.

Submission

Upon completion, run the following commands:

$ git add .
$ git commit -m "done"
$ git push origin master

Navigate to your repo and create a pull request from your master branch to the original repository's master branch.

In the pull request name, add your Prograd id, name, and last name separated by a dash "-".

Deliverables

You need to generate the starter code and fill it with the necessary code to satisfy the requirements described below.

Starter Code

To generate the starter code, follow the steps given below

• To create a new application,
  • Open your ubuntu or cmd terminal and execute the following command
    • ng new app-name
    • for example, ng new super-wars
  • To create a new component, execute the command
    • ng generate component component-name
    • example, ng generate component contacts

How to run

• To run the project go to your ubuntu terminal or VScode editor
  • open the ubuntu or cmd terminal or inside the vscode editor
  • run the command following command
  • ng serve --open or ng serve -o

Progression 1: Keep it simple

In initPlayers(), map pass a constant array and create array of 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,
          img:"images/hero-1.png",
          type:"hero|villain"
      }
  ]
  

Progression 2: Shrink down

In buildPlayers(), instead of using for loop, use chaining of Array methods - filter, map and join to loop through the created array of objects and accumulate HTML template as below and return that HTML template.

<div class="player">
   <img src="${players[i].image}">
   <div class="name">${players[i].name}</div>
   <div class="strength">${players[i].strength}</div>
</div>

Expected Output

Happy Coding ProGrad ❤️