Treasure Map: [Easy - 250 Points] Angular Skill Builder Competition - Test

This is the 250 points Easy 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 Easy Level with 250 Points Angular Skill Builder Competition about how the story started for our Treasure Hunter.

Treasure hunter preparing the treasure map to pinpoint all potential treasure and the location.

Your task in this challenge, you begin by creating an initial application using the Angular CLI. You’ll modify and extend that starter application to create the Treasure Hunter map.

What do you need to do?

• Learning Material: https://angular.io/tutorial/toh-pt0
• 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 1 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

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 Ches

Final Submission Guidelines

Submission deliverables