This is a student ID card generator created using HTML, CSS and Javascript. It takes inputs such as Student Name, College Name, Course Name and Hostel Name and generates an ID card when the user clicks the “Generate Card” button as shown below:-
You can see the demo here
- HTML
- CSS
- JAVASCRIPT
- DOM manipulation using JavaScript.
In the generateCard function, we retrieve the values of the input fields, assign them to the corresponding elements on the generated card, and then display the card.
We take the student's name, college name, course name and hostel name from input by first accessing the individual elements using document.getElementById
method and reading their values. Then we retrieve the the target card elements using same method and populate values using innerHTML
method.
Feel free to reach me at [hiltrapauline@gmail.com]