Hi Guys? in this post, I will provide you the javascript project with the source code which is absolutely free to download. so read each and every line. So that you easily understand what is running in the code structure. || Javascript Project KM converter | With Source Code free Download ||
HTML STRUCTURE
In this Html code I will put the necessary details regarding km converter to meter markup. so that you can easily use the markup for your UI Design . go ahead and use below code mention in the bottom .html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KM converter</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body>
<div class="card">
<h1>Distance Converter</h1>
<h2 class="animated infinite pulse ">Easily Convert Your Distance</h2>
<div class="converter">
<form>
<input type="text" name="fname" id="killo" placeholder="KM">
<input type="button" name="df" value="Convert" onclick="call()" >
</form>
<div class="result">
<p id="showdata"></p></span>
</div>
</div>
</div>
</body>
</html>
Style sheet CSS File
Above mention, style sheet makes your markup amazing . also it give you a nicer style formatting for input fields.
So without wasting any time lets do that and one more thing you can use this style sheet as externally as well internally file binding
And make sure these tips only for beginners but if you are a pro don’t worry You can use this style sheet in your own way. put this style sheet in .css file
style.css | file name
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,900;1,700&display=swap');
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #9FC25C;
height: 768px;
}
.card{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
}
.card
{
width: 1088px;
height: 641px;
background-color: #fff;
box-shadow: -10px 25px 82px #C2C643;
border-radius: 26px;
}
.card h1 {
color: #707070;
font-size: 30px;
font-family: Montserrat;
font-weight: 900;
text-transform: uppercase;
position: relative;
top: 176px;
left: 66px;
}
.card h2 {
color: #707070;
font-size: 18px;
font-family: Montserrat;
font-weight: 900;
text-transform: uppercase;
position: relative;
top: 176px;
left: 66px;
}
.converter{
background-color: #3100FF;
width: 526px;
height: 561px;
position: absolute;
top: 40px;
left: 503px;
border-radius:25px;
}
input[type=text] {
padding-left:19px;
width: 449px;
height: 86px;
border-radius:
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #FFFFFF;
color: black;
position: relative;
left: 39px;
top: 37px;
font-size: 30px;
font-family: Montserrat;
color: #707070;
border:none;
outline: none;
}
input[type=text] {
padding-left: 43px;
}
::-webkit-input-placeholder {
font-size: 25px;
color:#18191F;
text-transform: uppercase;
text-transform: uppercase;
padding-left: 2px;
font-weight: bold;
}
input[type=button] {
width: 200px;
height: 76px;
border-radius: 100px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #FFFFFF;
color: black;
position: relative;
left: 31%;
top: 39px;
font-size: 30px;
font-family: Montserrat;
color: #18191F;
border:none;
outline: none;
}
.result{
width: 384px;
height: 75px;
border-radius: 44px;
position: absolute;
top: 448px;
left: 71px;
background-color: #18191f;
}
.result p
{
font-size: 31px;
font-weight: 900px;
font-family: Montserrat;
color: white;
position: absolute;
left: 80px;
top: 20px;
}
.result span p {
font-size: 31px;
font-weight: 900px;
font-family: Montserrat;
color: white;
position: absolute;
left: 260px;
top: 20px;
}
Javascript Logic structure
so in this JavaScript file, I will tell you the most important thing which is based on the logical part so keep reading this I will definitely posting or visualize all the details about the java-script logic file with attached in the video part this will make your logic ideal so that you can make your converter.
|| Javascript Project KM converter | With Source Code ||