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 Fuel Cost Calculator #593

Merged
merged 9 commits into from
Feb 23, 2024
Merged

Added Fuel Cost Calculator #593

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
377459d
2D Shapes and Color Code Calculator pages changed with new and improv…
Hansawani Jan 28, 2024
49ac68b
button functionality improved
Hansawani Jan 28, 2024
f53c4aa
bg images removed from assets folder and added to respective calculat…
Hansawani Jan 31, 2024
b274a78
fuel cost calculator pages added
Hansawani Feb 18, 2024
8c4a02f
fuel cost calculator added on main page
Hansawani Feb 18, 2024
eddacb8
Merge branch 'main' into main
Rakesh9100 Feb 23, 2024
e069ba9
Update index.html
Rakesh9100 Feb 23, 2024
2b1724e
Create Readme.md
Rakesh9100 Feb 23, 2024
d66d5d7
Update Readme.md
Rakesh9100 Feb 23, 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
138 changes: 138 additions & 0 deletions Calculators/2D-Shapes-Calculator/2D-Shapes-Calcnew.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
body {
font-family: 'Inconsolata', monospace;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background:linear-gradient(to right bottom, #7ed0e7, #77c1ee, #87afee, #a399e1, #bf80c6);
height: 100vh;
margin: 0;
background-image: url(2Dshapes.jpg);
background-size: cover;
background-position: center;
}

.waviy {
position: relative;
}
.waviy span {
position: relative;
display: inline-block;
font-size: 35px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
color: #fff;
text-transform: uppercase;
animation: flip 2s infinite;
animation-delay: calc(.2s * var(--i))
}
@keyframes flip {
0%,80% {
transform: rotateY(360deg)
}
}
.card {
background: rgba(158, 187, 226, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 25px;
text-align: center;
max-width: 570px;
width: 90%;
margin-bottom: 20px;
}
.row{
display: flex;
justify-content:space-around;
}
label{
color: white;
display: block;
margin-bottom: 9px;
font-size: 1.1rem;
font-family: monospace;
}

input,
select {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: none;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.8);
color: #333333;
transition: background-color 0.3s ease;
}

input:focus,
select:focus {
background-color: rgba(255, 255, 255, 1);
}

select {
cursor: pointer;
}

.rule {
height: 1px;
background-color: #ffffff;
margin: 20px 0;
}

.form-footer {
text-align: center;
}

#result-container {
margin-top: 20px;
text-align: center;
font-weight: bold;
color: white;
font-size: 1.3rem;
font-family: monospace;
}
.button {
align-items: center;
appearance: none;
background-image: radial-gradient(100% 100% at 100% 0, #e08b46 0, #603289 100%);
border: 0;
border-radius: 6px;
box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono",monospace;
height: 40px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
}

.button:focus {
box-shadow: #b5b952 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.button:hover {
box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #e1dde8 0 -3px 0 inset;
transform: translateY(-2px);
}

.button:active {
box-shadow: #e3e3dd 0 3px 7px inset;
transform: translateY(2px);
}
129 changes: 72 additions & 57 deletions Calculators/2D-Shapes-Calculator/2D-Shapes-Calculator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,82 @@
<!DOCTYPE html>
<html lang="en">

<head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="2D-Shapes-Calculator.css" />
<title>2D Shapes Calculator - CalcDiverse</title>
</head>

<body>

<div class="card-form" id="2d-shapes">
<form class="calculate" id="2d-shapes-calculator">
<div class="form-title">2D Shapes Calculator</div>
<div class="form-body">
<div class="row">
<select id="shape" name="shape" onchange="showDimensions()" required>
<option value="" disabled selected hidden>Select a shape</option>
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="triangle">Triangle</option>
<option value="parallelogram">Parallelogram</option>
<option value="rhombus">Rhombus</option>
<option value="trapezoid">Trapezoid</option>
<option value="hexagon">Hexagon</option>
<!-- Add more shape options as needed -->
</select>
</div>
<div class="row" id="length-row" style="display: none;">
<label for="length">Enter Length:</label>
<input type="number" id="length" name="length">
</div>
<div class="row" id="width-row" style="display: none;">
<label for="width">Enter Width:</label>
<input type="number" id="width" name="width">
</div>
<div class="row" id="radius-row" style="display: none;">
<label for="radius">Enter Radius:</label>
<input type="number" id="radius" name="radius">
</div>
<div class="row" id="diagonal1-row" style="display: none;">
<label for="diagonal1">Enter Diagonal 1:</label>
<input type="number" id="diagonal1" name="diagonal1">
</div>
<div class="row" id="diagonal2-row" style="display: none;">
<label for="diagonal2">Enter Diagonal 2:</label>
<input type="number" id="diagonal2" name="diagonal2">
</div>
</div>
<div class="rule"></div>
<link rel="stylesheet" href="2D-Shapes-Calcnew.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap" rel="stylesheet">
<title>2D shapes calculator</title>
</head>
<body>
<div class="card">
<div class="waviy">
<span style="--i:1">2</span>
<span style="--i:2">D</span>
<span style="--i:11">&nbsp;</span>
<span style="--i:3">S</span>
<span style="--i:4">H</span>
<span style="--i:5">A</span>
<span style="--i:6">P</span>
<span style="--i:7">E</span>
<span style="--i:8">S</span>
<span style="--i:9">&nbsp;</span>
<span style="--i:10">C</span>
<span style="--i:11">A</span>
<span style="--i:12">L</span>
<span style="--i:13">C</span>
<span style="--i:14">U</span>
<span style="--i:15">L</span>
<span style="--i:16">A</span>
<span style="--i:17">T</span>
<span style="--i:18">O</span>
<span style="--i:19">R</span>
</div>
<br><br>
<div class="row">
<select id="shape" name="shape" onchange="showDimensions()" required>
<option value="" disabled selected hidden>Select a shape</option>
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="triangle">Triangle</option>
<option value="parallelogram">Parallelogram</option>
<option value="rhombus">Rhombus</option>
<option value="trapezoid">Trapezoid</option>
<option value="hexagon">Hexagon</option>
</select>
</div>
<br>
<div class="row" id="length-row" style="display: none;">
<label for="length">Enter Length:</label>
<input type="number" id="length" name="length">
</div><br>
<div class="row" id="width-row" style="display: none;">
<label for="width">Enter Width:</label>
<input type="number" id="width" name="width">
</div><br>
<div class="row" id="radius-row" style="display: none;">
<label for="radius">Enter Radius:</label>
<input type="number" id="radius" name="radius">
</div><br>
<div class="row" id="diagonal1-row" style="display: none;">
<label for="diagonal1">Enter Diagonal 1:</label>
<input type="number" id="diagonal1" name="diagonal1">
</div>
<br>
<div class="row" id="diagonal2-row" style="display: none;">
<label for="diagonal2">Enter Diagonal 2:</label>
<input type="number" id="diagonal2" name="diagonal2">
</div>
<div class="rule"></div>
<div class="form-footer">
<button onclick="calculate(event)">Calculate</button>
<button class="button" onclick="calculate(event)">Calculate</button>
</div>
<div id="result-container">
<p id="result"></p>
</div>
</form>
</div>

<script src="2D-Shapes-Calculator.js"></script>

</body>

</div>
<script src="2D-Shapes-Calculator.js"></script>
</body>
</html>
Binary file added Calculators/2D-Shapes-Calculator/2Dshapes.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Calculators/Color-Code-Calculator/colourcode.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 27 additions & 4 deletions Calculators/Color-Code-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,30 @@
<title>Color Converter</title>
</head>
<body>
<h1>Color Code Calculator</h1>
<div class="waviy">
<span style="--i:1">C</span>
<span style="--i:2">O</span>
<span style="--i:3">L</span>
<span style="--i:4">O</span>
<span style="--i:5">R</span>
<span style="--i:6">&nbsp;</span>
<span style="--i:7">C</span>
<span style="--i:8">O</span>
<span style="--i:9">D</span>
<span style="--i:10">E</span>
<span style="--i:11">&nbsp;</span>
<span style="--i:12">C</span>
<span style="--i:13">A</span>
<span style="--i:14">L</span>
<span style="--i:15">C</span>
<span style="--i:16">U</span>
<span style="--i:17">L</span>
<span style="--i:18">A</span>
<span style="--i:19">T</span>
<span style="--i:20">O</span>
<span style="--i:21">R</span>
</div>
<br><br>
<div class="card">
<div class="row input ">
<div class="dropdowns">
Expand All @@ -28,15 +51,15 @@ <h1>Color Code Calculator</h1>
<input type="text" id="input" placeholder="Enter a value" />

</div>

<br><br>
<div class="row">
<div class="button">
<div class="buttons">
<button id="convert">Convert 🔄</button>
<button id="copy">Copy📂 </button>
<button id="reset">Reset ❌ </button>
</div>
</div>

<br><br>
<div class="row result">
<div class="dropdowns">
<div class="dropdown">
Expand Down
Loading
Loading