IDHL Tech Test

We’d like to invite you to take part in a front-end development test.

Your task: Build a responsive landing page, with add to bag functionality.

The test is for a fictional pet brand who require a responsive landing page with add to bag functionality. When the “add to bag” button is clicked, a cart slides out from the right.

Please note: The cart content can be pre-populated, meaning no requirement to remove products, calculate total prices, or increment the cart counter.

Our designers have created a desktop and mobile design for the page, which can be found here.

Requirements

• Mobile first build
• A naming convention such as BEM, for easy to follow css classes and structure
• Implement the slide out cart functionality using JavaScript
• Use animations for opening/closing the cart
• When the cart is open, apply a transparent grey overlay on the body
• Ensure the slide out cart is scrollable on mobiles and tablets
• Ensure the implementation is cross-browser friendly
• Build reusable components that could be used on other areas of the website
• Use Roboto and Open Sans fonts – which are available via Google Fonts

Optional tasks

• Demonstrate the use of a task runner such as Gulp, Grunt, or Webpack.
• Demonstrate the use of precompiled styles e.g. SCSS or LESS.
• Create a 1 second loading animation before the slide out cart opens

Please don't:

• Use any frameworks for styling or functionality (e.g. Bootstrap, React)
• Use any third party plugins providing modal functionality (e.g. Lightbox)

Notes

Design information

All colours, fonts and sizes should be inspectable in the Figma design files. You may need to sign in to Figma or get in touch with us to give you access. You will not need to subscribe or pay for Figma in order to complete this.

Deliverables

• The test as either a zip file or a Git repository
• All original pre-compiled code
• Any notes or comments that support your test