Skip to content

Commit a75a9fc

Browse files
harshita2216harshita2216
authored
Merge pull request #364 from jugeshraghav/lcmHcfCalculator
lcm hcf calculator added
2 parents 63a6d97 + 1f9fc65 commit a75a9fc

File tree

9 files changed

+318
-0
lines changed

9 files changed

+318
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,3 +140,4 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
140140
|[Digital & Analog Clock](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Clock)| It is a simple project built using Javascript which has two clocks, one is Digital Clock and another one is Analog Clock.
141141
| [Insta Clone](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Instagram-clone) |It is a simple clone of instagram front page using react.
142142
|[Password Strength Meter](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Password%20Strength%20Meter)| Checks the strength of a password if it is strong, average or weak.
143+
|[lcm-hcf-calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/lcm-hcf-calculator) |HCF and LCM calculator finds the highest common factor and lowest common multiple for the given numbers.

‎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: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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-left: 1vw;
77+
padding-right: 1vw;
78+
margin-top: 1vh;
79+
width: 40vw;
80+
}
81+
82+
.property{
83+
width: 60vw;
84+
justify-content: space-evenly;
85+
margin: 3vh;
86+
87+
}
88+
89+
.property > div{
90+
width: 16vw;
91+
background: #1e1e1e;
92+
box-shadow: inset 5px 5px 10px #0c0c0c,
93+
inset -5px -5px 10px #303030;
94+
padding: 1vh 1vw;
95+
opacity: 0.5;
96+
}
97+
98+
.result{
99+
margin-bottom: 2vh;
100+
}
101+
102+
@media all and (max-width:500px){
103+
button, .box{
104+
width: 90vw;
105+
}
106+
107+
input[type="number"]{
108+
width: 40vw;
109+
}
110+
111+
input[type="submit"]{
112+
width: 80vw;
113+
}
114+
115+
.property > div{
116+
width: 32vw;
117+
}
118+
}

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