From 46a6c0c07edc7b585dd7b313ff3cb4126f989bb3 Mon Sep 17 00:00:00 2001 From: itsme-345 Date: Mon, 11 Aug 2025 11:55:01 +0530 Subject: [PATCH] my first project completed this project is combine of three mini projects. dictionary, quotes generator, funfacts generator on food. --- Moinam Ashim/README.md | 14 +++ Moinam Ashim/app.js | 155 ++++++++++++++++++++++++++++++ Moinam Ashim/index.html | 87 +++++++++++++++++ Moinam Ashim/style.css | 202 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 458 insertions(+) create mode 100644 Moinam Ashim/README.md create mode 100644 Moinam Ashim/app.js create mode 100644 Moinam Ashim/index.html create mode 100644 Moinam Ashim/style.css diff --git a/Moinam Ashim/README.md b/Moinam Ashim/README.md new file mode 100644 index 00000000..d55ea5c5 --- /dev/null +++ b/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). \ No newline at end of file diff --git a/Moinam Ashim/app.js b/Moinam Ashim/app.js new file mode 100644 index 00000000..b216cb62 --- /dev/null +++ b/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`; + } +} diff --git a/Moinam Ashim/index.html b/Moinam Ashim/index.html new file mode 100644 index 00000000..9e191bf1 --- /dev/null +++ b/Moinam Ashim/index.html @@ -0,0 +1,87 @@ + + + + + + Generators with API + + + + + +
+
+ +
+
+ + +
+
+

Hello, Explorer!

+

Every day is a chance to learn something new.

+
+

+ Click the button below to explore quotes, fun facts, and more. +

+
+ +
+ +
+

Words That Inspire

+

Quotes that will inspire and enlighten you

+
+

+ Click the button below to get a quote. +

+

Author

+
+ +
+ +
+

Bites the Knowledge

+

Discover fascinating facts about the food you love

+
+

+ Click the button below to get a fact on foods you eat. +

+

Author

+
+ +
+ +
+

English to English Dictionary

+

learn every single word

+
+ + +
+
+


+

Meaning will display here

+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/Moinam Ashim/style.css b/Moinam Ashim/style.css new file mode 100644 index 00000000..a398b3a1 --- /dev/null +++ b/Moinam Ashim/style.css @@ -0,0 +1,202 @@ +* { + margin: 0; + padding: 0; +} +.main-container { + display: flex; + flex-direction: column; + height: 100vh; +} +.header { + background: #C4E1E6; + /* background: transparent; */ + height: 50px; + display: flex; + align-items: center; + padding-left: 30px; + box-shadow: 0 0 5px #9CAFAA; + z-index: 1; +} +.header .logo { + border: 7px solid #9CAFAA; + padding: 5px; + border-radius: 50%; + border-top: none; + border-right: none; + font-weight: 700; + color: #113F67; +} +.container { + display: flex; + flex-grow: 1; +} +.sidebar { + transition: 0.2s linear; + background: #C4E1E6; + width: fit-content; + min-width: 250px; + display: flex; + flex-direction: column; + border-right: 1px solid blue; + /* display: none; */ + margin-left: -252px; +} +.sidebar-topics { + display: flex; + height: 7vh; + align-items: center; + justify-content: space-between; + padding: 0 15px; + margin-bottom: 20vh; + box-shadow: 0 0 5px #9CAFAA; +} +.sidebar-topics h2 { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + padding-left: 30px; +} +#open-sidebar-btn { + position: fixed; + top: 60px; + z-index: 100; + left: 2vw; + font-size: 1.5rem; + padding: 5px; + transition: 0.3s linear ; + opacity: 0.7; +} +#closs-sidebar-btn { + padding: 5px; + transition: 0.3s linear; + font-size: 1.25rem; + opacity: 0.7; +} +#open-sidebar-btn:hover, #closs-sidebar-btn:hover { + background: #9CAFAA; + border-radius: 5px; + opacity: 1; +} +.sidebar button { + padding: 10px 0; + font-size: 1.15rem; + border: none; + background: #C4E1E6; + margin-bottom: 5px; +} +.sidebar button:hover { + background: #A4CCD9; + transition: 0.35s linear; + border-radius: 10px; + box-shadow: 0 0 2px #9CAFAA; + padding-left: 10px; +} +.content { + background: #A4CCD9; + /* background: linear-gradient(130deg, #A4CCD9, #113F67); */ + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.ctn { + display: flex; + flex-direction: column; + background-color: #A4CCD9; + padding: 5vw; + align-items: center; +} +.ctn h1 { + font-size: min(3.5rem, 8vw); + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +.ctn .tag { + font-size: min(1rem, 4vw); + letter-spacing: 2px; + width: 80%; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + margin-bottom: 10vh; + text-align: center; +} +.ctn .box { + background: #C4E1E6; + padding: min(8vw, 5rem); + border-radius: 20px; + margin-bottom: 5vh; + position: relative; + z-index: 1; +} +.ctn .box .gen-text { + margin-bottom: 2vw; + letter-spacing: 2px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + text-transform: uppercase; + text-align: center; + color: #113F67; + font-weight: 500; + font-size: min(1.2rem, 4vw); +} +.gen-author { + font-size: 0.85rem; + letter-spacing: 1px; + font-family: 'Courier New', Courier, monospace; +} +.ctn button { + padding: 10px 20px; + border-radius: 10px; + font-size: 1rem; + color: #113F67; + border: 2px solid #113F67; + background: #C4E1E6; + cursor: pointer; + transition: 300ms linear; +} +.ctn button:hover { + background: #113F67; + color: #C4E1E6; + border: 2px solid #113F67; + box-shadow: 0 0 15px aqua; + scale: 1.05; +} +#welcome-content { + background: transparent; +} +.ctn-wlcm h1 b { + -webkit-text-stroke: 3px #113F67; + font-family: cursive; + color: transparent; +} + +#start-generate-btn { + background: linear-gradient(to right, rgb(43, 0, 255), rgb(195, 0, 255)); + color: white; + border: 2px solid white; +} +#dictionary-ctn .word-content { + margin-top: 5vh; +} +#dictionary-ctn .word-content input { + height: 37px; + border-radius: 10px; + padding-left: 5px; + border: 2px solid #113F67; + font-family: monospace; + letter-spacing: 1px; +} +#dictionary-ctn .res { + background: #C4E1E6; + border-radius: 20px; + padding: 4vw; + margin-top: 2vh; + +} +#dictionary-ctn .meaning { + padding: 0 0 4vw 0; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + letter-spacing: 1px; + text-align: left; + color: #113F67; +} +.error { + color: red; +} \ No newline at end of file