Our team built a site that generates color palettes for its users. Similar to other sites like coolors, the site presents users with various random colors which they can choose to “save” (note: saved palettes will not persist across page refreshes). Users can “lock” a color, which will keep that color when a new palette is generated.
This project gave our team an opportunity to write HTML and CSS, and leverage JavaScript to both create the data model and interact with the DOM.
- Fork this project to your own Github account.
- Clone the repository to your local machine.
cdinto the project folder.- Use the
open index.htmlcommand to view the webpage.
Our team of 4 Front-End Developers completed this project while in the 4th week of an intensive Software Development Bootcamp. Before touching any code, as a group we looked over the provided site comp and brainstormed how to store our data using JS variables. It took us 4 days of group work and collaboration to complete. We tracked our team's progress using a github project board.
Created by Carissa Hluchan, Marshall Hotaling, Robert Phillips & Seth Way.
- Write semantic HTML and efficient CSS to form a usable UI.
- Write clean, DRY JavaScript and leverage functions, creating and using an effective data model.
- Manipulate the page after it has loaded adding, removing, and updating elements on the DOM.
- Refine our group collaboration skills.
- Project specifications can be found here.
- We worked with CSS @media selectors to make this app responsive to mobile devices.
- We experimented with new CSS @keyframe animations to create a more interactive user experience.
- We used our knowledge of the event propagation cycle to dynamically capture user events from parent containers.
- This allowed us to capture events for DOM nodes that will be added and removed by user interactions.