my first project completed

Moinam Ashim/README.md

@@ -0,0 +1,14 @@
+# My first project
+# quotes generator
+# Fun Facts Generator
+# Dictionary English to English
+
+# using API
+
+Alhamdulillah! I have completed this project successfully.  
+It is fully responsive, works smoothly on mobile and laptop, and follows clean and structured coding practices.
+
+Technologies Used:-
+- HTML5 – Structure.
+- CSS3 – Styling and responsiveness .
+- JavaScript – Interactivity (if any).

Moinam Ashim/app.js

@@ -0,0 +1,155 @@
+const welcomePage = document.getElementById("welcome-content");
+const quoteContentBtn = document.getElementById("quote-content-btn");
+const foodFactsBtn = document.getElementById("food-facts-btn");
+const dictionaryBtn = document.getElementById("dictionary-btn");
+const openSidebarBtn = document.getElementById("open-sidebar-btn");
+
+
+
+const quoteContent = document.getElementById("quote-content");
+const foodFacts = document.getElementById("food-facts");
+const dictionaryCtn = document.getElementById("dictionary-ctn");
+const sidebar = document.getElementById("sidebar");
+
+function hideAllContent() {
+    quoteContent.style.display = "none";
+    foodFacts.style.display = "none";
+    dictionaryCtn.style.display = "none";
+    welcomePage.style.display = "flex";
+};
+hideAllContent();
+
+quoteContentBtn.addEventListener("click", () => {
+    foodFacts.style.display = "none";
+    dictionaryCtn.style.display = "none"
+    welcomePage.style.display = "none";
+    quoteContent.style.display = "flex";
+    sidebar.style.marginLeft = "-252px";
+    openSidebarBtn.style.opacity = "1";
+});
+
+foodFactsBtn.addEventListener("click", () => {
+    quoteContent.style.display = "none";
+    dictionaryCtn.style.display = "none"
+    welcomePage.style.display = "none";
+    foodFacts.style.display = "flex";
+    sidebar.style.marginLeft = "-252px";
+    openSidebarBtn.style.opacity = "1";
+});
+
+dictionaryBtn.addEventListener("click", () => {
+    quoteContent.style.display = "none";
+    foodFacts.style.display = "none";
+    welcomePage.style.display = "none";
+    dictionaryCtn.style.display = "flex"
+    sidebar.style.marginLeft = "-252px";
+    openSidebarBtn.style.opacity = "1";
+});
+
+
+
+openSidebarBtn.addEventListener("click", () => {
+    sidebar.style.marginLeft = "0px"; // ---------
+    openSidebarBtn.style.opacity = "0";
+});
+
+const clossSidebarBtn = document.getElementById("closs-sidebar-btn");
+clossSidebarBtn.addEventListener("click", () => {
+    openSidebarBtn.style.opacity = "1";
+    sidebar.style.marginLeft = "-252px";
+});
+
+const openSidebar = document.getElementById("start-generate-btn");
+openSidebar.addEventListener("click", () => {
+    sidebar.style.marginLeft = "0";
+    openSidebarBtn.style.opacity = "0";
+});
+
+
+
+//Quote generator
+
+let urlQt = "https://go-quote.azurewebsites.net/";
+
+async function getQuote() {
+    try {
+        let response = await fetch(urlQt);
+        let data = await response.json();
+        const quoteText = document.getElementById("quote-text");
+        const quoteAuthor = document.getElementById("quote-author");
+
+        quoteText.innerText = `" ${data.text} "`;
+        quoteAuthor.innerText = `- ${data.author}`;
+
+
+    } catch (error) {
+        console.log("Error caught: ", error);
+    }
+}
+
+const quoteGenBtn = document.getElementById("qt-generate-btn");
+quoteGenBtn.addEventListener("click", () => {
+    getQuote();
+    quoteGenBtn.innerText = "Generate new one";
+});
+
+// food facts 
+
+let urlff = "https://world.openfoodfacts.org/api/v0/product/737628064502.json";
+
+async function foodFactsFnc() {
+    try {
+        let response = await fetch(urlQt);
+        let data = await response.json();
+        // console.log(response);
+        // console.log(data.text);
+
+        const foodText = document.getElementById("food-text");
+        const foodAuthor = document.getElementById("food-author");
+        foodText.innerText = `" ${data.text} "`;
+        foodAuthor.innerText = `- ${data.author}`;
+
+
+    } catch (error) {
+        console.log("Error caught: ", error);
+    }
+}
+
+const foodGenBtn = document.getElementById("food-generate-btn");
+foodGenBtn.addEventListener("click", () => {
+    foodFactsFnc();
+    foodGenBtn.innerText = "Get new fact";
+});
+
+// dictionary 
+
+let urlDic = "https://api.dictionaryapi.dev/api/v2/entries/en/";
+
+let searchWord = document.getElementById("search-word-btn");
+
+searchWord.addEventListener("click", () => {
+    let word = document.querySelector("input").value;
+    let input = document.getElementById("search-word-input");
+    input.value = "";
+    getMeaningWord(word);
+});
+
+
+async function getMeaningWord(word) {
+    try {
+        let res = await fetch(urlDic + word);
+        let data = await res.json();
+        // console.log(data);
+        // console.log(data[0].meanings[0].definitions[0].definition);
+        let meaning = data[0].meanings[0].definitions[0].definition;
+
+        let wordInp = document.getElementById("word");
+        let wordMean = document.getElementById("meaning");
+        wordMean.innerText = `Meaning:  ${meaning}`;
+        wordInp.innerText = `Word: ${word}`;
+    } catch (error) {
+        // console.log(error);
+        let wordMean = document.getElementById("meaning");
+        wordMean.innerText = `error: Sorry, We don't have that word`;
+    }
+}

Moinam Ashim/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Generators with API</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha512-DxV+EoADOkOygM4IR9yXP8Sb2qwgidEmeqAEmDKIOfPRQZOWbXCzLC6vjbZyy0vPisbH2SyW27+ddLVCN+OMzQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+    <!-- first project -->
+    <div class="main-container">
+        <div class="header">
+            <div class="logo">
+                <h2>Ashim</h2>
+            </div>
+        </div>
+        <div class="container">
+             <i class="fa-solid fa-bars" type="button" id="open-sidebar-btn"></i>
+            <div id="sidebar" class="sidebar">
+                <div class="sidebar-topics">
+                    <h2>
+                        Topics 
+                    </h2>
+                    <i class="fa-solid fa-xmark" id="closs-sidebar-btn"></i>
+                </div>
+                <button id="quote-content-btn">Quotes</button>
+                <button id="food-facts-btn">Food Facts</button>
+                <button id="dictionary-btn">Dictionary</button>
+            </div>
+            <div class="content" id="ctn">
+                <div id="welcome-content" class="ctn ctn-wlcm">
+                    <h1><b>Hello,</b> Explorer!</h1>
+                    <p class="tag"> Every day is a chance to learn something new. </p>
+                    <div class="box">
+                        <p class="gen-text">
+                            Click the button below to explore quotes, fun facts, and more.                          
+                        </p>
+                    </div>
+                    <button id="start-generate-btn">Select an option to start</button>
+                </div>
+
+                <div id="quote-content" class="ctn ctn-qg">
+                    <h1>Words That Inspire</h1>
+                    <p class="tag">Quotes that will inspire and enlighten you </p>
+                    <div class="box">
+                        <p id="quote-text" class="gen-text">
+                            Click the button below to get a quote.                          
+                        </p>
+                        <p id="quote-author" class="gen-author">Author</p>
+                    </div>
+                    <button id="qt-generate-btn">Generate a quotes</button>
+                </div>
+
+                <div id="food-facts" class="ctn ctn-ff">
+                    <h1>Bites the Knowledge</h1>
+                    <p class="tag">Discover fascinating facts about the food you love</p>   
+                    <div class="box">
+                        <p id="food-text" class="gen-text">
+                            Click the button below to get a fact on foods you eat. 
+                        </p>
+                        <p id="food-author" class="gen-author">Author</p>
+                    </div> 
+                    <button id="food-generate-btn">Get a fact</button>   
+                </div>
+
+                <div id="dictionary-ctn" class="ctn ctn-dic">
+                    <h1>English to English Dictionary</h1>
+                    <p class="tag">learn every single word</p>
+                    <div class="word-content">
+                        <input id="search-word-input" type="text" placeholder="Search your word">
+                        <button id="search-word-btn">Search </button>
+                    </div>
+                    <div class="res">
+                        <p id="word" class="meaning"></p> <br>
+                        <p id="meaning" class="meaning">Meaning will display here </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+    <script src="app.js"></script>
+</body>
+</html>