Business Card Generator

business-card-generator.markdown

Business Card Generator

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html

<h2 id="title">Business Card Generator</h2>

<div class="container-fluid">
   <div class="row">
   <div class="col-8">
    <form action="" class="leftForm"> 
      <div class="container-fluid">
       <div class="row">
        <div class="col-6">
        <label for="fontStyle">Font Style</label><br>
        <select id="inputFontStyle" name="fontStyle" class="form-group btn btn-secondary" onchange="fontStyler()">
            <option value="sans-serif">Arial</option>
            <option value="Brush Script MT">Brush Script MT</option>
            <option value="Courier New">Courier New</option>
            <option value="garamond">Garamond</option>
            <option value="georgia">Georgia</option>
            <option value="tahoma">Tahoma</option>
            <option value="serif">Times</option>
          <option value="trebuchet ms">Trebuchet MS</option>
            <option value="verdana">Verdana</option>
          
        </select>
<p></p>
        <label for="inputAlign">Text Align</label><br>
        <select id="inputAlign" name="inputAlign" class="form-group btn btn-secondary" onchange="alignment()">
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
        </select>

        </div><div class="col-6">

        <label for="inputFontColor">Font Color</label>
        <input type="color" id="inputFontColor" class="form-control" onchange="fontColorer()" value="#000000">
        
           <p></p>
           
        <label for="inputBgColor">Background Color</label>
        <input type="color" id="inputBgColor" class="form-control" onchange="bgColorer()" value="#ffffff">
           </div>
        </div>
        </div>

       
        <hr>
       

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3">Company Name</span></div>
        <input type="text" id="inputCompany" class="form-control" onkeyup="company()" name="inputCompany" placeholder="Company Name">
      </div>

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3">Message</span>
        </div>
        <input type="text" id="inputCompanyMessage" class="form-control col-8" onkeyup="companyMessage()" name="inputCompanyMessage" placeholder="Company Message">
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3">Name</span></div>
        <input type="text" id="inputName" class="form-control" onchange="named()" name="inputName" placeholder="First Last">
      </div>
            <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3">Job Title</span>
              </div>
        <input type="text" id="inputJob" class="form-control" onchange="job()" name="inputJob" placeholder="Job Title">
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3">Email </span>
        </div>
        <input type="email" id="inputEmail" class="form-control" onchange="email()" name="inputEmail" placeholder="name@example.com">
        &nbsp; 
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3">Telephone</span></div>
        <input type="tel" id="inputTelephone" class="form-control" onchange="telephone()" name="inputTelephone" placeholder="##########">
      </div>       
        
    </form>
    </div>
    <div class="col-4">
    <div class="outputCard" id="outputCard">
        <h2 id="outputCompany">Company</h2>
        <p id="outputCompanyMessage">Company Message</p>
        <hr>
        <p id="outputName">First Last </p>
        <p id="outputJobTitle">Job Title</p>
        <p id="outputEmail">email</p>
        <p id="outputTelephone"> telephone</p>
    </div>
    </div>
</div>
</div>

script.js

    function company() {
        document.getElementById('outputCompany').innerHTML = inputCompany.value; 
    }
    function companyMessage() {
        document.getElementById('outputCompanyMessage').innerHTML = inputCompanyMessage.value; 
    }
    function alignment() {
        document.getElementById('outputCard').style.textAlign = inputAlign.value; 
    }
    function fontStyler() {
        document.getElementById('outputCard').style.fontFamily = inputFontStyle.value; 
    }
    function fontColorer() {
        document.getElementById('outputCard').style.color = inputFontColor.value; 
    }
    function bgColorer() {
        document.getElementById('outputCard').style.background = inputBgColor.value; 
    }
    function named() {
        document.getElementById('outputName').innerHTML = inputName.value; 
    }
    function job() {
        document.getElementById('outputJobTitle').innerHTML = inputJob.value; 
    }
    function email() {
        document.getElementById('outputEmail').innerHTML = inputEmail.value; 
    }
    function telephone() {
        document.getElementById('outputTelephone').innerHTML = "(" + inputTelephone.value[0] + inputTelephone.value[1] + inputTelephone.value[2] + ") " + inputTelephone.value[3] + inputTelephone.value[4] + inputTelephone.value[5] + "-" + inputTelephone.value[6] + inputTelephone.value[7] + inputTelephone.value[8] + inputTelephone.value[9]; 
    }

style.css

    .leftForm { padding: 20px; background: #efefef; }
    .outputCard { width: 100%; height: 290px; border: 1px solid #000; font-size: 14px; padding: 12px; }
    .outputCard p { margin: 0px; padding: 0px; }
    #outputName { font-weight: bold; }
#outputCompany { font-weight: bold; font-style: italic; }
#outputJobTitle, #outputEmail, #outputTelephone { 
  padding: 0px 25px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />