You are tasked with simulating a payment processing operation where the success or failure of the payment is determined by specific conditions. The simulation should take 2 seconds to complete, mimicking real-world processing time.
Upon clicking the Pay button, display a message Processing payment in the p tag with the class status-message with a blue font color indicating the process has started. Make sure to clear all the spaces in the username and password before validating.
The processPayment function must simulate the payment process. For the payment to succeed, the amount must be greater than zero. If this condition is met, the promise should resolve with the message, Payment of ₹<amount> processed successfully! . If the condition fails, the promise should reject with the message, Payment failed! Invalid amount. . The success and failure messages should be displayed in the p tag with the class status-message, styled with a green and red font color respectively.
Additionally, make sure that the message Payment process completed. is logged to the console regardless of whether the authentication succeeds or fails.
We are not displaying the answer for this exercise.
We do this because we want you to challenge yourself
and
not give in to the temptation of looking at the solution.
We also don't want to leave you stuck, so if you feel
you have tried enough and are still unable to solve
this exercise, feel free to ask in our community.
Here is the link to join the community.