Colorandom Project

We will be building a site that generates color palettes for us. Similar to other sites like coolors, we will present 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 will give you and your team an opportunity to write HTML and CSS, and leverage JavaScript to both create your data model and interact with the DOM.

Additionally, as your first group project, this will give you a chance to continue to hone your team skills: communication, planning, proper git and GitHub workflow.

Abstract

In today's world of fast moving design trends, it may be critical to have the ability to generate and save randomized color palettes within moments. Thankfully, our group project "Color Random" is exactly such a tool. Straightforward to interact with, our application allows for users to click a button to generate a series of 5 random colors based off of hexadecimal color codes. Users can then click individual colors within the palette in order to lock them as a selection while regenerating more colors in each unlocked slot (up to the total of five colors per palette). When a user is happy with the palette they have selected, they can click the 'save palette' button in order to add it to the saved palettes section on the right of the page. If a user changes their mind and wishes to remove a palette from the saved section, they may do so by clicking the trash icon that exists alongside each palette in storage.

Installation Instructions

Repository Available Here: https://github.com/Kanderson58/colorandom_project

Step 1: Fork repository
Step 2: Clone repository onto local machine
Step 3: In terminal - change directory(cd) into newly cloned directory, can also use Finder to search for index.html
Step 4: Open index.html file in browser
Step 5: Click buttons - click 'new palette' button for inspiration!

Preview of App:

Contributors

Isaiah Richardson
Kara Anderson
Shane Misra
Bri Bourassa

Context:

This project was assigned in week 4 of module 1 of the Frontend Program, Monday, Jan 2nd. It was due one week later, on Jan 9th.

Learning Goals / Achievements

Kara:

1. Practice flexbox and understand how to use it more efficiently
2. Separate the Data Model and DOM and be careful how they are being used
3. Use classes in a practical way
4. Break functions down into smaller, more readable bits

Bri:

1. Practice coordinating branches, git workflow and PRs with multiple teammates
2. Get out of my comfort zone and challenging myself by learning different approaches and tactics from my teammates
3. Improve my skills with CSS and styling
4. Practice using the Data Model vs DOM where applicable

Shane:

1. Get more practice with github workflow, learn how to develop a common set of standards
2. Learn to recognize elements of DOM and use good practices to interact with DOM
3. Practice CSS styling, flexbox
4. Work with classes in new ways

Isaiah:

1. Write semantic HTML and efficient CSS to form a usable UI Practicing the syntax for both in order to hammer home what a fully functional site looks like behind the scenes.
2. Write clean, DRY JavaScript and leverage classes, creating and using an effective data model Learning how to drive and understand navigators clearly, working together to find the cleanest most effect method.
3. Manipulate the page after it has loaded adding, removing, and updating elements on the DOM Checking our working live to see what is changing and what looks good and works well. Possibly comparing wit other sites and using dev tools!