From 680735b676e6f0e124a20237025ee81c36b5d667 Mon Sep 17 00:00:00 2001 From: Mugundh Date: Tue, 1 Oct 2024 21:19:31 +0530 Subject: [PATCH 1/4] Improved contribution guidelines --- README.md | 46 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d16b899..fc95c15 100644 --- a/README.md +++ b/README.md @@ -15,12 +15,46 @@ This repository focuses on building and implementing cryptocurrency features lik - **Cryptocurrency Price Prediction:** A feature that predicts the prices of the latest cryptocurrencies. ### Contribution guidelines -- Switch to the gh-pages branch all the changes need to be done in the gh-pages branch -- Fork the repo of gh-pages branch -- And then clone the forked repo into ur system using the git clone command -- And then make the changes and then commit back the changes to your forked repo -- And then make a pull request addressing the issue -- We will make the commit based upon our requirments and the quality of your code or changes +1. **Switch to the gh-pages branch**: Click on the current branch name at the top of the window to open the Branch dropdown menu. Locate and click on the gh-pages branch to switch to it. + +2. **Fork the Repository**: + Click on the "Fork" button at the top right of the repository page to create your own copy of the project. + +3. **Clone the Forked Repository**: + - Clone your forked repository to your local machine using the following command (replace with your GitHub username): + - ```terminal + git clone git clone https://github.com//blockchain.git + ``` + +4. **Make changes:** + - Navigate to the project directory + - ```terminal + cd blockchain + ``` + - Make your desired changes, whether it’s fixing bugs, adding features, or improving documentation. + +5. **Commit Your Changes:** + - After making your changes, add and commit them to your local repository: + - ```terminal + git add . + git commit -m "Brief description of your changes" + ``` + +6. **Push Changes to Your Fork:** + - Push your changes back to your forked repository on GitHub: + - ```terminal + git push origin gh-pages + ``` + +7. **Create a Pull Request:** +Go to the original repository (OpenTekHub/blockchain) on GitHub and you’ll see a notification to create a pull request. Click on "Compare & pull request" to submit your changes for review. + +8. **Address Feedback:** +Be prepared to address any feedback from the maintainers regarding your pull request. We value quality contributions and may ask for revisions. + + + + ## Getting Started From 3f17c5f0b51f5c3113c16ff5375afedc3b23a88c Mon Sep 17 00:00:00 2001 From: Mugundh Date: Tue, 1 Oct 2024 23:10:10 +0530 Subject: [PATCH 2/4] Update Contribution Guidelines --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index fc95c15..a12d961 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ This repository focuses on building and implementing cryptocurrency features lik - **Cryptocurrency Price Prediction:** A feature that predicts the prices of the latest cryptocurrencies. ### Contribution guidelines + 1. **Switch to the gh-pages branch**: Click on the current branch name at the top of the window to open the Branch dropdown menu. Locate and click on the gh-pages branch to switch to it. 2. **Fork the Repository**: @@ -52,9 +53,8 @@ Go to the original repository (OpenTekHub/blockchain) on GitHub and you’ll see 8. **Address Feedback:** Be prepared to address any feedback from the maintainers regarding your pull request. We value quality contributions and may ask for revisions. - - - +9. **Star the Repository and Follow the Organization:** +Don’t forget to star ⭐ the repository and follow the [OpenTekHub](https://github.com/OpenTekHub) organization to stay updated with our projects and contributions! ## Getting Started From 07f28d16e68793591cc7ae81fcfec781a783757f Mon Sep 17 00:00:00 2001 From: Mugundh Date: Wed, 2 Oct 2024 00:02:37 +0530 Subject: [PATCH 3/4] Added LEARN.md --- LEARN.md | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 LEARN.md diff --git a/LEARN.md b/LEARN.md new file mode 100644 index 0000000..539c335 --- /dev/null +++ b/LEARN.md @@ -0,0 +1,91 @@ +# Welcome to OpenTekHub Blockchain Repository 🚀 + +This repository allows you to explore cryptocurrency price predictions using JavaScript and an API integration (CoinGecko). The project is designed to help you understand how to fetch and display real-time data, specifically cryptocurrency prices, by integrating external APIs into a web application. + +## 🌟 What You Will Learn: +- HTML Structure: Basic layout of a web application. +- JavaScript API Integration: How to fetch data from external APIs (CoinGecko). +- CSS Styling: Applying modern styles with a clean design using Flexbox and responsive layouts. +- Interactive UI: Implementing input-based suggestions and dynamic content updates. +- Predict Cryptocurrency Prices: Learn how to predict and display live cryptocurrency prices based on user input. + +## 🛠️ Prerequisites: +Basic understanding of HTML, CSS, and JavaScript. +A web browser (e.g., Chrome, Firefox). +Text editor (e.g., VS Code, Sublime). + +### Step 1: Clone the Repository +First, you need to clone the repository to your local machine. In your terminal, type the following command: +```terminal + git clone https://github.com//blockchain.git +``` + +### Step 2: Understand the Project Structure +Once cloned, explore the folder structure: + +- index.html: The main HTML page for your web application. +- styles.css: Contains all the styling for your application. +- script.js: Includes the JavaScript logic to fetch cryptocurrency prices and handle user input. + + +### Step 3: Setting Up the HTML +In the index.html file, the structure of the webpage is defined. This includes: + +- A header for the project title. +- A crypto price prediction section with input and a button to fetch prices. +- Repository Information with a link to the GitHub repository. + +You don’t need to change anything here unless you want to add more features. + +### Step 4: Style Your Webpage (CSS) +The styles in styles.css make your web app look modern and responsive. + +Key points: + +- The gradient background and clean typography provide a sleek look. +- Responsive design using media queries ensures the app works on all devices, from mobile to desktop. + +If you want to experiment with the styles, open styles.css and modify. + +### Step 5: JavaScript Logic (API Integration) +Now, the core part! The script.js file contains JavaScript code that fetches cryptocurrency prices using the CoinGecko API and displays them dynamically on the webpage. + +- Crypto Suggestions: As the user types a symbol, suggestions are shown. +- API Fetching: After clicking "Predict Price", it fetches the price from the CoinGecko API. + +Here's the key JavaScript code for fetching the price: + +```terminal + fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${crypto}&vs_currencies=usd`) + .then(response => response.json()) + .then(data => { + document.getElementById("price").innerText = "$" + data[crypto].usd; + }) + .catch(error => { + console.error("Error:", error); + }); +``` +### Step 6: Testing the Application +To see the application in action: + +- Open index.html in your browser (double-click the file). +- Type a cryptocurrency symbol (e.g., BTC for Bitcoin, ETH for Ethereum). +- Click "Predict Price" to see the current price. + +### Step 7: Expanding the Project +Here are some ideas to expand the project: + +- Add more cryptocurrencies to the cryptoMap object in script.js. +- Enhance the UI with more visuals, such as cryptocurrency logos or charts. +- Improve Error Handling by providing better feedback if the API fails or the symbol isn't valid. + + +### 🎓 Additional Resources: +- [CoinGecko API Docs](https://docs.coingecko.com/reference/introduction) - Learn more about the cryptocurrency data API. +- [JavaScript Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) - Documentation for making HTTP requests in JavaScript. + +Feel free to ask questions and contribute to the project! 👩‍💻 Happy Learning! ✨ + +## 🙏 Support + +This project needs a ⭐️ from you. Don't forget to leave a star ⭐️ From 7bcfc87a4551b290a096fd8ebd6cdb982867ac15 Mon Sep 17 00:00:00 2001 From: Mugundh Date: Wed, 2 Oct 2024 00:06:59 +0530 Subject: [PATCH 4/4] Revert "Added LEARN.md" This reverts commit 07f28d16e68793591cc7ae81fcfec781a783757f. --- LEARN.md | 91 -------------------------------------------------------- 1 file changed, 91 deletions(-) delete mode 100644 LEARN.md diff --git a/LEARN.md b/LEARN.md deleted file mode 100644 index 539c335..0000000 --- a/LEARN.md +++ /dev/null @@ -1,91 +0,0 @@ -# Welcome to OpenTekHub Blockchain Repository 🚀 - -This repository allows you to explore cryptocurrency price predictions using JavaScript and an API integration (CoinGecko). The project is designed to help you understand how to fetch and display real-time data, specifically cryptocurrency prices, by integrating external APIs into a web application. - -## 🌟 What You Will Learn: -- HTML Structure: Basic layout of a web application. -- JavaScript API Integration: How to fetch data from external APIs (CoinGecko). -- CSS Styling: Applying modern styles with a clean design using Flexbox and responsive layouts. -- Interactive UI: Implementing input-based suggestions and dynamic content updates. -- Predict Cryptocurrency Prices: Learn how to predict and display live cryptocurrency prices based on user input. - -## 🛠️ Prerequisites: -Basic understanding of HTML, CSS, and JavaScript. -A web browser (e.g., Chrome, Firefox). -Text editor (e.g., VS Code, Sublime). - -### Step 1: Clone the Repository -First, you need to clone the repository to your local machine. In your terminal, type the following command: -```terminal - git clone https://github.com//blockchain.git -``` - -### Step 2: Understand the Project Structure -Once cloned, explore the folder structure: - -- index.html: The main HTML page for your web application. -- styles.css: Contains all the styling for your application. -- script.js: Includes the JavaScript logic to fetch cryptocurrency prices and handle user input. - - -### Step 3: Setting Up the HTML -In the index.html file, the structure of the webpage is defined. This includes: - -- A header for the project title. -- A crypto price prediction section with input and a button to fetch prices. -- Repository Information with a link to the GitHub repository. - -You don’t need to change anything here unless you want to add more features. - -### Step 4: Style Your Webpage (CSS) -The styles in styles.css make your web app look modern and responsive. - -Key points: - -- The gradient background and clean typography provide a sleek look. -- Responsive design using media queries ensures the app works on all devices, from mobile to desktop. - -If you want to experiment with the styles, open styles.css and modify. - -### Step 5: JavaScript Logic (API Integration) -Now, the core part! The script.js file contains JavaScript code that fetches cryptocurrency prices using the CoinGecko API and displays them dynamically on the webpage. - -- Crypto Suggestions: As the user types a symbol, suggestions are shown. -- API Fetching: After clicking "Predict Price", it fetches the price from the CoinGecko API. - -Here's the key JavaScript code for fetching the price: - -```terminal - fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${crypto}&vs_currencies=usd`) - .then(response => response.json()) - .then(data => { - document.getElementById("price").innerText = "$" + data[crypto].usd; - }) - .catch(error => { - console.error("Error:", error); - }); -``` -### Step 6: Testing the Application -To see the application in action: - -- Open index.html in your browser (double-click the file). -- Type a cryptocurrency symbol (e.g., BTC for Bitcoin, ETH for Ethereum). -- Click "Predict Price" to see the current price. - -### Step 7: Expanding the Project -Here are some ideas to expand the project: - -- Add more cryptocurrencies to the cryptoMap object in script.js. -- Enhance the UI with more visuals, such as cryptocurrency logos or charts. -- Improve Error Handling by providing better feedback if the API fails or the symbol isn't valid. - - -### 🎓 Additional Resources: -- [CoinGecko API Docs](https://docs.coingecko.com/reference/introduction) - Learn more about the cryptocurrency data API. -- [JavaScript Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) - Documentation for making HTTP requests in JavaScript. - -Feel free to ask questions and contribute to the project! 👩‍💻 Happy Learning! ✨ - -## 🙏 Support - -This project needs a ⭐️ from you. Don't forget to leave a star ⭐️