added random pattern button that enables contrasting css patterns

[pbelokon]

Closes #15
@manancodes could you please add hacktoberfest tags to this issue

I have added the toggle patterns button, when enabled shuffling would result in random background patterns.
For now I just added 4 patterns but I made the solution scalable, all you need to do it add pattern to the array of objects.

[manancodes]

Awesome work, can you fix the spacing here? Also, the button should be a toggle and not a normal button, which indicates whether it is enabled or not.

I will add the hacktoberfest labels once this solution is accepted and ready to be merged.

[manancodes]

Please check the mobile responsiveness as well.

[pbelokon]

@manancodes Just added toggle like effect when patterns are clicked and fixed it's margin on mobile. Is there anything else I should change ?

[manancodes]

Hey great work! but can you check it again? Spacing is still not fixed. This is how it looks on the desktop. Check the left and right side of the white container with all the controls.

Also, although the current implementation of the toggle button serves the purpose and fits with the UI. The toggle button is a bad UX implementation. Which will cause confusion. And it is not actually a toggle element.

A toggle button like this would be much better. With sharp corners and black colour. The size of the square toggle should be matched with the size of the square shuffle button that we have.

And a label on top saying patterns. Like the width label here:

Lastly, try to add screenshots in your PRs.

[pbelokon]

@manancodes just fixed it here are the screenshots:

mobile

desktop

By the way I was not sure how mach spacing you wanted me to add so I just added a little let me know if you want me to change it.

[manancodes]

• Media queries are always supposed to be at the last in a css file.
• The left and right spacing should be equal to the top and bottom spacing.
• Please try to match the spacing and sizing with other components to maintain consistency.
• As requested earlier as well, The total width of the toggle container should be 80px, and the toggle switch should be 40px, to match the size of the shuffle button.
• Please do not introduce new colors (green) for the toggle button, to maintain consistency. You can keep the toggle color to black only and change the color of the background from white to grey in the off position.

Please ask questions if you are not clear with something. Happy coding!

[pbelokon]

Sure will do thanks for the explanation

[pbelokon]

@manancodes I have moved all css components before media, made sure button and top have the same spacing, changed color and size of the toggle. Let me know if there is anything else you want me to change

[manancodes]

Great progress!
Although this looks much better and consistent to me. Using width 700px instead of 600px. Make sure to have equal spacing between all the controls. It is uneven right now.

Lastly, the toggle button is going out of view in the on position. Can you look into that again? It needs some adjustments.

[pbelokon]

@manancodes I my latest commit I did change console width to 700px and fixed overflow of the toggle on. I did try to make spacing equal but I don't think it worked that well maybe create a new issue for that.