Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Factor Calculator #1904

Merged
merged 4 commits into from
Dec 14, 2024
Merged

Added Factor Calculator #1904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5e95e69
Successfully Added a Factor Calculator to CalcDiverse
Atharvverma1234 Dec 12, 2024
cacf057
Added a Factor Calculator to CalcDiverse
Atharvverma1234 Dec 12, 2024
0fa33ce
Added a Factor Calculator to CalcDiverse
Atharvverma1234 Dec 12, 2024
de65898
Few changes
Rakesh9100 Dec 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions Calculators/Factor-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# <p align="center">Factor Calculator</p>

## Description :-

The Factor Calculator is a simple and interactive web application designed to calculate all the factors of a given number. With a clean and user-friendly interface, it allows users to quickly input a number and view its factors in a visually appealing format.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Features :-

- The application dynamically calculates the factors of the input number and displays the results instantly without requiring page reloads.
- Displays meaningful error messages for invalid or missing inputs.
- Aesthetic layout styled with CSS to provide a visually engaging experience.

## Screenshots :-

![image](https://github.com/user-attachments/assets/1795f05f-c5b3-429c-b819-ec3938da711c)
22 changes: 22 additions & 0 deletions Calculators/Factor-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Factor Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- Title of the application -->
<h1>Factor Calculator</h1>
<!-- Input field for the user to enter a number -->
<input type="number" id="number" placeholder="Enter a number" />
<!-- Button to trigger the factor calculation -->
<button onclick="calculateFactors()">Calculate Factors</button>
<!-- Div to display the calculation results -->
<div class="result" id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions Calculators/Factor-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
function calculateFactors() {
// Retrieve the input value and parse it as an integer
const number = parseInt(document.getElementById('number').value);
// Get a reference to the result display div
const resultDiv = document.getElementById('result');

// Validate the input: check if it's a number and greater than 0
if (isNaN(number) || number <= 0) {
resultDiv.innerHTML = 'Please enter a positive number.';
resultDiv.style.display = 'block';
return;
}

let factors = [];
// Loop through numbers from 1 to the input number
for (let i = 1; i <= number; i++) {
if (number % i === 0) {
factors.push(i);
}
}

// Display the list of factors in the result div
resultDiv.innerHTML = `Factors of ${number}: <strong>${factors.join(', ')}</strong>`;
resultDiv.style.display = 'block';
}
165 changes: 165 additions & 0 deletions Calculators/Factor-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(120deg, #1e3c72, #2a5298, #6dd5ed);
background-size: 200% 200%;
animation: backgroundShift 12s ease-in-out infinite;
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}

.container {
height: 400px;
width: 400px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.4);
border-radius: 10px;
overflow: hidden;
background-color: #1c1b29;
text-align: center;
position: relative;
display: flex; /* Added */
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
flex-direction: column; /* Stack elements vertically */
}

.container::before {
content: "";
background-image: conic-gradient(
#ff6b6b, #ffcc70, #1dd1a1, #54a0ff, #ff6b6b
);
height: 150%;
width: 150%;
position: absolute;
left: -25%;
top: -25%;
animation: rotate 3s infinite linear;
}

.container::after {
content: '';
height: 94%;
width: 94%;
position: absolute;
background-color: #1c1b29;
border-radius: 10px;
top: 3%;
left: 3%;
color: #ffffff;
display: grid;
place-items: center;
font-size: 20px;
letter-spacing: 6px;
box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
}

h1 {
background: radial-gradient(circle, rgb(0, 149, 255),white);
background-clip: text;
margin-bottom: 20px;
position: relative;
z-index: 1;
font-size: 35px;
color: transparent;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
animation: gemini 15s linear infinite;
background-size: 200% 200%;
}

input {
width: 85%;
padding: 10px;
border: none;
border-radius: 10px;
margin-top: 15px;
margin-bottom: 15px;
outline: none;
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s;
}

input:focus {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

button {
padding: 10px 15px;
border: none;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 10px;
background: linear-gradient(45deg, #ff6f61, #f6416c);
color: white;
font-weight: bold;
cursor: pointer;
transition: transform 0.3s ease, background 0.3s;
position: relative;
z-index: 1;
font-size: 17px;
}

button:hover {
background: linear-gradient(45deg, #f6416c, #ff6f61);
transform: scale(1.1);
}

.result {
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
padding: 10px;
background: rgba(16, 0, 0, 0.2);
border-radius: 10px;
display: none;
position: relative;
z-index: 1;
color: #ffffff;
font-size: 18px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

@keyframes rotate {
100% {
transform: rotate(-360deg);
}
}

@keyframes backgroundShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

@keyframes gemini {
0%{
background-position: 0% 0%;
}
50%{
background-position: 100% 100%;
}
100%{
background-position: 0% 0%;
}

}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2226,6 +2226,20 @@ <h3>Calculates the maturity amount and interest on fixed deposits.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Factor Calculator</h2>
<h3>Calculates all the factors/divisors of a given number.</h3>
<div class="card-footer">
<a href="./Calculators/Factor-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Factor-Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Factorial Calculator</h2>
Expand Down
Loading