From f073348c14c9570e7ba5e371ffe89abbb9fcdd22 Mon Sep 17 00:00:00 2001 From: pallasivasai Date: Sat, 10 Aug 2024 18:29:33 +0530 Subject: [PATCH] Stock_Market_API is addded --- New_APIs/README.md | 3 +- New_APIs/Stock_Market_API/README.md | 28 +++++++++++++++++ New_APIs/Stock_Market_API/index.html | 19 ++++++++++++ New_APIs/Stock_Market_API/script.js | 23 ++++++++++++++ New_APIs/Stock_Market_API/styles.css | 46 ++++++++++++++++++++++++++++ 5 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 New_APIs/Stock_Market_API/README.md create mode 100644 New_APIs/Stock_Market_API/index.html create mode 100644 New_APIs/Stock_Market_API/script.js create mode 100644 New_APIs/Stock_Market_API/styles.css diff --git a/New_APIs/README.md b/New_APIs/README.md index 198044e..4bdda17 100644 --- a/New_APIs/README.md +++ b/New_APIs/README.md @@ -20,4 +20,5 @@ |[Social Media Analytics API](./Social_Media_Analytics_AP/)|This demonstrates how to create a Social Media Analytics API to retrieve user engagement data like posts, likes, comments, and shares.| |[Voice_Recognition_API](./Voice_Recognition_API/)|This demonstrates how a meachine retrieve user engagement only Voice| |[Cryptocurrency_API](./Cryptocurrency_API/)|This demonstrates how a convert Cryptocurrency and spefic currency to dollars only| -|[Weather_Forecast_API](./Weather_Forecast_API/)|This demonstrates we can know weather report via api and spefic locactions only| \ No newline at end of file +|[Weather_Forecast_API](./Weather_Forecast_API/)|This demonstrates we can know weather report via api and spefic locactions only| +|[Stock_Market_API](./Stock_Market_API/)|This demonstrates we can know Stock Market information report via api| \ No newline at end of file diff --git a/New_APIs/Stock_Market_API/README.md b/New_APIs/Stock_Market_API/README.md new file mode 100644 index 0000000..ade4809 --- /dev/null +++ b/New_APIs/Stock_Market_API/README.md @@ -0,0 +1,28 @@ +# Stock Market API Web App + +This project is a simple web application that fetches stock market data for a given stock symbol using a public API. + +## Features + +- Fetch and display current stock price, symbol, and price change. +- User-friendly interface with input field and button. + +## Technologies Used + +- HTML +- CSS +- JavaScript + +## Setup and Usage + +1. Clone the repository or download the files. +2. Open `index.html` in a web browser. +3. Enter a stock symbol (e.g., `AAPL` for Apple) and click "Get Stock Data" to fetch the stock data. + +## API Key + +To use this project, you'll need to sign up for an API key from a stock market data provider like Alpha Vantage, Finnhub, etc. Replace `'your_api_key'` in `script.js` with your actual API key. + +## License + +This project is open source and available under the MIT License. diff --git a/New_APIs/Stock_Market_API/index.html b/New_APIs/Stock_Market_API/index.html new file mode 100644 index 0000000..59b2e06 --- /dev/null +++ b/New_APIs/Stock_Market_API/index.html @@ -0,0 +1,19 @@ + + + + + + Stock Market API + + + +
+

Stock Market API

+ + +
+
+ + + + diff --git a/New_APIs/Stock_Market_API/script.js b/New_APIs/Stock_Market_API/script.js new file mode 100644 index 0000000..111983f --- /dev/null +++ b/New_APIs/Stock_Market_API/script.js @@ -0,0 +1,23 @@ +document.getElementById('fetch-data').addEventListener('click', () => { + const stockSymbol = document.getElementById('stock-symbol').value.toUpperCase(); + const apiKey = 'your_api_key'; // Replace with your actual API key + const apiUrl = `https://api.example.com/stock/${stockSymbol}?apikey=${apiKey}`; + + fetch(apiUrl) + .then(response => response.json()) + .then(data => { + const stockDataDiv = document.getElementById('stock-data'); + if (data.error) { + stockDataDiv.innerHTML = `

${data.error}

`; + } else { + stockDataDiv.innerHTML = ` +

Symbol: ${data.symbol}

+

Price: $${data.price}

+

Change: ${data.change}%

+ `; + } + }) + .catch(error => { + console.error('Error fetching stock data:', error); + }); +}); diff --git a/New_APIs/Stock_Market_API/styles.css b/New_APIs/Stock_Market_API/styles.css new file mode 100644 index 0000000..e216037 --- /dev/null +++ b/New_APIs/Stock_Market_API/styles.css @@ -0,0 +1,46 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + text-align: center; +} + +h1 { + margin-bottom: 20px; + color: #333; +} + +input { + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + margin-right: 10px; +} + +button { + padding: 10px 15px; + background-color: #28a745; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #218838; +} + +#stock-data { + margin-top: 20px; +}