ashlynnpai/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Trailing Zeros</title>
    <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div class="wrapper">
    <h1>Calculate the trailing zeros in a factorial</h1>
    <form>
    <label for="num">Choose your number</label>
    <input type="text" value="" id="num"/>
    <input type="button" value="Submit" class="button"/>
    <p>Number of zeros:</p><p id="answer"></p>
    </form>
    </div>
</body>

	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

## script.js
$( ".button" ).click(function() {
var n = document.getElementById( "num" ).value;
    var i = 1;   //calculate number of trailing zeros in a factorial
    var x = 0;
    var y = Math.pow(5, i);
    x = Math.floor(n/y);
    while (n/y > 1){
    i++;
    y = Math.pow(5, i);
    x += Math.floor(n/y);
        }

$("#answer").html(x);
});


//n=23  return 4
//n=101 return 24
//n=1000 return 249

## style.css
.wrapper {
margin: 150px auto;
max-width: 600px;
text-align: center;
font-family: 'Oxygen', sans-serif;
}

form {
 background-color: #A9BCF5;
  padding: 4em 4em 2em;
  max-width: 400px;
  margin: 100px auto;
  border-radius: 10px;
}

label {
  display: block;
  font-size: 1.6em;
  margin: 0 0 .5em;
  color: #000;
}


input[type="text"],
input[type="button"] {
  display: block;
  background: #f5f5f5;
  border: 1px solid #848484;
  font-size: 1.8em;
  border-radius: 10px;
  margin: 30px auto;
}

p {
    font-size: 32px;
}


## uqepg.markdown

      
    Raw
  

              uqepg.markdown
            
          
    uqepg

A Pen by Ashlynn Pai on CodePen.
License.
	<!DOCTYPE html>
	<html>
	<head>
	<title>Trailing Zeros</title>
	<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
	</head>
	<body>
	<div class="wrapper">
	<h1>Calculate the trailing zeros in a factorial</h1>
	<form>
	<label for="num">Choose your number</label>
	<input type="text" value="" id="num"/>
	<input type="button" value="Submit" class="button"/>
	<p>Number of zeros:</p><p id="answer"></p>
	</form>
	</div>
	</body>

	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
	</body>
	</html>
	$( ".button" ).click(function() {
	var n = document.getElementById( "num" ).value;
	var i = 1; //calculate number of trailing zeros in a factorial
	var x = 0;
	var y = Math.pow(5, i);
	x = Math.floor(n/y);
	while (n/y > 1){
	i++;
	y = Math.pow(5, i);
	x += Math.floor(n/y);
	}

	$("#answer").html(x);
	});



	//n=23 return 4
	//n=101 return 24
	//n=1000 return 249
	.wrapper {
	margin: 150px auto;
	max-width: 600px;
	text-align: center;
	font-family: 'Oxygen', sans-serif;
	}

	form {
	background-color: #A9BCF5;
	padding: 4em 4em 2em;
	max-width: 400px;
	margin: 100px auto;
	border-radius: 10px;
	}

	label {
	display: block;
	font-size: 1.6em;
	margin: 0 0 .5em;
	color: #000;
	}


	input[type="text"],
	input[type="button"] {
	display: block;
	background: #f5f5f5;
	border: 1px solid #848484;
	font-size: 1.8em;
	border-radius: 10px;
	margin: 30px auto;
	}

	p {
	font-size: 32px;
	}