Create updated ui&ux interface

.github/PR_Template.md

@@ -0,0 +1,23 @@
+<!-- Pull Request Template -->
+
+## Related Issue*
+
+Closes #issue_number
+
+<!-- If there is no issue number, the PR will not be merged. Therefore, please ensure that the issue number is added -->
+
+## Description
+
+<!-- Write a brief description of the changes made in the PR. Explain the problem being addressed, or any relevant
+information. -->
+
+## Screenshot Section (MUST)
+
+<!-- Include the screenshot to preview the changes done and their proper functionality -->
+
+
+
+## Task
+
+- [ ]      <a href="https://github.com/opentekhub" target="_blank">Follow us on GitHub</a>
+- [ ]      <a href="https://github.com/opentekhub" target="_blank">Star the repo on GitHub</a>

.github/workflows/greet-issues.yml

@@ -0,0 +1,47 @@
+name: Greet Issues
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  greet:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3  # This should automatically be on Node 20
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3  # This should also be compatible with Node 20
+        with:
+          node-version: '20'
+
+      - name: Handle Issue Greetings
+        uses: actions/github-script@v6  # Update to a compatible version
+        with:
+          script: |
+            const issue = context.payload.issue;
+            if (!issue) {
+              console.error("No issue context available.");
+              return;
+            }
+
+            const user = issue.user.login;
+            const message = `👋 Hello @${user}! Thank you for opening this issue titled "**${issue.title}**"! We're excited to see your contribution and a maintainer will get back to you shortly 😊! \n\nPlease ensure the following:\n1. Be respectful. \n2. Follow the contribution guidelines.\n\nHappy coding! 🚀`;
+
+            await github.rest.issues.createComment({
+              ...context.repo,
+              issue_number: issue.number,
+              body: message
+            });
+
+            // Request more information if the issue body is empty
+            const issueBody = issue.body || '';
+            if (issueBody.trim().length === 0) {
+              const requestInfoMessage = `🧐 We would appreciate it if you could provide us with more info about this issue, @${user}! 🤔`;
+              await github.rest.issues.createComment({
+                ...context.repo,
+                issue_number: issue.number,
+                body: requestInfoMessage
+              });
+            }

.github/workflows/greet-pr.yml

@@ -0,0 +1,16 @@
+name: Greetings
+
+on: [pull_request_target, issues]
+
+jobs:
+  greeting:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+    - uses: actions/first-interaction@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        issue-message: "Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible."
+        pr-message: "Welcome to Our repository.🎊 Thank you so much for taking the time to point this out."

CONTRIBUTING.md

@@ -0,0 +1,63 @@
+<h1 align="center">Contributors Guide for blockchain⚡</h1>
+<h3 align="center">Welcome to blockchain! Make sure to star this repository😍<br>We appreciate your interest in contributing.😊 <br>This guide will help you get started with the project and make your first contribution.</h3>
+
+---
+
+
+## Creating Your First Pull Request 🌟
+## 1. Star this repository: Show some love by starring the repository!
+## 2. Fork this repository: Click the 'Fork' button at the top right of this page to create a copy of this repository in your account.
+## 3. Clone the forked repository:
+
+```bash
+git clone https://github.com/<your-github-username>/blockchain.git
+```
+
+## 4. Navigate to the project directory
+
+```bash
+cd blockchain
+```
+
+## 6. Create a new branch (use descriptive branch names
+   feature/<feature_name> or fix/<issue_name>):
+```bash
+git checkout -b feature/<your_branch_name>
+```
+
+## 7. Stage your changes and commit (use descriptive commit messages like
+   feat: added new feature or fix: corrected issue):
+```bash
+git add .
+git commit -m "feat: added new feature"
+```
+
+## 8. Push your local commits to the remote repository:
+```bash
+## git push -u origin feature/<your_branch_name>
+```
+
+## 9. Create a Pull Request (PR):
+    Provide a detailed description of the changes you've made.
+    If it's a UI change, consider adding screenshots for better understanding.
+## 10. Congratulations! 🎉 You've made your contribution.
+
+## Pull Request Review Criteria 🧲
+
+1. Please fill out the PR template properly when creating a pull request.
+2. Assign yourself to the issue you’re working on to help us track progress.
+3. Never commit to the main branch.
+4. Your work must be original and adhere to the project's coding standards.
+5. Comment your code where necessary for clarity.
+6. Always ensure all tests pass before pushing your changes.
+
+
+## Communication and Support 💬
+1. Join the project's communication channels to interact with other contributors and seek assistance.
+2. If you have any questions or need help, don't hesitate to ask in the project's communication channels or comment on the relevant issue.
+
+## Code of Conduct 😇
+Please follow our project's code of conduct while contributing. Treat all contributors and users with respect, and create a positive and inclusive environment for everyone.
+
+## License 📄
+The project is licensed under MIT. Make sure to review and comply with the license terms.

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/<your-username>/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 ⭐️

README.md

@@ -15,17 +15,57 @@ 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 <your-username> with your GitHub username):
+    - ```terminal
+        git clone git clone https://github.com/<your-username>/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.
+
+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
 
 - **Explore**: Take a look at our [live website](https://opentekhub.github.io/blockchain/) to get a feel for the project.
 - **Check out the issues**: We frequently update the [Issues](https://github.com/OpenTekHub/blockchain/issues) section with bugs, features, and other contributions we need help with.
 - **Contact us**: If you need assistance or have any questions, feel free to reach out by opening a new issue or emailing the maintainers.
+- 
+
+## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" width="35" height="35"> Contributors
+
+Big thanks to all the contributors! 🎉
 
+<a href="https://github.com/OpenTekHub/blockchain/pulse"> <img align="center" src="https://contrib.rocks/image?max=100&repo=OpenTekHub/blockchain" /> </a>