diff --git a/Sujan Karmakar/Dog Images/app.js b/Sujan Karmakar/Dog Images/app.js new file mode 100644 index 00000000..29df9971 --- /dev/null +++ b/Sujan Karmakar/Dog Images/app.js @@ -0,0 +1,19 @@ +let btn = document.querySelector("button"); +let box = document.querySelector(".content-container"); + +let url = "https://dog.ceo/api/breeds/image/random"; + +async function getImage() { + try { + let res = await axios.get(url); + return res.data.message; + } catch (err) { + return (`Error : ${err}`); + } +} + +btn.addEventListener("click", async () => { + box.style.backgroundImage = `url(${await getImage()})`; + box.style.backgroundSize = "cover"; + box.style.backgroundRepeat = "no-repeat"; +}); \ No newline at end of file diff --git a/Sujan Karmakar/Dog Images/index.html b/Sujan Karmakar/Dog Images/index.html new file mode 100644 index 00000000..43cb0392 --- /dev/null +++ b/Sujan Karmakar/Dog Images/index.html @@ -0,0 +1,68 @@ + + + + + + + Random Fetch - Dog Images + + + + + + + + + + + + + + +
+

Dog Images

+
+
+
+
+ +
+ +
+
+
+ + + + + + + \ No newline at end of file diff --git a/Sujan Karmakar/Dog Images/style.css b/Sujan Karmakar/Dog Images/style.css new file mode 100644 index 00000000..f3e290c1 --- /dev/null +++ b/Sujan Karmakar/Dog Images/style.css @@ -0,0 +1,137 @@ +/* Improved Styles for RandomFetch Pages */ +html { + overflow-y: auto; +} + +body { + min-height: 100vh; + background-color: #0F0F0F; + margin: 0; + font-family: 'Poppins', sans-serif; +} + +.box-container { + width: 100%; + min-height: calc(100vh - 100px); + display: flex; + justify-content: center; + align-items: flex-start; /* Align top with some margin */ + padding-top: 2rem; + padding-bottom: 2rem; + box-sizing: border-box; + margin-top: 3rem; +} + +.box { + width: 90%; + max-width: 500px; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + border-radius: 20px; + padding: 2.5rem; + color: white; + transition: all 0.4s ease; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; + /* justify-content: space-evenly; Removed to let gap handle spacing */ +} + +.box:hover { + transform: translateY(-5px); + border-color: rgba(0, 255, 157, 0.5); + box-shadow: 0 10px 40px rgba(0, 255, 157, 0.15); + background: rgba(255, 255, 255, 0.08); +} + +button { + background: transparent; + border: 2px solid #00FF9D; + color: #00FF9D; + padding: 1rem 2rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 50px; + cursor: pointer; + transition: all 0.3s ease; + width: 100%; + font-family: 'Poppins', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0; /* Handled by gap */ +} + +button:hover { + background: #00FF9D; + color: #0F0F0F; + box-shadow: 0 0 20px rgba(0, 255, 157, 0.4); + transform: translateY(-2px); +} + +button:active { + transform: translateY(0); +} + +.content-container { + width: 100%; + min-height: 200px; + max-height: 60vh; + padding: 1.5rem; + border: 1px solid rgba(0, 255, 157, 0.3); + border-radius: 15px; + overflow-y: auto; + background: rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + word-wrap: break-word; +} + +/* Scrollbar for content */ +.content-container::-webkit-scrollbar { + width: 8px; +} +.content-container::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 4px; +} +.content-container::-webkit-scrollbar-thumb { + background: #00FF9D; + border-radius: 4px; +} + +.content-container img { + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 4px 15px rgba(0,0,0,0.3); +} + +h1 { + text-align: center; + color: #fff; + margin-bottom: 2rem; + text-shadow: 0 0 10px rgba(0, 255, 157, 0.3); +} + +p { + font-size: 1.1rem; + line-height: 1.6; +} + +@media (max-width: 600px) { + .box { + padding: 1.5rem; + } + + button { + padding: 0.8rem 1.5rem; + font-size: 1rem; + } +} \ No newline at end of file diff --git a/Sujan Karmakar/Guess about you/app.js b/Sujan Karmakar/Guess about you/app.js new file mode 100644 index 00000000..ae067aa1 --- /dev/null +++ b/Sujan Karmakar/Guess about you/app.js @@ -0,0 +1,124 @@ +let ageUrl = "https://api.agify.io?name="; +let nationUrl = "https://api.nationalize.io?name="; +let genderUrl = "https://api.genderize.io?name="; +let countriesUrl = "https://restcountries.com/v3.1/all?fields=name,cca2"; + +let countryMap = {}; + +async function fetchCountries() { + try { + let res = await axios.get(countriesUrl); + res.data.forEach(country => { + countryMap[country.cca2] = country.name.common; + }); + } catch (err) { + console.log("Error fetching countries:", err); + } +} +fetchCountries(); + +let agePara = document.querySelector("#ageBox .value"); +let ageProbab = document.querySelector("#ageBox .probability"); + +let genderPara = document.querySelector("#genderBox .value"); +let genderProbab = document.querySelector("#genderBox .probability"); + +let nationBox = document.querySelector("#nationalityBox"); +let nationalityPara = document.querySelector("#nationalityBox .value"); +let nationalityProbab = document.querySelector("#nationalityBox .probability"); + +let input = document.querySelector("input"); +let button = document.querySelector("button"); + + +async function ageFn(name) { + try { + let res = await axios.get(ageUrl + name); + return res.data.age; + } catch (err) { + console.log("Error : ", err); + return "Error"; + } +} + +async function genderFn(name) { + try { + let res = await axios.get(genderUrl + name); + return res.data; + } catch (err) { + console.log("Error : ", err); + return "Error"; + } +} + +async function nationFn(name) { + try { + let res = await axios.get(nationUrl + name); + return res.data.country; + } catch (err) { + console.log("Error : ", err); + return "Error"; + } +} + + +input.addEventListener("keydown", (event) => { + if(event.code === "Enter") { + button.click(); + } +}) + + +input.addEventListener("input", () => { + input.value = input.value.replace(/[^a-zA-Z]/g, ""); +}); + +button.addEventListener("click", async () => { + let name = input.value; + if(name === "") { + alert("Cannot be empty."); + } else { + agePara.innerText = await ageFn(name); + + let genderObj = await genderFn(name); + genderPara.innerText = genderObj.gender.charAt(0).toUpperCase() + genderObj.gender.slice(1); + genderProbab.innerText = `Probability ${genderObj.probability.toFixed(2)}`; + + let country = await nationFn(name); + if (country.length > 0) { + let containerDiv = document.querySelector("#nationalityBox .nation-container"); + containerDiv.innerHTML = ""; // Clear existing + + country.forEach(c => { + let itemDiv = document.createElement("div"); + itemDiv.setAttribute("class", "nation-item"); + + let para1 = document.createElement("p"); + let para2 = document.createElement("p"); + + para1.setAttribute("class", "value"); + para1.style.display = "flex"; + para1.style.alignItems = "center"; + para1.style.justifyContent = "center"; + para1.style.gap = "0.5rem"; + + para2.setAttribute("class", "probability"); + + let img = document.createElement("img"); + img.src = `https://flagsapi.com/${c.country_id}/flat/64.png`; + img.alt = c.country_id; + img.style.height = "1.5rem"; + + let countryName = countryMap[c.country_id] || c.country_id; + para1.innerText = countryName; + para1.appendChild(img); + + para2.innerText = `Probability: ${c.probability.toFixed(2)}`; + + itemDiv.appendChild(para1); + itemDiv.appendChild(para2); + containerDiv.appendChild(itemDiv); + }); + } + } +}); diff --git a/Sujan Karmakar/Guess about you/index.html b/Sujan Karmakar/Guess about you/index.html new file mode 100644 index 00000000..5b8eac3a --- /dev/null +++ b/Sujan Karmakar/Guess about you/index.html @@ -0,0 +1,91 @@ + + + + + + + Random Fetch - Guess About You + + + + + + + + + + + + + + +
+

Guess About Your Age, Gender, and Nationalty

+
+
+
+ + +
+
+
+
+

Age

+

--

+
+
+

Gender

+

--

+

Probability: --

+
+
+
+

Nationality

+
+

--

+

Probability: --

+
+
+
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/Sujan Karmakar/Guess about you/style.css b/Sujan Karmakar/Guess about you/style.css new file mode 100644 index 00000000..b1e91d63 --- /dev/null +++ b/Sujan Karmakar/Guess about you/style.css @@ -0,0 +1,210 @@ +/* Inheriting base styles from navStyle.css but adding specific page styles */ + +html { + overflow-y: auto !important; +} + +h1 { + text-align: center; + color: #fff; + margin-bottom: 2rem; + text-shadow: 0 0 10px rgba(0, 255, 157, 0.3); +} + +.guess-container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 3rem; +} + +/* Input Group */ +.input-group { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + margin-bottom: 3rem; + flex-wrap: wrap; + width: 100%; + max-width: 600px; +} + +input { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 1rem 1.5rem; + border-radius: 50px; + color: white; + font-family: 'Poppins', sans-serif; + font-size: 1.1rem; + outline: none; + transition: all 0.3s ease; + flex: 1; + min-width: 200px; +} + +input:focus { + border-color: #00FF9D; + box-shadow: 0 0 15px rgba(0, 255, 157, 0.2); + background: rgba(255, 255, 255, 0.1); +} + +input::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +/* Fix for Chrome autofill background */ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active{ + -webkit-box-shadow: 0 0 0 30px #1a1a1a inset !important; + -webkit-text-fill-color: white !important; + transition: background-color 5000s ease-in-out 0s; + caret-color: white; +} + +button { + background: transparent; + border: 2px solid #00FF9D; + color: #00FF9D; + padding: 1rem 2.5rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 50px; + cursor: pointer; + transition: all 0.3s ease; + font-family: 'Poppins', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + white-space: nowrap; +} + +button:hover { + background: #00FF9D; + color: #0F0F0F; + box-shadow: 0 0 20px rgba(0, 255, 157, 0.4); + transform: translateY(-3px); +} + +button:active { + transform: translateY(-1px); +} + +/* Results Container */ +.results-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + width: 100%; + margin-bottom: 3rem; +} + +.results-row { + display: flex; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; + width: 100%; +} + +.result-box { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + border-radius: 20px; + padding: 2.5rem 1.5rem; + width: 320px; + text-align: center; + transition: all 0.4s ease; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#nationalityBox { + width: 672px; /* 320 * 2 + 32px gap equivalent */ + max-width: 90vw; +} + +#nationalityBox .nation-container { + display: flex; + flex-direction: row; + gap: 1.5rem; + flex-wrap: wrap; + justify-content: center; + width: 100%; +} + +.result-box:hover { + transform: translateY(-10px); + border-color: rgba(0, 255, 157, 0.5); + box-shadow: 0 10px 40px rgba(0, 255, 157, 0.15); + background: rgba(255, 255, 255, 0.08); +} + +.result-box h3 { + color: #00FF9D; + margin-bottom: 1.5rem; + font-size: 1.5rem; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + border-bottom: 2px solid rgba(0, 255, 157, 0.3); + padding-bottom: 0.5rem; + width: 80%; +} + +.value { + font-size: 2rem; + font-weight: 700; + margin: 0.5rem 0 1rem 0; + color: #ffffff; + min-height: 2.5rem; +} + +.probability { + font-size: 0.95rem; + color: rgba(255, 255, 255, 0.6); + background: rgba(0, 0, 0, 0.2); + padding: 0.4rem 1rem; + border-radius: 20px; +} + +@media (max-width: 900px) { + .results-container { + justify-content: center; + } +} + +@media (max-width: 600px) { + .input-group { + flex-direction: row; + width: 95%; + gap: 0.5rem; + } + + input { + width: auto; + flex: 1; + min-width: 0; + padding: 0.8rem 1rem; + font-size: 1rem; + } + + button { + width: auto; + padding: 0.8rem 1.2rem; + font-size: 0.9rem; + } + + .result-box { + width: 100%; + } +} diff --git a/Sujan Karmakar/Jokes/app.js b/Sujan Karmakar/Jokes/app.js new file mode 100644 index 00000000..a9f50ac8 --- /dev/null +++ b/Sujan Karmakar/Jokes/app.js @@ -0,0 +1,25 @@ +let btn = document.querySelector("button"); +let joke = document.querySelector("#joke"); +let pLine = document.querySelector("#punchline"); +let type = document.querySelector("#type"); + +let url = "https://official-joke-api.appspot.com/random_joke"; + +async function getJoke() { + try { + let res = await axios.get(url); + return res; + } catch (err) { + return (`Error : ${err}`); + } +} + +btn.addEventListener("click", async () => { + joke.innerText = ""; + punchline.innerText = ""; + type.innerText = ""; + let msg = await getJoke(); + joke.innerText = msg.data.setup; + pLine.innerText = msg.data.punchline; + type.innerText = `Type : ${msg.data.type}`; +}); \ No newline at end of file diff --git a/Sujan Karmakar/Jokes/index.html b/Sujan Karmakar/Jokes/index.html new file mode 100644 index 00000000..1cb0d0dc --- /dev/null +++ b/Sujan Karmakar/Jokes/index.html @@ -0,0 +1,62 @@ + + + + + + Random Fetch - Jokes + + + + + + + + + + + + + +
+

Jokes

+
+
+ +
+
+ +
+

+

+

+
+
+
+ + + + + + diff --git a/Sujan Karmakar/Jokes/style.css b/Sujan Karmakar/Jokes/style.css new file mode 100644 index 00000000..f3e290c1 --- /dev/null +++ b/Sujan Karmakar/Jokes/style.css @@ -0,0 +1,137 @@ +/* Improved Styles for RandomFetch Pages */ +html { + overflow-y: auto; +} + +body { + min-height: 100vh; + background-color: #0F0F0F; + margin: 0; + font-family: 'Poppins', sans-serif; +} + +.box-container { + width: 100%; + min-height: calc(100vh - 100px); + display: flex; + justify-content: center; + align-items: flex-start; /* Align top with some margin */ + padding-top: 2rem; + padding-bottom: 2rem; + box-sizing: border-box; + margin-top: 3rem; +} + +.box { + width: 90%; + max-width: 500px; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + border-radius: 20px; + padding: 2.5rem; + color: white; + transition: all 0.4s ease; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; + /* justify-content: space-evenly; Removed to let gap handle spacing */ +} + +.box:hover { + transform: translateY(-5px); + border-color: rgba(0, 255, 157, 0.5); + box-shadow: 0 10px 40px rgba(0, 255, 157, 0.15); + background: rgba(255, 255, 255, 0.08); +} + +button { + background: transparent; + border: 2px solid #00FF9D; + color: #00FF9D; + padding: 1rem 2rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 50px; + cursor: pointer; + transition: all 0.3s ease; + width: 100%; + font-family: 'Poppins', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0; /* Handled by gap */ +} + +button:hover { + background: #00FF9D; + color: #0F0F0F; + box-shadow: 0 0 20px rgba(0, 255, 157, 0.4); + transform: translateY(-2px); +} + +button:active { + transform: translateY(0); +} + +.content-container { + width: 100%; + min-height: 200px; + max-height: 60vh; + padding: 1.5rem; + border: 1px solid rgba(0, 255, 157, 0.3); + border-radius: 15px; + overflow-y: auto; + background: rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + word-wrap: break-word; +} + +/* Scrollbar for content */ +.content-container::-webkit-scrollbar { + width: 8px; +} +.content-container::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 4px; +} +.content-container::-webkit-scrollbar-thumb { + background: #00FF9D; + border-radius: 4px; +} + +.content-container img { + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 4px 15px rgba(0,0,0,0.3); +} + +h1 { + text-align: center; + color: #fff; + margin-bottom: 2rem; + text-shadow: 0 0 10px rgba(0, 255, 157, 0.3); +} + +p { + font-size: 1.1rem; + line-height: 1.6; +} + +@media (max-width: 600px) { + .box { + padding: 1.5rem; + } + + button { + padding: 0.8rem 1.5rem; + font-size: 1rem; + } +} \ No newline at end of file diff --git a/Sujan Karmakar/Motivation/app.js b/Sujan Karmakar/Motivation/app.js new file mode 100644 index 00000000..fcc901f9 --- /dev/null +++ b/Sujan Karmakar/Motivation/app.js @@ -0,0 +1,20 @@ +let btn = document.querySelector("button"); +let para = document.querySelector("#quote"); +let author = document.querySelector("#author"); + +let url = "https://dummyjson.com/quotes/random"; + +async function getQuote() { + try { + let res = await axios.get(url); + return res.data; + } catch (err) { + return (`Error : ${err}`); + } +} + +btn.addEventListener("click", async () => { + let data = await getQuote(); + para.innerText = `${data.quote}`; + author.innerText = `- ${data.author}`; +}); \ No newline at end of file diff --git a/Sujan Karmakar/Motivation/index.html b/Sujan Karmakar/Motivation/index.html new file mode 100644 index 00000000..b31999d3 --- /dev/null +++ b/Sujan Karmakar/Motivation/index.html @@ -0,0 +1,70 @@ + + + + + + + Random Fetch - Motivation + + + + + + + + + + + + + + +
+

Quotes

+
+
+ +
+
+ +
+

+

+
+
+
+ + + + + + + \ No newline at end of file diff --git a/Sujan Karmakar/Motivation/style.css b/Sujan Karmakar/Motivation/style.css new file mode 100644 index 00000000..f3e290c1 --- /dev/null +++ b/Sujan Karmakar/Motivation/style.css @@ -0,0 +1,137 @@ +/* Improved Styles for RandomFetch Pages */ +html { + overflow-y: auto; +} + +body { + min-height: 100vh; + background-color: #0F0F0F; + margin: 0; + font-family: 'Poppins', sans-serif; +} + +.box-container { + width: 100%; + min-height: calc(100vh - 100px); + display: flex; + justify-content: center; + align-items: flex-start; /* Align top with some margin */ + padding-top: 2rem; + padding-bottom: 2rem; + box-sizing: border-box; + margin-top: 3rem; +} + +.box { + width: 90%; + max-width: 500px; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + border-radius: 20px; + padding: 2.5rem; + color: white; + transition: all 0.4s ease; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; + /* justify-content: space-evenly; Removed to let gap handle spacing */ +} + +.box:hover { + transform: translateY(-5px); + border-color: rgba(0, 255, 157, 0.5); + box-shadow: 0 10px 40px rgba(0, 255, 157, 0.15); + background: rgba(255, 255, 255, 0.08); +} + +button { + background: transparent; + border: 2px solid #00FF9D; + color: #00FF9D; + padding: 1rem 2rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 50px; + cursor: pointer; + transition: all 0.3s ease; + width: 100%; + font-family: 'Poppins', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0; /* Handled by gap */ +} + +button:hover { + background: #00FF9D; + color: #0F0F0F; + box-shadow: 0 0 20px rgba(0, 255, 157, 0.4); + transform: translateY(-2px); +} + +button:active { + transform: translateY(0); +} + +.content-container { + width: 100%; + min-height: 200px; + max-height: 60vh; + padding: 1.5rem; + border: 1px solid rgba(0, 255, 157, 0.3); + border-radius: 15px; + overflow-y: auto; + background: rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + word-wrap: break-word; +} + +/* Scrollbar for content */ +.content-container::-webkit-scrollbar { + width: 8px; +} +.content-container::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 4px; +} +.content-container::-webkit-scrollbar-thumb { + background: #00FF9D; + border-radius: 4px; +} + +.content-container img { + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 4px 15px rgba(0,0,0,0.3); +} + +h1 { + text-align: center; + color: #fff; + margin-bottom: 2rem; + text-shadow: 0 0 10px rgba(0, 255, 157, 0.3); +} + +p { + font-size: 1.1rem; + line-height: 1.6; +} + +@media (max-width: 600px) { + .box { + padding: 1.5rem; + } + + button { + padding: 0.8rem 1.5rem; + font-size: 1rem; + } +} \ No newline at end of file diff --git a/Sujan Karmakar/README.md b/Sujan Karmakar/README.md new file mode 100644 index 00000000..1359c341 --- /dev/null +++ b/Sujan Karmakar/README.md @@ -0,0 +1,24 @@ +# RandomFetch + +## This is a web application that uses different random APIs to show random jokes, quotes, cat facts, tasks and dog images. + +## Also has three APIs that guesses someone's nationality, age and gender from their name. + +## Technologies : + 1. HTML + 2. CSS + 3. JavaScript + +## APIs Used : + 1. Cat Facts - https://catfact.ninja/fact + 2. Dog Images - https://dog.ceo/api/breeds/image/random + 3. Jokes - https://official-joke-api.appspot.com/random_joke + 4. Tasks - https://dummyjson.com/todos/random + 5. Quotes - https://dummyjson.com/quotes/random + 6. Nationality Guessing API - https://api.nationalize.io?name= + 7. Age Guessing API - https://api.agify.io?name= + 8. Gender Guessing API - https://api.genderize.io?name= + +## Deployment Link : + +Link - https://random-fetch.vercel.app/ diff --git a/Sujan Karmakar/Task/app.js b/Sujan Karmakar/Task/app.js new file mode 100644 index 00000000..e3c5e62a --- /dev/null +++ b/Sujan Karmakar/Task/app.js @@ -0,0 +1,19 @@ +let btn = document.querySelector("button"); +let para = document.querySelector("p"); + +let url = "https://dummyjson.com/todos/random"; + +async function getTask() { + try { + let res = await axios.get(url); + return res.data.todo; + } catch (err) { + console.log("Error:", err); + return "No task found"; + } +} + +btn.addEventListener("click", async () => { + let task = await getTask(); + para.innerText = task; +}); \ No newline at end of file diff --git a/Sujan Karmakar/Task/index.html b/Sujan Karmakar/Task/index.html new file mode 100644 index 00000000..5ddad455 --- /dev/null +++ b/Sujan Karmakar/Task/index.html @@ -0,0 +1,69 @@ + + + + + + + Random Fetch - Task + + + + + + + + + + + + + + +
+

Random Tasks If You Get Bored

+
+
+ +
+
+ +
+

+
+
+
+ + + + + + + \ No newline at end of file diff --git a/Sujan Karmakar/Task/style.css b/Sujan Karmakar/Task/style.css new file mode 100644 index 00000000..f3e290c1 --- /dev/null +++ b/Sujan Karmakar/Task/style.css @@ -0,0 +1,137 @@ +/* Improved Styles for RandomFetch Pages */ +html { + overflow-y: auto; +} + +body { + min-height: 100vh; + background-color: #0F0F0F; + margin: 0; + font-family: 'Poppins', sans-serif; +} + +.box-container { + width: 100%; + min-height: calc(100vh - 100px); + display: flex; + justify-content: center; + align-items: flex-start; /* Align top with some margin */ + padding-top: 2rem; + padding-bottom: 2rem; + box-sizing: border-box; + margin-top: 3rem; +} + +.box { + width: 90%; + max-width: 500px; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + border-radius: 20px; + padding: 2.5rem; + color: white; + transition: all 0.4s ease; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; + /* justify-content: space-evenly; Removed to let gap handle spacing */ +} + +.box:hover { + transform: translateY(-5px); + border-color: rgba(0, 255, 157, 0.5); + box-shadow: 0 10px 40px rgba(0, 255, 157, 0.15); + background: rgba(255, 255, 255, 0.08); +} + +button { + background: transparent; + border: 2px solid #00FF9D; + color: #00FF9D; + padding: 1rem 2rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 50px; + cursor: pointer; + transition: all 0.3s ease; + width: 100%; + font-family: 'Poppins', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0; /* Handled by gap */ +} + +button:hover { + background: #00FF9D; + color: #0F0F0F; + box-shadow: 0 0 20px rgba(0, 255, 157, 0.4); + transform: translateY(-2px); +} + +button:active { + transform: translateY(0); +} + +.content-container { + width: 100%; + min-height: 200px; + max-height: 60vh; + padding: 1.5rem; + border: 1px solid rgba(0, 255, 157, 0.3); + border-radius: 15px; + overflow-y: auto; + background: rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + word-wrap: break-word; +} + +/* Scrollbar for content */ +.content-container::-webkit-scrollbar { + width: 8px; +} +.content-container::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 4px; +} +.content-container::-webkit-scrollbar-thumb { + background: #00FF9D; + border-radius: 4px; +} + +.content-container img { + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 4px 15px rgba(0,0,0,0.3); +} + +h1 { + text-align: center; + color: #fff; + margin-bottom: 2rem; + text-shadow: 0 0 10px rgba(0, 255, 157, 0.3); +} + +p { + font-size: 1.1rem; + line-height: 1.6; +} + +@media (max-width: 600px) { + .box { + padding: 1.5rem; + } + + button { + padding: 0.8rem 1.5rem; + font-size: 1rem; + } +} \ No newline at end of file diff --git a/Sujan Karmakar/app.js b/Sujan Karmakar/app.js new file mode 100644 index 00000000..d3bef656 --- /dev/null +++ b/Sujan Karmakar/app.js @@ -0,0 +1,18 @@ +let btn = document.querySelector("button"); +let para = document.querySelector("p"); + +let url = "https://catfact.ninja/fact"; + +async function getFacts() { + try { + let res = await axios.get(url); + return res.data.fact; + } catch (err) { + return (`Error : ${err}`); + } +} + +btn.addEventListener("click", async () => { + let data = await getFacts(); + para.innerText = `${data}`; +}); \ No newline at end of file diff --git a/Sujan Karmakar/assets/navScript.js b/Sujan Karmakar/assets/navScript.js new file mode 100644 index 00000000..42c24827 --- /dev/null +++ b/Sujan Karmakar/assets/navScript.js @@ -0,0 +1,101 @@ +const indicator = document.querySelector('#nav-indicator'); +const items = document.querySelectorAll('.nav-item'); + +// Store the current slider position. +items.forEach(item => { + item.addEventListener('click', (e) => { + // We save the position of the indicator AS IT IS NOW (under the current page's link) + // This becomes the "start point" for the animation on the next page. + sessionStorage.setItem('sliderLastLeft', indicator.offsetLeft); + sessionStorage.setItem('sliderLastWidth', indicator.offsetWidth); + }); +}); + +// Prevent browser from restoring scroll position +if ('scrollRestoration' in history) { + history.scrollRestoration = 'manual'; +} + +// On page load, animate from the last position to the new one. +window.addEventListener('DOMContentLoaded', () => { + // Force scroll to top on refresh to ensure header is visible + window.scrollTo(0, 0); + + const lastLeft = sessionStorage.getItem('sliderLastLeft'); + const lastWidth = sessionStorage.getItem('sliderLastWidth'); + + // Find the correct active item for the current page + const normalizePath = (path) => path.replace(/(\/index\.html|\/)$/, ''); + const currentPath = normalizePath(window.location.pathname); + let activeItem = Array.from(items).find(item => normalizePath(new URL(item.href).pathname) === currentPath); + if (!activeItem) activeItem = items[0]; // Default to home + + // Set active class on the correct item + items.forEach(item => item.classList.remove('active')); + activeItem.classList.add('active'); + + const targetLeft = activeItem.offsetLeft; + const targetWidth = activeItem.offsetWidth; + + if (lastLeft !== null && lastWidth !== null) { + // 1. Instantly set the slider to the LAST known position with no animation. + indicator.classList.add('no-transition'); + indicator.style.left = `${lastLeft}px`; + indicator.style.width = `${lastWidth}px`; + + // 2. Use a timeout to allow the browser to apply the initial state. + setTimeout(() => { + // 3. Remove the class to re-enable the slow transition. + indicator.classList.remove('no-transition'); + // 4. Set the final position, triggering the slow animation. + indicator.style.left = `${targetLeft}px`; + indicator.style.width = `${targetWidth}px`; + }, 10); + + // Clear the storage so that a refreshing page doesn't trigger the animation again + sessionStorage.removeItem('sliderLastLeft'); + sessionStorage.removeItem('sliderLastWidth'); + + } else { + // First visit, just set the indicator immediately. + indicator.style.left = `${targetLeft}px`; + indicator.style.width = `${targetWidth}px`; + } + + // Update slider on resize + let resizeTimer; + window.addEventListener('resize', () => { + indicator.classList.add('no-transition'); + indicator.style.left = `${activeItem.offsetLeft}px`; + indicator.style.width = `${activeItem.offsetWidth}px`; + + clearTimeout(resizeTimer); + resizeTimer = setTimeout(() => { + indicator.classList.remove('no-transition'); + }, 250); + }); + + // Hamburger Menu Logic + const hamburger = document.querySelector('.hamburger'); + const navLinks = document.querySelector('.nav-links'); + const links = document.querySelectorAll('.nav-links li'); + + if (hamburger) { + hamburger.addEventListener('click', () => { + // Toggle Sidebar + navLinks.classList.toggle('nav-active'); + + // Toggle Cross Animation + hamburger.classList.toggle('toggle'); + + // Animate Links + links.forEach((link, index) => { + if (link.style.animation) { + link.style.animation = ''; + } else { + link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`; + } + }); + }); + } +}); \ No newline at end of file diff --git a/Sujan Karmakar/assets/navStyle.css b/Sujan Karmakar/assets/navStyle.css new file mode 100644 index 00000000..af43ea91 --- /dev/null +++ b/Sujan Karmakar/assets/navStyle.css @@ -0,0 +1,303 @@ +body { + background-color: #0F0F0F; + margin: 0; + font-family: 'Poppins', sans-serif; +} + +html { + overflow: hidden; + background-color: #0F0F0F; +} + +::selection { + background: #555555; + color: #ffffff; +} + +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1000; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.8rem 2rem; + background-color: #1A1A1A; + border-bottom: 1px solid #333; + box-sizing: border-box; + min-height: 60px; +} + +.nav-brand { + display: flex; + align-items: center; + gap: 15px; + justify-self: start; +} + +.logo { + width: 38px; + height: 38px; + border-radius: 50%; + background: #1f1f1f; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 1rem; + border: 2px solid #00FF9D; + box-shadow: 0 0 10px rgba(0, 255, 157, 0.4); + text-shadow: 0 0 5px rgba(0, 255, 157, 0.8); +} + +.brand-title { + color: #f0f0f0; + font-size: 1.2rem; + font-weight: 700; + letter-spacing: 1px; + line-height: 1.2; + white-space: nowrap; +} + +.brand-subtitle { + color: #f0f0f0; + font-size: 0.85rem; + font-weight: 500; + letter-spacing: 0.5px; + opacity: 0.7; + white-space: nowrap; +} + +.brand-text { + display: flex; + flex-direction: column; +} + +.nav-links { + display: flex; + list-style: none; + margin: 0; + padding: 0; + gap: 25px; +} + +.nav-links a { + display: inline-flex; + align-items: center; + gap: 8px; + color: #f0f0f0; + text-decoration: none; + font-size: 1.1rem; + font-weight: 500; + padding: 10px 15px; + border-radius: 5px; + transition: all 0.3s ease; + -webkit-tap-highlight-color: transparent; + white-space: nowrap; +} + + +@media screen and (max-width: 1250px) { + .navbar { + padding: 0.8rem 1rem; + } + + .nav-links { + gap: 10px; + } + + .nav-links a { + padding: 8px 8px; + font-size: 0.95rem; + } + + .brand-title { + font-size: 1rem; + } + + .brand-subtitle { + font-size: 0.7rem; + } +} + +.nav-links a.active, +.nav-links a:active { + color: #fff; + text-shadow: 0 0 10px rgba(0, 255, 157, 0.8), 0 0 20px rgba(0, 255, 157, 0.6); /* Emerald glow */ +} + +@media (hover: hover) { + .nav-links a:hover { + transform: scale(1.15); + color: #fff; + text-shadow: 0 0 10px rgba(0, 255, 157, 0.8), 0 0 20px rgba(0, 255, 157, 0.6); /* Emerald glow */ + } +} + +#nav-indicator { + position: absolute; + bottom: 8px; + height: 4px; + background: #00FF9D; + box-shadow: 0 0 10px #00FF9D, 0 0 20px #00FF9D; + + transition: left 1.5s cubic-bezier(0.23, 1, 0.32, 1), width 1.5s cubic-bezier(0.23, 1, 0.32, 1); + border-radius: 2px; +} + + +#nav-indicator.no-transition { + transition: none !important; +} + + +.hamburger { + display: none; + cursor: pointer; + flex-direction: column; + justify-content: space-around; + height: 25px; + width: 30px; + z-index: 1001; +} + +.hamburger div { + width: 30px; + height: 3px; + background-color: white; + transition: all 0.3s ease; + border-radius: 2px; + transform-origin: center; +} + + +@media screen and (max-width: 1050px) { + .navbar { + display: flex; + justify-content: space-between; + } + + .desktop-socials { + display: none; + } + + .mobile-socials { + display: flex; + margin-left: 0; + margin-top: auto; /* Push to bottom */ + margin-bottom: 40px; + flex-wrap: wrap; + justify-content: center; + } + + body { + overflow-x: hidden; + } + + .nav-links { + position: fixed; + right: 0px; + height: 100vh; + top: 0; + background-color: #1A1A1A; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + width: 50%; + transform: translateX(100%); + transition: transform 0.5s ease-in; + z-index: 1000; + padding-top: 100px; + box-shadow: -2px 0 10px rgba(0,0,0,0.5); + gap: 0px; + } + + .nav-links li { + opacity: 0; + margin: 10px 0; + } + + .nav-links a { + font-size: 1.3rem; + } + + .hamburger { + display: flex; + } + + /* Hide the slider on mobile */ + #nav-indicator { + display: none; + } +} + +.nav-active { + transform: translateX(0%) !important; +} + +/* Animate Links */ +@keyframes navLinkFade { + from { + opacity: 0; + transform: translateX(50px); + } + to { + opacity: 1; + transform: translateX(0px); + } +} + +/* Hamburger to Cross Animation */ +.toggle .line1 { + transform: translateY(8.5px) rotate(45deg); +} + +.toggle .line2 { + opacity: 0; +} + +.toggle .line3 { + transform: translateY(-8.5px) rotate(-45deg); +} + +/* Glow Logic */ + +/* Default (Touch/No-Hover) Behavior: Always Glow */ +.hamburger div { + box-shadow: 0 0 10px #00FF9D, 0 0 20px #00FF9D; +} + +.hamburger.toggle div { + box-shadow: 0 0 10px red, 0 0 20px red; +} + +/* Hover-Capable Devices: Only Glow on Hover */ +@media (hover: hover) { + /* Reset default glow */ + .hamburger div { + box-shadow: none; + } + .hamburger.toggle div { + box-shadow: none; + } + + /* Apply glow on hover */ + .hamburger:hover div { + box-shadow: 0 0 10px #00FF9D, 0 0 20px #00FF9D; + } + + .hamburger.toggle:hover div { + box-shadow: 0 0 10px red, 0 0 20px red; + } +} + + +@media screen and (max-width: 600px) { + .nav-links { + width: 80%; + } +} \ No newline at end of file diff --git a/Sujan Karmakar/index.html b/Sujan Karmakar/index.html new file mode 100644 index 00000000..0f9ef536 --- /dev/null +++ b/Sujan Karmakar/index.html @@ -0,0 +1,62 @@ + + + + + + + Random Fetch + + + + + + + + + + + + + + +
+

Cat Facts

+
+ +
+
+ +
+

+
+
+
+ + + + + + + \ No newline at end of file diff --git a/Sujan Karmakar/style.css b/Sujan Karmakar/style.css new file mode 100644 index 00000000..f3e290c1 --- /dev/null +++ b/Sujan Karmakar/style.css @@ -0,0 +1,137 @@ +/* Improved Styles for RandomFetch Pages */ +html { + overflow-y: auto; +} + +body { + min-height: 100vh; + background-color: #0F0F0F; + margin: 0; + font-family: 'Poppins', sans-serif; +} + +.box-container { + width: 100%; + min-height: calc(100vh - 100px); + display: flex; + justify-content: center; + align-items: flex-start; /* Align top with some margin */ + padding-top: 2rem; + padding-bottom: 2rem; + box-sizing: border-box; + margin-top: 3rem; +} + +.box { + width: 90%; + max-width: 500px; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + border-radius: 20px; + padding: 2.5rem; + color: white; + transition: all 0.4s ease; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; + /* justify-content: space-evenly; Removed to let gap handle spacing */ +} + +.box:hover { + transform: translateY(-5px); + border-color: rgba(0, 255, 157, 0.5); + box-shadow: 0 10px 40px rgba(0, 255, 157, 0.15); + background: rgba(255, 255, 255, 0.08); +} + +button { + background: transparent; + border: 2px solid #00FF9D; + color: #00FF9D; + padding: 1rem 2rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 50px; + cursor: pointer; + transition: all 0.3s ease; + width: 100%; + font-family: 'Poppins', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0; /* Handled by gap */ +} + +button:hover { + background: #00FF9D; + color: #0F0F0F; + box-shadow: 0 0 20px rgba(0, 255, 157, 0.4); + transform: translateY(-2px); +} + +button:active { + transform: translateY(0); +} + +.content-container { + width: 100%; + min-height: 200px; + max-height: 60vh; + padding: 1.5rem; + border: 1px solid rgba(0, 255, 157, 0.3); + border-radius: 15px; + overflow-y: auto; + background: rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + word-wrap: break-word; +} + +/* Scrollbar for content */ +.content-container::-webkit-scrollbar { + width: 8px; +} +.content-container::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 4px; +} +.content-container::-webkit-scrollbar-thumb { + background: #00FF9D; + border-radius: 4px; +} + +.content-container img { + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 4px 15px rgba(0,0,0,0.3); +} + +h1 { + text-align: center; + color: #fff; + margin-bottom: 2rem; + text-shadow: 0 0 10px rgba(0, 255, 157, 0.3); +} + +p { + font-size: 1.1rem; + line-height: 1.6; +} + +@media (max-width: 600px) { + .box { + padding: 1.5rem; + } + + button { + padding: 0.8rem 1.5rem; + font-size: 1rem; + } +} \ No newline at end of file