Resistor color code

Resistor color code calculator for 4 bands.

Description

This project is a simple calculator of the value of a resistor based on the color code of the bands. It is a project that I did to practice my knowledge of HTML, CSS and JavaScript.

Technologies Used

• CSS library: W3.CSS
• Icons: Google fonts - Material Icons
• Font family: Google fonts - Baloo 2
• Background image: Lorem Picsum
• Build tool: Vite
• Hosting: GitHub Pages
• Dev Environment: VSCode with dev containers in Zorin OS

Demo

You can see the demo here: https://jhordyess.github.io/resistor-color-code/

Screenshot

Update 2023

Here is the project developed with React that includes a Inventory tracker of resistors https://github.com/jhordyess/resistor-tracker and the project online: https://res.jhordyess.com

How to use

1. Clone the repository.

git clone git@github.com:jhordyess/resistor-color-code.git

2. Open the project folder.

cd resistor-color-code

3. Install the dependencies.

yarn

4. Run the project.

yarn dev

5. Open the browser on http://localhost:5173/resistor-color-code.

How to use with VSCode dev containers

You can use the VSCode dev containers to run the project in a containerized environment.

You need to have installed Docker and VSCode, and the Dev Containers extension.

1. Clone the repository.

git clone git@github.com:jhordyess/resistor-color-code.git

2. Open the project with VSCode:

code resistor-color-code

3. Open the command palette and select the option Dev Containers: Reopen in Container.

4. Wait for the container to be built and the project to be started.

5. Open the terminal in VSCode and run the project:

yarn dev

6. Open the browser at http://localhost:5173/resistor-color-code

License

© 2022 Jhordyess. Under the MIT license. See the LICENSE file for more details.

---

Made with 💪 by Jhordyess