hridoyhazard/bettercolor

A Simple Project For BetterColor Readability. You Can Easily Choice Best Color Readability For Any Background.

Hi 👋

I am Shahadat Hossain Hridoy,I am currently pursuing my Bachelors in computer science from Metropolitan University. I am a tech enthusiast & a self learner.

• 🌱 I’m currently learning MERN Stack
• 👯 I’m looking to collaborate on Web Development Related Projects
• 🤔 I’m looking for help with MERN
• 🥅 2024 Goals: To be profficient in MERN Stack :|
• ⚡ Fun fact: I love taking photos, playing video games etc

Skills  

Languages

Frameworks

Databases

IDE

Operating System

Other Tools and Technologies

😂 Here is a random joke that'll make you laugh!

Connect with me

bettercolor's Issues

Update contibute.md

I want add some sections in contribute.md

1. How to make a pull request
2. how to create an issue
3. how to create a new branch
   this will be good for beginners to understand
   can you pls assign this to me @HridoyHazard

Initial color displayed in color picker not matching with text color

here text colour is white initially but the colour displayed in the colour picker is black.

Adding Social media buttons to Main Page of website.

Is your feature request related to a problem? Please describe.
One must be able to redirected to social media accounts when the buttos are being clicked.

@HridoyHazard

Sub-heading text

Describe the bug
The text after the heading is covered by the select color box

Expected behavior
The text should be above the select color box

Screenshots (optional)

Fix The Overall UI Of The Page

Describe the bug

Expected behavior

Screenshots (optional)

Additional context (optional )

I would like to add preloader to website.

Describe the Feature you want to end
Add preloader

Expected behavior
Make user experience better if website take more time loading till that pre-loader runs

Screenshots (optional)

Additional context (optional )

Hex Color code generator

I would like to add a hex color code generator. Add the hactoberfest label and assign this to me.

Align social media icons

Footer is not responsive and social media icons are not centered to their background

• In the footer section the social media icons are not centered and in case of small screens "About Contact Support" are overlapping with "Connect with us".

Refactor the code

Refactoring the code

Looking at the application code, I saw that it is necessary to refactor the code. The html structure is confusing.

The application is inside the <header></header>.

We can change it!

Please assign me this issue!

Fixing the responsiveness for all devices and adding feature of light & dark mode

@HridoyHazard kindly assign me this issue.

Hey want to improve the designing of social media icons and also the padding between them

Describe the Feature you want to end

Expected behavior

Screenshots (optional)

Additional context (optional )

Arrange Footer

hey @HridoyHazard i want to work on this issue will you assign it to me

TO add new Logo of Website

Describe the Feature you want to end
I want to change the older logo to new once.

Screenshots (optional)

Want to contribute it under Hacktoberfest.

Add a button to choose different font styles

Describe the Feature you want to end
Add a dropdown to choose required font styles, to view the text in different styles

Expected behavior
The text needs to appear in font style, the user selects

Screenshots (optional)

Additional context (optional )
Please assign this to me .I have done the changes, and the changes can be seen in screenshot

[BUG] - Style of the bottoms and width of the app!

Fix the Styles of the app

I'm looking the app and i see some 'bugs' of the styles:

So... i can fix the heigth of buttons and the width of the app if you want!

Please asign me this issue for the HacktoberFest

Feature Add: Setting up Tailwind CSS

Objectives:

• Setup the Tailwind CSS
• Change the styling according to the tailwind CSS @AlphaGaurav7 will do this

Improve footer Design

Please assign this issue to me! Improve footer Design

Proper alignment and Attractive Heading

hey @girordo I want to work on this issue will you assign it to me

Change cursor on colour selection and hex code button resizing

Describe the bug

• Cursor should change from default mouse for selecting colour.
• Hex code button needs to be scrolled

Expected behavior

• Cursor will change to pointer
• Hex code copying button needs to be wholly visible.

Screenshots (optional)

Fix mobile responsiveness

Fix Mobile responsiveness

Layout Fixing

Can Anybody Fix The Layout

deploy in netify

can anybody deploy this project in netify

Fix the pick color container

The CSS for the pick color container is not written properly, so Please assign me this issue so that I can fix it.

Add contributing.md

Add instructions for beginner contributors.

back to top button when clicking the logo

when clicking the logo, it will allow the user to quickly return back to the top

Add new Font style

Hey maintainer I want to work on this issue

Make a proper footer

Currently the footer is not good i'll make a better footer with tailwind css

Design Guide

Describe the Feature you want to end

I would like to improve the User Interface by creating a mockup on Figma, I would also update contributing.md to include a design guide
Expected behavior

Screenshots (optional)

Additional context (optional )

Bring some changes in heading

Please assign this to me.I will surely make awesome changes.

Improve Readme file

pls assign me this issue @HridoyHazard

Enhance README.md

Add more details about the project and Hacktober fest.

Improve overall UI design

Describe the Feature you want to end

• Add new feature that would enhance the overall UI design of the website
• Add new template and redesign the website
• Make it look modern

Expected behavior

• User friendly
• Responsive

Footer UI alignment

Describe the bug
The styles of the footer(alignment and the social icons) seem a bit out of place

Expected behavior
Proper alignment of the footer

I can work on this and fix the footer

Redesign the whole main section

Currently users have to scroll to bottom for viewing the changes and colour compatibility. These may hinder user experience

I would love to redesign the main section with Tailwind CSS and Vite which is super fast compared to traditional npx.

Also vercel would be great matching with the Tech Stack we are dealing here .

I am okay with your suggestion too.
Let me know what you think about the proposed changes. If you are okay with my ideas , then kindly assign me this issue.

Tiltable 3D elements

Describe the Feature you want to end

Expected behavior

A 3D modeled box element pattern that has tilt animation when it is hovered
Screenshots (optional)

Additional context (optional )

Layout fixes.

1. Spacing between the text and the color box
2. Too much margin between 'Read Below Message' and the message.
3. A space after the 'Else' in the last line.

I would like to work on these issues as part of Hacktoberfest. Kindly assign me this.

Fix - Size of the buttons (heigth)

Describe the bug
The heigth of the buttons in the app is not okay, i can't read the text inside them

Screenshots (optional)
Desktop:

Additional context (optional )
In other screen size
Mobile:

Ipad:

I can fix this issue, please assign it to me!

Rearrange all elements in Footer properly

I would like to rearrange all the elements in the footer

Implement invertColor feature

Describe the Feature you want to end
Currently we have invertColor function in home component but it is not being used. We should use it to swap/invert the text and background colors.

Expected behavior
Add a button which uses invertColor function and implements invert Color feature.

Color changing according the color picker

This can have more features like

• Color can change according to the color chosen by the user.
• User must be able to copy the hex codes generated.

Can you assign me this issue?

Improve font-style and add padding to text

Assign this issue to me

WCAG 2 level AA recommendation in the message

Describe the Feature you want to end
Currently, the user has to depend on her/his judgment for deciding the right "Color Readability".
This can be tricky/wrong in some situations as this is a manual and partially subjective decision.
Rather than just leaving the user on her taste/judgment - we should also give a hint of whether the current colors pass the WCAG 2 level AA contrast ratio thresholds.

Expected behavior
Users should be informed about the current contrast ratio.

Screenshots
A possible solution is to include the hint in the current message text.

Additional context (optional )

• Read more about WCAG 2 contrast threshold

add footer

Will make a proper NavBar

It consists of the BetterColor name on the left side, Home, and Github link buttons. I can add more buttons if the maintainer needs

Revamp frontend with Material UI

Petition to revamp design and layout using MUI with following capabilities:

• Floating bottom bar to switch text and background color.
• Implement mobile responsiveness.
• Fixed top bar with custom BetterColor logo and github button.
• Ability to change text content.
• Ability to change fonts and font size.

I would like to work on this as part of Hacktoberfest.

while changing the color.background and text color not changing

Describe the bug

Expected behavior

Screenshots (optional)

Additional context (optional )

Add option to copy color to clipboard

Buttons can be added that copies the color to the clipboard. If it sounds legit, can I work on it?

Fix the navbar

Proposal for changing some designs.
I would like to create a navbar with the heading Better Color on the left. Add the view on Github button on the right side. Also fix the bar for varying sizes as whenever the screen is minimized it looks like this. If the proposal sounds good then please assign me this issue for hactoberfest.

Display Color Copied Message

Describe the Feature you want to end
After clicking on the Copy Me button user doesn't know whether the color is copied or not.

Expected behavior
The "Color has been Copied" message should be shown for a few seconds.