Answered step by step
Verified Expert Solution
Link Copied!

Question

00
1 Approved Answer

please do asap using react frontend React component for employeds to be able ven and copy the card number expratin date. that an employee's card

please do asap
using react
frontend
image text in transcribed
image text in transcribed
image text in transcribed
React component for employeds to be able ven and copy the card number expratin date. that an employee's card is lost or stolen, usors should be ablo to lock their card as well. Requirements - Shared Requirements Fach character of the number fieids should be masked with then + characier by defauil (some exceptiana noted below) When mouaing over the hildden filds, the fill sotais should he vible. Cliking on the number flelds should copy the correct infomsabon (oach section has their own requirequents) to the ctiphoard (using the Clipocara A=1 ) and change the text an the corresponiting number tield to "Copied", for 1.5 soconds. - Cara Number Each character beakdes the tast 4 digits should be alasked - Digits should be visually separated by graups of 4 with a wpace in-between - Copy the full eard number WITHOUT spaces ( 4024007167304393 ) to the dipboard. - Expiration Date - Each character bealdes a slash separating the month and year should be masked - The date sheula be represented as MucyY with a preceding 0 for single digit months, 6.9. S1/as - Copy the date in MMeYy format WITH the dividing slash (/) to the clipboard. - Expiration Date Each character besides a slash separating the month and year should be masked The date should be represented as MM/YY with a preceding 0 for single digit months, e.g. Copy the date in MM/YY format WITH the dividing slash (/) to the clipboard. - CVV All characters should be masked. Copy the numbers as is to the clipboard. - Lock Button Clicking the button should put the card in a "locked state", and should have the following properties: - The button text should read "Unlock" - All card details besides the HRT and Visa logo should not be visible - Both the HRT and Visa logos should have 50% opacity - DO NOT ALTER THE VARIABLE, ANY AND Note The JavaScript clipboard API will not copy to your clipboard in the iframe viewer. In order to test if the copy functionality works, open the preview in its own page by clicking the write your own Puppeteer tests in in the button in the upper right corner or file. * Here is a visual demonstration of the requirements: Admiral Ackbar

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access with AI-Powered Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Students also viewed these Databases questions