Tabs
Build a tabs component that displays one panel of content at a time depending on the active tab element. Some HTML is provided for you as example contents.
Requirements
- Clicking on a tab makes it the active tab. Add a visual indication (e.g. using blue text color) for the active tab to differentiate it from the non-active tabs.
- At all times, only one panel's contents should be displayed — the one corresponding to the active tab's.
Notes
- The focus of this question is on functionality, not the styling. There's no need to write any custom CSS except for highlighting the active tab.
- You may modify the markup (e.g. adding
ids, data attributes, replacing some tags, etc) and use client-side rendering instead. - You may want to think about ways to improve the user experience of the application and implement them (you get bonus credit for doing that during interviews).
Asked at these companies
Sponsor: SwagOverflowBugs? Manageable. But "It looks weird on my phone"? Pure terror. This black tee perfectly captures every front end engineer's worst fear — mystery UI issues on an unknown device. Whether it's a client's 5-year-old Android or some obscure browser setting, you already know it's going to be painful.
Sponsor: SwagOverflowBugs? Manageable. But "It looks weird on my phone"? Pure terror. This black tee perfectly captures every front end engineer's worst fear — mystery UI issues on an unknown device. Whether it's a client's 5-year-old Android or some obscure browser setting, you already know it's going to be painful.
Tabs
Build a tabs component that displays one panel of content at a time depending on the active tab element. Some HTML is provided for you as example contents.
Requirements
- Clicking on a tab makes it the active tab. Add a visual indication (e.g. using blue text color) for the active tab to differentiate it from the non-active tabs.
- At all times, only one panel's contents should be displayed — the one corresponding to the active tab's.
Notes
- The focus of this question is on functionality, not the styling. There's no need to write any custom CSS except for highlighting the active tab.
- You may modify the markup (e.g. adding
ids, data attributes, replacing some tags, etc) and use client-side rendering instead. - You may want to think about ways to improve the user experience of the application and implement them (you get bonus credit for doing that during interviews).
Asked at these companies
Try these questions next
Sponsor: SwagOverflowBugs? Manageable. But "It looks weird on my phone"? Pure terror. This black tee perfectly captures every front end engineer's worst fear — mystery UI issues on an unknown device. Whether it's a client's 5-year-old Android or some obscure browser setting, you already know it's going to be painful.
You must be signed in to view your saved versions
Loading editor
Loading editor
Loading editor
JavaScript Console
console.log() statements will appear here.