The card button is a bit boring. It should change color, scale in size a bit, or something else that's fun when a user hovers over it. Use your best judgement and have fun!

This page should be viewable across varying screen sizes. Currently, this is not the case.

Add a copy to clipboard button for users to copy the quote.
If approved, please assign it to me.

There was a change recently that caused the cat images to now show up in the card.

The Copy to Clipboard is a great feature, however, there are two issues:

1. When a user clicks the Copy to Clipboard icon, a message appears that pushes the button down, causing the card to be resized. The card should not resize.
2. There is no interaction when hovering over the Copy to Clipboard icon. The cursor should change and/or the icon should change color to indicate that it's an action.

There should never be scrolling, everything should fit in the browser (header, body, footer) with no scrolling required.

The stylesheet will be easier to maintain if we have css variables defined for colors. We can create variables for other properties as well in the future.

Overview

Add black background for a soother experience with header for Issue #45 .

Tasks

• Change Background to black

The header resizes well for small devices, but on larger desktop views the H1 overflows out of the header background, and white space is also introduced (see images below). Ideally, the header would be responsive to any device and screen size.

Motivational Cats - Watch Video

I was thinking of using something like this.

The .gitignore file should include the node_modules folder.

Currently, the cat images are left aligned in the card. Implement a way to center the images. Try to use the materialize library, since it's being used in the app, maybe they have a utility that is useful.

I just saw that the repo's button is less visible at the footer, I can fix this!

The font in the header is too close to the bottom of the header/navbar. Add some space.

The cat image is left aligned inside the card. The cat image should be centered.

The button to get another quote should always be visible. Please tell me how you will fix this and if it is a sound solution I will assign the task to you.

The quote font should be changed to something a bit more stylish. Keep it legible, nothing too over the top.

The "Motivational Cats" text in the heading is a bit drab. We should change the font family, maybe the color. Use your best judgement.

pls assign me for this issue

The dark theme could use an update. Currently, only the background changes when the dark theme is toggled. Use your best judgement.

There should be a spinner or some loading animation that displays when the cat image and quote are loading.

I would like to work on this issue. Can you please assign it to me ?
Thank you

When the API doesn't return an author, have some placeholder text assigned. Maybe something like "Unknown Author", or "Anonymous".

Axe finds 4 instances of insufficient color contrast on this website.

I really liked the repository and found it a very fun idea, I would like to contribute something

Add a Header or Footer with Repo Link. Maybe use the GitHub logo as the url icon.

We should show a loader in place of the cat image location when the image is loading. The same should happen for the quote.

This problem will be found when opening the web from a screen that has less height than the existing card.

can i help for this issue ?

Thanks ~

Currently, I have to scroll to see the footer. Please update the total height of the page (I should not be able to scroll).

Center the cat image in the card. Make sure it's responsive.

This could be a simple navbar with a title in it. Great issue for Hacktoberfest 2020!

Currently the cards are sized based off the image size and quote size. The card should remain a static height and not change.

Currently only a quote is being loaded on page load. I'd like to have a cat loaded on page load as well.

Dark Themes are trendy and are my personal preference. It would be awesome if the site had a dark/light theme toggle.

For this issue please resolve the following:

• create a dark theme
• create a light theme (can use the color theme we have now or create a new one)
• implement a theme toggle in the nav/menu
• implement the prefers color scheme CSS feature.

Please use your best judgement when implementing these features. Also, please keep a11y in mind.

The card should have some kind of animation when a user hovers over it. This could be subtle. I am thinking adding box shadow and/or adding some kind of elevation animation to the card. Use your best judgement and have fun!

Feel free to use your best judgement on what looks best.

This color palette/theme has been in place for about a year now. Let's breathe some new life in to this app by updating the color theme. This will include changing the background color, footer, navbar, card background color, and card button color.

If #96 is already closed, please adhere to using CSS variables.

The main culprit with regard to the site not being mobile friendly is the navbar/header. However, other items may need to be looked at as well. You'll probably need to use media queries, but not 100% sure as this site uses materialize library, so maybe there is a utility function to help out with the nav. Either way, the nav/header should not overlap the card on smaller screens.

The quote API is broken, and it makes the site stay in the loading state forever.

Lighthouse gave us a 79% score for accessibility. This should be at 100%. Please resolve the accessibility issues.

Implement best practises from The Fastest Google Fonts article on CSS Wizardry which will prefretch, preconnect and preload the font for better performance.

Related to #33.

Please remove the hyper links from the header (contact us, etc), they do not link to anything. The header should just have some fancy looking text that says "Motivational Cats".

We should provide users with some context when they hover over the copy button. Use your best judgement.