apna-college · sujan-karmakar · Jan 14, 2026
diff --git a/Sujan Karmakar/Dog Images/app.js 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";
+});
diff --git a/Sujan Karmakar/Dog Images/index.html b/Sujan Karmakar/Dog Images/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Random Fetch - Dog Images</title>
+	<link href="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.4.3/dist/css/coreui.min.css" rel="stylesheet"
+		integrity="sha384-oMIIhJL1T5s+PxJr6+Qb0pO1IRFB6OGMM+J57UBT3UQKxSVsb++MkXpu9cLqaJxu" crossorigin="anonymous">
+	<link href="https://cdn.jsdelivr.net/npm/@coreui/icons/css/all.min.css" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+	<link rel="stylesheet" href="../assets/navStyle.css">
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+		integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+		crossorigin="anonymous" referrerpolicy="no-referrer" />
+	<link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+	<nav class="navbar">
+		<div class="nav-brand">
+			<div class="logo">RF</div>
+			<div class="brand-text">
+				<div class="brand-title">Random Fetch <span class="material-icons"
+						style="font-size: 1.2rem; vertical-align: bottom;">api</span></div>
+				<div class="brand-subtitle">A project using random APIs</div>
+			</div>
+		</div>
+		<ul class="nav-links">
+			<li><a href="../index.html" class="nav-item"><i class="fa-solid fa-cat"></i> Cat Facts</a></li>
+			<li><a href="../Dog Images/index.html" class="nav-item"><i class="fa-solid fa-dog"></i> Dog Images</a></li>
+			<li><a href="../Jokes/index.html" class="nav-item"><i class="fa-solid fa-face-laugh-squint"></i> Jokes</a>
+			</li>
+			<li><a href="../Task/index.html" class="nav-item"><i class="fa-solid fa-list-check"></i> Tasks</a></li>
+			<li><a href="../Motivation/index.html" class="nav-item"><i class="fa-solid fa-quote-left"></i> Quotes</a></li>
+			<li><a href="../Guess about you/index.html" class="nav-item"><i class="fa-solid fa-user-secret"></i> Guess
+					about you</a></li>
+		</ul>
+		<div class="hamburger">
+			<div class="line1"></div>
+			<div class="line2"></div>
+			<div class="line3"></div>
+		</div>
+		<div id="nav-indicator"></div>
+	</nav>
+
+	<div class="container mt-5 pt-5">
+		<h1>Dog Images</h1>
+		<div id="content"></div>
+	</div>
+	<div class="box-container">
+		<div class="box">
+			<button>Show New Image</button>
+			<div class="content-container">
+
+			</div>
+		</div>
+	</div>
+
+	<script src="https://cdn.jsdelivr.net/npm/axios@1.13.2/dist/axios.min.js"></script>
+	<script src="../assets/navScript.js"></script>
+	<script src="app.js"></script>
+</body>
+
+</html>
diff --git a/Sujan Karmakar/Dog Images/style.css 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;
+    }
+}
diff --git a/Sujan Karmakar/Guess about you/app.js 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);
+            });
+        }
+    }
+});