ID Generator
Tags: javascript, css, html, codenewbie
Published: 2022-03-15 10:02:07

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: 

<body>
   
    <div class="back">
<form>

    <h3>Please fill in the form</h3>
    <label>Full Name</label>
    <input type="text" id="inName" placeholder="Enter Full Name">
    <label>Date of Birth</label>
    <input type="date" id="inBirth" placeholder="Birth...">
    <label>Field</label>
    <input type="text" id="inField" placeholder="Field...">
    <label>Year</label>
    <input type="number" id="inYear" placeholder="Year...">
    <label>ID Number</label>
    <input type="number" id="inNum" placeholder="Sub N...">
    <label for="file" class="upload">Upload an Image</label>
    <br>
    <br>
    <span>Choose only passport size photo</span>
    <input type="file" id="file" accept="image/*" 
                                 onchange="loadImage(event)">
    
</form>

<button type="submit" id="preview">Preview</button>
<div class="container">

    <div class="card" id="result">
        <header class="header">
            <div class="camp">
                <h4>iTALANTA </h4>
                <span>Academy</span>
            </div>
            <img src="./images/winner.gif" id="logo" alt="">
        </header>

        <div class="content">
            <img src="#" id="imgDisplayed" alt="" >

            <ul>
                <li id="name"></li>
                <li id="birth"></li>
                <li id="fieldYear"></li>
                <li>Sub No <span id="num"></span></li>
            </ul>

        </div>
        
    </div>
 
</div>
<button id="down">Download</button>

    </div>

    <script src="main.js"></script>
</body>

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