Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>Business card project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <h4>Business card</h4>
    <input type="text" id="inputElement" placeholder="Enter employee id">
    <button id="button" onclick="getEmployeeData()">Click to get Data</button>
    <br><hr>
    <div>
        <canvas id="rectangleCanvas" height="300" width="500" style="border: solid 1px black;"></canvas>
    </div>
</body>
</html>
 
​
 
var details = {
  "Employees": [{
    "ID": "Winterfall",
    "FirstName": "John",
    "LastName": "Snow",
    "email": "johnsnow@winterfall.com",
    "call": 121212,
    "Work": [{
      "company": "Google",
      "Designation": "Principle Architect"
    }]
  }, {
    "ID": "Castly Rock",
    "FirstName": "Tyrion",
    "LastName": "Lannister",
    "email": "tyrionLan@Castly.com",
    "call": 111111,
    "Work": [{
      "company": "Amazon",
      "Designation": "Vice President"
    }]
  }, {
    "ID": "High Garden",
    "FirstName": "Samuel",
    "LastName": "Tally",
    "email": "Samueltally@highgarden.com",
    "call": 777777,
    "Work": [{
      "Company": "Yahoo",
      "Designation": "Consultant"
    }]
  }]
};
​
​
function getEmployeeData() {
  var self = details, arr = [], value = document.getElementById("inputElement").value, 
      isEmpId = self.Employees, len = isEmpId.length;
  
  for(var i =0; i<len; i++){
    if(value === isEmpId[i].ID){
      var name = isEmpId[i]. FirstName + " " + isEmpId[i]. LastName
          call = isEmpId[i].call, email= isEmpId[i].email, company = isEmpId[i].Work[0].company,  
          title= isEmpId[i].Work[0].Designation;
          drawCard(name, title, company, email, call);
          return true;
    }
  }
  
};
​
function drawCard(m, n, o, p, q){
​
  var canvas = document.getElementById("rectangleCanvas");
  var context = canvas.getContext("2d");
​
  //context.textAlign = "center"
  context.fillText(m,100, 100);
  context.fillText(n,200, 50);
  context.fillText(o,300, 60);
  context.fillText(p,400, 70);
  context.fillText(q,500, 80);
  //drawText(320, 080, "DEEPAK DWIJ", "rgb(80,80,80)");
​
  // var x = 20, y = 80, width=100, height=80; 
​
  // var shape = new Path2D();
  // shape.rect(x+100,y-50,width-40,height);
​
  // context.fillStyle = "#00695c";
  // context.fill(shape);
​
}
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers