From d95575eaec8564fc6b145691849ca17028236940 Mon Sep 17 00:00:00 2001 From: Sree Vidya Date: Thu, 8 Aug 2024 22:53:06 +0530 Subject: [PATCH 1/3] Buoyancy Calculator --- Buoyancy calculator/README.md | 26 +++++++++++++ Buoyancy calculator/index.html | 29 +++++++++++++++ Buoyancy calculator/manifest.json | 22 +++++++++++ Buoyancy calculator/script.js | 14 +++++++ Buoyancy calculator/style.css | 62 +++++++++++++++++++++++++++++++ 5 files changed, 153 insertions(+) create mode 100644 Buoyancy calculator/README.md create mode 100644 Buoyancy calculator/index.html create mode 100644 Buoyancy calculator/manifest.json create mode 100644 Buoyancy calculator/script.js create mode 100644 Buoyancy calculator/style.css diff --git a/Buoyancy calculator/README.md b/Buoyancy calculator/README.md new file mode 100644 index 00000000..5707181b --- /dev/null +++ b/Buoyancy calculator/README.md @@ -0,0 +1,26 @@ +# Buoyancy Calculator + +## Description +The Buoyancy Calculator is a simple web-based tool that computes the buoyant force exerted on an object submerged in a fluid. The calculation is based on Archimedes' principle, which states that the buoyant force is equal to the weight of the fluid displaced by the object. + +## Features +- Calculates buoyant force using user-provided values for fluid density, object volume, and gravity. +- Displays the result directly on the web page. +- Simple and user-friendly interface. + +## How to Use +1. Enter the density of the fluid in kilograms per cubic meter (kg/m³). +2. Enter the volume of the object in cubic meters (m³). +3. Enter the acceleration due to gravity in meters per second squared (m/s²), or use the default value of 9.81 m/s². +4. Click the "Calculate Buoyant Force" button to see the result. + +## Files +- `index.html`: The HTML file that sets up the structure of the calculator. +- `script.js`: The JavaScript file that contains the logic for calculating the buoyant force. +- `style.css`: The CSS file for styling the calculator. + +## Installation +To run the Buoyancy Calculator locally: +1. Clone the repository: + ```bash + git clone diff --git a/Buoyancy calculator/index.html b/Buoyancy calculator/index.html new file mode 100644 index 00000000..5dfaf331 --- /dev/null +++ b/Buoyancy calculator/index.html @@ -0,0 +1,29 @@ + + + + + + Buoyancy Calculator + + + +
+

Buoyancy Calculator

+
+ + + + + + + + + + + +
+
+
+ + + diff --git a/Buoyancy calculator/manifest.json b/Buoyancy calculator/manifest.json new file mode 100644 index 00000000..438db234 --- /dev/null +++ b/Buoyancy calculator/manifest.json @@ -0,0 +1,22 @@ +{ + "name": "Buoyancy Calculator", + "short_name": "BuoyancyCalc", + "description": "A simple web application to calculate the buoyant force on an object submerged in a fluid.", + "start_url": "/index.html", + "display": "standalone", + "background_color": "#ffffff", + "theme_color": "#4CAF50", + "icons": [ + { + "src": "/images/icons/icon-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/images/icons/icon-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ] + } + \ No newline at end of file diff --git a/Buoyancy calculator/script.js b/Buoyancy calculator/script.js new file mode 100644 index 00000000..0c43e311 --- /dev/null +++ b/Buoyancy calculator/script.js @@ -0,0 +1,14 @@ +function calculateBuoyantForce() { + const density = parseFloat(document.getElementById('density').value); + const volume = parseFloat(document.getElementById('volume').value); + const gravity = parseFloat(document.getElementById('gravity').value) || 9.81; + + if (isNaN(density) || isNaN(volume) || isNaN(gravity)) { + document.getElementById('result').innerText = "Please enter valid numbers for all fields."; + return; + } + + const buoyantForce = density * volume * gravity; + + document.getElementById('result').innerText = `Buoyant Force: ${buoyantForce.toFixed(2)} N`; +} diff --git a/Buoyancy calculator/style.css b/Buoyancy calculator/style.css new file mode 100644 index 00000000..3932b8a3 --- /dev/null +++ b/Buoyancy calculator/style.css @@ -0,0 +1,62 @@ +body { + font-family: Arial, sans-serif; + background: linear-gradient(135deg, #263daf, #15e334); /* Add gradient background */ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + max-width: 400px; + width: 100%; +} + +h1 { + text-align: center; + margin-bottom: 20px; +} + +.calculator { + display: flex; + flex-direction: column; +} + +label { + margin-bottom: 8px; + font-weight: bold; +} + +input { + margin-bottom: 16px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; +} + +button { + padding: 10px; + border: none; + background-color: #007bff; + color: #fff; + font-size: 16px; + cursor: pointer; + border-radius: 4px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 20px; + font-size: 18px; + font-weight: bold; + text-align: center; +} From 7f90faa3fb6986a0cf3a4bfa96132cbbf5710517 Mon Sep 17 00:00:00 2001 From: Sree Vidya Date: Fri, 9 Aug 2024 10:50:14 +0530 Subject: [PATCH 2/3] Delete Buoyancy calculator directory --- Buoyancy calculator/README.md | 26 ------------- Buoyancy calculator/index.html | 29 --------------- Buoyancy calculator/manifest.json | 22 ----------- Buoyancy calculator/script.js | 14 ------- Buoyancy calculator/style.css | 62 ------------------------------- 5 files changed, 153 deletions(-) delete mode 100644 Buoyancy calculator/README.md delete mode 100644 Buoyancy calculator/index.html delete mode 100644 Buoyancy calculator/manifest.json delete mode 100644 Buoyancy calculator/script.js delete mode 100644 Buoyancy calculator/style.css diff --git a/Buoyancy calculator/README.md b/Buoyancy calculator/README.md deleted file mode 100644 index 5707181b..00000000 --- a/Buoyancy calculator/README.md +++ /dev/null @@ -1,26 +0,0 @@ -# Buoyancy Calculator - -## Description -The Buoyancy Calculator is a simple web-based tool that computes the buoyant force exerted on an object submerged in a fluid. The calculation is based on Archimedes' principle, which states that the buoyant force is equal to the weight of the fluid displaced by the object. - -## Features -- Calculates buoyant force using user-provided values for fluid density, object volume, and gravity. -- Displays the result directly on the web page. -- Simple and user-friendly interface. - -## How to Use -1. Enter the density of the fluid in kilograms per cubic meter (kg/m³). -2. Enter the volume of the object in cubic meters (m³). -3. Enter the acceleration due to gravity in meters per second squared (m/s²), or use the default value of 9.81 m/s². -4. Click the "Calculate Buoyant Force" button to see the result. - -## Files -- `index.html`: The HTML file that sets up the structure of the calculator. -- `script.js`: The JavaScript file that contains the logic for calculating the buoyant force. -- `style.css`: The CSS file for styling the calculator. - -## Installation -To run the Buoyancy Calculator locally: -1. Clone the repository: - ```bash - git clone diff --git a/Buoyancy calculator/index.html b/Buoyancy calculator/index.html deleted file mode 100644 index 5dfaf331..00000000 --- a/Buoyancy calculator/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - Buoyancy Calculator - - - -
-

Buoyancy Calculator

-
- - - - - - - - - - - -
-
-
- - - diff --git a/Buoyancy calculator/manifest.json b/Buoyancy calculator/manifest.json deleted file mode 100644 index 438db234..00000000 --- a/Buoyancy calculator/manifest.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "Buoyancy Calculator", - "short_name": "BuoyancyCalc", - "description": "A simple web application to calculate the buoyant force on an object submerged in a fluid.", - "start_url": "/index.html", - "display": "standalone", - "background_color": "#ffffff", - "theme_color": "#4CAF50", - "icons": [ - { - "src": "/images/icons/icon-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/images/icons/icon-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ] - } - \ No newline at end of file diff --git a/Buoyancy calculator/script.js b/Buoyancy calculator/script.js deleted file mode 100644 index 0c43e311..00000000 --- a/Buoyancy calculator/script.js +++ /dev/null @@ -1,14 +0,0 @@ -function calculateBuoyantForce() { - const density = parseFloat(document.getElementById('density').value); - const volume = parseFloat(document.getElementById('volume').value); - const gravity = parseFloat(document.getElementById('gravity').value) || 9.81; - - if (isNaN(density) || isNaN(volume) || isNaN(gravity)) { - document.getElementById('result').innerText = "Please enter valid numbers for all fields."; - return; - } - - const buoyantForce = density * volume * gravity; - - document.getElementById('result').innerText = `Buoyant Force: ${buoyantForce.toFixed(2)} N`; -} diff --git a/Buoyancy calculator/style.css b/Buoyancy calculator/style.css deleted file mode 100644 index 3932b8a3..00000000 --- a/Buoyancy calculator/style.css +++ /dev/null @@ -1,62 +0,0 @@ -body { - font-family: Arial, sans-serif; - background: linear-gradient(135deg, #263daf, #15e334); /* Add gradient background */ - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; -} - -.container { - background-color: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - max-width: 400px; - width: 100%; -} - -h1 { - text-align: center; - margin-bottom: 20px; -} - -.calculator { - display: flex; - flex-direction: column; -} - -label { - margin-bottom: 8px; - font-weight: bold; -} - -input { - margin-bottom: 16px; - padding: 10px; - border: 1px solid #ddd; - border-radius: 4px; - font-size: 16px; -} - -button { - padding: 10px; - border: none; - background-color: #007bff; - color: #fff; - font-size: 16px; - cursor: pointer; - border-radius: 4px; -} - -button:hover { - background-color: #0056b3; -} - -#result { - margin-top: 20px; - font-size: 18px; - font-weight: bold; - text-align: center; -} From 2fe597e9d81c68c2a4e3ac181282e771046e82b2 Mon Sep 17 00:00:00 2001 From: Sree Vidya Date: Fri, 9 Aug 2024 10:50:37 +0530 Subject: [PATCH 3/3] Add files via upload --- Buoyancy Calculator/README.md | 26 +++++++++++++ Buoyancy Calculator/index.html | 29 +++++++++++++++ Buoyancy Calculator/manifest.json | 22 +++++++++++ Buoyancy Calculator/script.js | 14 +++++++ Buoyancy Calculator/style.css | 62 +++++++++++++++++++++++++++++++ 5 files changed, 153 insertions(+) create mode 100644 Buoyancy Calculator/README.md create mode 100644 Buoyancy Calculator/index.html create mode 100644 Buoyancy Calculator/manifest.json create mode 100644 Buoyancy Calculator/script.js create mode 100644 Buoyancy Calculator/style.css diff --git a/Buoyancy Calculator/README.md b/Buoyancy Calculator/README.md new file mode 100644 index 00000000..5707181b --- /dev/null +++ b/Buoyancy Calculator/README.md @@ -0,0 +1,26 @@ +# Buoyancy Calculator + +## Description +The Buoyancy Calculator is a simple web-based tool that computes the buoyant force exerted on an object submerged in a fluid. The calculation is based on Archimedes' principle, which states that the buoyant force is equal to the weight of the fluid displaced by the object. + +## Features +- Calculates buoyant force using user-provided values for fluid density, object volume, and gravity. +- Displays the result directly on the web page. +- Simple and user-friendly interface. + +## How to Use +1. Enter the density of the fluid in kilograms per cubic meter (kg/m³). +2. Enter the volume of the object in cubic meters (m³). +3. Enter the acceleration due to gravity in meters per second squared (m/s²), or use the default value of 9.81 m/s². +4. Click the "Calculate Buoyant Force" button to see the result. + +## Files +- `index.html`: The HTML file that sets up the structure of the calculator. +- `script.js`: The JavaScript file that contains the logic for calculating the buoyant force. +- `style.css`: The CSS file for styling the calculator. + +## Installation +To run the Buoyancy Calculator locally: +1. Clone the repository: + ```bash + git clone diff --git a/Buoyancy Calculator/index.html b/Buoyancy Calculator/index.html new file mode 100644 index 00000000..5dfaf331 --- /dev/null +++ b/Buoyancy Calculator/index.html @@ -0,0 +1,29 @@ + + + + + + Buoyancy Calculator + + + +
+

Buoyancy Calculator

+
+ + + + + + + + + + + +
+
+
+ + + diff --git a/Buoyancy Calculator/manifest.json b/Buoyancy Calculator/manifest.json new file mode 100644 index 00000000..438db234 --- /dev/null +++ b/Buoyancy Calculator/manifest.json @@ -0,0 +1,22 @@ +{ + "name": "Buoyancy Calculator", + "short_name": "BuoyancyCalc", + "description": "A simple web application to calculate the buoyant force on an object submerged in a fluid.", + "start_url": "/index.html", + "display": "standalone", + "background_color": "#ffffff", + "theme_color": "#4CAF50", + "icons": [ + { + "src": "/images/icons/icon-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/images/icons/icon-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ] + } + \ No newline at end of file diff --git a/Buoyancy Calculator/script.js b/Buoyancy Calculator/script.js new file mode 100644 index 00000000..0c43e311 --- /dev/null +++ b/Buoyancy Calculator/script.js @@ -0,0 +1,14 @@ +function calculateBuoyantForce() { + const density = parseFloat(document.getElementById('density').value); + const volume = parseFloat(document.getElementById('volume').value); + const gravity = parseFloat(document.getElementById('gravity').value) || 9.81; + + if (isNaN(density) || isNaN(volume) || isNaN(gravity)) { + document.getElementById('result').innerText = "Please enter valid numbers for all fields."; + return; + } + + const buoyantForce = density * volume * gravity; + + document.getElementById('result').innerText = `Buoyant Force: ${buoyantForce.toFixed(2)} N`; +} diff --git a/Buoyancy Calculator/style.css b/Buoyancy Calculator/style.css new file mode 100644 index 00000000..3932b8a3 --- /dev/null +++ b/Buoyancy Calculator/style.css @@ -0,0 +1,62 @@ +body { + font-family: Arial, sans-serif; + background: linear-gradient(135deg, #263daf, #15e334); /* Add gradient background */ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + max-width: 400px; + width: 100%; +} + +h1 { + text-align: center; + margin-bottom: 20px; +} + +.calculator { + display: flex; + flex-direction: column; +} + +label { + margin-bottom: 8px; + font-weight: bold; +} + +input { + margin-bottom: 16px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; +} + +button { + padding: 10px; + border: none; + background-color: #007bff; + color: #fff; + font-size: 16px; + cursor: pointer; + border-radius: 4px; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 20px; + font-size: 18px; + font-weight: bold; + text-align: center; +}