Project section3to6 js api graphql

README.md

@@ -1,4 +1,22 @@
 # Capstone Project For AI-enhanced Web3 Frontend Development Course
-Welcome to the Capstone Project for the AI-Enhanced Web3 Frontend Development Course at dProgramming University. Follow the instructions below to complete your project submission.
+Welcome to the Capstone Project for the AI-Enhanced Web3 Frontend Development Course at dProgramming University. 
 
-Follow the [course lesson project instructions here](https://dprogramminguniversity.com/freecourses/ai-enhanced-web3-frontend-development-course/freelessons/capstone-project-html-build-dapp-website-html-structure-with-ai/) on how to work with this repo to submit your project for approval and certification
+This project was done and submitted for approval by:
+
+Adelowokan Adeyanju 
+
+## MY EXPERIENCES:
+
+### SECTION 1
+Taking the HTML course section of the 100 days bootcamp was a smooth, fun and engaging ride. The major challenge I faced was with using chapgpt 4.0 as it is not free unlike chatgpt 3.5 which was I eventually made use of.
+
+### SECTION 2
+I learnt about CSS syntax, selectors, specificity, libraries, etc and how to use AI to generate and modify css codes. The major challenge was how to customize and override the default bootstrap css code but that was solved by targeting the class of the html to be styled instead of the element.
+
+### SECTION 3 - 6
+Learning JavaScript was quite an interesting journey and I had to take my time learning it. I learnt how it interacts with html and css. I also learnt how to incorporate API and graphql into my dapp. No major challenge as it were.
+
+SCREENSHOTS OF SERVER, FRONTEND AND WORKSPACE
+- ![GitHub Remote URL](/media/images/apollo%20server%20screenshot.png)
+- ![GitHub Remote URL](/media/images/webpage%20screenshot.png)
+- ![GitHub Remote URL](/media/images/Screenshot%20from%202024-08-27%2015-39-12.png)

globalscript.js

@@ -0,0 +1,91 @@
+// External JavaScript file for the global script
+
+// Declare variables to track the total minted tokens and set a minting limit
+let totalMintedTokens = 0;
+const mintingLimit = 10000; // Set a limit for total tokens that can be minted
+
+document.addEventListener('DOMContentLoaded', function() {
+    const mintButton = document.querySelector('#mint button');
+    const walletInput = document.querySelector('#walletAddress');
+    const tokenInput = document.querySelector('#tokenAmount');
+    const mintStatus = document.querySelector('#mintStatus'); // Access the mint status element
+
+    mintButton.addEventListener('click', function() {
+        let walletAddress = walletInput.value;
+        let tokenAmount = parseInt(tokenInput.value);
+
+        // Start the animation before processing
+        mintStatus.classList.add('animate-status');
+
+        // Validation for wallet address and token amount
+        if(walletAddress !== '' && !isNaN(tokenAmount) && tokenAmount > 0) {
+            // Call asynchronous function to simulate token minting
+            simulateTokenMinting(tokenAmount)
+                .then(minted => {
+                    // Stop the animation and update the status
+                    mintStatus.classList.remove('animate-status');
+                    mintStatus.textContent = `Successfully minted ${minted} tokens to wallet: ${walletAddress}`;
+                })
+                .catch(error => {
+                    // Stop the animation and show the error message
+                    mintStatus.classList.remove('animate-status');
+                    mintStatus.textContent = error;
+                });
+        } else {
+            // Stop the animation if validation fails
+            mintStatus.classList.remove('animate-status');
+            mintStatus.textContent = 'Invalid wallet address or token amount. Please try again.';
+        }
+    });
+});
+
+// Asynchronous function to simulate token minting using a promise
+function simulateTokenMinting(amount) {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            let successfullyMinted = 0;
+            for(let i = 0; i < amount; i++) {
+                if (totalMintedTokens < mintingLimit) {
+                    totalMintedTokens++;
+                    successfullyMinted++;
+                } else {
+                    reject('Minting limit reached. No more tokens can be minted.');
+                    break;
+                }
+            }
+            document.getElementById('totalMinted').textContent = `Total Minted: ${totalMintedTokens}`;
+            resolve(successfullyMinted);
+        }, 2000); // Simulate a network request delay
+    });
+}
+
+
+// Function to fetch and display crypto prices
+async function fetchCryptoPrices() {
+    try {
+        const url = 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana,celestia&vs_currencies=usd';
+        const response = await fetch(url);
+        const data = await response.json();
+
+        // Extract prices
+        const bitcoinPrice = data.bitcoin.usd;
+        const ethereumPrice = data.ethereum.usd;
+        const solanaPrice = data.solana.usd;
+        const celestiaPrice = data.celestia.usd
+
+        // Update the DOM
+        document.getElementById('cryptoPrices').innerHTML = `
+            <h3>Crypto Prices:</h3>
+            <p>Bitcoin Price: $${bitcoinPrice}</p>
+            <p>Ethereum Price: $${ethereumPrice}</p>
+            <p>Solana Price: $${solanaPrice}</p>
+            <p>Celestia Price: $${celestiaPrice}</p>
+        `; 
+        document.getElementById("cryptoPrices").style.color = "blue"
+    } catch (error) {
+        console.error('Error fetching crypto prices:', error);
+    }
+}
+
+// Call the function to fetch and display crypto prices
+fetchCryptoPrices();

globalstyles.css

@@ -0,0 +1,189 @@
+/* General Styles */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f5f5f5;
+}
+
+.container {
+  max-width: 1200px;
+  margin: auto;
+  padding: 0 15px;
+}
+
+/* Header Styles */
+header {
+  background-color: #007bff;
+  color: white;
+  padding: 20px 0;
+  text-align: center;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 3rem;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  margin: 10px 0 0;
+}
+
+nav ul li {
+  margin: 0 15px;
+}
+
+nav ul li a {
+  color: white !important;
+  text-decoration: none;
+  padding: 5px 10px;
+  font-size: 1.2rem;
+}
+
+nav ul li a:hover {
+  background-color: #0056b3;
+  border-radius: 5px;
+}
+
+/* Main Content Styles */
+main {
+  padding: 40px 0;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+article,
+section,
+aside {
+  margin-bottom: 40px;
+}
+
+article h2,
+section h2,
+aside h3 {
+  border-bottom: 2px solid #007bff;
+  padding-bottom: 10px;
+  font-size: 1.8rem;
+}
+
+article p,
+section p,
+aside p {
+  font-size: 1.1rem;
+  line-height: 1.6;
+}
+
+form {
+  max-width: 600px;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  background-color: #f9f9f9;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 1rem;
+}
+
+button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  font-size: 1.2rem;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+/* Minting Status Styles */
+#mintStatus {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #257ed1;
+  text-align: center;
+}
+
+  /* Minting Status Animation Styles */
+.animate-status {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.05);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+/* Mint Status Section */
+#totalMinted { 
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #257ed1;
+  text-align: center;
+}
+
+/* Crypto Prices Section */
+#cryptoPrices {
+  text-align: center;
+  font-size: 1.2rem;
+  color: #555;
+}
+
+#cryptoPrices h2 {
+  font-size: 1.8rem;
+  color: #007bff;
+  margin-bottom: 20px;
+}
+
+/* Footer Styles */
+footer {
+  background-color: #050d16;
+  color: white;
+  padding: 20px 0;
+  text-align: center;
+}
+
+footer a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+
+.bg {
+  background-color: #007bff;
+  color: white;
+  padding: 20px 0;
+  text-align: center;
+  margin-bottom: 0;
+}

index.js

@@ -0,0 +1,37 @@
+const { ApolloServer, gql } = require('apollo-server');
+
+//Implement GraphQL Schema
+const typeDefs = gql`
+  type CryptoPrice {
+    id: ID!
+    name: String
+    usdPrice: Float
+  }
+
+  type Query {
+    getCryptoPrices: [CryptoPrice]
+  }
+`;
+
+
+//Implement GraphQL Resolver
+const resolvers = {
+    Query: {
+      getCryptoPrices: async () => {
+        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana,litecoin,jupiter&vs_currencies=usd');
+        const prices = await response.json();
+        return Object.keys(prices).map(key => ({
+          id: key,
+          name: key,
+          usdPrice: prices[key].usd,
+        }));
+      },
+    },
+  };
+
+
+// Start the server
+const server = new ApolloServer({ typeDefs, resolvers });
+server.listen({ port: 4000 }).then(({ url }) => {
+  console.log(`Server ready at ${url}`);
+});