CodeTraversal · quubble · Oct 25, 2023 · Oct 25, 2023 · Oct 27, 2023 · Oct 27, 2023
diff --git a/Dictonary-App/index.html b/Dictonary-App/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <!-- Font Awesome -->
+          <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+           -->
+          <!-- My Stylesheet -->    
+    <link rel="stylesheet" href="style.css">
+    <title>Dictionary App</title>
+  </head>
+  <body>
+    <header>
+      <nav>
+        <h1>Dictionary App</h1>
+      </nav>
+    </header>
+    <main>
+      <form action="">
+        <input type="text" placeholder="Enter a word to search..." />
+        <button type="submit">Search</button>
+      </form>
+      <div class="result"></div>
+    </main>
+    <footer>
+      <p>&copy; Dictionary App - 2023-2024</p>
+    </footer>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Dictonary-App/script.js b/Dictonary-App/script.js
@@ -0,0 +1,73 @@
+const form = document.querySelector('form');
+const resultDiv = document.querySelector('.result');
+// const sound = document.getElementById('sound');
+
+form.addEventListener("submit", (e)=>{
+    e.preventDefault();
+    getWordInfo(form.elements[0].value);
+});
+
+
+const getWordInfo = async (word)=>{
+    try{
+        resultDiv.style.display = "block";
+        resultDiv.innerHTML = "Fetching Data...";
+        const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
+        const data = await response.json();
+        console.log(data);
+
+        let wordDefinition = data[0].meanings[0].definitions[0];
+        let audioSrc = data[0].phonetics[0].audio;
+
+        resultDiv.innerHTML =`
+            <h2><strong>Word:</strong>${data[0].word}</h2>
+
+            <h2><strong>Phonetics:</strong>${data[0].phonetic}
+
+            <audio src=${audioSrc=== undefined? "Not Found": audioSrc} controls controlsList="nodownload"></audio></h2>
+
+            <p class="partOfSpeech">${data[0].meanings[0].partOfSpeech}</p>
+            <p><strong>Meaning:</strong>${wordDefinition.definition === undefined ? "Not Found": wordDefinition.definition}</p>
+            <p><strong>Example:</strong>${wordDefinition.example === undefined ? "Not Found": wordDefinition.example}</p>
+            <p><strong>Antonyms:</strong></p>
+
+
+        `;
+
+        //Fethching Antonyms from API
+        if(wordDefinition.antonyms.length===0){
+            resultDiv.innerHTML += `<span>Not Found</span>`;
+        }
+        else{
+                for(let i =0; i<wordDefinition.antonyms.length;i++){
+                        resultDiv.innerHTML += `<li>${wordDefinition.antonyms[i]}</li>`;
+                    }
+            }      
+
+        //Fethching Synonyms from API
+        if(wordDefinition.synonyms.length===0){
+            resultDiv.innerHTML += `<p><strong>Synonyms:</strong>Not Found</p>`;
+        }
+        else{
+                for(let i =0; i<wordDefinition.synonyms.length;i++){
+                        resultDiv.innerHTML += `<p><strong>Synonyms:</strong></p><ul>${wordDefinition.synonyms[i]}</ul>`;
+                    }
+            }          
+
+        //Adding Read More Button
+        resultDiv.innerHTML += `<div><a href="${data[0].sourceUrls}" target="_blank">Read More</a></div>`;
+
+    }
+
+    catch (error){
+        resultDiv.innerHTML =`<p>Sorry, the word could not be Found</p>`;
+    }
+
+    // function playSound() {
+    //     // src = `https://api.dictionaryapi.dev/media/pronunciations/en/${word}`;
+    //     sound.setAttribute = `${data[0].phonetics[0].audio}`;
+    //     sound.play();
+    // }
+}
+
+{/* <audio src="" controls ></audio> */}
diff --git a/Dictonary-App/style.css b/Dictonary-App/style.css
@@ -0,0 +1,124 @@
+/* Declaring CSS Variables */
+:root{
+    --primary-color: #008080;
+    --bcg-color: #f5f5f5;
+    --padding: 20px;
+    --border-radius: 5px;
+    --text-color: #fff;
+
+}
+
+/* Default Document Styling */
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family:Verdana, sans-serif;
+}
+
+body{
+    background-color: var(--bcg-color);
+    width: 100vw;
+}
+
+header{
+    background-color: var(--primary-color);
+    color: var(--text-color);
+    padding: var(--padding);
+
+}
+
+header h1{
+    font-size:  36px;
+}
+
+main{
+    min-height: 78vh;
+    padding: var(--padding);
+    max-width: 800px;
+    margin:0 auto;
+}
+
+main form{
+    display: flex;
+    justify-content: center;
+}
+.result{
+    display: none;
+}
+form input[type="text"], button[type="submit"], .result div a{
+    border: none; 
+    font-size: 16px;
+    font-weight:500;
+    border-radius: var(--border-radius);
+    /* padding: calc(var(--padding/2)); */
+    padding: 10px;
+
+}
+
+form input[type="text"]{
+    flex-grow: 1;
+}
+
+form button[type="submit"]{
+    background-color: var(--primary-color);
+    padding:(calc(var(--padding)/2));
+    color: var(--text-color);
+    margin-left: 20px;
+    cursor: pointer;
+    flex-grow: 0.3;
+
+}
+
+footer{
+    background-color: var(--primary-color);
+    color: var(--text-color);
+    padding:var(--padding) ;
+    font-size: 18px;
+    position: fixed;
+    width: 100%;
+    text-align: center;
+}
+.result{
+    background-color: #fff;
+    padding: var(--padding);
+    border-radius: var(--border-radius);
+    margin-top: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+}
+
+.result p{
+    margin-top: 10px;
+}
+
+.result p[class="partOfSpeech"]{
+    font-style: italic;
+    color: #808080;
+    margin-top: 2px;
+}
+
+.result li{
+    padding: calc(var(--padding)/6);
+    margin-top: 20px;
+}
+
+.result div{
+    margin-top: 20px;
+}
+
+.result div a{
+    text-decoration: none;
+    color: var(--text-color);
+    background-color: var(--primary-color);
+}
+
+/* Responsive Code */
+@media screen and (max-width:320px) {
+    main form{
+        flex-direction: column;
+    }
+    form button[type="submit"]{
+        margin-top: 10px;
+        margin-left: 0;
+    }
+}
diff --git a/JavaScript-API-Projects/Currency-Convertor/index.html b/JavaScript-API-Projects/Currency-Convertor/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Currency converter</title>
+</head>
+<body>
+    <main>
+        <section>
+            <div class="converter-container">
+                <h1>Currency Converter</h1>
+                <div class="input-container">
+                    <input type="number" value="1" min="1" class="amount" />
+                    <select class="fromCurrency">
+                        <!-- <option></option>
+                        <option></option> -->
+                    </select>
+                </div>
+                <div class="arrow">&rarr;</div>
+                <div class="input-container">
+                    <input type="number" class="convertedAmount" disabled />
+                    <select class="toCurrency">
+                        <!-- <option></option>
+                        <option></option> -->
+                    </select>
+                </div>
+                <div class="result">1 USD = 83 INR</div>
+            </div>
+        </section>
+    </main>
+
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/JavaScript-API-Projects/Currency-Convertor/script.js b/JavaScript-API-Projects/Currency-Convertor/script.js
@@ -0,0 +1,72 @@
+const fromAmountElement = document.querySelector('.amount');
+const convertedAmountElement = document.querySelector('.convertedAmount');
+const fromCurrencyElement = document.querySelector('.fromCurrency');
+const toCurrencyElement = document.querySelector('.toCurrency');
+const resultElement = document.querySelector('.result');
+const converterContainer = document.querySelector('.converter-container');
+
+// Array of Objects to populate the Select options
+const countries = [
+    { code: "USD", name: "United States Dollar" },
+    { code: "AUD", name: "Australian Dollar" },
+    { code: "BGN", name: "Bulgarian Lev" },
+    { code: "BRL", name: "Brazilian Real" },
+    { code: "CAD", name: "Canadian Dollar" },
+    { code: "INR", name: "Indian Rupeess" },
+    { code: "CNY", name: "Chinese Yuan" },
+];
+
+// Showing Countries from the array in Select Tag
+countries.forEach(country => {
+    const option1 = document.createElement('option');
+    const option2 = document.createElement('option');
+
+    option1.value = option2.value = country.code;
+    option1.textContent = option2.textContent = `${country.code} (${country.name})`;
+
+    fromCurrencyElement.appendChild(option1);
+    toCurrencyElement.appendChild(option2);
+
+    //Setting Default Value in Select Option
+    fromCurrencyElement.value = "USD";
+    toCurrencyElement.value = "INR";
+
+});
+
+
+// Function to get Exchange Rates using an API with an Async function
+const getExchangeRates = async () => {
+    const amount = parseFloat(fromAmountElement.value);
+    const fromCurrency = fromCurrencyElement.value;
+    const toCurrency = toCurrencyElement.value;
+    resultElement.textContent = "Fetching Exchange Rates...";
+
+    try {
+        // Fetch Data from API
+        const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`);
+        const data = await response.json();
+        const conversionRate = data.rates[toCurrency];
+        const convertedAmount = (amount * conversionRate).toFixed(2);
+        convertedAmountElement.value = convertedAmount;
+
+        if (isNaN(conversionRate)) {
+            resultElement.textContent = "Exchange Rates are not available for the selected country!!!";
+            convertedAmountElement.textContent = "";
+        } else {
+            convertedAmountElement.textContent = convertedAmount;
+            resultElement.textContent = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`;
+        }
+    } catch (error) {
+        converterContainer.innerHTML = `<h2>Error while Fetching Exchange Rates!!!</h2>`;
+    }
+};
+
+// Add event listeners to trigger the exchange rate fetching
+fromAmountElement.addEventListener('input', getExchangeRates);
+
+// Add event listeners to trigger the currency change by user
+fromCurrencyElement.addEventListener('change', getExchangeRates);
+toCurrencyElement.addEventListener('change', getExchangeRates);
+
+// Add event listeners on window load event
+window.addEventListener('load', getExchangeRates);