fineanmol / annoying-submit-button

Annoying Submit Button in React. Give a ⭐️ if you have liked this project and want to support it !

Annoying Submit Button in a Form using ReactJS

You won't be able to submit the form until you enter correct length of password and a valid email ID. Enjoy playing with it. :) #Hacktoberfest

Project Preview

💡 Live Project Link

Click here to play with Annoying Submit Button

---

✍️ Authors

👤 Anmol Agarwal

---

🫂 Show your support

Give a ⭐️ if you like this project and want to support it!

---

🛠️ Installation Steps

Star and Fork the Repo 🌟 and this will keep us motivated.

1. Clone the repository

git clone https://github.com/fineanmol/Annoying-submit-button

2. Change the working directory

cd Annoying-submit-button

3. Install dependencies

npm install

4. Run the app

npm start

---

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b 'feature/AmazingFeature')
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Feel free to check the issues page.

📝 License

This project is under the MIT license.

---

Acknowledgments

• Hat tip to anyone whose code was used
• Inspiration
• I wish to show my appreciation
• etc

---

🙏 Thanks

Thanks to everyone who has contributed towards this project

---

annoying-submit-button's Issues

Change in UI of blue and yellow theme

In blue and yellow theme, both body and footer were of same color.
I have changed them in #185
please merge this pull request under hactoberfest label.
@fineanmol

Make button movement more random

I would like to work on making the button teleport all around the screen until the input is valid

Contributors headcount is not increasing in readme 💭

Contributors Count is not increasing in readme file 💭. It is showing only 4 names

The placeholder for dark theme was not visible

The placeholder for dark theme was not visible so I made some change in css file to change color of placeholder for dark theme

the following issue is solved

Footer text

Hi!!!

Issue

In footer section of the website
After hacktoberfest their is . (dot) which in my opinion not looking great.

So if you want that it should be fixed then I am ready to work on that issue.

Instagram Button hover not working

The Instagram link button present in the footer did not change color like the rest of the links. Add gradient to the button.
Can you label issue "hacktoberfest-accepted" please.

Submit button doesnt go to the right most point

Submit button doesnt go to the right most point when its disabled, I feel this is an odd effect and would like to fix it. So please Assign me this issue and kindly add Hacktober-accepted to it.

Annoying Button

going to add more button movements that will be dynamic and can go randomly to different places

pls assign me this under hacktoberfest

Updating Read.md File

Readme file was not uptodate so kindly assign this issue to me so , i can update the read me fille with new Video and some minor changes in int..
kindly assign this issue to me..

Button is collapsing in the footer

footer text are not aligned properly in mobile design

the text align property for the footer element is left-align which is not reliable, making the text align center will solve this issue. please assign me this issue, along with hacktoberfest tag as I am already working on this.

instagram icon not showing color on hover

I would love to work on this issue, Kindly assign it to me

Bug: Not all color options are working.

Hi there! 👋

There is a small bug. Not all options to change the background are working. Some change the color to white.

Social media links hover color is ill-suited.

I noticed that the color of your sites social media link on hovering are misplaced.
Being a new entrant into open source field, I wanted to make them proper.

Can you assign me this task??

Change emoji when Submit button turns green

Use angry emoji when the button is red (cannot submit)
Use smiling emoji when the button is green (can submit)
Please approve and assign this issue to me.

Zooming on hovering the theme buttons.

How about on hovering over the theme button , it zooms in like this :

Make drop down of color palate for mobile screen size.

Hello, I noticed that the color palate remains as ti is in mobile UI, which doesn't fit the page and looks good . I would like to change it into drop down and compatible with mobile.
Assign this to me and add the hactoberfest tag.

Responsive Design

Hey @fineanmol your "Annoying submit button" project doesn't seems to be fully responsive, I want to make it fully responsive so, can you please assign this issue to me with hacktoberfest-accepted label.

Update Readme Gif preview📢

The gif preview needs to be update in the readme file, as the project has been updated since beginning.

Beautify the footer

Styling of the social media icon at the footer can be improved.

Pressing Enter with Invalid Email Submits the form

Only Html email validation is checked on enter press.
for Example ( Email: xyzxyzxyz@xyz, Password:123123123) will show error in email field but pressing enter will submit the form.

• [onSubmit method on form should check for email validation.

Submit button is not fully visible

Add a view password toggle.

Add a view password option with the eye icon. Please assign it to me with the hacktoberfest tag.

New animation to the submit button

I would like to add some new animation to the submit button pls assign me this task

Removing Youtube Sign from Footer

The link in the Youtube Sign in the Footer is directing to Instagram's link. Hence removing it to make things even.

Add more themes in the UI

footer font color is not changing to the assigned color in .dark-footer and .light-footer ids

Tab index for input fields is not correct. Keyboard users can't use this form.

I would like to add better accessibility to this form. I want to fix the tabindex attribute of the input fields. This will allow keyboard only users to use this form. I will also address aria labels for those fields.

Adding a single Dropdown for all themes

Can you assign me this issue
Because if new themes are added, then it will kind of become clumsy
A dropdown button for themes would be good

Fix Theme toggle button Click 🔘

Right now, the click inside the box is working only. User should be able to click on switch button

[ BUG ] Form getting submitted on enter

Hi @fineanmol ,

I've encountered one issue, I was able to submit the form with wrong input values.
Form validation is not happening on 'Enter', I've checked it it can be added easily, can you please assign this
to me under Hactoberfest

Edit:
It is working fine till 5 characters, but the error message shows there should be atleast 7 chars and when we press enter after 6 chars it works, Ideally either the message should be changed or the max value

I want to add hover effect on title(Annoying submit button)

Please assign me this task.

Add CONTRIBUTING.md in the project

Hi @fineanmol,

I saw that project is missing CONTRIBUTING.md file, to avoid any confusion and to ensure best practices
I guess a CONTRIBUTING.md should be there.

I guess this could be a good-first-issue and we can mark it as open for someone to pickup

Feature- Remember user's selected Theme

Hi,
I can create a feature to remember user's last used theme. would you like me to implement this?

(btw- good beginner friendly project! keep up the good work!)
Thank you

Improve Readme file ✨

We can add contributors list in the readme file.

Disable Vertical Scroll Bar

The Vertical Scrollbar kind of makes the UI harder to use, I suppose removing the scrollbar is better. It can be done by fixing footer

Change the Button Color when theme changed

Even though the other section of the page change accordingly with the theme changes, the Submit button's background color doesn't change. It'd be nicer if the Button's background color is changed same as the footer color.

footer is issue fixed for desktop

extra white space between footer when color is not white in bg

there is a white div type of area on the screen when the bg behind the form is not white.
i would like to rectify this issue

Add a nice header.

I'd like to add a Header with suitable CSS.

Improve Theme toggle button Click 🔘

At the moment, users are not aware of the purpose of this theme toggle until they click on it. It should be self explanatory.

want to improve button styling

@fineanmol pls assign me this issue

background color is not precise

giving unexpected shade of color on selecting background.

Improve the UI of the page

The UI of the page is very raw and has scope for improvement.
It can be redesigned and given a modern aesthetic look.
Please assign me this issue.

The Background Color Is not visible for whole Page

Can I make the background containing the form, to cover the whole width of the page ?

The color of the title should change in bright theme

We can change the "Annoying Submit button" text color from yellow to something else as it is hard to see the text in a bright theme.

You can assign this to me. I can improve it.

Footer links not opening in new tab

Footer links i.e facebook, link, github, hacktoberfest, should open in a new tab.
If u want, I would like to work on this issue?

Footer text "Hactoberfest" color require fixing, not easily readable after "Hacto...."

Text color of Hactoberfest require fixing.
Please assign this to me under label hactoberfest-accepted.

Make it Mobile Friendly Project📱

Currently the buttons and click are working on web only. It should be mobile friendly as well

Improve CSS design of the webpage🎨🖌

CSS design of the webpage can be improved ### 🎨🖌

Design Input Fields to look better.

I think designing input fields to look better is crucial for a positive user experience, brand consistency, and accessibility.