Skip to content

A swatch app that makes use of the colornames API, i.e. when React inputs meet CSS styles.

Notifications You must be signed in to change notification settings

nvsmith/color-box

Repository files navigation

NEW README Tecnate | Last Updated: 2024.05.29

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. License
  7. Contact
  8. Acknowledgments

About The Project

This is a color swatch app built with React that implements:

  • Functional components
  • Click events
  • useState & useEffect hooks
  • Lists & keys
  • Props & prop drilling
  • Controlled component inputs
  • APIs

Type in any valid color name or select from the list in the sidebar to view swatches, imported from the colornames API. Compare light vs dark themes to view what text looks like against your chosen background.

screenshot1 screenshot2

(back to top)

Built With

(back to top)

Getting Started

Click here to view the current version of this app in your browser.

Prerequisites

All dependencies will need to be built from the package.json file to modify code and run this app locally. You will need to have installed:

  • A text editor
  • Node.js
    • Node Package Manager (npm)

Installation

  1. Clone this repo.
  2. In your project root, you will need to install this project's dependencies by executing npm install in the terminal.
    • This will read the package.json file and create the node_modules folder with all the necessary packages and dependencies.
  3. Once installation is finished, you can launch the app in your browser by executing npm run start.
    • Keep this terminal instance running in the background during development.
    • You can end this terminal session with Ctrl+C.
  4. Open a separate terminal instance for any other development/version control needs.

Usage

  • src/App.js: Container component: structure & business logic.
  • src/components: Presentational components: UI rendering.
  • src/index.css: design and aesthetics.

(back to top)

Roadmap

There are no plans to develop additional features at this time.

(back to top)

License

Distributed under the MIT License.

(back to top)

Contact

Nate: Website | GitHub | Grepper

(back to top)

Acknowledgments

Dave Gray - React JS Full Course for Beginners

README Template

(back to top)

About

A swatch app that makes use of the colornames API, i.e. when React inputs meet CSS styles.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published