During my resume-building process for the job hunt, I created five projects:-
But a common mistake that I made while working on all these projects was to just go to YouTube and Google and take references (typical college mindset). I was in a hurry to add as many projects as possible (to compensate for my low industry work experience, about 1.5 years). Soon I realized that my resume was not shortlisted by any company. Frustrated by receiving rejection emails daily, stating, "Unfortunately, we are proceeding ahead with other candidates" I googled and discovered that it's not the quantity but the quality that matters. Projects may not necessarily be top-notch and something no one has ever made. When there are nearly 27 million developers worldwide it's not possible. But the right mindset would be: Not to copy/paste, but rather pick an idea from scratch, work upon it, and develop a different spectrum of that idea. Search for the competitors. Go to the comments section(if there is any )and filter out the points people are unsatisfied with. Then start a project around that idea. Also having projects that are accessible to others on a live website, allows users to interact with them.
One such project developed is Paletto.
Desktop view
mobile view
How I built the project based on my idea, making adjustments along the way by removing, changing, and adding elements as needed during the ongoing development?
Initially, there was a static image, and I was working on fetching the colors correctly but soon I realized that this project will be hosted soon and open for the users to play and interact with it. So from these images, the idea of upload for Desktop and upload and camera for Mobile mode:-
<input type="file" id="user-image-input" accept="image/jpeg, image/png">
<img class="upload-icon" id="upload-user-image" src="./images/cloud-upload.png">
<div class="left-header" id="header"></div>
<div id="uploaded-image-container" class="image-container">
<img id="user-image" class="styled-image">
<button id="do-user-image" class="do-it-button" style="display: none;">See color palette</button>
</div>
Now again a conflict was there: If an image has many colors where to keep the upload button so as to avoid the user's effort of scrolling again and again to the top for multiple uploads? Hence the solution was to separate out upload section and canvas display section. I divided them into left-column and right-column:
<div class="container">
<div class="left-column">
</div>
<div class="right-column">
</div>
</div>
Moving on, the idea was to keep this color palette as the color card we use for painting out homes as it will be easy for developers as well as the common public to relate (Hence, I avoided using deep technical UX/UI that would be difficult for the user).
Secondly how and what information to display along with color?
Initially, only the color was displayed (without the bottom part showing color codes), and the hex code appeared on hover, which could be copied by clicking on the color card. Then, I realized that users might need the RGB code or HSL code. I attempted to include all three codes on the color card, but it made the design look cluttered. The only solution was to separate the codes from the color. For UI/UX inspiration, I searched on Dribbble (a nice website for web design) and referred to examples. Afterward, I used Figma to ensure precision in color height, width, font adjustments, and other design elements.
Finally added the color codes at the bottom of the respective color. Now my color card = color + color codes. So the flow is to copy any color the user need to click on the code, that is it
function outputColors(colors) {
var output = document.getElementById('output');
var colors_list = document.createElement('ul');
colors_list.id = 'colors';
for (var c in colors) {
var color = colors[c];
var colorBox = document.createElement('li');
var upperColorBox = document.createElement('div');
upperColorBox.className = 'color-box';
upperColorBox.style.backgroundColor = color;
upperColorBox.dataset.hexCode = color;
var hexCode = document.createElement('div');
hexCode.className = 'hex-code';
hexCode.textContent = color;
hexCode.addEventListener('click', function () {
var code = this.textContent;
copyToClipboard(code);
var codeBox = this;
codeBox.textContent = 'Copied!';
setTimeout(function () {
codeBox.textContent = code;
}, 1000);
});
var rgbCode = document.createElement('div');
rgbCode.className = 'code';
rgbCode.textContent = getRGBCode(color);
rgbCode.addEventListener('click', function () {
var code = this.textContent;
copyToClipboard(code);
var codeBox = this;
codeBox.textContent = 'Copied!';
setTimeout(function () {
codeBox.textContent = code;
}, 1000);
});
var hslCode = document.createElement('div');
hslCode.className = 'code';
hslCode.textContent = getHSLCode(color);
hslCode.addEventListener('click', function () {
var code = this.textContent;
copyToClipboard(code);
var codeBox = this;
codeBox.textContent = 'Copied!';
setTimeout(function () {
codeBox.textContent = code;
}, 1000);
});
var hexCode = document.createElement('div');
hexCode.className = 'code';
hexCode.textContent = color;
hexCode.addEventListener('click', function () {
var code = this.textContent;
copyToClipboard(code);
var codeBox = this;
codeBox.textContent = 'Copied!';
setTimeout(function () {
codeBox.textContent = code;
}, 1000);
});
colorBox.appendChild(upperColorBox);
colorBox.appendChild(hexCode);
colorBox.appendChild(rgbCode);
colorBox.appendChild(hslCode);
colors_list.appendChild(colorBox);
}
output.innerHTML = "<h2 style='text-align: center;'></h2>";
output.appendChild(colors_list);
}
Second color's RGB code is copied on-click:-
Coming back to the left section again.
Users will not only upload the image and copy codes. There was something missing. Yes, and that was proving them with some other functionality. How I started thinking about what all users can do with this color palette??
1.) Users may need more shades of a particular color.
For instance, if a user wants a shade similar to a specific red
color or has a photo with a beautiful red shade but wants
something slightly lighter or darker, I incorporated Google and
Cooler palettes. Users can simply visit the provided links,
click on the shade they desire, and easily implement it.
(Google Palette🔗Coolors Palette🔗)
2.) Users may need to click on the screenshot of the color palette
from the specific photo or the image they have uploaded. (
*Screenshot⭳ *)
3.) Users may want to download the color palette for future
reference, not just the screenshot including the image but
specifically the color palette. ( SVG⭳ and ASE⭳ ).
<div class="button-container">
<span class="clickable-text" id="download-button">SVG⭳</span>
<span class="clickable-text" id="download-ase-button">ASE⭳</span>
<span class="clickable-text" id="take-screenshot">Screenshot⭳</span>
<span class="clickable-text" id="google-palette-button">Google Palette🔗</span>
<span class="clickable-text" id="generate-coolors-button">Coolors Palette🔗</span></div>
Now during the ongoing project development, I recognized the significance of incorporating sample images. This proves especially useful for users who may not have an image readily available or prefer to quickly assess the website's functionality without uploading their own. To facilitate this, I included four sample images:-
<div class="last-sec">
<div class="second-sub">
<div class="need-sample">No image?</div>
<div class="need-sample-2">Try these :</div>
</div>
<div class="sample-image" id="sample-image">
<img class="sample-img" id="imageId-1" src="./images/images.jpg">
<img class="sample-img" id="imageId-2" src="./images/samplee.webp">
<img class="sample-img" id="imageId-3" src="./images/download.jpg">
<img class="sample-img" id="imageId-4" src="./images/room.jpg">
</div>
</div>
Js:-
const sampleImages = document.querySelectorAll('.sample-img');
const targetImage = document.getElementById('coke');
sampleImages.forEach(sampleImg => {
sampleImg.addEventListener('click', function () {
targetImage.src = this.src;
console.log(targetImage.src);
const imageId = this.id;
do_it(imageId);
});
});
Similarly was tracking, testing, and developing the mobile mode as well (mostly CSS and some JS functions).
Note: Always remember to frequently push the code to GitHub (small but useful advice).
After my project was ready, I followed these steps (You can also my blog on: "Domain hosting" if you want to host this project live) :
Step I: Push the code to Github.
Step II: Go to settings ➝ pages
Step III: Select branch as "main" and click on save.
Select "main" branch:-
After a minute or so, There will be a message on top stating: Your website is live at dummywebsite.github.io. And the project is hosted, ready to use, and play.
Conclusion:
In building Paletto, I discovered that quality outweighs quantity. Initially, I replicated projects, but job rejections prompted me to seek uniqueness. So, I developed Paletto from scratch, considering users at every turn. I determined where to place buttons, drawing inspiration from home paint cards. Deciding which color codes to display took careful thought, and reviewing designs on Figma provided insights. Paletto isn't just about colors; it's a journey. Integrating useful features like downloads and sample images made it a practical, interactive tool. Taking it online was the finishing touch, transforming code into something accessible to everyone.
Top comments (0)