Added Slope Calculator (Rakesh9100#1113)

sakeel-103 · Jun 4, 2024 · 6a6fec6 · 6a6fec6
1 parent cb77aae
commit 6a6fec6
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 0 deletions.
diff --git a/Calculators/Slope-Calculator/README.md b/Calculators/Slope-Calculator/README.md
@@ -0,0 +1,20 @@
+# <p align="center">Slope Calculator</p>
+
+## Description :-
+
+In this calculator, we can calculate the slope of the line. If two points (in the form of x and y coordinates) are given we can calculate the distance between the two points with their slope.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- It can calculate the slope of the line.
+- It can calculate the distance between two points.
+
+## Screenshots:-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/bf6c7187-639a-4ffb-bfb6-373248103ec3)
diff --git a/Calculators/Slope-Calculator/index.html b/Calculators/Slope-Calculator/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="style.css">
+ <title>Slope Calculator</title>
+</head>
+
+<body>
+ <div class="container">
+ <h1>Slope Calculator</h1>
+ <form id="calculator-form">
+ <div class="group1">
+ <div class="input-group">
+ <label for="x1">X1:</label>
+ <input type="number" id="x1" required>
+ </div>
+ <div class="input-group">
+ <label for="y1">Y1:</label>
+ <input type="number" id="y1" required>
+ </div>
+ </div>
+ <div class="group2">
+ <div class="input-group">
+ <label for="x2">X2:</label>
+ <input type="number" id="x2" required>
+ </div>
+ <div class="input-group">
+ <label for="y2">Y2:</label>
+ <input type="number" id="y2" required>
+ </div>
+ </div>
+ <button type="button" onclick="calculate()">Calculate</button>
+ </form>
+ <div id="results">
+ <p id="slope"></p>
+ <p id="distance"></p>
+ </div>
+ </div>
+ <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Slope-Calculator/script.js b/Calculators/Slope-Calculator/script.js
@@ -0,0 +1,13 @@
+function calculate() {
+ const x1 = parseFloat(document.getElementById('x1').value);
+ const y1 = parseFloat(document.getElementById('y1').value);
+ const x2 = parseFloat(document.getElementById('x2').value);
+ const y2 = parseFloat(document.getElementById('y2').value);
+
+ const slope = ((y2 - y1) / (x2 - x1)).toFixed(3);
+
+ const distance = Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2)).toFixed(3);
+
+ document.getElementById('slope').innerText = `Slope: ${slope}`;
+ document.getElementById('distance').innerText = `Distance: ${distance}`;
+}
diff --git a/Calculators/Slope-Calculator/style.css b/Calculators/Slope-Calculator/style.css
@@ -0,0 +1,84 @@
+body {
+ font-family: Arial, sans-serif;
+ background: linear-gradient(135deg, #ff6ec4, #7873f5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+}
+
+.container {
+ background-color: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+}
+
+.container:hover {
+ transform: translateY(-5px);
+}
+
+h1 {
+ margin-bottom: 40px;
+ margin-left: 70px;
+ margin-right: 70px;
+ text-align: center;
+ color: #555;
+ text-decoration: underline;
+}
+
+.input-group {
+ display: flex;
+ align-items: center;
+ margin-bottom: 30px;
+}
+
+.group1,
+.group2{
+ display: flex;
+ justify-content: space-around;
+}
+
+label {
+ margin-right: 10px;
+ color: #333;
+}
+
+input[type="number"] {
+ padding: 8px;
+ box-sizing: border-box;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ width: 60px;
+ transition: border-color 0.3s;
+}
+
+input[type="number"]:focus {
+ border-color: #ff6ec4;
+ outline: none;
+}
+
+button {
+ display: block;
+ margin: 20px auto;
+ background-color: #007BFF;
+ color: white;
+ border: none;
+ padding: 10px 15px;
+ cursor: pointer;
+ border-radius: 4px;
+ font-size: 16px;
+ transition: background-color 0.3s, transform 0.3s;
+}
+
+button:hover {
+ background-color: #0056b3;
+ transform: translateY(-3px);
+}
+
+#results {
+ margin-top: 20px;
+ text-align: center;
+}
diff --git a/index.html b/index.html
@@ -2332,6 +2332,20 @@ <h3>Calculates optimal bedtimes based on desired wake-up time and the scientific
  </div>
  </div>
  </div>
+ <div class="box">
+ <div class="content">
+ <h2>Slope Calculator</h2>
+ <h3>Calculates the slope of the line.</h3>
+ <div class="card-footer">
+ <a href="./Calculators/Slope-Calculator/index.html" target="_blank">
+ <button>Try Now</button>
+ </a>
+ <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Slope-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>Smith Number Calculator</h2>