Skip to content

Commit 5e54072

Browse files
jugeshraghavjugeshraghav
committed
lcm hcf calculator added
1 parent 63a6d97 commit 5e54072

File tree

8 files changed

+318
-0
lines changed

8 files changed

+318
-0
lines changed

‎LCM-HCF-CALCULATOR/README.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# LCM-HCF
2+
## HCF and LCM calculator finds the highest common factor and lowest common multiple for the given numbers.
3+
4+
<hr>
5+
6+
## Here are some screen shots
7+
8+
<p align="center">
9+
<img src="public/img/result1.png" title="result">
10+
<br>
11+
<img src="public/img/result2.png" title="result">
12+
</p>
13+
14+
<hr>
15+
16+
## Built with
17+
![html](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
18+
![css](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
19+
![js](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
20+
![node](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)
21+
![express](https://img.shields.io/badge/express-000000?style=for-the-badge&logo=express&logoColor=white)
22+
23+
<hr>
24+
25+
### How to get the clone on your local machine:
26+
27+
---
28+
29+
- Download or clone the repository
30+
31+
```
32+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
33+
```
34+
35+
- Go to the directory
36+
- open the terminal
37+
- run the following command to install node modules
38+
```
39+
npm install
40+
```
41+
- then run the following command to start the server
42+
```
43+
node src/app.js
44+
```
45+
46+
47+
## Happy Coding!
48+

‎LCM-HCF-CALCULATOR/index.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="./public/css/style.css">
8+
<link rel="shortcut icon" href="./public/img/logo.jfif" type="image/png">
9+
<title>LCM and HCF</title>
10+
</head>
11+
<body>
12+
<div class="container">
13+
<div>
14+
<button id="lcmBtn"></button>
15+
<div class="resultboxLcm box">
16+
<form>
17+
<div>
18+
<input type="number" placeholder="Num1..." id="numLcm1">
19+
<input type="number" placeholder="Num2..." id="numLcm2">
20+
</div>
21+
<input type="submit" value="Calculate" id="lcm" class="resultBtn">
22+
</form>
23+
<div class="property">
24+
<div class="even evenLcm">even</div>
25+
<div class="odd oddLcm">odd</div>
26+
</div>
27+
<p class="resultLcm result"></p>
28+
</div>
29+
</div>
30+
<div>
31+
<button id="hcfBtn"></button>
32+
<div class="resultboxHcf box">
33+
<form>
34+
<div>
35+
<input type="number" placeholder="Num1..." id="numHcf1">
36+
<input type="number" placeholder="Num2..." id="numHcf2">
37+
</div>
38+
<input type="submit" value="Calculate" id="hcf" class="resultBtn">
39+
</form>
40+
<div class="property">
41+
<div class="even evenHcf">even</div>
42+
<div class="odd oddHcf">odd</div>
43+
</div>
44+
<p class="resultHcf result"></p>
45+
</div>
46+
</div>
47+
</div>
48+
49+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
50+
<script src="./public/js/main.js"></script>
51+
</body>
52+
</html>

‎LCM-HCF-CALCULATOR/public/css/style.css

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
@import url('https://fonts.googleapis.com/css2?family=KoHo&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'KoHo', sans-serif;
8+
text-align: center;
9+
}
10+
11+
body, .container, .box, .property, form{
12+
display: flex;
13+
align-items: center;
14+
}
15+
16+
.box, form, body{
17+
justify-content: center;
18+
flex-direction: column;
19+
}
20+
21+
body{
22+
width: 100vw;
23+
height: 100vh;
24+
display: none;
25+
}
26+
27+
.container{
28+
width: 100vw;
29+
justify-content: space-evenly;
30+
flex-direction: column;
31+
}
32+
33+
button, input[type="submit"]{
34+
cursor: pointer;
35+
}
36+
37+
button{
38+
width: 60vw;
39+
height: 10vh;
40+
margin-top: 2vh;
41+
border-radius: 8px;
42+
border: none;
43+
outline: none;
44+
background-color: #1e1e1e;
45+
color: #fff;
46+
font-size: 1rem;
47+
}
48+
49+
50+
51+
.box{
52+
border-radius: 10px;
53+
width: 60vw;
54+
background-color: #1e1e1e;
55+
color: #fff;
56+
margin-top: 1px;
57+
}
58+
form{
59+
margin-top: 2vh;
60+
61+
}
62+
63+
input{
64+
height: 5vh;
65+
outline: none;
66+
border: none;
67+
}
68+
69+
input[type="number"]{
70+
width: 20vw;
71+
margin-left: 1px;
72+
}
73+
74+
input[type="submit"]{
75+
background-color:#7C40FF;
76+
padding: 0vh 1vw;
77+
margin-top: 1vh;
78+
width: 40vw;
79+
}
80+
81+
.property{
82+
width: 60vw;
83+
justify-content: space-evenly;
84+
margin: 3vh;
85+
86+
}
87+
88+
.property > div{
89+
width: 16vw;
90+
background: #1e1e1e;
91+
box-shadow: inset 5px 5px 10px #0c0c0c,
92+
inset -5px -5px 10px #303030;
93+
padding: 1vh 1vw;
94+
opacity: 0.5;
95+
}
96+
97+
.result{
98+
margin-bottom: 2vh;
99+
}
100+
101+
@media all and (max-width:500px){
102+
button, .box{
103+
width: 90vw;
104+
}
105+
106+
input[type="number"]{
107+
width: 40vw;
108+
}
109+
110+
input[type="submit"]{
111+
width: 80vw;
112+
}
113+
114+
.property > div{
115+
width: 32vw;
116+
}
117+
}

‎LCM-HCF-CALCULATOR/public/img/logo.jfif

3.15 KB
Binary file not shown.

‎LCM-HCF-CALCULATOR/public/img/result1.png

39.7 KB
Loading

‎LCM-HCF-CALCULATOR/public/img/result2.png

38.4 KB
Loading

‎LCM-HCF-CALCULATOR/public/js/main.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
const body = document.querySelector("body");
2+
const lcmBtn = document.querySelector("#lcmBtn");
3+
const hcfBtn = document.querySelector("#hcfBtn");
4+
const box = document.querySelector(".box");
5+
const resultboxLcm = document.querySelector(".resultboxLcm");
6+
const resultboxHcf = document.querySelector(".resultboxHcf ");
7+
const numLcm1 = document.querySelector("#numLcm1");
8+
const numLcm2 = document.querySelector("#numLcm2")
9+
const lcm = document.querySelector("#lcm");
10+
const numHcf1 = document.querySelector("#numHcf1");
11+
const numHcf2 = document.querySelector("#numHcf2");
12+
const hcf = document.querySelector("#hcf");
13+
const evenLcm = document.querySelector(".evenLcm");
14+
const oddLcm = document.querySelector(".oddLcm");
15+
const evenHcf = document.querySelector(".evenHcf");
16+
const oddHcf = document.querySelector(".oddHcf");
17+
const resultLcm = document.querySelector(".resultLcm");
18+
const resultHcf = document.querySelector(".resultHcf");
19+
20+
21+
// text content
22+
lcmBtn.textContent = "Click here to find LCM of two numbers.";
23+
hcfBtn.textContent = "Click here to find HCF of two numbers.";
24+
25+
26+
27+
$(document).ready(function() {
28+
$(".box").hide();
29+
body.style.display = "flex";
30+
$(".resultBtn").mouseover(function() {
31+
$(".resultBtn").css("color", "white")
32+
})
33+
$(".resultBtn").mouseout(function() {
34+
$(".resultBtn").css("color", "black")
35+
})
36+
})
37+
const findLcm = () => {
38+
$(".resultboxLcm").slideToggle("slow");
39+
$(".resultboxHcf").slideUp();
40+
41+
lcm.addEventListener("click", (e) => {
42+
e.preventDefault();
43+
const num1 = numLcm1.value ;
44+
const num2 = numLcm2.value;
45+
46+
let min = (num1 < num2) ? num1 : num2;
47+
while(true){
48+
if(min % num1 == 0 && min % num2 == 0){
49+
resultLcm.innerHTML = `LCM of ${num1} and ${num2} is ${min}`;
50+
if(min % 2 == 0){
51+
evenLcm.style.opacity = 1;
52+
oddLcm.style.opacity = 0.5;
53+
}else{
54+
oddLcm.style.opacity = 1;
55+
evenLcm.style.opacity = 0.5;
56+
};
57+
break;
58+
};
59+
min++;
60+
};
61+
});
62+
};
63+
64+
const findHcf = () => {
65+
$(".resultboxHcf").slideToggle("slow");
66+
$(".resultboxLcm").slideUp();
67+
68+
hcf.addEventListener("click", (e) => {
69+
e.preventDefault();
70+
const num1 = numHcf1.value;
71+
const num2 = numHcf2.value;
72+
73+
for (let i = 1; i <= num1 && i <= num2; i++){
74+
if(num1 % i == 0 && num2 % i == 0){
75+
if(i % 2 == 0){
76+
evenHcf.style.opacity = 1;
77+
oddHcf.style.opacity = 0.5;
78+
}else{
79+
oddHcf.style.opacity = 1;
80+
evenHcf.style.opacity = 0.5;
81+
};
82+
resultHcf.innerHTML = `HCF of ${num1} and ${num2} is ${i}`
83+
};
84+
};
85+
});
86+
};
87+
88+
89+
lcmBtn.addEventListener("click", findLcm)
90+
hcfBtn.addEventListener("click", findHcf)

‎LCM-HCF-CALCULATOR/src/app.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const express = require("express");
2+
const app = express();
3+
const path = require("path");
4+
const port = 8000;
5+
6+
const filePath = path.join(__dirname, "../");
7+
app.use(express.static(filePath));
8+
9+
app.listen(port, () => {
10+
console.log(`Listening on port number ${port}`);
11+
})

0 commit comments

Comments
 (0)