Code Monkey home page Code Monkey logo

palette_picker's Introduction

Palette Picker

Deployed site
Backend

Contributors:

Cameron MacRae
Heather Faerber

Overview

Palette Picker is an application for designing color palettes and allows users to create custom palettes that can be saved to a project.

How to Use:

Once on the landing page, sign in to continue. As of 02-12-20 you can sign in with any name or password as long as the fields are filled in. See Known Bugs/Future Iterations for more details.

Screen Shot 2020-02-12 at 5 31 00 PM

You will then be directed to the homepage where you can sign out and create new projects.

Screen Shot 2020-02-12 at 5 37 17 PM

If you scroll down further you will see a section where you can create a new palette. Colors can be chosen manually using a hex code or randomly by clicking the randomize button. There is also a locking mechanism for each color so that you can keep colors you like while continuing to randomize others. Once you are satisfied with the palette simply select the project that it belongs to and give it a name. After clicking the create button your palette will be saved under the selected project.

Screen Shot 2020-02-12 at 5 42 51 PM

If you scroll back up and click on a project you will be taken to a project page. From here you can use the menu options at the top to sign out or go back to the homepage. You can also delete the project or some of the palettes within it by using the delete project button or by clicking the trash icon next to a palette.

Screen Shot 2020-02-12 at 5 43 43 PM

Known Bugs/Future Iterations

  • There is a bug that is causing some of the selected colors to appear transparent even when a hex is entered after clicking the radnomize button. To get around this, simply type in or remove a character and add it back.
  • Since anyone can log in with any username or password all projects and palettes are shared within the database. Meaning that anyone can add or remove any project or palette. This should be solved when real sign in validation is implemented.
  • We would like to add the ability for users to be able to edit project and palette names as well as change the color scheme of a palette after it has been added.

Dev Setup Instructions

  • Clone this repo.
  • Cd into the root repository and run npm i or npm install to install all dependencies.
  • npm start to get the repo up and running on localhost:3000.
  • The testing suite can be run with npm test.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.