Skip to content
Submitted over 2 years ago

Interactive card details form solution with custom js, css html

accessibility
Ravindra Reddy•180
@ravindra135
A solution to the Interactive card details form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Please Suggest me on how to do real time updating, the card number also the input outline is not changing to gradient. Feel Free to give me suggestion on improvement in code.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Vaibhav Bhardwaj•150
    @VaibhavBhardwaj23

    For doing real time Updating you have to target the form input field and the text in card, use the event of "onkeyup",and set the input box value to the text in form value. For example: <input type="text" id="card-number" onkeyup="display1()"> // This is for your Input Section <span id="num">0000 0000 0000 0000</span> // This for your card //Now in JS define the function display1() function display1() { var cnum=document.getElementById.("card-number").value; //This will take the value from input box document.getElementById.("num").innerHTML=cnum; //This will change the value in real-time } //

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord