Factorial Number with Html CSS and JS – HTML Project

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.

<img src="fact.png" alt="find factorial pic"/>

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.


Cheers!

Read More…

Leave a Reply