diff --git a/New_APIs/TimeZoneDB API/README.md b/New_APIs/TimeZoneDB API/README.md new file mode 100644 index 0000000..2b86b68 --- /dev/null +++ b/New_APIs/TimeZoneDB API/README.md @@ -0,0 +1,41 @@ +# TimeZoneDB API Demo + +This is a simple web application that interacts with the TimeZoneDB API to provide time zone information and conversion features. The application allows users to: + +1. **Get the current time zone** for a specific location. +2. **Convert time** between two different time zones. + +## Features + +- **Location-based Time Zone Retrieval**: Enter a location to retrieve the current time zone information. +- **Time Zone Conversion**: Convert time from one time zone to another. + +## Technologies Used + +- **HTML/CSS/JavaScript**: The frontend is built using standard web technologies. +- **Node.js & Express**: A simple Node.js server is used to serve the static files. +- **TimeZoneDB API**: The backend service that provides time zone data. + +## Installation + +### Prerequisites + +- **Node.js** (v12+ recommended) +- **npm** (Node Package Manager) + +### Steps + +1. **Clone the Repository**: + +``` + git clone https://github.com/your-username/timezonedb-api-demo.git + cd timezonedb-api-demo +``` + +2. **Install Dependecies** +``` +npm install +``` + +## Contributor +### Sree Vidya diff --git a/New_APIs/TimeZoneDB API/index.html b/New_APIs/TimeZoneDB API/index.html new file mode 100644 index 0000000..826e8c5 --- /dev/null +++ b/New_APIs/TimeZoneDB API/index.html @@ -0,0 +1,31 @@ + + + + + + + TimeZoneDB API Demo + + +
+

TimeZoneDB API

+
+
+
+

Get Current Time Zone

+ + +

Convert Time Zone

+ + + + +
+
+

Results

+

+        
+
+ + + diff --git a/New_APIs/TimeZoneDB API/index.js b/New_APIs/TimeZoneDB API/index.js new file mode 100644 index 0000000..eb3d4f2 --- /dev/null +++ b/New_APIs/TimeZoneDB API/index.js @@ -0,0 +1,47 @@ +document.getElementById('getTimeZoneButton').addEventListener('click', getTimeZone); +document.getElementById('convertTimeButton').addEventListener('click', convertTime); + +const apiKey = 'YOUR_API_KEY'; // Replace with your TimeZoneDB API key +const apiUrl = 'http://api.timezonedb.com/v2.1/'; + +async function getTimeZone() { + const location = document.getElementById('locationInput').value; + if (!location) { + alert('Please enter a location.'); + return; + } + + try { + const response = await fetch(`${apiUrl}get-time-zone?key=${apiKey}&format=json&by=zone&zone=${location}`); + const data = await response.json(); + displayResults(data); + } catch (error) { + console.error('Error:', error); + alert('Failed to fetch time zone data.'); + } +} + +async function convertTime() { + const fromTimeZone = document.getElementById('fromTimeZone').value; + const toTimeZone = document.getElementById('toTimeZone').value; + const timeToConvert = document.getElementById('timeToConvert').value; + + if (!fromTimeZone || !toTimeZone || !timeToConvert) { + alert('Please fill in all fields.'); + return; + } + + try { + const response = await fetch(`${apiUrl}convert-time-zone?key=${apiKey}&format=json&from=${fromTimeZone}&to=${toTimeZone}&time=${timeToConvert}`); + const data = await response.json(); + displayResults(data); + } catch (error) { + console.error('Error:', error); + alert('Failed to convert time.'); + } +} + +function displayResults(data) { + const results = document.getElementById('results'); + results.textContent = JSON.stringify(data, null, 2); +} diff --git a/New_APIs/TimeZoneDB API/package-lock.json b/New_APIs/TimeZoneDB API/package-lock.json new file mode 100644 index 0000000..0ebdfdf --- /dev/null +++ b/New_APIs/TimeZoneDB API/package-lock.json @@ -0,0 +1,26 @@ +{ + "name": "timezonedb-api-demo", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "timezonedb-api-demo", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "express": "^4.17.1", + "timezonedb-api-demo": "file:" + } + }, + "node_modules/express": { + "version": "4.17.1", + "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz", + "integrity": "sha512-G7fYv8zS0D7ftu3gnLsOniwhgLU4k9v+1NEtFPP07/Oa8XJ51FtdUKLqIvsTcZo5ua23NO4s9Hr77BM19DOf1g==" + }, + "node_modules/timezonedb-api-demo": { + "resolved": "", + "link": true + } + } +} diff --git a/New_APIs/TimeZoneDB API/package.json b/New_APIs/TimeZoneDB API/package.json new file mode 100644 index 0000000..1935175 --- /dev/null +++ b/New_APIs/TimeZoneDB API/package.json @@ -0,0 +1,15 @@ +{ + "name": "timezonedb-api-demo", + "version": "1.0.0", + "description": "A simple app to demonstrate the TimeZoneDB API", + "main": "server.js", + "scripts": { + "start": "node server.js" + }, + "author": "Your Name", + "license": "ISC", + "dependencies": { + "express": "^4.17.1", + "timezonedb-api-demo": "file:" + } +} diff --git a/New_APIs/TimeZoneDB API/server.js b/New_APIs/TimeZoneDB API/server.js new file mode 100644 index 0000000..74380f6 --- /dev/null +++ b/New_APIs/TimeZoneDB API/server.js @@ -0,0 +1,8 @@ +const express = require('express'); +const app = express(); + +app.use(express.static('public')); + +app.listen(3000, () => { + console.log('Server is running on port 3000'); +}); diff --git a/New_APIs/TimeZoneDB API/style.css b/New_APIs/TimeZoneDB API/style.css new file mode 100644 index 0000000..61d7851 --- /dev/null +++ b/New_APIs/TimeZoneDB API/style.css @@ -0,0 +1,71 @@ +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #be1d9b, #ff5e62); + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +header { + text-align: center; + margin-bottom: 20px; +} + +header h1 { + font-size: 3em; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +main { + width: 90%; + max-width: 600px; + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 20px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); +} + +.content-section, +.result-section { + margin-bottom: 20px; + text-align: center; +} + +input[type="text"] { + display: block; + margin: 10px auto; + font-size: 1em; + border: none; + border-radius: 5px; + outline: none; + padding: 10px; + width: 80%; + max-width: 400px; +} + +button { + padding: 10px 20px; + font-size: 1em; + background-color: #444; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: #666; +} + +pre#results { + text-align: left; + background: rgba(0, 0, 0, 0.5); + padding: 10px; + border-radius: 5px; + color: #fff; +}