Skip to content

Latest commit

聽

History

History
85 lines (48 loc) 路 4.46 KB

README02.md

File metadata and controls

85 lines (48 loc) 路 4.46 KB
Raw

#Web development course

Welcome to the test task 2 (HTML and CSS basics + JS basics)

MIT Licensed Ideas and useful links Awesome ghit.me

Freecodecamp from zero to front-end hero part 1

Freecodecamp from zero to front-end hero part 2

Practical tasks:

  1. Get a new account on Freecodecamp if you don't have one yet.
  2. Complete all Intermediate Algorithm Scripting tasks from Front End Development Certification.
  3. Create Trivia-like Quiz:

Create a custom client for Trivia Quiz API: http://jservice.io/

Your simple app should contain:

  1. Simple headers with total questions counter, correct answers score, text of the question, question ID and category.
  2. Game field with answer container and letter container.

Each time user loads your app, clicks Next Question or Skip Button he gets a question with shuffled answer letters bellow. He is able to give answer for the question or skip to next.

User stories:
  1. As a user I can get a question and see shuffled letters/symbols of true answer bellow.
  2. As a user I can interact with any letter to begin answering, I wont see the error message until I finished answering.
  3. I can see error or success message if my answer is finished.
  4. I can see the real answer for the question in Dev Console.
  5. I can Skip answering with Skip Button and go to Next Question with Next button if my answer was correct.
If this task looks way to easy for you, you can take bonus user stories:
  1. As a user I can drag any letter to an answering slot.
  2. I can Drag n Drop my letter back to letter picking area whenever I needed.
Demos:

basic - basic advanced - advanced

FEEL FREE CUSTOMIZE YOUR APP AND EXTEND ITS FUNCTIONALITY
You can use any frameworks or libraries you want or don't use them at all.
Suggested literature:

Codecademy Learn HTML &CSS - page layout for complete newbies

Codecademy Learn Javascript Javascript for complete newbies

Bootstrap great tool for quick page styling

AJAX Intro from w3schools - getting data from serve

ECMAScript 5 Array Methods

Drag & Drop w3schools - for advanced solution

If you don't feel confident completing these tasks, you may go through entire or some parts of Freecodecamp training map

After the job will be done, in your "kottans_web_test" repository create a folder "task_2" with README.md file. In this file add a direct link to your Freecodecamp account with completed challenges mentioned above. Also deploy your Trivia app via gh-pages (Simply create gh-pages branch on remote if your app doesn't need any building stuff) and put a link in your README.md file

To prevent crucial problems with gh-pages deploy, use https protocol in your AJAX request link (https://jservice.io/api/random). You will get a warning about insecure connection (cause trivia doesn't support https) but you will get a response.

Good luck, folks!

When you finish this task you can start the next one:

Test 3

Extra: