Treasure Chest: [Hard - 1000 Points] Angular Skill Builder Competition - Test

This is the 1000 points Hard level problem of Topcoder Skill Builder Challenge: Angular.
For more challenge context info Register for the Host Competition before submitting a solution to this problem.

Treasure Map

This is the HARD Level with 1000 Points Angular Skill Builder Competition

When the treasure hunter went upstairs to the hidden room, he found his grandfather's chest. He burst into joy when he saw more bottles with paper inside them. It’s time to add more potential treasures to the map.   

In this challenge, you need to continue updating the app. You'll expand the Treasure Hunter map to display a list of treasure, and allow users to select a treasure and display the treasure details: location and items.

What do you need to do?

• Learning Material: https://angular.io/tutorial/toh-pt2
• IMPORTANT: Follow the exact naming from challenge descriptions, automated testers will check the exact same values.
• You must follow this submission folder structure so our automated test process can process your scoring
  • You need to submit a zip file
  • The zip file needs to contain “code” folder at the ROOT level
  • Inside the code folder, there needs to be a file named Dockerfile. This is the docker file used to build the user’s submission. Check the sample files below
    Your solution should have a Dockerfile.
• Please use this .Dockerfile:

### STAGE 1: Build ###
FROM node:alpine AS build
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
### STAGE 2: Run ###
FROM nginx:alpine
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build /usr/src/app/dist/topcoder-learning-angular/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8080
ENTRYPOINT ["nginx", "-g", "daemon off;"]

• Note: Replace folder name inside dist folder your like your submission (/usr/src/app/dist/topcoder-learning-angular/)
• Double check your submissions to make sure there are no errors
• There will be 3 area for this web app with these unique id:

1. Header area

• Create a new div tag and Use “treasure-header” for the id.
• Use Bootstrap Navbar: https://getbootstrap.com/docs/4.5/components/navbar/
• Also combine div tag with these class: “navbar navbar-expand-lg navbar-dark bg-dark”
• No need include the nav toggler like in bootstrap
• Add h1 with class “navbar-brand” for the title
• Update the the h1 title into “Topcoder Learning Angular Level 1"

2. List area

• Use “treasure-list” for the id and “container-fluid” for the class
• Use this Bootstrap Container Fluid: https://getbootstrap.com/docs/4.5/layout/overview/#fluid
• Add a new h2 title with text “My Treasure”
• Create a new file to mock the treasures: src/app/mock-treasures.ts.
• You must use this exact data:
  • export const TREASURES: Treasure[] = [
  •   { id: 1, name: 'Windstorm Gold Staff', location: 'Tree behind home' },
  •   { id: 2, name: 'Alaric Treasure', location: 'Southern Italy' },
  •   { id: 3, name: 'Ganj-e Badavard', location: 'King Khosrow II Tomb' },
  •   { id: 4, name: 'Heirloom Seal of the Realm', location: 'Imperial Seal of China' },
  •   { id: 5, name: 'Egill Skallagrímssons silver', location: 'Buried near Mosfellsbær, Iceland' },
  •   { id: 6, name: 'Kusanagi', location: 'Lost at sea' },
  •   { id: 7, name: 'Crown Jewels of England', location: 'lost in The Wash ' },
  •   { id: 8, name: 'Llywelyns coronet', location: 'Stolen in Westminster Abbey ' },
  •   { id: 9, name: 'La Noche Triste', location: 'Looted from the palace of Moctezuma II' },
  •   { id: 10, name: 'Lost Inca gold', location: 'Deep jungle of Inca' }
  • ];
• Remove the previous Level 2 mockup data and related properties
• Display data as list using Bootstrap List : https://getbootstrap.com/docs/4.5/components/list-group/#basic-example
• For the list just need diplaye the name only.
• Add onClick event binding to the list. So details can be displayed on the section below.
• Add a new <hr> tag with class divider below the “treasure-list”.

3. Details area

• fyi: You can move the previous Details section like in Level 2 to this updated Details section
• Use “treasure-details” for the id and container-fluid for the class.
• Use this Bootstrap Container Fluid: https://getbootstrap.com/docs/4.5/layout/overview/#fluid
• Add a new h3 title with text “{{treasure.name}} Details”
• Display details as list using Bootstrap List : https://getbootstrap.com/docs/4.5/components/list-group/#basic-example
• Show 3 rows for the details list
• Add label for the title of “Id”, “Name” & “Location”
• Id values need use “treasure-id” for the id & plain text
• Name values need use “treasure-name” for the id & text input. Add attributes type="text"
• Location values need use “treasure-location” for the id & plain text
• Two-way data binding need able to changes related h2 & h3 when user start typing on the “treasure-name” text input

Instructions:

• We have prepared three problems: Easy, Medium, and Hard, which are worth 250, 500, 1000 points respectively. Points are based on the difficulty of the problem.
• The competitions may or may not be related to each other.
• The links to the problems/competitions are provided below.
• Each problem has one single requirement to achieve. We will judge your submission based on the requirement being fulfilled in each problem, so as long as the requirements are met with minimal code quality, you would be rewarded with points for that particular problem.
• Here is the leaderboard with individual problem score and total score across weeks is available.

Problems

1. Easy: 250 Points :: Treasure Map
2. Medium: 500 Points :: 1st Treasure
3. Hard: 1000 Points :: Treasure Chest

Final Submission Guidelines

Submission deliverables