/cookies

Component that allows to accept the cookies policy

Primary LanguageHTMLMIT LicenseMIT

Cookies

Cookie Popup

Frontend project creating a component
that allows us to accept the cookies policy of a website.
It is a challenge created by the platform. NUWE and IT Academy Barcelona


Table of Contents
  1. About The Project
  2. Project Screen
  3. Usage
  4. Structure
  5. Installation and Setup Instructions
  6. Stack
  7. Contributing
  8. License
  9. Contact

About The Project

This Popup model with information about cookies allows you to view their use. It shows a manin background web site and the page with a modal that disables the rest of the page until cookies are not accepted or the modal is closed. It is a simple component that can be reused for any website.

Cookie example card

Here are the description of the tasks to develop.

Objectives

  • Layout the view proposed in the image above (colors and text styles can be changed).
  • When you click on "Understood", Yum must save the cookie and the component disappears, even if it is refreshed the browser it does not reappear.
  • By clicking on "Learn more" you can add the link you want for example: https://support.mozilla.org/es/kb/Delete%20cookies
  • Clicking on the cross makes the component disappear but refreshing it reappears.

(back to top)

Project Screen

Here is a visual representation of how the project looks like.

project preview

(back to top)

Usage

  • Clone the repositoy: git clone https://github.com/YehosuaEs/cookies.git
  • Creating a fork of this repository.

(back to top)

Structure

.
|–– cookie                  # Components files 
|–– images                  # Images files
|–– LICENSE                 # License project
|–– README.md               # Project description

Cookie directory

.
|–– cookie
|   |–– cookie.html         # Structure of the component
|   |–– cookie.js           # Code with functions of the buttons and preserve the info into LocalStorage
|   |–– stylesCookie.css    # Styles of the structure component

(back to top)

Installation and Setup Instructions

Prerequisites

  • None just a browser to run the html file.

Installation

  1. Open the cookie folder
  2. Double click on the
cookie.html

(back to top)

Stack

JavaScript HTML5 CSS3

(back to top)

Contributing

Contributions are what make us an amazing community and amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

License

Copyright (c) 2022 Yehosuá Escobedo. Code released under the MIT License.
See LICENSE for more information.

(back to top)

Contact

Yehosuá Escobedo Linkedin
Email: yehosuaes@gmail.com
Project Limk: https://github.com/YehosuaEs/cookies

(back to top)