Scribd
Upload
13 views4 pages

JS Test Shopping Cart

The document provides instructions for a coding test involving building out a shopping cart application. Candidates are asked to create a private GitHub repository to track their work. The test involves building search, cart, and checkout functionality using the provided HTML, CSS, and initial JavaScript code along with a mock API. Code quality, best practices, and git commit history are important parts of the evaluation.

Uploaded by

Nemanja Kuzminac
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views4 pages

JS Test Shopping Cart

The document provides instructions for a coding test involving building out a shopping cart application. Candidates are asked to create a private GitHub repository to track their work. The test involves building search, cart, and checkout functionality using the provided HTML, CSS, and initial JavaScript code along with a mock API. Code quality, best practices, and git commit history are important parts of the evaluation.

Uploaded by

Nemanja Kuzminac
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

JavaScript Test: Shopping Cart

Dear candidate, perhaps future colleague,

On behalf of the whole Forwardslash team, we'd like to thank you for extending your effort to
take this test. We ourselves, as fellow colleagues, are not very eager when it comes to wasting
our time on taking tests. With that in mind, we did our best to create a test with a simple
scenario where you have an open opportunity to use your skills and practices to make it
complicated as much as you find it fit.

With that said, we commit to paying less attention to the actual functionality of your final result if
we get an opportunity to see something like SOLID principles, OOP practices, design patterns,
tests, more strict code written in TypeScript, and/or similar. On the other hand, if you get a
feeling like "Whaaaaaat?", forget about it, the test is designed for all knowledge levels. So make
sure you do the best you can in a reasonable time span because that is the actual point of this
test. We wanna have a glimpse of what YOU can do.

The test comes with a couple of things already preset. You have the opportunity to use any
technologies, packages, or solutions, although we highly prefer to see your programming
principles and skills in vanilla JS (ES6).

Instructions
Please create a private Github repository at https://github.com/, where you can track progress
and commit your work at the end of the day.

Please make sure it is not visible to the public and you give only access to users:
● [email protected]

Please only provide the access once you are completely done with the task and email us the
link to your repo.

The deadline for this task is 2 days.


Very important
● When delivering, please make sure you supply all source code as well.
● Use the git during development, and when done, send us the git repository link.
○ Commit your work in smaller chunks, just as you would at the end of your work
hours or if you would switch from one task to another.
○ Commits do not need to be functional. You must be asking your self "ok so when
do I commit then?!". You can for example commit on a time basis, like every 30
mins.
○ When you consider your work complete (finished the functionality, or you have
spent enough time on it).
○ Bad example: committing all work at once into a single commit -
https://prnt.sc/22lai27
○ Good example: committing your work in smaller chunks - https://prnt.sc/22lbrnr
● Name project folder using your own name and the name of our company with this
formatting: “fws-js-test-vanilla”.
● The deadline for this task is 2 days, but the sooner the better. This doesn’t mean
things should be rushed. High code quality is very important for us, therefore provide
your best results - clean, lean high-quality code!

Initial test setup (directory tree):


● index.html
● js
○ app.js
○ ApiClient.js
○ Exception.js
● templates
○ CartItem.html
○ SearchItem.html

index.html - Basic code is written. It should be enough for the assignment, but if you notice
something missing feel free to upgrade the script.

● Append all your shopping cart items to the element with a class selector 'js_cart'.
● Append all the products you compile from the API 'SearchProducts' endpoint to the
element with a class selector 'js_products'.
● Element with the class selector 'js_product_page' represents the search page.
● Element with the class selector 'js_cart_page' represents the shopping cart page.

app.js - You can start with your JS script here. The initial code contains some examples to show
you how to use the ApiClient.
ApiClient.js - ApiClient represents communication with an API and in this case, it will mock
endpoint responses for you. Do not edit the ApiClient code. There are examples in the app.js of
how to use it.

Exception.js - When something goes wrong with ApiClient requests, the script will throw this
exception.

CartItem.html and SearchItem.html - these are HTML templates where you will find the
example code to use to compile content for your pages.

● To compile each cart item, use CartItem.html example code to append items to
index.html in the element with the class selector 'js_cart'.
● To compile each product, use SearchItem.html example code to append items to
index.html in the element with the class selector 'js_products'.

Test description (use cases):


● Search page should be the initial page (with already compiled all products from the
API).
● At any point in time, only one page can be visible (search or shopping cart).
● Use 'SearchProducts' endpoint with APIClient to get and compile all products to
index.html (js_products).
● Use the SearchItem.html template example in order to ensure all necessary data is
shown to the user.
● With each product, the user should have the possibility to click on the 'Add to cart'
button and also be able to adjust the amount beside the button to be able to add
products to the cart.
● If the user adds a product to the cart which is already in the cart, the amount of that
product in the cart should increase for the amount of the product added.
● Clicking the 'Go to cart' button the Shopping cart page should be displayed.
● The shopping cart page (within the element with the class selector 'js_total') should
display all products with their respective amounts in the cart.
● To compile all necessary data for each cart item, use the CartItem.html example
template.
● The user should have the possibility to click the 'Remove from cart' button for each cart
item thus removing it from the cart.
● Clicking on the 'Checkout' button should send a request through the APIClient to the
'Purchase' endpoint (like in the example).
● 'Purchase' request through the APIClient should be successful, and you will know this
if you get a console log entry for each item with their id, amount, and a success marker.
● By clicking 'Back to search' button the Search page should be displayed again.
So, where is this code? What should I do with it?
● The initial code can be downloaded from here.
● The HTML structure and CSS can be downloaded from here.
● Set up your own private repository on GitHub and work from there.
● VERY IMPORTANT - commit your work in smaller chunks, just as you would at the end
of your work hours or if you would switch from one task to another. Commits do not need
to be functional. You must be asking your self "ok so when do I commit then?!". You can
for example commit on a time basis, like every 30mins.
● When you consider your work complete (finished the functionality, or you have spent
enough time on it).

You might also like