HTML Project – Find Factorial Number with Html CSS and JS (Java Script ) . Design Factorial Number with html css and JS (Java Script) with free source code and YouTube video In this Factorial Number have input output ,Factorial Number of 5 is 120 etc.
Attach CSS File in Html , For Attach CSS file in <head> tag .
<link rel=¨stylesheet¨ type=¨text/css¨ href=¨..\[folder_name]\[file_name].css¨>
<link rel=¨stylesheet¨ type=¨text/css¨ href=¨[file_name].css¨>
Attach (JS) Java Script File in html , JS file attache in <body> tag
<script src=”..\[folder_name]\[file_name].js”></script>
<script src=”[file_name].js”></script>
<script src=”[url_of_the_js_library]”></script>
Html File
<!DOCTYPE html>
<html>
<head>
<title>factorial of a number</title>
<meta charset=”utf-8″ name=”viewport”
content=”width=device-width,initial-scale=1.0″>
</head>
<body>
<h1>Factorial of a number</h1>
<div id=”box”>
<input type=”number” id=”inputbox” placeholder=”Enter number….”>
<button onclick=”a()” id=”button”><font color=”white”>Submit</font></button><br/>
<div id=”output”></div>
</div>
</body>
</html>
CSS File
@media only screen and (max-width: 720px)
{
body{
background-color: #1569C7;
}
h1{
padding-left:10vw;
color:white;
}
#box{
position: relative;
min-Width:80vw;
min-height:30vh;
margin-top:15vw;
margin-left:2vw;
background-color:rgba(255,255,255,0.6);
}
#button{
min-Width:20vw;
min-Height:5vh;
Border-radius:4vw;
Background-color:green;
outline:none;
}
#inputbox{
margin-left:9vw;
margin-top:5vh;
min-Width:35vw;
min-Height:4vh;
background-color: white;
Border-radius:4vw;
outline:none;
}
#output{
font-weight: bold;
padding-top: 7vw;
padding-left:8vw;
}
}
/* for desktop*/
@media only screen and (min-width:720px){
body{
background-color: yellow;
}
h1{
padding-left:28vw;
color:white;
}
#box{
position: relative;
min-width: 60vw;
min-height:60vh;
margin-top:5vw;
margin-left:8vw;
background-color:rgba(255,255,255,0.6);
}
#button{
min-Width:10vw;
min-height:9vh;
Border-radius:4vw;
Background-color:green;
outline:none;
}
#inputbox{
margin-left:5vw;
margin-top:20vh;
min-Width:20vw;
min-Height:5vh;
background-color: white;
Border-radius:2vw;
outline:none;
}
#output{
font-weight: bold;
padding-top:5vw;
padding-left:5vw;
}
}
JS File
function a(){
var num=document.getElementById(“inputbox”).value;
var fact=1;
if (num==1)
print(“fact is 1”);
else
for (i=1; i<=num; i++) {
fact=fact*i;
}
document.getElementById(“output”).innerHTML=”Output:-The Factorial of “+num+” is “+fact+”.”;
}
Learn More>>>
Visit my Google Play Store Apps Click on this Link
Visit For Browser 5 G App On google Play Store>>>>>>>>>>
This My Creative App Click on DeepCrazyWorld App>>>>>>>>>>>
To Solve Your Math Calculation Math Solve App >>>>>
Spinner Bottle Game App>>>>>>>>>>>>>>>>>>>>>
This News Nation App News7on>>>>>>>>>>>>>>
Shopping App ZampKart >>>>>>>>>>>>>>>>>>>
Math Equation Solving App>>>>>>>>>>>>>>>>>>>
Event Basis Picture LovingCaring143 App>>>>>>>>>
Here This Blogger Site App to Explore Your Knowledge Download all this Apps By Google Play Store My Blogger Site App Download And Install Paragraph successfully.
Click on Link CrazyCoder >>>>>>>>>>
YouTube Video
Sharing is caring …
Conclusion
We have successfully created a Factorial No. using html, css and JS.