1st Treasure: [Medium - 500 Points] Angular Skill Builder Competition - Test

This is the 500 points Medium 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.

1st Treasure

This is the Medium Level with 500 Points Angular Skill Builder Competition

Treasure hunter creates a treasure list, started with a map from an old bottle that he found under the tree behind his home backyard.

Your tasks for this level is to continue the previous solution. So, the application now has a basic title. Next, you need to create a new component to display treasure information and place that component in the application shell.

What do you need to do?

• Learning Material: https://angular.io/tutorial/toh-pt1
• 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 2 area for this web app with these unique id:

1. Header area

• Use “treasure-header” for the id.
• Use Bootstrap Navbar: https://getbootstrap.com/docs/4.5/components/navbar/
• Use these class: “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 2”

2.  List area

• Create new component: ng generate component treasures
• Place a component in app
• Create a new file to mock the treasures: src/app/mock-treasures.ts.
• You must use this exact data:
  • treasure: Treasure = {
  •         id: 1,
  •         name: 'Windstorm Gold Staff',
  •         location: 'Tree behind home',
  • };
• Binding Treasure data to the template
• Insert the treasure component to the main app component
• Create new 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 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

1.  

Final Submission Guidelines

Submission deliverables