diff --git a/src/data/projects/cookie-consent.md b/src/data/projects/cookie-consent.md new file mode 100644 index 000000000..020874feb --- /dev/null +++ b/src/data/projects/cookie-consent.md @@ -0,0 +1,32 @@ +--- +title: 'Cookie Consent' +description: 'Create a simple cookie consent banner using JavaScript.' +isNew: false +sort: 12 +difficulty: 'beginner' +nature: 'JavaScript' +skills: + - 'HTML' + - 'CSS' + - 'JavaScript' + - 'DOM Manipulation' +seo: + title: 'Create a Cookie Consent Popup Using HTML, CSS, and JavaScript' + description: 'Learn how to build a cookie consent popup with basic JavaScript for managing user consent.' + keywords: + - 'cookie consent' + - 'javascript popup' + - 'html and css' + - 'javascript project' +roadmapIds: + - 'frontend' + +--- + +This project is designed to introduce you to basic DOM manipulation and event handling in JavaScript. + +Many websites display a cookie consent popup to inform users about the use of cookies and to obtain their consent. In this project, you will create a simple cookie consent popup that appears when the user visits the page. The popup will include a message and a button to accept the consent. Once accepted, the popup will disappear. Given below is an example of how the popup might look: + +[![Cookie Consent Popup](https://assets.roadmap.sh/guest/cookie-consent-banner-07etz.png)](https://assets.roadmap.sh/guest/cookie-consent-banner-07etz.png) + +Bonus points if you persist the user's consent using cookies or local storage and prevent the popup from appearing on subsequent visits. \ No newline at end of file