jcchikikomori/TASK_nov10_CALC.html

## TASK_nov10_CALC.html
<!DOCTYPE HTML 4.01 Transitional>
<html>
<head></head>
<body bgcolor="#33FFFF">
<style type="text/css">
  form {background-color: pink; box-shadow: 10px 10px #000;}
</style>

<body>
<form style = "padding: 20px; width: 215px; border: 5px solid purple; border-radius: 8px; margin: 0 auto; margin-top: 60px;" id="form">
  Enter your name: <input type = 'text' id='name' name='yourname' style='width:213;height:30'><br><br>
  Enter the first number: &nbsp&nbsp&nbsp&nbsp&nbsp <input type = 'text' id='fnumber' style='width:213;height:30'><br><br>
  Enter the second number: &nbsp<input type = 'text' id='snumber'style='width:213;height:30'>
  <br>
  <br>
  <input type='button' id='plus'  value='+' style='width:50px;height:50px' onclick="math('add')">
  <input type='button' id='min'  value='-' style='width:50px;height:50px' onclick="math('minus')">
  <input type='button' id='mul' value='*' style='width:50px;height:50px' onclick="math('multiply')">
  <input type='button' id='div' value='/' style='width:50px;height:50px' onclick="math('divide')">
  <br /><br />

  <input type='button' id='clear' value='CLEAR' style="width: 100%; margin: 0 auto;" onclick="document.getElementById('form').reset();">
</form>
<div id="about">

</div>
<script type='text/javascript'>
    var fnumber, snumber, result, sino, tuni,desc;

   function values()
   {
     // alert("asjdgsajd");
    sino  = (document.getElementById("name").value);
    fnumber = Number(document.getElementById("fnumber").value);
    snumber = Number(document.getElementById("snumber").value);

    //dep checks
    if (sino == '') {
      alert("Your name is required. Please put some.");
      document.getElementById('name').focus();
      exit;
    }
    if ((fnumber == '') && (snumber == '')) {
      alert("Number Fields are required");
      document.getElementById('fnumber').focus();
      exit;
    } else if (fnumber == '') {
      alert("First Number Field is required");
      document.getElementById('fnumber').focus();
      exit;
    } else if (snumber == '') {
      alert("Second Number Field is required");
      document.getElementById('snumber').focus();
      exit;
    }

   }

   function math(operator)
   {

    //init values
    values();

    name = sino;
    document.getElementById("about").innerHTML="Ako si "+sino;
    // alert("Hello " +name);
    switch(operator) {
      case 'add':
        var result = fnumber + snumber;
        var result_text = 'sum';
      break;
      case 'minus':
        var result = fnumber - snumber;
        var result_text = 'difference';
      break;
      case 'multiply':
        var result = fnumber * snumber;
        var result_text = 'product';
      break;
      case 'divide':
        var result = fnumber / snumber;
        var result_text = 'quotient';
      break;
      default:
      alert('Please select properly');
    }

    if (isNaN(result)==true) {
      alert('Math Error');
      exit;
    }
    // alert(result);
    // alert("The " + result_text + " is " + result);

    if(sino=='tuni'){
      desc="matangkad";
      document.getElementById("about").innerHTML="Ako si "+sino + " " + desc ;
    }
    else if (sino=='thea') {
      desc="maganda";
      document.getElementById("about").innerHTML="Ako si "+sino + " " + desc ;
    }
    else if (sino=='mel') {
      desc="maliit";
      document.getElementById("about").innerHTML="Ako si "+sino + " " + desc ;
    }
    else if (sino=='cy') {
      desc="magaling";
      document.getElementById("about").innerHTML="Ako si "+sino + " " + desc ;
    }
    else {
      alert("Enter a valid 8layer developer intern name.");
    }
   }

   </script>
</body>
</html>
	<!DOCTYPE HTML 4.01 Transitional>
	<html>
	<head></head>
	<body bgcolor="#33FFFF">
	<style type="text/css">
	form {background-color: pink; box-shadow: 10px 10px #000;}
	</style>

	<body>
	<form style = "padding: 20px; width: 215px; border: 5px solid purple; border-radius: 8px; margin: 0 auto; margin-top: 60px;" id="form">
	Enter your name: <input type = 'text' id='name' name='yourname' style='width:213;height:30'><br><br>
	Enter the first number: &nbsp&nbsp&nbsp&nbsp&nbsp <input type = 'text' id='fnumber' style='width:213;height:30'><br><br>
	Enter the second number: &nbsp<input type = 'text' id='snumber'style='width:213;height:30'>
	<br>
	<br>
	<input type='button' id='plus' value='+' style='width:50px;height:50px' onclick="math('add')">
	<input type='button' id='min' value='-' style='width:50px;height:50px' onclick="math('minus')">
	<input type='button' id='mul' value='*' style='width:50px;height:50px' onclick="math('multiply')">
	<input type='button' id='div' value='/' style='width:50px;height:50px' onclick="math('divide')">
	<br /><br />

	<input type='button' id='clear' value='CLEAR' style="width: 100%; margin: 0 auto;" onclick="document.getElementById('form').reset();">
	</form>
	<div id="about">

	</div>
	<script type='text/javascript'>
	var fnumber, snumber, result, sino, tuni,desc;

	function values()
	{
	// alert("asjdgsajd");
	sino = (document.getElementById("name").value);
	fnumber = Number(document.getElementById("fnumber").value);
	snumber = Number(document.getElementById("snumber").value);

	//dep checks
	if (sino == '') {
	alert("Your name is required. Please put some.");
	document.getElementById('name').focus();
	exit;
	}
	if ((fnumber == '') && (snumber == '')) {
	alert("Number Fields are required");
	document.getElementById('fnumber').focus();
	exit;
	} else if (fnumber == '') {
	alert("First Number Field is required");
	document.getElementById('fnumber').focus();
	exit;
	} else if (snumber == '') {
	alert("Second Number Field is required");
	document.getElementById('snumber').focus();
	exit;
	}

	}

	function math(operator)
	{

	//init values
	values();

	name = sino;
	document.getElementById("about").innerHTML="Ako si "+sino;
	// alert("Hello " +name);
	switch(operator) {
	case 'add':
	var result = fnumber + snumber;
	var result_text = 'sum';
	break;
	case 'minus':
	var result = fnumber - snumber;
	var result_text = 'difference';
	break;
	case 'multiply':
	var result = fnumber * snumber;
	var result_text = 'product';
	break;
	case 'divide':
	var result = fnumber / snumber;
	var result_text = 'quotient';
	break;
	default:
	alert('Please select properly');
	}

	if (isNaN(result)==true) {
	alert('Math Error');
	exit;
	}
	// alert(result);
	// alert("The " + result_text + " is " + result);

	if(sino=='tuni'){
	desc="matangkad";
	document.getElementById("about").innerHTML="Ako si "+sino + " " + desc ;
	}
	else if (sino=='thea') {
	desc="maganda";
	document.getElementById("about").innerHTML="Ako si "+sino + " " + desc ;
	}
	else if (sino=='mel') {
	desc="maliit";
	document.getElementById("about").innerHTML="Ako si "+sino + " " + desc ;
	}
	else if (sino=='cy') {
	desc="magaling";
	document.getElementById("about").innerHTML="Ako si "+sino + " " + desc ;
	}
	else {
	alert("Enter a valid 8layer developer intern name.");
	}
	}

	</script>
	</body>
	</html>