JTG Frontend Home Assignment

Hello!

Below is a quick overview of the Frontend assignment. If you need any clarifications,
please feel free to email or call the HR team.

Assignment Overview:
The mock-up page's Figma Link has been added to the document. We would like you to
implement it using HTML, CSS, and Javascript only (Please make sure not to use any
JavaScript or CSS frameworks or libraries, such as React, Angular, Bootstrap, etc.).

Please follow the best coding/optimization practices that you are familiar with as the
same will be considered while evaluating the assignment. We would also like the
implementation to be pixel-perfect (match the design exactly using tools like the
PerfectPixel Chrome extension) as much as possible.

Functionality:
Must to have:
1. The “Popular Items” section should be implemented using a slider/carousel.
a. You may use JS/JQuery Library for this.
b. The hover states of the items are shown in the design.
i. The right arrow shows the hover state for the arrows of the carousel
ii. The middle card shows the hover state of the carousel items
2. On clicking the cart icon (top right icon), a modal should open as shown in the
designs.
a. On clicking the “Back to Menu” button, the modal should close.
b. You do not have to implement the “Add to Cart” functionality.
3. On clicking the “Request Dish” the request dish modal should open (Modal
shown in the design).
a. On clicking the “Cancel” or “Submit Request” button (below “Popular
Items”), the modal should close.
b. No need to store the entered data anywhere.
4. When any modal is open, the HTML body should not be scrollable.
5. You can change the images, prices, and descriptions of the menu items to your
liking.
6. In the video section (section below “Popular Items”)
a. The video should play/pause on clicking the video.

This document is confidential and contains proprietary information and intellectual property of Josh Technology Group. Disclosure,
copying, distribution or use of this document and the information contained therein is strictly prohibited.
 b. When the video is paused the “Play” icon should be shown (as per the
designs).
c. You can use any short video for the video section.

Good to have:
1. Mobile Responsive. (There is no responsive design given. In case if you want to
make your page responsive, You can manage your layout in such a way that it
doesn’t break on different viewport sizes).

Assets/Downloads:
You can extract images from the Figma file. Follow the steps mentioned in the Figma
document. For more information, you can refer to this resource.

Do’s:

1. Implement All Sections: Ensure that all sections outlined in the design or
requirements are fully implemented.
2. Browser Compatibility: Ensure the page works seamlessly on Firefox, Chrome,
and Safari browsers.
3. Use DIVs: Utilize <div> elements for structuring the layout instead of tables.
4. Pixel Perfect Design: Match the design exactly using tools like the PerfectPixel
Chrome extension.
5. Follow Best Practices: Use clean, optimized, and maintainable code adhering
to industry standards.
6. HTML5 Tags: Make extensive use of modern, semantic HTML5 tags (e.g.,
<section>, <header>, <footer>, <article>, <nav>).
7. Rubik Font: Use the Rubik font family from Google Fonts as specified.
8. Carousel Implementation: Create a working carousel for the “Popular Items”
section using a third-party JavaScript or jQuery library.
9. Use Provided Assets: Integrate all assets, images, and icons exactly as
specified in the mockups.
10. Code Editor: Feel free to use any code editor of your choice for development.

Don’ts:

1. Avoid Tables: Do not use <table>, <tr>, <th>, <td> for layout purposes.
2. Avoid Non-Semantic Tags: Avoid <hr> and <br> unless absolutely necessary.
3. No UI Frameworks: Do not use UI frameworks like Bootstrap or Material UI.
4. No JavaScript Frameworks: Avoid using JavaScript frameworks/libraries such
as Angular or React.

This document is confidential and contains proprietary information and intellectual property of Josh Technology Group. Disclosure,
copying, distribution or use of this document and the information contained therein is strictly prohibited.
 5. Non-Pixel Perfect Design: Do not deviate from the provided design or mockup.
6. Ignore Browser Testing: Do not neglect testing for cross-browser compatibility.
7. Confidentiality of Figma Files: Do not share the Figma file with anyone else.
Avoid adding comments directly on the Figma file; instead, reach out to HR for
any queries or clarifications.
8. Limit Figma Usage to Image Exports: Only export images/icons from the
Figma file. Do not directly use any other elements or code from Figma; all
elements should be created on your own.

Suggested Approach and Task Prioritization:

You can approach the assignment in the following order & try to complete as much as
possible.
1. Create static HTML.
2. Implement the Modal (No JS/CSS library to be used).
3. Implement the working slider/carousel (Can use JS library).
4. Make it pixel-perfect and cross-browser. You can use this Chrome plugin.

Submission link:
Once you are done with the assignment, you can make a zip of the folder and upload it
here: https://forms.gle/sh4fRfuZDLihNoB16

Frequently Asked Questions (FAQs):

1. Should we use CSS properties and dimensions exactly as mentioned in the
mockup?
Do we have to create the ditto of the template shared on Figma or some
layout variations are acceptable?
The UI should be as close as possible to the mock-up as mentioned in the
assignment. That can be achieved using the PerfectPixel Chrome extension, a
link to which has been provided in the assignment document. Minute variation is
acceptable.
We do not recommend using the CSS/units from Figma. We expect the usage of
CSS best practices which might not be well exhibited by the styles in Figma.

2. Is it mandatory to create HTML pages pixel-perfect?

Yes. We expect the implementation to be as close as possible to the mock-ups.
However, we recommend to follow the priority order mentioned in the assignment
document.
We recommend the usage of the extension to achieve pixel perfection. However,

This document is confidential and contains proprietary information and intellectual property of Josh Technology Group. Disclosure,
copying, distribution or use of this document and the information contained therein is strictly prohibited.
 you can use some other tools as well to achieve pixel perfection.

3. Do we have to use images in our HTML file with exactly the same size?
The images can be in a size similar to the size it is visible in the designs. Even if
the dimensions of any image are greater than required, the size taken up by that
image on the webpage must be similar to what we have in the designs.

4. What technologies can be used for implementing the webpage?

Only HTML5, CSS3, and Javascript/jQuery should be used in the
implementation.
The usage of any framework/library like Material Design, bootstrap, Materialize,
etc (except for the slider) is not allowed.

5. Should the carousel be in working state? If yes, how many slides must be
slid in one go?
Yes, the slider must be in a working state. You can use any third-party
Javascript/Jquery plugin for implementing the same. One slide must be slid in
one go/click.

6. What interactions should be there on the slider?

The basic interactions like navigating using the back and next buttons are
mandatory. Further, drag and keyboard arrow button interaction is good to have.

7. Should we have the width of the web page shown in designs(like width
1440px) or should it be according to different viewports(like width 100%)?
The webpage can be fluid in layout and can consume 100% width as needed. It
should work well on the viewport range of the desktop sizes without having to
scroll horizontally. At 1440px, the UI is expected to be close to pixel-perfect with
the designs.

8. Is it important to make the webpage mobile responsive?

If you’re implementing mobile responsiveness, that’s a plus. But we recommend
following the priority order by
1.) Creating the web page first.
2.) Implementing the working slider
3.) Making it pixel-perfect.

9. How to submit the assignment?

Once you are done with the assignment, you can make a zip of the folder and
upload it here: https://forms.gle/sh4fRfuZDLihNoB16

This document is confidential and contains proprietary information and intellectual property of Josh Technology Group. Disclosure,
copying, distribution or use of this document and the information contained therein is strictly prohibited.
Some useful links you can use for ramping up.

1. Start / Learn :
a. https://www.internetingishard.com/html-and-css/
b. http://html-css-js.com/
c. https://internetingishard.com/html-and-css/
d. https://tympanus.net/codrops/css_reference/
e. https://developer.mozilla.org/en-US/docs/Web

2. Best Practices in Markup:

a. https://github.com/hail2u/html-best-practices
b. https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net
-6741

3. JS:
a. https://sabe.io/classes/javascript/ (Highly Recommended)
b. https://javascript.info/intro

4. In Chrome and Safari, you have inbuilt developer tools. Activate them by hitting
F12

Please feel free to discuss anything related to the assignment. In case you need any
clarifications on the same please feel free to get in touch.

All the best!

This document is confidential and contains proprietary information and intellectual property of Josh Technology Group. Disclosure,
copying, distribution or use of this document and the information contained therein is strictly prohibited.