201d42-AllStars / final_project

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Project Name: re:spekt

Team Members: Jasmin Arensdorf, Chris Ball, Paul Williamsen

Project Description: Create an application where a user can choose a starting color from a hex color spectrum and an ending color from the hex spectrum, and enter a number of segments to generate. This app will generate color gradient can be displayed where the display is divided into the number of segments.

Problem Domain: The problem domain was to find a website that can produce a color gradient. The user selects a starting hexadecimal color value, an ending hexadecimal color value, and a number of color segments to generate the color gradient. The hexadecimal color values were needed to label information on a donut shape chart.

Semantic Versioning: v1.0.0

Libraries used: Chart.js and fonts.google.com

User Stories:

As a user, I want to be able to choose from any color from the hex spectrum as a starting point and any color from the hex spectrum as an ending point, and enter a number of segments to generate, so that a color gradient can be displayed where the display is divided into the number of segments.

As a user, I want to be able to create as many gradients as I need for my project, so that I can view these gradients at a later time.

As a user, I want to see clear and concise instructions on the front facing page.

As a developer, I want to design an app that contains a front facing page that will contain three input elements, a display of the color gradient, a save button, and a link that displays a bar chart, so that the user of the app can create a color gradient and view the results.

As a developer, I want to design the front facing page to contain two input boxes, that will have a background color, and when clicked a color picker will be displayed, so that the user can select a starting point and an ending point.

As a developer, I want to design the front facing page to contain an input box to enter the number of segments to create, so that a color gradient will be generated to contain the number of segments.

As a developer, I want to design the front facing page that displays a color gradient that will render the color gradients divided into the number of segments and change dynamically as the user hovers over the color picker, so that the user can see the color gradient possibilities.

As a developer, I want to design the front facing page that will contain a save button, so that the user can save the color gradient that was generated.

As a developer, I want to design the front facing page that will save as many color gradient selections into local storage, so that the user can view these saved color gradients the next time the app is used.

As a developer, I will include clear and concise instructions for selecting a color gradient, so that the user can create a color gradient.

As a developer, I will display a bar chart using random numbers, Chart.js, and the color gradient entered by the user, so that the user can view how the color gradient can be used in a bar chart.

As a developer, I will design a nav bar located below the title of the app, so that the user can navigate from the home page to a page that contains saved color gradients and to a page about the developer team.

As a developer, I will design a page that will contain the saved color gradients that the user saved from a previous session(s), so that the user can access and view these saved color gradients the next time he uses the app.

As a developer, I will design a page about the developer team, so that the user can view information about each member of the team.

As a developer, I will design a page about the developer team using cards, so that the user can hover over a card and the card will flip and display more information about the team member.

About

License:MIT License


Languages

Language:JavaScript 54.9%Language:HTML 26.0%Language:CSS 19.0%