re: Daily Hacktoberfest Miscellaneous discussion (October 5th) VIEW POST

FULL DISCUSSION
 

Sent a PR to DEV πŸ•ΊπŸ•Ί

Fix #4106: Showing color preview in Edit Profile #4212

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Documentation Update

Description

This is Fix For #4106. The current color-picker does not show a preview so it is hard to guess the color contrast. I added a preview (screenshot added below) which shows your selected colors.

Also, Added a <input type="color"> which makes it is easy to select the color.

Since there are other pages that depend on 'color-picker' class I did not change anything in colorPicker.js or any of the styles of current color-picker. I created a new file colorPreview.js and some new classes in html.

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Mobile

Mobile screenshot of color preview feature

Desktop

Desktop Screenshot of color preview feature

Recording

Recording of color preview feature

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

My first PR To DEV! I was not very sure if I could do this or not since DEV's codebase is probably the largest codebase I've ever worked on but now I'm super proud of myself to complete this 🌻

Me showing this code to everyone : Elsa showing magic to Anna

code of conduct - report abuse