[Feature Request] Randomize the color of text being displayed everytime when visiting

[XanderRubio]

Description

This is to randomize the text color displayed for the Location of Contributors on the Contributors Map page.

For this, you will need to work in the MapContributors component and look at the ContributorsGrid.jsx to model for implementing a get different colors function.

Let me know if you have any questions.

Screenshots

Make the Location of Contributors change colors every time you refresh and view the page.

Checklist

• [X] I have checked for duplicate issues
• [X] I have read the Contribution Guidelines
• [ ] I am willing to work on this issue (optional)

[DanielZhang111]

Can i get assigned?

[XanderRubio]

Hi @DanielZhang111, Good to go and have at it!

[DanielZhang111]

Thanks!

[DanielZhang111]

I'm kind of confused on how to do this... Could I get some tips?

Sorry I'm kind of new to programming - just a freshman

[XanderRubio]

I'm kind of confused on how to do this... Could I get some tips?

Sorry I'm kind of new to programming - just a freshman

Of course, I'm logging off for the night and I will assist tomorrow 👍🏻

[DanielZhang111]

Ok thanks :)

[maazshakeel]

Can I work on this issue, Xander?

[XanderRubio]

Can I work on this issue, Xander?

Hi @maazshakeel! Thanks for your enthusiasm! The issue you mentioned has been assigned to @DanielZhang111, who is currently working on it. In the meantime, I recommend contributing to issue #5 to get a better understanding of the project and start contributing. I'll be adding more UI-related issues in the coming days. Also, I noticed that you're interested in learning about AI. This repository is a great place to practice and improve your skills in a collaborative and open environment. Have a great day!

[maazshakeel]

Great, thanks mate! Would love to contribute 🙌

[XanderRubio]

I'm kind of confused on how to do this... Could I get some tips?

Sorry I'm kind of new to programming - just a freshman

HI @DanielZhang111, so for going about this issue one potenail way would be to do the following:

Recreating the getDifferentColors function from the [ContributorsGrid component file](), you can simply recreate the function in the MapContributors component file. The getDifferentColors function doesn't rely on any local state or props of the ContributorsGrid component, so it can be defined and used in any component. This isn't the most effienct way to resuse a function in React components but it is an easy option to implement. Let me know if this helps. This is the function you would place in the the MapContributors component file:

const getDifferentColors = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgba(${r},${g},${b},0.8)`;
};

And then you would need to add it to the p tag:

<p className={styles["contributor-title"]}>Location of Contributors</p>

Let me know if you have more questions and you got it, Daniel!

[XanderRubio]

Great, thanks mate! Would love to contribute 🙌

Great open your first pull request for issue #188 and I will review and get it merged right away for you!

[maazshakeel]

Sure. (I'll do it tomorrow gotta get some sleep)

[XanderRubio]

Sure. (I'll do it tomorrow gotta get some sleep)

Yes! Sleep is important😉

[DanielZhang111]

Ok I'll try that later :)

[XanderRubio]

Ok I'll try that later :)

Great!

[maazshakeel]

Opened pull request!

Contributed to issue #196 5

[XanderRubio]

Opened pull request!

Contributed to issue #196 5

@maazshakeel Excellent! I will be reviewing shortly!

[maazshakeel]

Looking forward to it!

[jayprakash25]

Is this issue resolved? ...else can i start working on this

[XanderRubio]

Is this issue resolved? ...else can i start working on this

Hi @jayprakash25. Confirming this issue is already being worked on by @DanielZhang111. I would recommend to contribute go ahead and work on issue #188 to get involved right away.

[jayprakash25]

Sure!!

[XanderRubio]

Sure!!

Excellent!

[jayprakash25]

I have done a pr ...kindly check it

[XanderRubio]

Hi @jayprakash25 . I'm currently traveling and once settled I will review. Thank you!

[DanielZhang111]

I did not finish it sorry. I do not know how to do this :(

[XanderRubio]

I did not finish it sorry. I do not know how to do this :(

All good @DanielZhang111. I recommend help with getting familiar with contributing to open source go ahead with sharing what you want to do before you die by working on issue #188. This will help, and also you can contribute right away by opening a pull request by following along in the CONTRIBUTION-GUIDELINES.md.

No worries; you are always welcome to continue tackling a problem. You got this, and I will reassign this issue to another contributor in the meantime and go ahead with sharing your text and image for what you want to do before you die in the meantime. That way, you can also join the Before I Die organization. Have a nice day!

[harmit17]

@XanderRubio I would like to work on this issue. I am new to open-source contributions. I have just registered with Hacktoberfest.

[XanderRubio]

Excellent! You got it, @harmit17, and happy developing!

[harmit17]

Thank you :)

[DanielZhang111]

Thanks for the suggestion @XanderRubio. I will consider it! :)

[jayprakash25]

I would like to contribute

[harmit17]

Hey, @XanderRubio, I think CSS is overriding whatever changes I make to change the color after the page refreshes. I have also removed the blue color from the module.css file. When I inspect it shows me a blue color in the module.css file. What should I do? Any suggestion or hint?

I am also getting error for ( fetch( https://api.opencagedata.com/geocode/v1/json?q=${encodeURIComponent( location )}&key=${apiKey}).

[XanderRubio]

Hey, @XanderRubio, I think CSS is overriding whatever changes I make to change the color after the page refreshes. I have also removed the blue color from the module.css file. When I inspect it shows me a blue color in the module.css file. What should I do? Any suggestion or hint?

I am also getting error for ( fetch( https://api.opencagedata.com/geocode/v1/json?q=${encodeURIComponent( location )}&key=${apiKey}).

Hi, @harmit17, The reason you are getting the fetch error is that you don't have the API keys while working on your local dev server. The API keys have been added to the environmental variables in the project repository for security purposes. However, you don't need to worry about the fetch error for now, since we are only focusing on adding randomization to the text.

I would suggest you take a look at the code structure that applies the randomization to the Contributor List here. Specifically, check the function that starts on line 5. If you need further assistance, please don't hesitate to let me know.

[XanderRubio]

I would like to contribute

Hello @jayprakash25! I apologize for not passing this issue to you earlier, as I know you had requested it previously. You will be given priority for the next opportunity to contribute if we need to pass on this issue to someone else. Your eagerness to help and assist is much appreciated. Moreover, feel free to add your own open issue to the project. Thank you!

[harmit17]

@XanderRubio Thanks for clearing the doubt. I will try again and let you know.

I tried it, even if I commented on the blue color in the module.css file. The color stayed the same. I defined the function in the component and added style to the tag.

[XanderRubio]

@XanderRubio Thanks for clearing the doubt. I will try again and let you know.

I tried it, even if I commented on the blue color in the module.css file. The color stayed the same. I defined the function in the component and added style to the tag.

I would need to look deeper into this; however, my time today and tomorrow needs to be focused on my other work tasks. Would you like me to ask for another contributor to help out? I know @jayprakash25 would like to help you out. You can create a pull request with what you have at this point, and we can have a look at your code that way. Let me know😇

[harmit17]

@XanderRubio Thanks for clearing the doubt. I will try again and let you know. I tried it, even if I commented on the blue color in the module.css file. The color stayed the same. I defined the function in the component and added style to the tag.

I would need to look deeper into this; however, my time today and tomorrow needs to be focused on my other work tasks. Would you like me to ask for another contributor to help out? I know @jayprakash25 would like to help you out. You can create a pull request with what you have at this point, and we can have a look at your code that way. Let me know😇

I think I have completed the feature request. It was my mistake in reviewing the code. I kept looking at the hosted page when I ran the code. I am creating a pull request.

[XanderRubio]

@XanderRubio Thanks for clearing the doubt. I will try again and let you know. I tried it, even if I commented on the blue color in the module.css file. The color stayed the same. I defined the function in the component and added style to the tag.

I would need to look deeper into this; however, my time today and tomorrow needs to be focused on my other work tasks. Would you like me to ask for another contributor to help out? I know @jayprakash25 would like to help you out. You can create a pull request with what you have at this point, and we can have a look at your code that way. Let me know😇

I think I have completed the feature request. It was my mistake in reviewing the code. I kept looking at the hosted page when I ran the code. I am creating a pull request.

Oh yes, I understand. Sometimes, when I perform code reviews and switch to the Contributors List or Contributors Map page, I forget to make sure I'm viewing it on the preview link and end up on the live site instead. Thanks for letting me know. Once you create the pull request, I'll take a look as soon as possible!

[harmit17]

@XanderRubio I have created a pull request. Please look into it whenever you get time. Thank you.

[XanderRubio]

@XanderRubio I have created a pull request. Please look into it whenever you get time. Thank you.

Great! Looking now!