In this challenge, you will develop a responsive and compliant cookie consent management system that provides users with the ability to accept, decline or customize their cookie preferences.

Implementation requirements

Apart from the cookie management interface, which includes a banner and "Manage cookies" modal dialog, you will also persist cookie consent preferences across sessions and pages and conditionally load scripts based on the preferences.

Cookie management interface

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Interactivity:
  • Button states: Implement and style buttons to reflect different states - normal, hover, and focus.
  • Links: Implement and style links to reflect different states - normal, hover, and focus.
• Responsive behavior:
  • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
  • Responsive layout: The content should stack vertically on smaller screens and align horizontally as the screen width increases.
• Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance optimization: Optimize image assets and code for quick load times, ensuring a smooth and responsive user experience.
• [Stretch goal] Accessibility: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and ensure that buttons can be navigated to and selected using keyboard controls.

Cookie management system

• Consent logic:
  • If the user chooses "Allow cookies", persist consent for all cookie categories.
  • If the user chooses "Decline all", persist preferences for declined cookie categories, except the essential cookies.
  • If the user chooses "Manage cookies"
    • Accept all: Persist consent for all cookie categories.
    • Decline all: Persist non-consent for all cookie categories.
    • Save: Persist consent for specific cookie categories.
• Preferences persistence: Ensure the browser maintains the consent state across sessions and pages. You can persist the preferences in the browser's permanent storage such as cookies or localStorage.
• Interaction flow: The banner or modal dialog will be dismissed after clicking on any button that signals a decision has been made.
• Conditional loading of scripts: The provided essential, analytics, and marketing scripts found within the starter code should be loaded conditionally by respecting the user's cookie preferences.