dishamodi0910 · AmruthaPariprolu · Aug 9, 2024
diff --git a/New_APIs/Metric_Conversion_API/README.md b/New_APIs/Metric_Conversion_API/README.md
@@ -0,0 +1,34 @@
+# 📏 Metric Conversion API
+
+## Overview
+
+The **Metric Conversion API** allows developers to convert values between different metric units such as meters, kilograms, liters, and Celsius. This API is useful for applications that need to perform metric conversions programmatically.
+
+## Features
+
+- **Length Conversion**: Convert between metric units like meters, centimeters, and kilometers.
+- **Weight Conversion**: Convert between metric units like grams, kilograms, and milligrams.
+- **Volume Conversion**: Convert between metric units like liters and milliliters.
+- **Temperature Conversion**: Convert temperatures between Celsius and Kelvin.
+
+## Getting Started
+
+### Prerequisites
+
+- **API Key**: Obtain an API key by signing up on the Metric Conversion API website.
+
+### Installation
+
+To use the Metric Conversion API in a web application, follow these steps:
+
+1. **Obtain Your API Key**: After signing up, you will receive an API key.
+
+2. **Make API Requests**: Use the API key to authenticate your requests to the Metric Conversion API endpoint.
+
+3. **Sample Request**:
+ ```bash
+ curl -X GET "https://api.metricconversion.com/v1/convert?from=meters&to=feet&amount=10" \
+ -H "Authorization: Bearer YOUR_API_KEY"
+
+### Contributor
+### Amrutha Pariprolu
diff --git a/New_APIs/Metric_Conversion_API/index.html b/New_APIs/Metric_Conversion_API/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">
+ <title>Metric Conversion API App</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <header>
+ <h1>Metric Conversion API App</h1>
+ </header>
+ <main>
+ <form id="conversion-form">
+ <input type="number" id="amount" placeholder="Amount" required>
+ <select id="from-unit">
+ <option value="meters">Meters</option>
+ <option value="centimeters">Centimeters</option>
+ <option value="kilometers">Kilometers</option>
+ <option value="grams">Grams</option>
+ <option value="kilograms">Kilograms</option>
+ <option value="liters">Liters</option>
+ <option value="milliliters">Milliliters</option>
+ <option value="celsius">Celsius</option>
+ <option value="kelvin">Kelvin</option>
+ </select>
+ <select id="to-unit">
+ <option value="centimeters">Centimeters</option>
+ <option value="meters">Meters</option>
+ <option value="kilometers">Kilometers</option>
+ <option value="kilograms">Kilograms</option>
+ <option value="grams">Grams</option>
+ <option value="milliliters">Milliliters</option>
+ <option value="liters">Liters</option>
+ <option value="kelvin">Kelvin</option>
+ <option value="celsius">Celsius</option>
+ </select>
+ <button type="submit">Convert</button>
+ </form>
+ <div id="result"></div>
+ </main>
+ <script src="index.js"></script>
+</body>
+</html>
diff --git a/New_APIs/Metric_Conversion_API/index.js b/New_APIs/Metric_Conversion_API/index.js
@@ -0,0 +1,35 @@
+const apiKey = 'YOUR_API_KEY'; // Replace with your Metric Conversion API key
+const endpoint = 'https://api.metricconversion.com/v1/convert';
+
+document.getElementById('conversion-form').addEventListener('submit', function(event) {
+ event.preventDefault();
+ const amount = document.getElementById('amount').value;
+ const fromUnit = document.getElementById('from-unit').value;
+ const toUnit = document.getElementById('to-unit').value;
+
+ if (amount && fromUnit && toUnit) {
+ fetch(`${endpoint}?from=${fromUnit}&to=${toUnit}&amount=${amount}`, {
+ method: 'GET',
+ headers: {
+ 'Authorization': `Bearer ${apiKey}`
+ }
+ })
+ .then(response => response.json())
+ .then(data => {
+ const resultContainer = document.getElementById('result');
+ if (data.result) {
+ resultContainer.innerHTML = `
+ <h3>Conversion Result:</h3>
+ <p>${amount} ${fromUnit} is equal to ${data.result} ${toUnit}</p>
+ `;
+ } else {
+ resultContainer.innerHTML = '<p>Conversion failed. Please check your input and try again.</p>';
+ }
+ })
+ .catch(error => {
+ console.error('Error fetching conversion results:', error);
+ const resultContainer = document.getElementById('result');
+ resultContainer.innerHTML = '<p>An error occurred while fetching conversion results.</p>';
+ });
+ }
+});
diff --git a/New_APIs/Metric_Conversion_API/manifest.json b/New_APIs/Metric_Conversion_API/manifest.json
@@ -0,0 +1,20 @@
+{
+ "name": "Metric Conversion API App",
+ "short_name": "Metric Converter",
+ "start_url": "/",
+ "display": "standalone",
+ "background_color": "#ffffff",
+ "theme_color": "#000000",
+ "icons": [
+ {
+ "src": "icons/icon-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "icons/icon-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ]
+}
diff --git a/New_APIs/Metric_Conversion_API/package-lock.json b/New_APIs/Metric_Conversion_API/package-lock.json
diff --git a/New_APIs/Metric_Conversion_API/package.json b/New_APIs/Metric_Conversion_API/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "metric-conversion-api-app",
+ "version": "1.0.0",
+ "description": "A simple web app that integrates with Metric Conversion API for unit conversion functionality.",
+ "main": "index.js",
+ "scripts": {
+ "start": "echo 'No start script defined'"
+ },
+ "keywords": [
+ "metric",
+ "conversion",
+ "api",
+ "web"
+ ],
+ "author": "Amrutha",
+ "license": "MIT"
+}
diff --git a/New_APIs/Metric_Conversion_API/styles.css b/New_APIs/Metric_Conversion_API/styles.css
@@ -0,0 +1,50 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f5f5f5;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+header {
+ background-color: #000;
+ color: #fff;
+ width: 100%;
+ text-align: center;
+ padding: 10px;
+}
+
+main {
+ margin-top: 20px;
+ width: 80%;
+ max-width: 800px;
+}
+
+#conversion-form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+input, select, button {
+ margin: 10px;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+button {
+ background-color: #007bff;
+ color: #fff;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #0056b3;
+}
+
+#result {
+ margin-top: 20px;
+}