Code Monkey home page Code Monkey logo

adventurer-journey-fe's Introduction

Adventurer Journey - Front End

Please follow the story instructions below to create a User interface for an adventurers journey around a map. This should take no longer than a few hours. It is not intended to perseverate over the problem but to create a common talking point.

Commit any changes and push them to the remote repository for review no later than 48 hours before the next interview.

Please use whatever languages, references and tooling you would like to complete the story. We have included a basic React and Parcel app to jumpstart the setup process but it is not required to use. Follow the setup instructions below to set it up.

Setup Instructions

The following instructions are only needed if you would like to use the basic React/Parcel app. Otherwise skip to the story instructions.

Story Instructions

Create a User Interface to track an adventurers journey through an undiscovered area. The goal is to create an interface where you can choose and adventurer and show their path around the map.

Using the provided wireframe create a user interface to display an adventurers journey across the map. Take as much creative license in the design as you wish. At the minimum it should be functional, display relevant information, and be easy to use.

There are 2 main views:

1) Select an Adventurer

Create a button for each of the adventurers in the example below. Clicking this will select the adventurer whose path you will display in the next view.

Example Adventurer Paths & Instructions - ./docs/resources/Example Adventurer Paths.md

./docs/resources/adventurers_path_choose_adventurer.jpg

2) Display a previous Adventurers path on the map

You will create a button that calls a function to “fake” an api return of a previous adventurers instructions. This will return one of the Example Adventurer Paths linked above in the first view. Using the instructions, display on the map the pathway the adventurer took, including starting and ending points.

Create a button and functionality to clear the map back to a fresh state (Clear Path). Additionally, create a button to return the first view to select a different adventurer (New Adventurer). Lastly a button to display the selected adventurer's path (Load Adventurer).

./docs/resources/adventurers_path_view_path.jpg

Tech Notes:

  • Use any resources or tools you would like.
  • Fake api calls do not actually need to interact with Fetch or an api. They are just functions to fake return and save functionality.
  • Adventurer will start in the middle of the map
  • The map must be big enough to display the entire route without looping to the other side.

adventurer-journey-fe's People

Contributors

solaredge3 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.