JustColor link: https://zeddrix.github.io/justcolor/

Hi, I’m Zedd. How are you doing? Thank you for checking out my project! I really appreciate it. In this article, you’ll know how I created JustColor, what inspired me to develop this little project, and what to expect on its next versions!

Background

I want to be a computer programmer, just like I said in the About Zedd page. Thanks to our independent homeschooling, my dad was able to teach me how to code. So technically, I’m a programmer now. My father, who currently develops a useful project (called UseDelight), inspired me to develop a simple app of my own that can be useful, too. 

As a beginner, I watch online video courses about programming. And every time I learn something new from these videos, I apply them to this project right away. Doing so really boosted my learning progress and experience because I was not only committing what I learned to my head memory, but also to my muscle memory. 

Purpose of JustColor

I would like to dedicate JustColor to my baby sister, Erindelle. My whole family would like to use this app to teach her about colors as she grows up. 

If you are a parent or a teacher, you can also use JustColor when teaching colors to children. If you’re an adult already or a teenager like me who simply wants to play with some tinie-tiny color buttons like a kid, that’s totally fine because we all enjoy colors, right?

Creating the App

I built this project at home using a computer, a specific IDE¹I personally use Visual Studio Code, and a browser. Additionally, I used HTML (of course), pure CSS (with no additional library), and Vanilla JavaScript. That’s it.

You can take a look at the source code here: https://github.com/zeddrix/justcolor-vanilla. Now, please let me show you how I developed the features of JustColor, step by step.

Built-In Color Buttons

It all started with the idea of teaching my baby sister about colors. First, I had to plan and create a “blueprint” for this project. 

The concept was very simple—have a number of built-in color buttons²these are colors red, blue, yellow, green, purple, orange, blue green, blue violet, yellow green, red violet, red orange, yellow orange, black, white, and grey. that could change the webpage’s color. For example, when the user clicks the color button yellow, the whole page will be colored yellow. 

But the problem is that having only a limited number of color buttons also limits the user’s experience. 

The Arbitrary Button

So I added a new special button, which turns the page’s color into arbitrary or random colors. In that case, the user can change his/her webpage’s color into whatever color by clicking on this special button a couple of times.

The Append Button

But what if the user fancied a color from the Arbitrary button? Wouldn’t it be interesting to save and add that color to your palette? That’s exactly what the Append button does. With this, you can add a new color button on your palette.

Naming and Editing Your New Color Buttons

You can also name your new favorite color before adding it to your palette. But if you don’t want to name it, just type a whitespace. 

Sooner or later, you might stumble on the official name of one of the colors you have and decide to rename it (or you just want to rename it with whatever you want). Or you might want to remove a certain color from your palette.

That’s what the rename and delete functions are for. The modal holding these functions will appear by long pressing on the color button you want to edit for about 2 seconds.

Uneditable Color Buttons and Duplication

Yet, with that being said, the built-in color buttons that I’ve been talking about earlier (the colors red to grey) classifies as uneditable³In actuality, the word ‘uneditable’ is not even an English word, but it’ll make do. buttons.

I’ve decided to disable it for now. But, I think I’ll let you guys edit these built-in buttons anyway on the next versions. For now, you may comment and tell me what you think about this in the Comments section below.

Moreover, I’m not allowing you guys to duplicate a color button. That’s why you’ll see the Append button disabled and dark-colored when you click on a color button. 

But let’s say you coincidentally found the color (from all those 16,777,216 colors?) identical to a color that’s already on your palette using the Arbitrary button, well. . . okay. I guess you can do that.

Next Versions

Yes, we have upcoming next versions for JustColor, and I promise you, this app will continue to develop towards improvement. But I’ll be the first to say that this app is not perfect yet, so you might find some bugs in the program. When you find one, I’ll make sure it gets fixed on the next versions.

Now, just note that the following are just the barebones, or the basic idea, of the next version. Meaning, the soon-to-be-added features for the next versions is not restricted to the ones I’m about to mention here. Furthermore, these are not the only upcoming versions of JustColor— I didn’t include the next, next versions here yet. But you’ll soon find out what those versions have in store. For now, check these out:

Version 1.25

JustColor’s Vanilla JavaScript code will be reconstructed into React. And I will also turn this website into a real mobile application which can be downloaded on Play Store and on App Store. Doing so will improve the user interface and the design of this app. 

From here on, I’ll start using React (instead of Vanilla JavaScript only) for developing JustColor. This is a huge step for me because React is new to me. At the same time, having React will be a real game changer, so this will be exciting.

Version 1.50

There will be an addition of another exciting feature which I’d like to call the Shift button. Clicking on this special button will color your page automatically!

If in consecutive order, the first button (or any color button you choose) will click and then shift to the next after a certain amount of time. If in a random order, any button will click and then shift to another color button randomly. With this feature, you may choose not to click your color buttons one-by-one—the Shift button will do it for you!

That’s it guys! I hope you’re all excited for the next versions! If you made it down here, thank you very much for carefully reading this! I really appreciate it. Just color and have a great, colorful day! Keep safe!