ColoRandom

Abstract:

We built a website that allows for a user to generate a random color palette. When the website loads, five swatches are displayed based on randomly generated hexcodes. The user then can generate new colors by clicking the new palette button. For colors the user wishes to retain there is an option to lock each of the five colors individually, and then return a new palette while retaining locked colors. When the user likes all five colors, they may choose to save the entire palette by clicking the save palette button and it will display under the saved palettes section. The users then can delete a saved palette by clicking the trash icon.

Installation Instructions:

• A user can fork and clone the following repository: https://github.com/Zertroz/colorandom
• Type cd colorandom to move into the root directory
• Open the repository in your preferred text editor

Preview of App:

Context:

We were assigned this project on Monday January 2nd and had until Monday January 9th to complete the project. We spent 2-3 hours a day, and had the majority of the project completed by Friday. We are in our 4th week of Mod 1 at Turing.

Contributors:

• https://github.com/LeftyLincoln
• https://github.com/jsahim
• https://github.com/Zertroz
• https://github.com/dustingouner

Learning Goals:

1. Write semantic HTML and efficient CSS to form a usable UI

• We recreated the comp and used appropriate tags based on the needs of the comp recreation in HTML. We used CSS to create a responsive website and applied creative styling.

2. Write clean, DRY JavaScript and leverage classes, creating and using an effective data model

• We have created two seperate classes to be utilized in our data model, while allowing our main Javascript file to build out the reusable functionality of the website. We made sure to update the data model and have it be the driving force behind any DOM updates.

3. Manipulate the page after it has loaded adding, removing, and updating elements on the DOM

• We have structured our specific event listener to launch at appropriate times without conflicting with other events on the website.

4. Refine your collaboration skills

• Initially the project presented challenges with working in a group of four across multiple time zones. However, we were able to figure out a routine that worked well for our group, and allowed to collaborate in a productive manner.

Wins + Challenges:

Wins:

1. We completed all five iterations.
2. We were able to style the website how we wanted.
3. We are able to experiment with CSS animations, which we had not had any experience with prior.

Challenges:

1. We had an issue with using a specific link, and this was our first introduction to the security aspects of a website.
2. Synthesizing four seperate ideas for how the code should execute.
3. Trying to write code that will allow future functionality to be implemented without interefernce from previous code.