This website provides an interactive color palette storage system, where 5 colors can be set by interacting with the 5 circles in the top form. These colors are set to black by default, and are changed by using the html color picker. I used a flexbox for the form container and the table container to center the divs horizontally. Glitch: rabbitt-project2.glitch.me/
- Tech Achievement 1: Created a single-page web app where users can add and remove color palettes, which updates for each input.
- Tech Achievement 2: Utilized a function that determines the brightness of each color cell, and changes the hex code text to be white or black for better contrast.
- Tech Achievement 3: Generated a display of each color in the color palette by setting the background color of the corresponding table cell to its hex color value.
- Tech Achievement 4: Added error handling for when a new entry has the same name as an existing entry, and a pop-up that tells the user that the name already exists, as well as a pop-up if the user attempts to submit without adding a name.
- Tech Achievement 5: Created a derived field that stores the contrast between the primary and secondary colors in the color palette, and sorted the data in descending order by contrast.
- Design Achievement 1: Used the flex display option to center the form and table containers horizontally.
- Design Achievement 2: Imported the Font Awesome icons script to add a x icon for the delete buttons.
- Design Achievement 3: Applied CSS styles to the default color picker form input, to make the selector display as a circle with a semi-transparent white background.
Marrinan What problems did the user have with your design? User didn't realize the color pickers were interactable. What comments did they make that surprised you? I was surprised the color picker wasn't as obvious as I thought. What would you change about the interface based on their feedback? I would make the color inputs more obvious to interact with.
Donnelly What problems did the user have with your design? User also had issues with the color picker What comments did they make that surprised you? Same as above What would you change about the interface based on their feedback? I would add a color picker icon to each of the color inputs.