Advanced Frontend Developer Programming Challenge
This is a front-end engineer programming exercise designed to test the skills required to maintain an eCom site utilizing modern technology native to the browser.
Your task is to create a hierarchical menu displaying products by collapsible categories with “add to favorites” functionality.
1). Create a new github repo and make public via a gh-pages branch. 2). Create an index.html file. This file should be semantic, accessible, responsive, and discoverable. Accessible - Landmark ARIA roles - passes Lighthouse tests - keyboard navigable Responsive - Displays on a mobile device and passes Google mobile tests Discoverable - SEO fundamentals, SMM Open Graph, and JSON-LD 3). Create a single script element. Code all logic within this element. Use no external libraries. Using the Fetch promise API get this JSON file. Combine into a normalized JS data structure. Iterate through the data structure and generate the HTML elements and event listeners. Hovering over a product name will reveal it’s sale price Clicking / tapping on any of the products should “Add to Favorites”. This state will display a heart toggle (SVG) next to the product. The list of favorite products will persist between sessions in local storage. Mock a Google Analytics custom event to capture that the product has been favorited. 4). Create a single style element. Code all CSS within this block. Use no external libraries. Use BEM naming Use CSS Grid instead of Flexbox Try not to use !important 5). Test your work on various modern browsers 6). Send us the link to your finished repo
Tips: If you cannot finish simply do the best you can and explain your thought process in the comments. Work at your own pace. We prefer quality over speed.
🌑🌒🌓🌔🌕🌖🌗🌘🌑 UX artisan ⚡ illustrator ⚡ front-end engineer Renaissance Man ✨ Weaponeered Poetry 🏖️ Inspired Problem Solver 🚀 Visual Storyteller 🚀 TypeScript && Go 🌴 Can you keep a secret? 🎲 Arcanus 55 ✨ JavaScript && TypeScript && Go 🪐 ✨ Azure Playwright && JavaScript && TypeScript && Go 🪐 ✨ Cypress && JavaScript && TypeScript && Vue.js 🪐 🚀 Electron && Vue.js && TypeScript && HTMX 🍰 🪐 Git Good at Git & Git Actions 🎯 🗝️ Flux Capacitor (WebAssembly 🐹 GoLang)🪐 👁️ UX ⚡ Vue.js and WebGL (WASM 🐹 GoLang) 🍭 🍰 Oscillation Overthruster (GoLang Hugo CMS) 🪐 🗿 Oscillation Overthruster (Vue.js 🐹 GoLang) 🦄 Creative, Business, and Tech ⚡ Creative ⚡ Business ⚡ Technical Agility 👁️ D3 Parallax Three.js && WebGL 🍭 CSS Paint API 🍭 GSAP 🍭 😎 Oscillation Overthruster 🪐 🍰 Branded 👁️ Candy 🎨 🍰 Accelerometer Web Audio && Vibration 🌴 ✨ Blender Three.js 🍭 glTF UV Mapping 👁️