uploading all the projects

arycodes · Jan 17, 2024 · 86fe0d2 · 86fe0d2
1 parent fe94147
commit 86fe0d2
Show file tree

Hide file tree

Showing 43 changed files with 1,861 additions and 150 deletions.
diff --git a/analogueclockmultithemed/analogueclockmultithemed.zip b/analogueclockmultithemed/analogueclockmultithemed.zip
diff --git a/analogueclockmultithemed/clock1.jpg b/analogueclockmultithemed/clock1.jpg
diff --git a/analogueclockmultithemed/clock2.jpg b/analogueclockmultithemed/clock2.jpg
diff --git a/analogueclockmultithemed/clock3.jpg b/analogueclockmultithemed/clock3.jpg
diff --git a/analogueclockmultithemed/clock4.jpg b/analogueclockmultithemed/clock4.jpg
diff --git a/analogueclockmultithemed/clock5.jpg b/analogueclockmultithemed/clock5.jpg
diff --git a/analogueclockmultithemed/image.jpg b/analogueclockmultithemed/image.jpg
diff --git a/analogueclockmultithemed/index.html b/analogueclockmultithemed/index.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Analogue CLock Multiple Theme AryCodes</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        html {
+            height: 100%;
+            width: 100%;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            flex-direction: column;
+        }
+
+
+        .container {
+            border: 2px solid #333;
+            height: 50%;
+            aspect-ratio: 1/1;
+            border-radius: 50%;
+
+            position: relative;
+
+            justify-content: center;
+            align-items: center;
+
+            box-shadow: 0 0 20px 5px #33333360;
+
+        }
+
+        .hand {
+            position: absolute;
+            animation: rotate 10s linear infinite;
+
+            transform-origin: 0% 50%;
+            top: calc(50% - 2.5px);
+            border-radius: 10px;
+            left: 50%;
+        }
+
+
+        .hour {
+            width: 22%;
+            height: 8px;
+            background-color: black;
+        }
+
+
+        .minute {
+            width: 28%;
+            height: 6px;
+            background-color: black;
+        }
+
+        .second {
+            width: 35%;
+            height: 4px;
+            background-color: red;
+        }
+
+
+
+        .container {
+            background-image: url(clock1.jpg);
+            background-position: center center;
+            background-size: cover;
+        }
+
+
+        .optionscontainer {
+            margin: 20px auto;
+        }
+
+        label {
+            font-size: 16px;
+            margin-bottom: 8px;
+        }
+
+        select {
+            padding: 8px;
+            font-size: 14px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            margin-bottom: 20px;
+        }
+    </style>
+
+
+</head>
+
+
+
+<body>
+
+
+
+
+    <div class="container" id="container">
+        <div id="hourHand" class="hour hand"></div>
+        <div id="minuteHand" class="minute hand"></div>
+        <div id="secondHand" class="second hand"></div>
+
+    </div>
+
+
+    <div class="optionscontainer">
+        <label for="backgroundSelect">Select Clock Dial:</label>
+        <select id="backgroundSelect" onchange="changeBackground()">
+            <option value="clock1.jpg" data-color="#ffffff">Clock 1</option>
+            <option value="clock2.jpg" data-color="#e5e7e9">Clock 2</option>
+            <option value="clock3.jpg" data-color="#0175b0">Clock 3</option>
+            <option value="clock4.jpg" data-color="#209a47">Clock 4</option>
+            <option value="clock5.jpg" data-color="#e8edb2">Clock 5</option>
+        </select>
+    </div>
+
+
+    <a id="floating-button" href="https://www.instagram.com/arycodes" target="_blank"
+        style="position:fixed;bottom:20px;right:20px;background-color:#fff;color:#000;border:none;border-radius:50%;padding:15px;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,0.2);transition:background-color 0.3s ease,transform 0.3s ease;display:flex;align-items:center;justify-content:center;text-decoration:none;transform-style:preserve-3d;perspective:1000px;">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
+        <i class="fab fa-instagram" style="font-size:24px;transform:rotateY(0deg);transition:transform 0.3s ease;"></i>
+    </a>
+
+</body>
+
+<script>
+    hourhand = document.getElementById('hourHand');
+    minhand = document.getElementById('minuteHand');
+    sechand = document.getElementById('secondHand');
+    function updateTime() {
+        let time = new Date();
+        let hours = time.getHours();
+        let minutes = time.getMinutes();
+        let seconds = time.getSeconds();
+
+        let hourrotation = - 90 + (360 / 12) * hours + (360 / 12) / 60 * minutes;
+        let minuterotation = - 90 + (360 / 60) * minutes + (360 / 60) / 60 * seconds;
+        let secondrotation = -90 + (360 / 60) * seconds;
+
+
+        hourhand.style.transform = `rotate(${hourrotation}deg)`
+        minhand.style.transform = `rotate(${minuterotation}deg)`
+        sechand.style.transform = `rotate(${secondrotation}deg)`
+    }
+
+    setInterval(updateTime, 1000);
+
+
+    function changeBackground() {
+        let selectElement = document.getElementById('backgroundSelect');
+        let selectedOption = selectElement.options[selectElement.selectedIndex];
+        let selectedValue = selectedOption.value;
+        let selectedColor = selectedOption.getAttribute('data-color');
+        container.style.backgroundImage = `url(${selectedValue})`;
+        document.body.style.backgroundColor = selectedColor;
+    }
+
+    setInterval(updateTime, 1000);
+</script>
+
+</html>
diff --git a/currencyconverter/currencyconverter.zip b/currencyconverter/currencyconverter.zip
diff --git a/currencyconverter/image.jpg b/currencyconverter/image.jpg
diff --git a/currencyconverter/index.html b/currencyconverter/index.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    .main-body {
+      font-family: 'Arial', sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      background-color: #f5f5f5;
+    }
+
+    .currency-converter-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .currency-converter-box {
+      text-align: center;
+      width: 400px;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+      background-color: #fff;
+    }
+
+    .converter-heading {
+      color: #2c3e50;
+    }
+
+    .input-group {
+      margin-bottom: 15px;
+    }
+
+    .input-label {
+      display: block;
+      margin-bottom: 5px;
+      color: #555;
+    }
+
+    .input-field,
+    .currency-select {
+      width: 100%;
+      padding: 8px;
+      box-sizing: border-box;
+    }
+
+    .convert-button {
+      background-color: #3498db;
+      color: #fff;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+
+    .convert-button:hover {
+      background-color: #2980b9;
+    }
+
+    .conversion-result {
+      margin-top: 15px;
+      font-size: 18px;
+      color: #333;
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <title>Currency Converter</title>
+</head>
+
+<body>
+  <div class="currency-converter-container">
+    <div class="currency-converter-box">
+      <h2 class="converter-heading">Currency Converter</h2>
+      <div class="input-group">
+        <label for="amount" class="input-label">Amount:</label>
+        <input type="number" id="amount" placeholder="Enter amount" class="input-field">
+      </div>
+      <div class="input-group">
+        <label for="from" class="input-label">From:</label>
+        <select id="from" class="currency-select"></select>
+      </div>
+      <div class="input-group">
+        <label for="to" class="input-label">To:</label>
+        <select id="to" class="currency-select"></select>
+      </div>
+      <button onclick="convert()" class="convert-button">Convert</button>
+      <p id="result" class="conversion-result"></p>
+    </div>
+  </div>
+
+  <script>
+    // Fetch real exchange rates using axios
+    axios.get('https://api.exchangerate-api.com/v4/latest/USD')
+      .then(response => {
+        const currencies = Object.keys(response.data.rates);
+
+        // Populate "From" and "To" select elements with currencies
+        const fromSelect = document.getElementById('from');
+        const toSelect = document.getElementById('to');
+
+        currencies.forEach(currency => {
+          const option = document.createElement('option');
+          option.value = currency;
+          option.text = currency;
+          fromSelect.add(option);
+        });
+
+        currencies.forEach(currency => {
+          const option = document.createElement('option');
+          option.value = currency;
+          option.text = currency;
+          toSelect.add(option);
+        });
+      })
+      .catch(error => {
+        console.error('Error fetching exchange rates:', error);
+      });
+
+    function convert() {
+      const amount = document.getElementById('amount').value;
+      const fromCurrency = document.getElementById('from').value;
+      const toCurrency = document.getElementById('to').value;
+
+      if (isNaN(amount) || amount <= 0) {
+        alert('Please enter a valid amount.');
+        return;
+      }
+
+      axios.get(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`)
+        .then(response => {
+          const exchangeRates = response.data.rates;
+
+          const result = amount * exchangeRates[toCurrency];
+          document.getElementById('result').innerText = `${amount} ${fromCurrency} = ${result.toFixed(2)} ${toCurrency}`;
+        })
+        .catch(error => {
+          console.error('Error fetching exchange rates:', error);
+        });
+    }
+  </script>
+    <a id="floating-button" href="https://www.instagram.com/arycodes" target="_blank"
+        style="position:fixed;bottom:20px;right:20px;background-color:#fff;color:#000;border:none;border-radius:50%;padding:15px;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,0.2);transition:background-color 0.3s ease,transform 0.3s ease;display:flex;align-items:center;justify-content:center;text-decoration:none;transform-style:preserve-3d;perspective:1000px;">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
+        <i class="fab fa-instagram" style="font-size:24px;transform:rotateY(0deg);transition:transform 0.3s ease;"></i>
+    </a>
+</body>
+
+</html>
diff --git a/dictionaryapp/image.jpg b/dictionaryapp/image.jpg
diff --git a/dictionaryapp/index.html b/dictionaryapp/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dictionary APP-AryCodes</title>
+    <title>Dictionary APP</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
         body {
@@ -217,12 +217,6 @@ <h2>${data.word}</h2>
             }
         }
     </script>
-
-    <a id="floating-button" href="https://www.instagram.com/arycodes" target="_blank"
-        style="position:fixed;bottom:20px;right:20px;background-color:#fff;color:#000;border:none;border-radius:50%;padding:15px;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,0.2);transition:background-color 0.3s ease,transform 0.3s ease;display:flex;align-items:center;justify-content:center;text-decoration:none;transform-style:preserve-3d;perspective:1000px;">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
-        <i class="fab fa-instagram" style="font-size:24px;transform:rotateY(0deg);transition:transform 0.3s ease;"></i>
-    </a>
 </body>
 
-</html>
+</html>