I am a software engineer trained by italanta Academy, for almost six months i was able to come up with ID generator as i consult from our teacher who is at the power of helping engineers who are solutions to the society. Below contents describe, how i come up and understand html, css and javascript combination.
Step 1. I took creating the ID generator of iTALANTA Academy.
1. I started by designing using using figma
This step is to guide me how the ID will exactly look like, it is as well ascting as guide to the develpoment process of an ID.
step 2. Creating the Front End
Creating codes using html and make sure to capture in all data required to diplay in students ID.
Students Full Name:
Stuedents Year of Studies:
Students Date of Birth:
Students ID Number:
Html codes in the form:
<div class="back">
<h3>Please fill in the form</h3>
Full Name
Date of Birth
Field
Year
ID Number
Upload an Image
<br>
<br>
<span>Choose only passport size photo</span>
Preview
<h4>iTALANTA </h4>
<span>Academy</span>
<img src="./images/winner.gif" id="logo" alt="">
<img src="#" id="imgDisplayed" alt="">
<ul>
<li id="name">
<li id="birth">
<li id="fieldYear">
<li>Sub No <span id="num"></span>
Download
</div>
<script src="main.js"></script>
Below is the CSS codes to format the user name
body{
font: 20px helvetica, arial;
margin: 0;
padding: 0;
overflow-x: hidden;
}
h3{
color: blue;
}
.back{
margin-left:10%;
}
form, .container{
width: 40%;
float: left;
}
.container{
margin-top: 3em;
color: #000;
}
input{
display: flex;
margin-bottom: 1em;
font-size: 16px;
width: 60%;
border: 2px solid #159;
border-radius: 5px;
padding: 3px;
}
file{
opacity: 0;
width: 0.1px;
height: 0.1px;
position: absolute;
}
.upload, button{
color: #fff;
background: #159;
padding: 5px;
border: 2px solid #159;
border-radius: 5px;
cursor: pointer;
}
form span{
font-size: 10px;
}
preview{
font-size: 16px;
margin-top: 1em;
margin-left: 2em;
}
result{
position: relative;
width: 70%;
margin-left: 15%;
border: 2px solid #ddd;
border-radius: 12px;
margin-bottom: 2em;
}
header{
width: 100%;
background: #159;
border-radius: 12px 12px 0px 0px;
color: #fff;
}
header::after{
content: "";
display: flex;
clear: both;
}
logo{
width: 80px;
height: 80px;
float: right;
}
.camp{
width: 40%;
float: left;
}
.camp h4{
margin: 12px auto 0 9px;
}
.camp span{
margin-left: 8px;
}
.content{
width: 80%;
}
.content img{
float: left;
width: 80px;
height: 105;
margin-left: 7px;
margin-top: 12px;
}
.content ul{
width: 50%;
float: left;
padding-left: 15px;
}
.content ul li{
list-style-type: none;
}
down{
font-size: 18px;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border: 3px grey;
}
@media only screen and (max-width:768px) {
.container, form{
width: 90%;
margin-left: 5%;
}
#result{
margin-left: 0;
margin-right: 5%;
}
#down{
margin-right: 2em;
margin-bottom:2em ;
}
}
The above codes explain for only front end
let us now talk how codes in javasceript, this will explain how we can preview an ID.
Students Full Name:
Stuedents Year of Studies:
Students Date of Birth:
Students ID Number:
Below are the codes for javascript
const preview = document.getElementById("preview");
preview.addEventListener("click", prev);
function prev(){
const inName = document.getElementById("inName").value;
const inBirth = document.getElementById("inBirth").value;
const inField = document.getElementById("inField").value;
const inYear= document.getElementById("inYear").value;
const inNum= document.getElementById("inNum").value;
const name = document.getElementById("name");
const birth = document.getElementById("birth");
const fieldYear = document.getElementById("fieldYear");
const num = document.getElementById("num");
name.innerHTML = inName;
birth.innerHTML = inBirth;
fieldYear.innerHTML = inField + "0" + inYear;
num.innerHTML = inNum;
}
function loadImage(event){
const image = document.getElementById("imgDisplayed");
image.src = URL.createObjectURL(event.target.files[0]);
}
Explainatiob below:
getElementById() is the method returns an Element object representing the element whose id property matches the specified string, so we are graping the id of all the element(students details)
The second codes of getElementById() grasp element to display
after graping you create the varibles comparing the values of the students data.
lastly, the function of onclick the preview
Top comments (1)
Just a heads up that you can add highlighting to the code blocks if you'd like. Just change:
... to specify the language:
More details in our editor guide!