Giter VIP home page Giter VIP logo

kiranaminpanjwani / randomized-color-lab Goto Github PK

View Code? Open in Web Editor NEW
29.0 3.0 38.0 864 KB

A React color-guessing project will help beginners understand the basic principles of React.js (components, properties, and hooks).

Home Page: https://colors-lab.netlify.app/

License: GNU General Public License v3.0

HTML 10.26% CSS 48.97% JavaScript 40.36% Shell 0.40%
react css basic-programming beginners beginners-guide color-guessing-game learning microsoft netlify-deployment usestate-hook

randomized-color-lab's Introduction

Randomized Color Lab

According to science, viewing colors can help you relax. Yes, colors strongly impact our psychological, emotional, and even physical well-being. We all need some form of entertainment to escape our hectic routines. You can use Randomized-Color-Lab as a stress management tool because it will help you change your mood if you are feeling overly stressed.

This easy-to-navigate color guessing game will help users to play the game and relax their minds. The Randomized Color Lab will also allow the user to discover new colors and copy their favorite color code at the end of the game. Users can access this website at any time from any device.

Visit the website: Randomized Color Lab

πŸ“Œ Tech Stack

React CSS

πŸ“Œ Snapshot of the Website Before Contributions:

image

πŸ“Œ Snapshot of the Website After Contributions:

image

πŸ“Œ Contribution Guidelines πŸ—

Are we missing any of your favorite features, would you like to include them❓ We invite you to contribute to this project and make it better. To start contributing, follow these guidelines:

1. Fork this repository.

2. Clone your forked copy of the project.

   git clone https://github.com/<your_github_user_name>/Randomized-Color-Lab.git

3. Navigate to the project directory.

   cd Randomized-Color-Lab

4. Create a new branch:

   git checkout -b YourBranchName

5. Make changes in source code and stage.

   git add .

6. Stage your changes and commit

   git commit -m "<your_commit_message>"

7. Push your local commits to the remote repo.

   git push origin YourBranchName

8. Create a PR

9. If anyone contribute to this repository, then the changes will not reflect in your local repository. For that:

10. Setup a reference(remote) to the original repository to get all the changes from the remote.

   git remote add upstream  https://github.com/KiranAminPanjwani/Randomized-Color-Lab

11. Check the remotes for this repository.

   git remote -v

12. Fetching from the remote repository will bring in its branches and their respective commits.

   git fetch upstream

13. Make sure that you're on your master branch.

   git checkout main

14. Now that we have fetched the upstream repository, we want to merge its changes into our local branch. This will bring that branch into sync with the upstream, without losing our local changes.

   git merge upstream/main

Code of Conduct πŸ“œ

To maintain a safe and inclusive space for everyone to learn and grow, contributors are advised to follow the Code of Conduct.

Contribution is fun! ❀️

If you have any feedback or suggestions please reach out to me.

In order to make a hassle-free environment, I implore you all (while contributing) to follow the instructions specified here Contributing Guidelines!

You can create an issue and mention there , which new features or extension can improve this Project. Thank you


Show some ❀️ by starring⭐ this awesome Repository!

πŸ“Œ Getting Started with Create React App πŸ’«

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm install

Installs all the packages and libraries used in the project.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

OUR VALUABLE CONTRIBUTORS✨

Project Admin ❀️

Β© 2022 Kiran Amin Panjwani and contributors
This project is licensed under the MIT license.

forthebadge


Kiran Panjwani

randomized-color-lab's People

Contributors

ahegde3 avatar anjali2201 avatar athi223 avatar beam41 avatar dun-sin avatar itsmdasifraza avatar jackwebdev avatar jolenekearse avatar kiranaminpanjwani avatar logic-404 avatar myiotuhris avatar rishabjangra avatar semako123 avatar tes-balo avatar thom-asm avatar zzaidzz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

randomized-color-lab's Issues

Unnecessary gap

There's an unnecessary gap in between these two elements, it doesn't make things look good

I can work on it, if you feel this change is valid
image

Deprecate showing multiple buttons for the same color

πŸŽ‡ Description

Instead of showing 6 buttons for the same colour, I have 2 suggestions:

  1. Show only one button for the winning colour in the centre.
  2. Show all the randomly generated colours in the 6 boxes with their hexadecimal values.

image

Any other suggestions are welcome. I would like to work on this issue.

Write unit tests

Another thing that should be added for a beginner react project is how to write unit tests for components correctly!

Can you please assign me to this issue, thanks

UI/Color of the website

πŸŽ‡ Description

The black color and it shades does not look nice in the randomized-color-lab webapp .

πŸ“· Screenshots

image

Remove "code smells" from Home page

Seeing as this is meant to be an application meant to teach beginners how to use React, it might be a good idea to remove some
"code smells". These include :

  • Ternary operators with an empty falsy value i.e true?"its true":" "
  • When and when not to use the use effect hook

Add animation effect in the "lose" and "win" part

Description

Although it is a game, but the part 'You lose' , 'You win' is not so articulately distinct, can I add an animation to the "you lose" and "you win" text to make a difference?
Can I make this contribution under Hacktoberfest'22?

Screenshots

No response

Hover state for color squares should only apply to desktop viewports

πŸŽ‡ Description

I noticed that the hover state only applies for mobile screen sizes. This is not ideal

  • It's not recommended to use hover state for mobile devices. Use a ripple effect instead on mobile screens
  • hover state should be present on desktop view only

πŸ“· Screenshots

footer-2022-10-03_20.38.44.mp4

Screenshot from 2022-10-03 20-30-05

Footer GitHub link

πŸŽ‡ Description

Add GitHub logo in footer which on click will redirect to GitHub page

πŸ“· Screenshots

No response

Toast on win/Loose

On winning or loosing a toast will be displayed with the status.This will make it clear and give feedback to the user.Can I take this issue?

Add hand cursor to buttons

Related to issue #5

All buttons should have the hand cursor to indicate they are clickable
For example: The copy color button
image

if it's fine can I work on this

[Help feature] <An icon to explain how to play>

πŸŽ‡ Description

Hi! Great game, but I didn't understand that you need to click the color matching the hex code. I'd like to add a Font Awesome help icon with a tooltip including the instruction.

πŸ“· Screenshots

No response

[BUG] Prettier config is empty

πŸŽ‡ Description

  • The prettier file is empty and as such the associated files are not getting formatted prior to committing.

  • Even though Husky has been configured, a contributor should be able to use the specified config for previewing their formatted changes. This is only possible via a locally configured prettier config.

  • The main purpose of Husky is to ensure that the appropriate formating is done when a contributor forgets to format their changes with Prettier or refuses to.

πŸ“· Screenshots

Screenshot from 2022-10-06 23-30-33

[DOCS] Minor issues

Description

Under the Contribution is fun section, there's a paragraph that says "If you have any suggestions you can reach out to me".

  • Consider stating the channels through which you can be reached out to in that section. This can be done by specifying your work email, twitter etc

  • There are a few minor grammar fixes I have proposed in the PR that's linked to this issue

Screenshots

No response

Create an alert message

Although it is a game, but the part 'You lose' , 'You win' is not so articulately distinct. Adding an alert message in the top about winning or losing the game can make the whole process of judgement rather more distinct.
I want to create some alert messages to be displayed on top so that the user gets it clear that the verdict has come.
Can I make this contribution under Hacktoberfest'22?

Use Spacebar to get random color

1.It will be easy and fun to get random colors instead of clicking on it repeatedly.
2.we will use spacebar to generate random colors.

[FEATURE] Unit tests

Description

Add unit tests and documentation to the project.

Use jest and RTL to write unit tests and then explain about unit tests in the learn.md file

Screenshots

No response

[BUG] Clearer text

πŸŽ‡ Description

The colour of the footer isn't really visible, don't know if this is intentional

πŸ“· Screenshots

image

A11Y is broken/ non existent

πŸŽ‡ Description

Currently, the website doesn't account for any Accessibility (A11Y) issues that a user might have when using the site
For example, a user should be able to navigate & use the website using their keyboard.

I've made the changes and can submit a PR if you assign this issue to me :)

πŸ“· Screenshots

No response

Changing the Button Style

Description

Hey, I think the generate color button should not cover the whole page width . rather it would look better if we style it as a button instead.Also in this way the 'End Game?' or basically the reset button can also be properly placed on screen in case the player gets the right color.
If, u think this can be a possible feature to work on, please do assign me this issue.

Screenshots

Screenshot (227)

Screenshot (228)

Transition doesn't work on the squares

Description

Hello,

I have added a bug fix pull request. The issue is relating to the hexcodes array map method and a new React Key being generated and resulting in a new element being generated. As this new Key is made React can't keep track of the element before resulting in the transition effect not applying.

The transitions do not apply when you generate new colours. Before and after below.

Fixed in #34.

Screenshots

Broken Transition

bug.mov

Fixed in Pull Request #34

fix.mov

Title and Wording Improvement

Hello,

Title Says :

Click The Button Below OR Press <Spacebar> &
Generate NEW Hex Colors

Well this project is made as a game to find correct color right by identifying the hex color shown at top. But any user who visits first time will be confuse and will consider it as normal random color generator.

My suggestions for Title are:

  1. Click the Button Below or press spacebar to generate new colors
    Identify this color(Hex Code here) and click on it to win the game.

  2. Press Spacebar or Click on Random Color Button to generate new Colors
    Find this color and win the game

or you can suggest any other Title as well.

More on this I would say to add an info button on side with first Title, clicking on it will show a basic tooltip with information regarding game and working.

I would like to work on this if you think it should be done.

Screenshot 2022-10-11 21 18 13

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.