/webstorybegin.github.io

Game, landing, currency calculator, formik form

Primary LanguageTypeScript

Install:

  1. git clone https://github.com/webstorybegin/webstorybegin.github.io.git
  2. cd webstorybegin.github.io
  3. npm i
  4. npm start

1. The basic function of the game "Who Wants to Be a Millionaire" is to be implemented: 

  • The grader answers one of the 12 questions by line.
  • Each question has 4 variants of answers and only one correct answer.
  • If the answer is correct, the grader proceeds to the next question. If the answer is wrong, the player goes to the final screen.
  • The final screen must show the final result of the game. Design for layout https://www.figma.com/file/tIZEZn2HTAeSDQRzoOzvXE/Front-end-test%2C-Headway.  The layout must be adaptive.

Technical requirements:

  • Use this layout for layout.
  • Make the layout adaptive (from iPhone 5 to 4k displays).
  • Make the layout without using CSS frameworks.
  • Context of the game (questions, answers, money for the right answer, etc.) must be in json format.
  • The contest must be extended: more or fewer variants of answers to the questions; a number of correct answers, etc.
  • The task must be implemented using the latest version of React.
  • The result of the work posted on github (+ github pages demo) with md-instructions on installation and launch.
  • All client code must be fully compliant with out-of-the-box eslint/airbnb rules.

Optionally:

  • Make all client code typeable via TypeScript.
  • On git commit in the middle of the test task repository, add running eslint on the modified files, and on git push, run unit-tests.

Evaluation criteria:

  • A layout that will be nondescript to expand and maintain.
  • Code structure.
  • Correct handling of out-of-the-box situations.

2. It is necessary to make the layout of landing page, layout for layout is given. Description of the functional and optional tasks you will find in the comments to the layout for the link above.

You can adapt layout for desktop as you see fit.

Technical requirements:

  • Make the layout adaptive (from iPhone 5 to 4k displays).
  • Make the layout without using CSS frameworks.
  • Assignment to be implemented using the latest version of React.
  • The result of the work posted on github (+ github pages demo).
  • All client code must be fully compliant with the "out of the box" rules of eslint / airbnb.

Evaluation criteria:

  • A layout that will be nondescript to expand and maintain.
  • Architectural organization of the code.
  • Absence of layout shifts and blips.