first commit

nidhiupman568 · Jun 15, 2024 · 6e8294b · 6e8294b
commit 6e8294b
Show file tree

Hide file tree

Showing 104 changed files with 3,715 additions and 0 deletions.
diff --git a/Photo Gallery/index.html b/Photo Gallery/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Photo Gallery - BY NIDHI UPMAN</title>
+    <link rel="stylesheet" href="styles.css">
+  </head><div><div><center>
+   <h1> Photo Gallery - BY NIDHI UPMAN</h1>
+  </center></div><center>
+  <body>
+    <div class="container">
+      <h1>Photo Gallery</h1>
+      <h2>Enter the number of photos</h2>
+      <input
+        type="number"
+        id="input"
+        class="input"
+        value="2"
+        min="1"
+        max="10"
+      />
+      <small class="errorMessage" id="errorMessage">Error Message</small>
+      <button class="btn" id="btn">Get Photos</button>
+      <div class="gallery" id="gallery">
+        <img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
+        <img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
+        <img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
+        <img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
+      </div>
+    </div>
+    <script src="index.js"></script>
+  </body></center></div>
+</html>
diff --git a/Photo Gallery/index.js b/Photo Gallery/index.js
@@ -0,0 +1,48 @@
+const btnEl = document.getElementById("btn");
+const errorMessageEl = document.getElementById("errorMessage");
+const galleryEl = document.getElementById("gallery");
+
+async function fetchImage() {
+  const inputValue = document.getElementById("input").value;
+
+  if (inputValue > 10 || inputValue < 1) {
+    errorMessageEl.style.display = "block";
+    errorMessageEl.innerText = "Number should be between 0 and 11";
+    return;
+  }
+
+  imgs = "";
+
+  try {
+    btnEl.style.display = "none";
+    const loading = `<img src="spinner.svg" />`;
+    galleryEl.innerHTML = loading;
+    await fetch(
+      `https://api.unsplash.com/photos?per_page=${inputValue}&page=${Math.round(
+        Math.random() * 1000
+      )}&client_id=B8S3zB8gCPVCvzpAhCRdfXg_aki8PZM_q5pAyzDUvlc`
+    ).then((res) =>
+      res.json().then((data) => {
+        if (data) {
+          data.forEach((pic) => {
+            imgs += `
+            <img src=${pic.urls.small} alt="image"/>
+            `;
+            galleryEl.style.display = "block";
+            galleryEl.innerHTML = imgs;
+            btnEl.style.display = "block";
+            errorMessageEl.style.display = "none";
+          });
+        }
+      })
+    );
+  } catch (error) {
+    console.log(error);
+    errorMessageEl.style.display = "block";
+    errorMessageEl.innerHTML = "An error happened, try again later";
+    btnEl.style.display = "block";
+    galleryEl.style.display = "none";
+  }
+}
+
+btnEl.addEventListener("click", fetchImage);
diff --git a/Photo Gallery/styles.css b/Photo Gallery/styles.css
@@ -0,0 +1,75 @@
+
+body{
+    margin: 0;
+    font-family: 'Courier New', Courier, monospace;
+    background: linear-gradient(to bottom, lightgreen, lightblue);
+    display: flex;
+    min-height: 100vh;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.container{
+    background-color: aliceblue;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
+    width: 90%;
+    margin: 10px;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+}
+
+h2{
+    font-weight: 400;
+}
+
+.input{
+    padding: 20px 10px;
+    font-size: 18px;
+    background-color: white;
+    border-radius: 5px;
+    text-align: center;
+    width: 100px;
+}
+
+.errorMessage{
+    color: red;
+    font-weight: 600;
+    margin: 10px;
+    display: none;
+}
+
+.btn{
+    text-transform: uppercase;
+    width: 250px;
+    height: 45px;
+    margin: 20px 0;
+    font-size: 18px;
+    border-radius: 5px;
+    background-color: black;
+    color: aliceblue;
+
+}
+
+.btn:hover{
+    color: aliceblue;
+    background-color: green;
+    cursor: pointer;
+    transition: background-color 300ms ease-in-out;
+}
+.gallery img{
+    width: 400px;
+    height: 250px;
+    object-fit: cover;
+    border-radius: 5px;
+    margin: 5px;
+}
+
+.gallery{
+    display: none;
+}
diff --git a/animated-search-bar/index.html b/animated-search-bar/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animated Search Bar - NIDHI UPMAN  </title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <div>
+    <div>
+    <center>
+        <h1>Animated Search Bar - NIDHI UPMAN</h1>
+    </center>
+</div>
+<br>
+<br><center>
+  <body>
+    <div class="search-bar-container active">
+      <img
+        src="https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/magnifier-512.png"
+        alt="magnifier"
+        class="magnifier"
+      />
+      <input type="text" class="input" placeholder="Search ..." />
+      <img
+        src="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-25-512.png"
+        alt="mic-icon"
+        class="mic-icon"
+      />
+    </div>
+    <script src="index.js"></script>
+  </body></center>
+</div>
+</html>
diff --git a/animated-search-bar/index.js b/animated-search-bar/index.js
@@ -0,0 +1,7 @@
+const searchBarContainerEl = document.querySelector(".search-bar-container");
+
+const magnifierEl = document.querySelector(".magnifier");
+
+magnifierEl.addEventListener("click", () => {
+  searchBarContainerEl.classList.toggle("active");
+});
diff --git a/animated-search-bar/style.css b/animated-search-bar/style.css
@@ -0,0 +1,61 @@
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+  align-items: center;
+  background-color: aliceblue;
+}
+
+.search-bar-container {
+  display: flex;
+  align-items: center;
+  background-color: aliceblue;
+  padding: 5px;
+  width: 300px;
+  height: 50px;
+  border-radius: 50px;
+  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2),
+    -6px -6px 10px rgba(255, 255, 255, 0.7);
+  margin: 10px;
+  position: relative;
+  transition: width 1.5s;
+}
+
+.magnifier {
+  width: 25px;
+  cursor: pointer;
+  position: absolute;
+  left: 20px;
+}
+
+.mic-icon {
+  width: 30px;
+  position: absolute;
+  right: 10px;
+  transition: width 0.4s;
+  transition-delay: 1s;
+}
+
+.input {
+  background-color: transparent;
+  border: none;
+  margin: 10px 50px;
+  width: 100%;
+  outline: none;
+  color: rgb(100, 100, 100);
+  transition: width 1s;
+  transition-delay: 0.5s;
+}
+
+.active.search-bar-container {
+  width: 50px;
+}
+
+.active .input {
+  width: 0;
+}
+
+.active .mic-icon {
+  width: 0;
+}
diff --git a/auto-text-effect-animation/index.html b/auto-text-effect-animation/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auto Text Effect Animation - NIDHI UPMAN</title>
+    <link rel="stylesheet" href="style.css" />
+  </head><div>
+  <div>
+    <center>
+        <h1>Auto Text Effect Animation - NIDHI UPMAN</h1>
+    </center>
+</div><center>
+  <body>
+    <div class="container"></div><br><br>
+    <script src="index.js"></script>
+  </body>
+</center>
+</div>
+</html>
diff --git a/auto-text-effect-animation/index.js b/auto-text-effect-animation/index.js
@@ -0,0 +1,28 @@
+const containerEl = document.querySelector(".container");
+
+const careers = ["Software Developer", "Full Stack Web Developer", "Data Analyst", "Machine Learning Enginner"];
+
+let careerIndex = 0;
+
+let characterIndex = 0;
+
+updateText();
+
+function updateText() {
+  characterIndex++;
+  containerEl.innerHTML = `
+    <h1>I am ${careers[careerIndex].slice(0, 1) === "I" ? "an" : "a"} ${careers[
+    careerIndex
+  ].slice(0, characterIndex)}</h1>
+    `;
+
+  if (characterIndex === careers[careerIndex].length) {
+    careerIndex++;
+    characterIndex = 0;
+  }
+
+  if (careerIndex === careers.length) {
+    careerIndex = 0;
+  }
+  setTimeout(updateText, 400);
+}
diff --git a/auto-text-effect-animation/style.css b/auto-text-effect-animation/style.css
@@ -0,0 +1,11 @@
+@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
+
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+  align-items: center;
+  background-color: salmon;
+  font-family: "Permanent Marker", cursive;
+}
diff --git a/background-image-scroll-effect/bg.jpg b/background-image-scroll-effect/bg.jpg
diff --git a/background-image-scroll-effect/index.html b/background-image-scroll-effect/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Background Image Scroll Effect - BY NIDHI UPMAN</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <div><div>
+    <center>
+        <h1>Background Image Scroll Effect - BY NIDHI UPMAN</h1>
+    </center>
+</div><center>
+  <body>
+    <div class="bg-image" id="bg-image"></div>
+    <div class="container">
+      <h1>Welcome to our website</h1>
+      <p>
+        <h1> About Me</h1>
+      </p>
+      <p>
+        Hi, I'm Nidhi Upman!
+      </p>
+      <p>
+        I've graduated in Computer Science and Engineering .
+      </p>
+      <p>
+        I'm passionate about software engineering,
+
+front-end development, full-stack development, and data analysis. I also have a bit of knowledge in machine learning.
+      </p>
+      <p>
+        I'm currently seeking job opportunities where I can leverage my technical skills, strong communication abilities, and
+
+collaborative mindset. I thrive in dynamic, fast-paced environments and am eager to make a positive impact in software
+
+engineering.
+      </p>
+      <p>
+        If you're looking for a dedicated and enthusiastic professional, let's connect! Reach out and let's create
+
+something amazing together.
+      </p>
+    </div>
+    <script src="index.js"></script>
+  </body></center>
+</div>
+</html>
diff --git a/background-image-scroll-effect/index.js b/background-image-scroll-effect/index.js
@@ -0,0 +1,10 @@
+const bgImageEl = document.getElementById("bg-image");
+
+window.addEventListener("scroll", () => {
+  updateImage();
+});
+
+function updateImage() {
+  bgImageEl.style.opacity = 1 - window.pageYOffset / 900;
+  bgImageEl.style.backgroundSize = 160 - window.pageYOffset / 12 + "%";
+}