ColorZapp

Video Demo: ColorZapp

Description:

ColorZapp is a color-generating web-based application built with HTML, CSS, and JavaScript.

In this app, users can generate a random color by clicking "Generate Color," the color will be displayed in the box below the button. Additionally, the User can copy that color's RGB and HEX code. The red, green, and blue toggles are for adjusting the color. This app also has a dark mode option.

Functionalities:

Generate Button:

In the middle of the app, there is a "Generate Color" button. that generates a random color and the color is displayed in the demo color box. On the right side of the app, the RGB and HEX input fields show the color codes of that generated color. Additionally, the red, green, and blue toggles change when a new button is generated. I have implemented JavaScript's Math.random() function to generate a random number between 1 and 255 for red, green, and blue each and used DOM manipulation to display the color.

RGB and HEX:

On the left side of the app, there are two input fields. One is for RGB and another is for HEX. These two fields will give the RGB and HEX values of the generated color. Also, I have used CSS absolute property and a copy icon from the fontawesome website to add the copy function from these inputs. There is a CSS animation is used to assure the user that the color code has been copied.

RGB Toggles:

Below the input fields, there is an adjust color section that contains RED, Green, and Blue range toggle bars to adjust the color. simply by toggling these bars, the color gets adjusted and can be seen live in the demo box. Also, the input fields' values get changed according to the color.

Dark mode:

I have used the JavaScript localStorage and used CSS to implement the Dark mode for this app. On the top right corner the black moon icon(in light mode) or the yellow sun icon(in dark mode) changes the theme color to the opposite.

Responsive Design:

I used CSS media queries to make the app mobile-friendly.

File and Folder Structure

at a glance:

colorzapp/
├── assets/
├── README.md
├── index.html
├── script.js
└── style.css

ColorZapp is a web application built with HTML, CSS, and JavaScript. Why I chose these techs and what challenges I faced are mentioned below:

index.html

HTML is necessary to build all types of structures for any web app. This technology provides the skeleton of the app. While writing plain HTML, I had to keep in mind "What would the structure look like?" and "How would I manage the necessary tags to fill out this?"

style.css

CSS provides the design of this app. I faced a huge trouble while writing CSS. First I had to take each of the individual element and designed them. I used CSS flexbox, absolute property values, borders, margin and paddigns, radius, transitions, transforms, and animations. I made my animation named "copycom" to provide the animation for the copy icon beside each input field. I searched a lot to figure it out. I copied some of the range input's design from a random codepen link. There is an asset folder where located two images. The moon icon will be displayed on light mode and by clicking it it will become dark. The sun icon will be displayed in the dark mode and by clicking it the theme will become light. And thanks to fontawesome for giving me a copy icon.

Script.js

All the functionality I mentioned above was made possible by this programming language JavaScript. The Script.js file includes all the necessary JS code to make this web app alive. I commented on everything in the field. There are several challenges I faced while coding in JavaScript. At first, I declared all of the variables on top of the file. While clicking the generate button the challenge was to create a random color between 1 and 255 for each RGB values. I used Math.floor() and Math.random() built-in JavaScript functions to implement this. The next challenge was to convert from the RGB to hex. I used the JavaScript String operation toString(16) method to implement this functionality. Then the challenge was to make the range inputs live. I used the addEventListener functionality twice to make them live. With the combined effort of CSS animation and JS Navigator.clipboard I made the copy code icon's functionality(beside the input fields) live. Lastly, I used JavaScript's localStorage and EventListeners to implement the dark mode functions.

Attributes:

I would like to give credit to Google, ChatGPT, fontawesome for making this project happen.