JavaScript Example (Program)

HTML Code

<div class="result"></div>
<form>
  <input type="number" class="f_value" name="" value="0">
  <input type="number" class="s_value" name=""  value="0">
  <input type="number" class="t_value" name=""  value="0">
  <submit onclick="lcm_func()">Click</submit>
</form>
   

Javascript Code

<script>
 function lcm_func(){

    var cu1 = document.querySelector(".f_value");
    var cu2 = document.querySelector(".s_value");
    var cu3 = document.querySelector(".t_value");

    let num1 = cu1.value;
    let num2 = cu2.value;
    let num3 = cu3.value;

    for(let i=1; i<=num1*num2*num3; i++){
      if(i%num1 == 0 && i%num2==0 && i%num3==0){
        //document.write(i);
        document.querySelector(".result").innerHTML=i;
        break;
      }
    }
  }
</script>

Css Code

 <style>
form{
  background:lightblue;
  padding:25px 15px;
  margin-top:0px;
}
form input{
  padding:10px 15px;
  font-size:14px;
}
form .btn, form .btn:hover{
  background: #ff9521;
  border-radius:0;
  padding:9px 35px;
  color:#fff;
}
.result {
background:rgb(17 149 191);
font-size: 25px;
padding: 15px;
margin-top: 35px;
color:#fff;
}
</style>
 

Javascript Code

<script>
  let my_array = [10, 20 , 30, 50];
  let sum  = 0;

  my_array.forEach(sumfunc);
  function sumfunc(x){
      sum = sum+x;
  }
  document.write(sum)
</script>

HTML Code

<div class="form-design">
<div class="result"></div>
   <input class="num1" type="text" value="">
   <input class="num2" type="text" value="">
   <button onclick="addfunc()">Add Value</button>
</div>

   

Javascript Code

<script>
      function addfunc(){
        var usv1 = document.querySelector("input.num1")
        var usv2 = document.querySelector("input.num2")
        //Note :- parseFloat() method will be convert string to Number
        var nv1 = parseFloat(usv1.value);
        var nv2 = parseFloat(usv2.value);
        var sum = 0;
        sum = nv1+nv2;

    // print Data
      var result_var= document.querySelector(".result");
      console.log(result_var)
      result_var.innerHTML="<strong>Result :</strong> "+ sum;
        console.log(sum)
      }

</script>

Css Code

 <style>
body{
font-family:verdana;
}
h1{
text-align:center;
}
.form-design{
max-width:500px;
padding:0px;
background:#f5f0f0;
border:solid 1px #ccc;
margin:auto;
}
.form-design input{
width:38%;
margin:15px;
padding:10px;
float:left;
}
.form-design button{
background:#ff931e;
color:#fff;
font-size:25px;
line-height:22px;
border-radius:3px;
border:none;
padding:15px 25px;
margin:10px auto 20px auto;
display:table;    
}
.result{
background:#fbfbfb;
font-size:30px;
font-weight:bold;
    color:#008aff;
padding:15px; 
border: solid 1px #ccc;
text-align:center
}
.result strong{
color:#ff931e;
}
</style>
 

HTML Code

  <div class="form-design">
    <div class="result"></div>
    <input type="text" value="">
    <input type="text" value="">
    <input type="text" value="">
    <input type="text" value="">
    <input type="text" value="">
    <input type="text" value="">
    <input type="text" value="">
    <input type="text" value="">
    <input type="text" value="">
    <input type="text" value="">

    <button onclick="addfunc()">Add Value</button>

    </div> 

   

Javascript Code

<script>
      function addfunc(){
        var sum_var = 0;
      var usv = document.querySelectorAll("input");   
      usv.forEach(element_func);

      function element_func(e){

         //cheack input fielblank and assign default falue zero(0)
         if(e.value.length == 0){e.value=0;}

         //convert string to number 
          usvalue = parseFloat(e.value)
          
         // add number one by one
         sum_var = sum_var+ usvalue;
          
      }

      document.querySelector(".result").innerHTML = "<strong>Result </strong>"+ sum_var

      }

</script>

Css Code

 <style>
body{
    font-family:verdana;
  }
  h1{
    text-align:center;
  }
  .form-design{
    max-width:500px;
    padding:0px;
    background:#f5f0f0;
    border:solid 1px #ccc;
    margin:auto;
  }
  .form-design input{
    width:38%;
    margin:15px;
    padding:10px;
    float:left;
  }
  .form-design button{
    background:#ff931e;
    color:#fff;
    font-size:25px;
    line-height:22px;
    border-radius:3px;
    border:none;
    padding:15px 25px;
    margin:10px auto 20px auto;
    display:table;    
  }
  .result{
    background:#fbfbfb;
    font-size:30px;
    font-weight:bold;
        color:#008aff;
    padding:15px; 
    border: solid 1px #ccc;
    text-align:center
  }
  .result strong{
    color:#ff931e;
  }
</style>
 

HTML Code

<div class="cal-container">

<div class="result"><div class="output"></div></div>

   
      <div class="second-row">
        <input type="button" name="" value="7" class="global number">
        <input type="button" name="" value="8" class="global number">
        <input type="button" name="" value="9" class="global number">
     
      </div>
      <div class="third-row">
        <input type="button" name="" value="4" class="global number">
        <input type="button" name="" value="5" class="global number">
        <input type="button" name="" value="6" class="global number">
      
      </div>
      <div class="fourth-row">
        <input type="button" name="" value="1" class="global number">
        <input type="button" name="" value="2" class="global number">
        <input type="button" name="" value="3" class="global number">
       
      </div>
      <div class="conflict">
        <div class="left">      
          <input type="button" name="" value="+" class="green white-text big top-margin" onclick="addfunc()">
        </div>

      </div>
    </div> 

   

Javascript Code

<script>
        var sum_var = 0;
      var btnv = document.querySelectorAll("input.number");
      btnv.forEach(event_func);
      function event_func(ev){
        ev.addEventListener("click", btn_func);
        function btn_func(){
          var numner_bt = parseFloat(ev.value);
            sum_var = sum_var+numner_bt;
            
            document.querySelector(".result").innerHTML += numner_bt +"+" ;
        }

        }

        function addfunc(){
            document.querySelector(".result .output").innerHTML= "<strong>Out Put : </strong>"+  sum_var
      }

</script>

Css Code

 <style>
h1{
  text-align: center;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}
*{
  margin: 0;
  padding: 0;
}
.cal-container{
  margin: auto;
  width:360px;
  padding: 10px;
  border: 1px solid #f2f2f2;
  -webkit-box-shadow: 1px 1px 4px 0px rgba(176,176,176,1);
     -moz-box-shadow: 1px 1px 4px 0px rgba(176,176,176,1);
          box-shadow: 1px 1px 4px 0px rgba(176,176,176,1);
  background-color: #fff;
  background-color: #F8F8F8;
}
.header{
  background-color: #81C784;
  padding: 10px;
  color: #fff;
  text-align: center;
}
.result{
  font-size: 24px;
  padding: 24px 5px;
  font-weight: 700;
  text-align: right;
  width: 96%;
  border: none;
  background-color: #F8F8F8;
}
.first-row,
.second-row,
.third-row,
.fourth-row,
.conflict
{
  display: inline-block;
  width: 100%;
}
.global{
 padding: 15px;
 font-weight: bold;
 font-size: 16px;
 border: none;
 border-radius: 3px;
 background-color: #F2F2F2;
 float: left;
 width: 23.5%;
 margin: 0 2px;
 /*border: 1px solid #000;*/
}
.conflict .left,
.conflict .right{
  float: left;
  position: relative;
}
.left{
  width: 74%;
}
.right{
  width: 24%;
}
.big{
  padding: 15px;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 3px;
  background-color: #F2F2F2;
  float: left;
  width: 64.5%;
  margin: 0 2px;
}
.small{
  padding: 15px;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 3px;
  background-color: #F2F2F2;
  float: left;
  width: 31.5%;
  margin: 0 2px;
}
.plus{
  height: 105px;
  width: 100%;
}
.green{
  background-color: #81C784;
}
.red{
  background-color: #F50258
}
.grey{
  background-color: #F2F2F2;
}
.white-text{
  color: #fff;
}
.top-margin{
  margin-top: 4px;
}
</style>
 

HTML Code

 <div class="cal-container">
<div class="result">
  <div class="output"></div>
  <input type="text" class="result">
</div>
      
      <div class="first-row">
      </div>
      <div class="second-row">
        <input type="button" name="" value="7" class="global number">
        <input type="button" name="" value="8" class="global number">
        <input type="button" name="" value="9" class="global number">
        <input type="button" name="" value="%" class="global number">
       
      </div>
      <div class="third-row">
        <input type="button" name="" value="4" class="global number">
        <input type="button" name="" value="5" class="global number">
        <input type="button" name="" value="6" class="global number">
         <input type="button" name="" value="/" class="global number">
    
      </div>
      <div class="fourth-row">
        <input type="button" name="" value="1" class="global number">
        <input type="button" name="" value="2" class="global number">
        <input type="button" name="" value="3" class="global number">
            <input type="button" name="" value="*" class="global number">
    
      </div>
      <div class="conflict">
        <div class="left">
          <input type="button" name="" value="0" class="global grey number">
          <input type="button" name="" value="." class="global number">
              <input type="button" name="" value="-" class="global number">
       
    
        <input type="button" name="" value="+" class="global grey number">
   
      </div>
         <input type="button" name="" value="Del" class=" red small white-text top-margin deleate">
          <input type="button" name="" value="=" class=" green white-text big top-margin output_result">
    </div>  

   

Javascript Code

<script>
var user_value = document.querySelectorAll("input.number");
var screen_value = document.querySelector(".result input");
var my_calulate_value = undefined;
var result_out_put = document.querySelector(".result .output");
var result_btn = document.querySelector(".output_result")
var after_calcualtion = " ";
var deleate_btn = document.querySelector("input.deleate")

user_value.forEach(
    function(x) {
        x.addEventListener("click", function() {
            var input_value = x.value;
            screen_value.value += input_value;
            after_calcualtion = (eval(screen_value.value));

            //console.log(after_calcualtion)
        })
    })

result_btn.addEventListener("click",
    function() {
    result_out_put.innerText = after_calcualtion
})
deleate_btn.addEventListener("click",
    function() {
      screen_value.value = '';
      result_out_put.innerText=' ';
})

</script>

Css Code

 <style>
h1{
  text-align: center;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}
*{
  margin: 0;
  padding: 0;
}
.cal-container{
  margin: auto;
  width: 25%;
  padding: 10px;
  border: 1px solid #f2f2f2;
  -webkit-box-shadow: 1px 1px 4px 0px rgba(176,176,176,1);
     -moz-box-shadow: 1px 1px 4px 0px rgba(176,176,176,1);
          box-shadow: 1px 1px 4px 0px rgba(176,176,176,1);
  background-color: #fff;
  background-color: #F8F8F8;
}
.header{
  background-color: #81C784;
  padding: 10px;
  color: #fff;
  text-align: center;
}
.result{
  font-size: 24px;
  padding: 10px 5px;
  font-weight: 700;
  text-align: right;
  width: 96%;
  border: none;
  background-color:#ffffff;
  border:none;
}
.result:focus{
  outline:none;
}
.first-row,
.second-row,
.third-row,
.fourth-row,
.conflict
{
  display: inline-block;
  width: 100%;
}
.global{
 padding: 15px;
 font-weight: bold;
 font-size: 16px;
 border: none;
 border-radius: 3px;
 background-color: #F2F2F2;
 float: left;
 width: 23.5%;
 margin: 0 2px;
 /*border: 1px solid #000;*/
}
.conflict .left,
.conflict .right{
  float: left;
  position: relative;
}
.left{
  width: 100%;
}
.right{
  width: 100%;
}
.big{
  padding: 15px;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 3px;
  background-color: #F2F2F2;
  float: left;
  width: 64.5%;
  margin: 0 2px;
}
.small{
  padding: 15px;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 3px;
  background-color: #F2F2F2;
  float: left;
  width: 31.5%;
  margin: 0 2px;
}
.plus{
  height: 105px;
  width: 100%;
}
.green{
  background-color: #81C784;
}
.red{
  background-color: #F50258
}
.grey{
  background-color: #F2F2F2;
}
.white-text{
  color: #fff;
}
.top-margin{
  margin-top: 4px;
}
</style>
 

HTML Code

<div class="form-design">
 <input class="st_name" type="text" value="" placeholder="Student Name"><br>
  <input class="st_marks" type="text" value="" placeholder="Marks"><br>
  <input class="st_grade" type="text" value="" placeholder="Grade"><br>
  <button>Click</button>
  </div>
  <div class="table-design"> 
  <table border="1" class="data_table">
    <tr>
      <th>Name</th>
      <th>Marks</th>
      <th>Grade</th>
    </tr>
  </table>
</div>

Javascript Code

<script>
var stdBtn = document.querySelector("button");
    stdBtn.addEventListener("click", function(){
      
    var stName = document.querySelector(".st_name").value;
    var stMarks = document.querySelector(".st_marks").value;
    var stGrade = document.querySelector(".st_grade").value;

    var display = document.querySelector(".data_table");
    var row = display.insertRow(display.length);

    var td1 = row.insertCell(0);
    var td2 = row.insertCell(1);
    var td3 = row.insertCell(2);

    td1.innerHTML = stName;
    td2.innerHTML = stMarks;
    td3.innerHTML = stGrade;
  })

</script>

Css Code

 <style>
.table-design, .form-design{
         float:left;
         width:45%;
       }
       .form-design{
         background:#ccc;
         padding:15px;
       }
       .form-design input{
         width:100%;
         padding:10px;
         margin-bottom:10px;
         margin-right:15px;
       }
       .table-design{
         padding:0 15px;
       }
       .table-design table{
         width:100%;
       }
       .table-design table tr{
         border:solid 1px #ccc;
       }
       .table-design table tr td, .table-design table tr th{
         border-right:solid 1px #ccc;
         padding:10px;
       }
       .form-design button{
         background:#ff9521;
         padding:10px 25px;
         color:#fff;
         margin:10px 0;
         border:none;
       }
</style>
 

HTML Code

  <div class="employpage"> 
  <div class="formdata">
    
  <form onsubmit="event.preventDefault();" autocomplete="off">
      

      <label>Name</label>
      <input type="text" class="empname" value=""  placeholder="Employ Name">

      <label>Designation</label>
      <input type="text" class="designation" value=""  placeholder="Employ Designation">

      <label>Mobile</label>
      <input type="text" class="mobile" value=""  placeholder="Employ Mobile">

      <label>Salary</label>
      <input type="text" class="empsalary" value="" placeholder="Employ Salary">

      <div style="width:100%">
      <input type="submit"  value="Submit"  class="button">
      
      </div>
    </form>

  </div>

  <div class="display_table">
              <table class="list" id="employeeList">
                    <thead>
                         <tr>
                      <th>Id</th>         
                      <th>Full Name</th>
                      <th>Designation</th>
                      <th>Mobile</th>
                      <th>Salary</th>                      
                      <th>Edit</th>
                  </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
  </div>
</div>

Javascript Code

<script>

var selectedRow = null;
var btn = document.querySelector(".button")
btn.addEventListener("click", employdata);


function employdata(){
  var ax = read_Input_Value();
  if (selectedRow == null){
    create_Tr_Td(ax);
    remove_input_value()
  }
  else{   
    updatefunc(ax); 
    remove_input_value(); 
    selectedRow = null;
  }

}

function read_Input_Value(){
  var redemp={} 
  redemp["ename"] = document.querySelector(".empname").value;
  redemp["des"] = document.querySelector(".designation").value;
  redemp["mob"] = document.querySelector(".mobile").value;
  redemp["salary"] = document.querySelector(".empsalary").value;
  return redemp
}
function create_Tr_Td(x){
  var empTable = document.querySelector(".list");
  var emp_tr = empTable.insertRow(empTable.length);
  var emp_td1 = emp_tr.insertCell(0);
  var emp_td2 = emp_tr.insertCell(1);
  var emp_td3 = emp_tr.insertCell(2);
  var emp_td4 = emp_tr.insertCell(3);
  var emp_td5 = emp_tr.insertCell(4);
  var emp_td6 = emp_tr.insertCell(5);
  var totalRowCount = document.querySelector(".list tr").length;
  emp_td1.innerHTML = empTable.rows.length-1;
  //Note:- .rows.length = return no of row 

  emp_td2.innerHTML = x.ename;   
    emp_td3.innerHTML = x.des;
    emp_td4.innerHTML = x.mob;
  emp_td5.innerHTML = x.salary;
  
  emp_td6.innerHTML = '<a class="edt" onClick="onEdit(this)">Edit</a>  / <a class="dlt" onClick="onDelete(this)">Delete</a>';
}

function remove_input_value(){
  document.querySelector(".empname").value= " ";
  document.querySelector(".designation").value= " ";
  document.querySelector(".mobile").value= " ";
  document.querySelector(".empsalary").value= " ";  
}

function onEdit(y){
  console.log(y);

  //var selecteventbtn = document.querySelector("a.edt");
    selectedRow = y.parentElement.parentElement;
    //document.querySelector(".empid").value = selectedRow.cells[0].innerHTML;
    document.querySelector(".empname").value = selectedRow.cells[1].innerHTML;
    document.querySelector(".designation").value = selectedRow.cells[2].innerHTML;
     document.querySelector(".mobile").value = selectedRow.cells[3].innerHTML;
    document.querySelector(".empsalary").value = selectedRow.cells[4].innerHTML;
}

function updatefunc(redemp){
  selectedRow.cells[1].innerHTML = redemp.ename;
  selectedRow.cells[2].innerHTML = redemp.des;
  selectedRow.cells[3].innerHTML = redemp.mob;
  selectedRow.cells[4].innerHTML = redemp.salary;
  
}


function onDelete() {
    if (confirm('Are you sure to delete this record ?')) {
        var selectdelete = document.querySelector("a.dlt");
        selectdelete = selectdelete.parentElement.parentElement.remove(0);
    }
}


</script>

Css Code

 <style>
    .employpage{
      display: flex;
      width: 1000px;
      flex-wrap: wrap;
      margin: auto;
      font-family: verdana;
      font-size: 16px;
      border: solid 2px #f1f1f1;
  }
  .employpage .formdata{
    width:40%;
    padding:15px;
  }
  .employpage .display_table {
    padding:15px;
    width:52%;
  }
  .employpage .display_table table{
    border:solid 1px #ccc;
  }
  .employpage .display_table td, 
  .employpage .display_table th{
    border-left:solid 1px #ccc;
    border-bottom:solid 1px #ccc;
    padding:10px 5px;
    text-align:left;
    font-size:13px;
  }
  .employpage .display_table td:first-child, 
  .employpage .display_table th:first-child{
    border-left:none;
  }

  .employpage .display_table tr{
    border-bottom:solid 1px #ccc;
  }
  .employpage .display_table tr:last-child td{
    border-bottom:none;
  }
  
  .formdata form{
    display:flex;
    flex-wrap:wrap;
    background:#f1f1f1;
    padding:15px;
  }
  .formdata form label{
    width:100px;
  }
  .formdata form input, .formdata label{
    margin:10px 0;
    padding:5px;
  } 
  .formdata form input{
    width:200px;
    padding:7px;
  }
  .formdata th{
    background:#f1f1f1; 
    font-size:14px; 
    font-weight:bold;
    text-align:left;
  }
  .formdata .button{
    background:#000;
    padding:5px 10px;
    font-size:20px;
    margin:25px auto;
    display:table;
    color:#fff;
  }
</style>
 

HTML Code

  <div class="login-sec">
  <div class="AdminForm">
    <h2>Create Login</h2>
    <p><strong>Note : </strong>Please fill First of all Create Login details</p>
    <input type="text" class="AdminUser" placeholder="input user value for create User">
    <input type="text" class="adminPasword" placeholder="input Pasword value for create User">
    <button class="login_Create_btn">Submit</button>
  </div>
  <div class="loginForm">
    <h2>Acess Login</h2>
    <p><strong>Note : </strong>Please fill First of all Create Login details</p>
    <input type="text" class="loginUser" placeholder="input User Login Value">
    <input type="text" class="loginPasword" placeholder="input User Pasword Value">
    <button class="login_btn">Login</button>
  </div>
</div>

Javascript Code

<script>
//create login section
var admusr;
var admpas;
var admin_btn = document.querySelector(".login_Create_btn");
var loginbtn = document.querySelector(".login_btn");
loginbtn.addEventListener("click", login);
function admin() {
    admusr = document.querySelector(".AdminUser").value;
    admpas = document.querySelector(".adminPasword").value;

}


//acess login section
admin_btn.addEventListener("click", admin)
function login() {
    var loginid = document.querySelector(".AdminUser").value;
    var loginpas = document.querySelector(".AdminUser").value;
    if (loginid == admusr && admpas == loginpas) {
        alert("Congratulation, You can Access our Website")
    } else {
        alert("Sorry, You can't Access our Website, Please Valid Login input")
    }

}


</script>

Css Code

 <style>
    .login-sec {
  margin-top: 25px;
  display: flex;
  font-family: verdana;
  border: solid 2px #ccc;
}

.login-sec input {
  padding: 10px;
  margin-bottom: 25px;
  width: 86%;
  font-size: 17px;
  margin-left: 30px;
  margin-right: 30px;
}

.AdminForm {
  width: 50%;
  background: #eeeeef;
  padding: 30px 1px 0 1px;
}

.loginForm {
  width: 50%;
  padding: 30px 1px 0 1px;
}

.login-sec button {
  font-size: 20px;
  padding: 5px 25px;
  margin: auto;
  display: table;
  background: #ff931f;
  border: none;
  color: #fff;
  border-radius: 2px;
  margin-bottom: 30px;
}

.login-sec h2 {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 24px;
  text-align: center;
}

.login-sec p {
  border-bottom: solid 1px #777;
  border-top: solid 1px #777;
  padding: 10px 30px;
  margin-top: 20px;
  margin-bottom: 20px;
  background: lightblue;
  text-align: center;
}

.login-sec p strong {
  color: #000;
}
</style>
 

HTML Code

  <div class="search_box">
  <input type="" name="" placeholder="Type Your Javascript Code" class="serch">
  <ul class="datalist">
    <li><a target="_blank" href="https://www.teachcoders.com/Javascript/array-method">What is Array Method</a> 
    </li>
    <!--use video no 23-->
    <li><a target="_blank" href="https://www.teachcoders.com/Javascript/some">some()</a>
    </li>
    <li><a target="_blank" href="https://www.teachcoders.com/Javascript/every">every()</a>
    </li>
    <li><a target="_blank" href="https://www.teachcoders.com/Javascript/find">find()</a>
    </li>
    <li><a target="_blank" href="https://www.teachcoders.com/Javascript/findIndex">findIndex()</a>
    </li>
    <li><a target="_blank" href="https://www.teachcoders.com/Javascript/filter">filter()</a>
    </li>
    <li><a target="_blank" href="https://www.teachcoders.com/Javascript/toString">toString()</a>
    </li>
    <li><a target="_blank" href="https://www.teachcoders.com/Javascript/valueOf">valueOf()</a>
    </li>
    <li><a target="_blank" href="https://www.teachcoders.com/Javascript/fill">fill()</a>
    </li>
    <li><a target="_blank" href="https://www.teachcoders.com/Javascript/forEach">forEach()</a>
    </li>
  </ul>
</div>

Javascript Code

<script>
var inputSearch = document.querySelector("input.serch");
inputSearch.addEventListener("keyup", filter);

function filter() {
    var inputvalue = inputSearch.value.toUpperCase();
    var ul = document.querySelector("ul.datalist");
    var li = ul.querySelectorAll("li");

    li.forEach(myfunc);

    function myfunc(x) {
        var cx = x.textContent.toUpperCase();
        if (cx.indexOf(inputvalue) > -1) {
            x.style.display = ''
        } else {
            x.style.display = 'none'
        }
    }

}


</script>

Css Code

 <style>
 .search_box {
  width: 100%;
  margin: auto;
  font-family: verdana;
}

.search_box input {
  padding: 10px;
  width: 95%;
  background: #fff;
  font-size: 16px;
  border: solid 10px #4988e8;
}

ul.datalist {
  background: #fff;
  width: 97.5%;
  margin: 12px 0px;
  padding: 0;
  border: solid 2px #EBF1EF;
}

ul.datalist li {
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #ffffff;
  font-size: 16px;
  border-bottom: solid 1px #ccc;
}

ul.datalist li a {
  color: #000;
  font-size: 16px;
  text-decoration: none;
}
</style>
 

HTML Code

 <div class="form-area">
  <input type="" name="" value="" placeholder="input space then cheack" class="uservalue">
  <button class="btn">Click Me</button>
 </div>

Javascript Code

<script>
var btn =   document.querySelector(".btn");
btn.addEventListener("click", myfunc);
function myfunc(){
  var usval = document.querySelector("input").value;
  //This is regular expression  /\s/g   
  if(usval == "" || usval.replace(/\s/g, "").length<=0){
    alert("please input user value");
  }
  else{
    alert("User Value is : "+usval);
  }

}
</script>

Css Code

 <style>
 
.form-area{
   display:flex;
}
.form-area input {
  padding: 10px;
  width:80%;
  background: #fff;
  font-size: 16px;
  border: solid 10px #4988e8;
}

.form-area button.btn{
background: #ff9800;
    color: #fff;
    font-size: 20px;
    padding: 16px 15px;
    border: none;
}
</style>
 

HTML Code

<div class="result">
  Result Data
  <div class="resultdata"></div>
</div>
      <div class="student-enquery-form">
   <div class="form-row-full">
      <div class="field_name">Name</div>
      <input type="" name="" placeholder="Your Name" class="username" value="">
   </div>
   <div class="form-row-full">
    <div class="field_name">E-mail</div>
      <input type="" name="" value="" placeholder="Your E-mail" class="useremail">
   </div>
   <div class="form-row-full">
    <div class="field_name">Contact</div>
      <input type="" name="" value="" placeholder="Your Contact Number" class="usermobile">
   </div>
   <div class="form-row-full">
   <div class="field_name">Country</div>
      <select name="country" class="country">
      <option value="" selected="selected">Select Your Country</option>
      <option value="India">India</option>
      <option value="United Kingdom">United Kingdom</option>
      <option value="Japan">Japan</option>      
      <option value="Nepal">Nepal</option>
      <option value="Bangladesh">Bangladesh</option>
      <option value="U.S.A">U.S.A.</option>
      <option value="Australia">Australia</option>
      <option value="Sri Lanka">Sri Lanka</option>
      <option value="Pakistan">Pakistan</option>
      <option value="China">China</option>
     </select>
   </div>
   <div class="form-row">
    <div class="field_name">Class Time</div>
      <div class="radio-group">
        <div class="radio-row">
            <input type="radio" class="time" name="time" value="8AM - 10AM">
            <label for="age1">8AM - 10AM</label>
          </div>
          <div class="radio-row">
           <input type="radio" class="time" name="time" value="12PM - 2PM">
           <label for="age2">12PM - 2PM</label>
          </div>
          <div class="radio-row">
          <input type="radio" class="time" name="time" value="6PM - 8PM">
          <label for="age3">6PM - 8PM</label>
        </div>
      </div>
   </div>
   <div class="form-row">
    <div class="field_name">Course List</div>
    <div class="radio-group">
     <div class="radio-row">
      <input type="checkbox" class="course" name="vehicle1" value="Javascript">
      <label for="vehicle1"> Javascript</label>
      </div>
      <div class="radio-row">
        <input type="checkbox" class="course" name="vehicle2" value="Angular">
        <label for="vehicle2"> Angular</label>
      </div>
      <div class="radio-row">
        <input type="checkbox" class="course" name="vehicle3" value="Node js">
        <label for="vehicle3"> Node js</label>
      </div>
    <div class="radio-row">
        <input type="checkbox" class="course" name="vehicle3" value="MongoDB">
        <label for="vehicle3"> MongoDB</label>
      </div>
    <div class="radio-row">
        <input type="checkbox" class="course" name="vehicle3" value="Express js">
        <label for="vehicle3"> Express js</label>
     </div>
    </div>
   </div>
   <button class="mybtn">Submit</button>
</div>

Javascript Code

<script>

  var btn = document.querySelector(".mybtn");

  btn.addEventListener("click", validation);
  function validation(){

    var nameValue = document.querySelector(".username").value;
    nameValue = nameValue.replace(/\s/g,"");  //remove white space using expresion  /\s/g  

    var emailValue = document.querySelector(".useremail").value;
      emailValue = emailValue.replace(/\s/g,"");  //remove white space using expresion  /\s/g  

    var mobValue = document.querySelector(".usermobile").value;
    mobValue = mobValue.replace(/\s/g,"");  //remove white space using expresion  /\s/g  

    var country = document.querySelector(".country").value;
    

    var time = document.querySelector('.time:checked');//selected cheack box
  
    //console.log(Age);
    var course = document.querySelectorAll(".course:checked");
  
    
    course.forEach(vanfunc)
    var courseList;

    function vanfunc(x){
      // remove for undefined value
      if (courseList== undefined){
        courseList="";
      }   
      // get value
      courseList +=" "+x.value +"<br>";

    }
    
    if(nameValue ==''){
    
      alert("please input user Name")
    }
    else if(emailValue == ''){
      alert("please input user e mail");
    }
    
    else if(mobValue == ''){
        alert("please input user Mobile");
    }

    else if(country == ''){
        alert("Select Your Country");
    }
    else if(time == null){
      alert("Select Your Class Timing");
    }

    else if(courseList == null){
      alert("Select Your Course Name");
    }
  
    else{
    // sucessfull messages
    var result = document.querySelector(".result").style.display='block'
    document.querySelector(".resultdata").innerHTML=
    "<strong>Name : </strong> " + nameValue+
     "<br><strong>E-mail : </strong>" + emailValue+
     "<br><strong>Mobile : </strong>" + mobValue+
     "<br><strong>Country : </strong>" + country+
     "<br><strong>Course Timing : </strong>" + time.value+
      "<br><strong>Course LIst : </strong>" + courseList;
     ;

    }
    
  }
</script>

Css Code

 <style>
 .student-enquery-form{
        border: solid 2px hsl(207deg 62% 85%);
        padding: 31px;
        width: 100%;
        margin: auto;
        font-family: verdana;
        background: hsl(192deg 50% 96%);
    }
    .form-row-full{
      display:flex;
    }
    .form-row-full .field_name{
    width: 30%;
    padding-bottom: 8px;
    font-size: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    }
    .form-row .field_name{
      width: 100%;
      padding-bottom: 8px;
      font-size: 15px;
      font-weight: 600;
      color: #000;
    }
    .student-enquery-form label{
      font-size:15px;
      color:#333;
      font-weight:600;
    }
    .student-enquery-form .form-row-full input, 
    .student-enquery-form .form-row-full select{
      padding:5px 15px;
      width:70%;
      margin-bottom:15px;
    }
    .student-enquery-form .form-row-full select{
      width:70%;
    }
    .radio-group{
      padding:0px 15px;
      width:71%;
      margin-bottom:15px;
      margin-left:auto;
      margin-right:0;
    }
    .radio-row{
      padding-bottom:10px;
    }
    .radio-row:last-child{
      padding-bottom:0;
    }
    .mybtn{
      background: #0164c9;
      color: #fff;
      font-size: 18px;
      padding: 10px 36px;
      border: solid 1px #ccc;
      margin: 25px auto auto;
      display: table;
    }
    .result{
      border:solid 2px #777;
      padding:15px;
      width:100%;
      margin:auto;
      font-family:verdana;
      background:lightgreen;
      display:none;
      font-size:16px;
      line-height:25px;
    }
    .result strong{
      width:30%;
    }
</style>
 

HTML Code

<div class="program-example">
  <div class="container">
   <div class="row flex-column-reverse flex-lg-row">
      <div class="col-lg-3 col-md-4 col-12">
         <?php include("examplelist.php"); ?>
      </div>
      <div class="col-lg-9 col-md-8 col-12">
        <h1> E-mail and Mobile Validation Code</h1>
<div class="result">
  Result Data
  <div class="form-validation">
  <div class="form-heading">E-mail & Mobile Validation</div>
  <form name='forms' onsubmit="return validation()">
    <div class="form-row">
      <input type="text" name="e-mail" value="" placeholder="Your E-mail" class="email">
    </div>
    <div class="form-row">
      <input type="text" name="mobile" value="" placeholder="Your Contact Number" class="mobile">
    </div>    
    <input class="submit" type="submit" value="Submit">
  </form>
</div>
</div>

Javascript Code

<script>

  function validation(){
    //assigment 
    var mail = document.querySelector(".email");
    var mailValue = mail.value;
    mailValue = mailValue.replace(/\s/g, "");

    var mob = document.querySelector(".mobile");
    var mobValue = mob.value;

    //email validation
    if(mailValue==""){
      alert("Please input Email");
      mail.focus();
      return false

    }
    else if(mailValue.indexOf('@')<=0){
      alert("Please Valid @ input");
      mail.focus();
      return false
    }
    else if((mailValue.charAt(mailValue.length-4)!='.') && 
      (mailValue.charAt(mailValue.length-3)!='.')){
            alert("Please Valid . input");
            mail.focus();
            return false
    }
    //email validation end here


    // mobile falidation start here

    else if(mobValue==""){
      alert("Please input Mobile Number");
      mob.focus();
      return false
    }

    else if(isNaN(mobValue)){
      alert("Please input Number Value");
      mob.focus();
      return false
    }
    else if(mobValue.length <10){
      alert("Please input 10 Digit Number");
      mob.focus();
      return false
    }
    else if(mobValue.length >10){
      alert("Please input 10 Digit Number");
      mob.focus();
      return false
    }
    else if((mobValue.charAt(0) != 9) && 
      (mobValue.charAt(0) != 8) && (mobValue.charAt(0) != 7)){
      alert("Please Start Your Number with 9, 8, 7");
      mob.focus();
      return false
    }

    // after sucess submit message
    else{
      alert("Thank You")
      return true
    }

  }
</script>

Css Code

 <style>
 .form-validation{
      width:300px;
      margin:25px;
      padding:15px;
      background:lightblue;
      font-family:verdana;
    }
    .form-heading{
      color:#000;
      font-size:20px;
      padding-bottom:10px;
      border-bottom:solid 1px #777;
      margin-bottom:20px;
    }
    .form-validation input{
      background:#fff;
      padding:10px;
      width:90%;
      border:solid 1px #ccc;
      margin-bottom:15px;
    }
    .form-validation .submit{
      background:darkblue;
      color:#fff;
      padding:10px 15px;
      width:100%;
    }
</style>