+
+
+
+
+
What is your name ?
+
+
+
+
+
+
+
+
+ My name is Nidhi Upman.
+
+
+
+
+
+
+
+
Tell me about yourself ?
+
+
+
+
+
+
+
+
+ I've graduated in Computer Science and Engineering and 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.
+
+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. If you're looking for a dedicated and enthusiastic professional, let's connect! Reach out and let's create
+
+something amazing together.
+
+
+
+
+
+
+
+
+
+
Tell me about your skils ?
+
+
+
+
+
+
+
+
+
+ C++,Python, java, Go Lang, OOPS,DSALGO,Web development...etc
+
+
+
+
+
+
+
+
+
diff --git a/q-and-a-section/styles.css b/q-and-a-section/styles.css
new file mode 100644
index 0000000..e802a47
--- /dev/null
+++ b/q-and-a-section/styles.css
@@ -0,0 +1,127 @@
+/*
+===============
+Fonts
+===============
+*/
+
+/*
+===============
+Variables
+===============
+*/
+
+:root {
+ /* dark shades of primary color*/
+ --clr-primary-1: hsl(205, 86%, 17%);
+ --clr-primary-2: hsl(205, 77%, 27%);
+ --clr-primary-3: hsl(205, 72%, 37%);
+ --clr-primary-4: hsl(205, 63%, 48%);
+ /* primary/main color */
+ --clr-primary-5: #49a6e9;
+ /* lighter shades of primary color */
+ --clr-primary-6: hsl(205, 89%, 70%);
+ --clr-primary-7: hsl(205, 90%, 76%);
+ --clr-primary-8: hsl(205, 86%, 81%);
+ --clr-primary-9: hsl(205, 90%, 88%);
+ --clr-primary-10: hsl(205, 100%, 96%);
+ /* darkest grey - used for headings */
+ --clr-grey-1: hsl(209, 61%, 16%);
+ --clr-grey-2: hsl(211, 39%, 23%);
+ --clr-grey-3: hsl(209, 34%, 30%);
+ --clr-grey-4: hsl(209, 28%, 39%);
+ /* grey used for paragraphs */
+ --clr-grey-5: hsl(210, 22%, 49%);
+ --clr-grey-6: hsl(209, 23%, 60%);
+ --clr-grey-7: hsl(211, 27%, 70%);
+ --clr-grey-8: hsl(210, 31%, 80%);
+ --clr-grey-9: hsl(212, 33%, 89%);
+ --clr-grey-10: hsl(210, 36%, 96%);
+ --clr-white: #fff;
+ --clr-red-dark: hsl(360, 67%, 44%);
+ --clr-red-light: hsl(360, 71%, 66%);
+ --clr-green-dark: hsl(125, 67%, 44%);
+ --clr-green-light: hsl(125, 71%, 66%);
+ --clr-gold: #c59d5f;
+ --clr-black: #222;
+ --ff-primary: "Roboto", sans-serif;
+ --ff-secondary: "Open Sans", sans-serif;
+ --transition: all 0.3s linear;
+ --spacing: 0.25rem;
+ --radius: 0.5rem;
+ --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+ --max-width: 1170px;
+ --fixed-width: 620px;
+}
+/*
+===============
+Global Styles
+===============
+*/
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+ background: #ebebeb;
+}
+
+p {
+ margin-bottom: 1.25rem;
+ color: grey;
+}
+
+.section-center {
+ width: 90vw;
+ margin: 50px auto 0;
+ max-width: 620px;
+}
+.question {
+ background: white;
+ border-radius: 0.5rem;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ padding: 1.5rem 1.5rem 0 1.5rem;
+ margin-bottom: 2rem;
+}
+.question-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ text-transform: capitalize;
+ padding-bottom: 1rem;
+}
+
+.question-title p {
+ letter-spacing: 0.1rem;
+ color: yellowgreen;
+ font-weight: bolder;
+}
+.question-btn {
+ font-size: 1.5rem;
+ background: transparent;
+ border-color: transparent;
+ cursor: pointer;
+ color: yellowgreen;
+}
+
+.question-text {
+ padding: 1rem 0 1.5rem 0;
+ border-top: 1px solid grey;
+}
+
+/* hide text */
+.question-text {
+ display: none;
+}
+.show-text .question-text {
+ display: block;
+}
+.minus-icon {
+ display: none;
+}
+.show-text .minus-icon {
+ display: inline;
+}
+.show-text .plus-icon {
+ display: none;
+}
diff --git a/random-emoji/index.html b/random-emoji/index.html
new file mode 100644
index 0000000..70e7d43
--- /dev/null
+++ b/random-emoji/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
Random Emoji - BY NIDHI UPMAN
+
+
+
+ Random Emoji - BY NIDHI UPMAN
+
+
+
+
Random Emoji
+
+
+
+
\ No newline at end of file
diff --git a/random-emoji/index.js b/random-emoji/index.js
new file mode 100644
index 0000000..a768eb0
--- /dev/null
+++ b/random-emoji/index.js
@@ -0,0 +1,27 @@
+const btnEl = document.getElementById("btn");
+const emojiNameEl = document.getElementById("emoji-name");
+
+const emoji = [];
+
+async function getEmoji() {
+ let response = await fetch(
+ "https://emoji-api.com/emojis?access_key=773b58f681fb786fafdb8392e8b8a75ddc177fd1"
+ );
+
+ data = await response.json();
+
+ for (let i = 0; i < 1500; i++) {
+ emoji.push({
+ emojiName: data[i].character,
+ emojiCode: data[i].unicodeName,
+ });
+ }
+}
+
+getEmoji();
+
+btnEl.addEventListener("click", () => {
+ const randomNum = Math.floor(Math.random() * emoji.length);
+ btnEl.innerText = emoji[randomNum].emojiName;
+ emojiNameEl.innerText = emoji[randomNum].emojiCode;
+});
diff --git a/random-emoji/style.css b/random-emoji/style.css
new file mode 100644
index 0000000..37b110b
--- /dev/null
+++ b/random-emoji/style.css
@@ -0,0 +1,41 @@
+body{
+ padding: 0;
+ margin: 0;
+ background: salmon;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 100vh;
+ align-items: center;
+ font-family: 'Courier New', Courier, monospace;
+}
+
+h2{
+ font-size: 2rem;
+ color: aliceblue;
+}
+
+.section{
+ text-align: center;
+}
+
+.btn{
+ font-size: 5rem;
+ border: none;
+ background: rgb(255,255,255,.2);
+ border-radius: 10px;
+ padding: 15px;
+ filter: grayscale();
+ transition: filter .2s ease-in-out;
+ cursor: pointer;
+
+}
+
+.btn:hover{
+ filter: grayscale(0);
+}
+
+.emoji-name{
+ font-weight: 600;
+ color: darkblue;
+}
\ No newline at end of file
diff --git a/random-photos/index.html b/random-photos/index.html
new file mode 100644
index 0000000..422a9fb
--- /dev/null
+++ b/random-photos/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
Random Photos - BY NIDHI UPMAN
+
+
+
+
+ Random Photos - BY NIDHI UPMAN
+
+
+
+
+
Load More
+
+
+
+
diff --git a/random-photos/index.js b/random-photos/index.js
new file mode 100644
index 0000000..905ae67
--- /dev/null
+++ b/random-photos/index.js
@@ -0,0 +1,18 @@
+const imageContainerEl = document.querySelector(".image-container");
+
+const btnEl = document.querySelector(".btn");
+
+btnEl.addEventListener("click", () => {
+ imageNum = 10;
+ addNewImages();
+});
+
+function addNewImages() {
+ for (let index = 0; index < imageNum; index++) {
+ const newImgEl = document.createElement("img");
+ newImgEl.src = `https://picsum.photos/300?random=${Math.floor(
+ Math.random() * 2000
+ )}`;
+ imageContainerEl.appendChild(newImgEl);
+ }
+}
diff --git a/random-photos/style.css b/random-photos/style.css
new file mode 100644
index 0000000..42161d6
--- /dev/null
+++ b/random-photos/style.css
@@ -0,0 +1,35 @@
+body {
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: brown;
+}
+
+.image-container {
+ text-align: center;
+}
+
+.image-container img {
+ margin: 10px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ background-color: lightgray;
+ width: 300px;
+ height: 300px;
+}
+
+.btn {
+ background-color: slateblue;
+ border: none;
+ padding: 10px 20px;
+ margin: 20px;
+ color: white;
+ border-radius: 5px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ cursor: pointer;
+}
+
+.btn:hover {
+ opacity: 0.9;
+}
diff --git a/random-quote-generator/index.html b/random-quote-generator/index.html
new file mode 100644
index 0000000..124981a
--- /dev/null
+++ b/random-quote-generator/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
Random Quote Generator - BY NIDHI UPMAN
+
+
+
+
+
+ Random Quote Generator - BY NIDHI UPMAN
+
+
+
+
+
Random Quote Generator
+
+ Quote
+
+
~ Author
+
Get a quote
+
+
+
+
\ No newline at end of file
diff --git a/random-quote-generator/index.js b/random-quote-generator/index.js
new file mode 100644
index 0000000..801cc29
--- /dev/null
+++ b/random-quote-generator/index.js
@@ -0,0 +1,33 @@
+const btnEl = document.getElementById("btn");
+const quoteEl = document.getElementById("quote");
+const authorEl = document.getElementById("author");
+
+const apiURL = "https://api.quotable.io/random";
+
+async function getQuote() {
+ try {
+ btnEl.innerText = "Loading...";
+ btnEl.disabled = true;
+ quoteEl.innerText = "Updating...";
+ authorEl.innerText = "Updating...";
+ const response = await fetch(apiURL);
+ const data = await response.json();
+ const quoteContent = data.content;
+ const quoteAuthor = data.author;
+ quoteEl.innerText = quoteContent;
+ authorEl.innerText = "~ " + quoteAuthor;
+ btnEl.innerText = "Get a quote";
+ btnEl.disabled = false;
+ console.log(data);
+ } catch (error) {
+ console.log(error);
+ quoteEl.innerText = "An error happened, try again later";
+ authorEl.innerText = "An error happened";
+ btnEl.innerText = "Get a quote";
+ btnEl.disabled = false;
+ }
+}
+
+getQuote()
+
+btnEl.addEventListener("click", getQuote);
diff --git a/random-quote-generator/style.css b/random-quote-generator/style.css
new file mode 100644
index 0000000..e67e3f5
--- /dev/null
+++ b/random-quote-generator/style.css
@@ -0,0 +1,54 @@
+body {
+ margin: 0;
+ display: flex;
+ min-height: 100vh;
+ justify-content: center;
+ align-items: center;
+ font-family: "Courier New", Courier, monospace;
+ background: linear-gradient(to left bottom, lightgreen, lightblue);
+}
+
+.container {
+ background-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
+ padding: 30px;
+ border-radius: 15px;
+ width: 90%;
+ margin: 10px;
+ text-align: center;
+}
+
+.heading {
+ font-size: 35px;
+ font-weight: 700;
+}
+
+.quote {
+ font-size: 30px;
+ font-weight: 600;
+}
+
+.author {
+ font-size: 25px;
+ margin: 10px;
+ font-style: italic;
+}
+
+.btn {
+ font-size: 18px;
+ border-radius: 5px;
+ cursor: pointer;
+ padding: 10px;
+ margin-top: 15px;
+ background-color: rgba(255, 255, 255, 0.3);
+ border-color: rgba(255, 255, 255, 0.6);
+ text-transform: uppercase;
+ width: 300px;
+}
+
+.btn:hover{
+ background-color: rgba(255,255,255,.6);
+ box-shadow: 0 4px 4px rgba(0,0,0,.3);
+ transition: all 300ms ease-in-out;
+ color: green;
+}
diff --git a/recipe-book-app/index.html b/recipe-book-app/index.html
new file mode 100644
index 0000000..027c6e5
--- /dev/null
+++ b/recipe-book-app/index.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
Recipe Book App - BY NIDHI UPMAN
+
+
+
+
+ Recipe Book App - BY NIDHI UPMAN
+
+
+
+
+
+
+
+
+
diff --git a/recipe-book-app/index.js b/recipe-book-app/index.js
new file mode 100644
index 0000000..d35b3b8
--- /dev/null
+++ b/recipe-book-app/index.js
@@ -0,0 +1,50 @@
+const API_KEY = "275d58779ccf4e22af03e792e8819fff";
+const recipeListEl = document.getElementById("recipe-list");
+
+function displayRecipes(recipes) {
+ recipeListEl.innerHTML = "";
+ recipes.forEach((recipe) => {
+ const recipeItemEl = document.createElement("li");
+ recipeItemEl.classList.add("recipe-item");
+ recipeImageEl = document.createElement("img");
+ recipeImageEl.src = recipe.image;
+ recipeImageEl.alt = "recipe image";
+
+ recipeTitleEl = document.createElement("h2");
+ recipeTitleEl.innerText = recipe.title;
+
+ recipeIngredientsEl = document.createElement("p");
+ recipeIngredientsEl.innerHTML = `
+
Ingredients: ${recipe.extendedIngredients
+ .map((ingredient) => ingredient.original)
+ .join(", ")}
+ `;
+
+ recipeLinkEl = document.createElement("a");
+ recipeLinkEl.href = recipe.sourceUrl;
+ recipeLinkEl.innerText = "View Recipe";
+
+ recipeItemEl.appendChild(recipeImageEl);
+ recipeItemEl.appendChild(recipeTitleEl);
+ recipeItemEl.appendChild(recipeIngredientsEl);
+ recipeItemEl.appendChild(recipeLinkEl);
+ recipeListEl.appendChild(recipeItemEl);
+ });
+}
+
+async function getRecipes() {
+ const response = await fetch(
+ `https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
+ );
+
+ const data = await response.json();
+
+ return data.recipes;
+}
+
+async function init() {
+ const recipes = await getRecipes();
+ displayRecipes(recipes);
+}
+
+init();
diff --git a/recipe-book-app/style.css b/recipe-book-app/style.css
new file mode 100644
index 0000000..9e56d02
--- /dev/null
+++ b/recipe-book-app/style.css
@@ -0,0 +1,104 @@
+body {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+}
+
+header {
+ background: #0c2461;
+ color: #fff;
+ padding: 20px;
+ text-align: center;
+}
+
+h1 {
+ margin: 0;
+ font-size: 36px;
+}
+
+.container {
+ margin: 0 auto;
+ max-width: 1200px;
+ padding: 20px;
+}
+
+.recipe-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.recipe-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ border-radius: 5px;
+ overflow: hidden;
+}
+
+.recipe-item img {
+ width: 150px;
+ height: 150px;
+ object-fit: cover;
+}
+
+.recipe-item h2 {
+ margin: 0;
+ font-size: 20px;
+ padding: 10px;
+ min-width: 200px;
+}
+
+.recipe-item p {
+ margin: 0;
+ padding: 10px;
+ color: #777;
+}
+
+.recipe-item a {
+ background: #0c2461;
+ color: #fff;
+ min-width: 150px;
+ padding: 10px;
+ text-decoration: none;
+ text-transform: uppercase;
+ font-size: 14px;
+ transition: background 0.3s ease;
+}
+
+.recipe-item a:hover {
+ background: #1e3799;
+}
+
+@media screen and (max-width: 768px) {
+ .container {
+ max-width: 90%;
+ }
+ .recipe-item {
+ flex-direction: column;
+ }
+
+ .recipe-item img {
+ width: 100%;
+ height: auto;
+ margin-bottom: 10px;
+ }
+
+ .recipe-item h2 {
+ font-size: 20px;
+ padding: 0;
+ margin-bottom: 10px;
+ }
+
+ .recipe-item p {
+ font-size: 14px;
+ margin-bottom: 10px;
+ }
+
+ .recipe-item a {
+ width: 100%;
+ text-align: center;
+ }
+}
diff --git a/rotating-image-gallery/index.html b/rotating-image-gallery/index.html
new file mode 100644
index 0000000..4bfd03b
--- /dev/null
+++ b/rotating-image-gallery/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
Rotating Image Gallery - BY NIDHI UPMAN
+
+
+
+
+ Rotating Image Gallery - BY NIDHI UPMAN
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Prev
+ Next
+
+
+
+
diff --git a/rotating-image-gallery/index.js b/rotating-image-gallery/index.js
new file mode 100644
index 0000000..fa1fde4
--- /dev/null
+++ b/rotating-image-gallery/index.js
@@ -0,0 +1,26 @@
+const imageContainerEl = document.querySelector(".image-container");
+
+const prevEl = document.getElementById("prev");
+const nextEl = document.getElementById("next");
+let x = 0;
+let timer;
+prevEl.addEventListener("click", () => {
+ x = x + 45;
+ clearTimeout(timer);
+ updateGallery();
+});
+nextEl.addEventListener("click", () => {
+ x = x - 45;
+ clearTimeout(timer);
+ updateGallery();
+});
+
+function updateGallery() {
+ imageContainerEl.style.transform = `perspective(1000px) rotateY(${x}deg)`;
+ timer = setTimeout(() => {
+ x = x - 45;
+ updateGallery();
+ }, 3000);
+}
+
+updateGallery();
diff --git a/rotating-image-gallery/style.css b/rotating-image-gallery/style.css
new file mode 100644
index 0000000..6dd8ffc
--- /dev/null
+++ b/rotating-image-gallery/style.css
@@ -0,0 +1,63 @@
+body {
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ height: 100vh;
+ justify-content: center;
+ background-color: black;
+ overflow: hidden;
+}
+
+.image-container {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ transform-style: preserve-3d;
+ transform: perspective(1000px) rotateY(0deg);
+ transition: transform 0.7s;
+}
+
+.image-container span {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
+}
+
+.image-container span img {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+}
+
+.btn-container {
+ position: relative;
+ width: 80%;
+}
+
+.btn {
+ position: absolute;
+ bottom: -80px;
+ background-color: slateblue;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.btn:hover {
+ filter: brightness(1.5);
+}
+
+#prev {
+ left: 20%;
+}
+
+#next {
+ right: 20%;
+}
diff --git a/step-progress-bar/index.html b/step-progress-bar/index.html
new file mode 100644
index 0000000..a60fed8
--- /dev/null
+++ b/step-progress-bar/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
Step Progress Bar - BY NIDHI UPMAN
+
+
+
+
+
+ Step Progress Bar - BY NIDHI UPMAN
+
+
+
+
+
+
+
+
+ Start
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/step-progress-bar/index.js b/step-progress-bar/index.js
new file mode 100644
index 0000000..23b3511
--- /dev/null
+++ b/step-progress-bar/index.js
@@ -0,0 +1,61 @@
+const nextEl = document.getElementById("next");
+const prevEl = document.getElementById("prev");
+
+const progressEl = document.querySelector(".progress-bar-front");
+
+const stepsEl = document.querySelectorAll(".step");
+
+let currentChecked = 1;
+
+nextEl.addEventListener("click", () => {
+ currentChecked++;
+ if (currentChecked > stepsEl.length) {
+ currentChecked = stepsEl.length;
+ }
+ updateStepProgress();
+});
+
+prevEl.addEventListener("click", () => {
+ currentChecked--;
+ if (currentChecked < 1) {
+ currentChecked = 1;
+ }
+ updateStepProgress();
+});
+
+function updateStepProgress() {
+ stepsEl.forEach((stepEl, idx) => {
+ if (idx < currentChecked) {
+ stepEl.classList.add("checked");
+ stepEl.innerHTML = `
+
+
${
+ idx === 0
+ ? "Start"
+ : idx === stepsEl.length - 1
+ ? "Final"
+ : "Step " + idx
+ }
+ `;
+ } else {
+ stepEl.classList.remove("checked");
+ stepEl.innerHTML = `
+
+ `;
+ }
+ });
+
+ const checkedNumber = document.querySelectorAll(".checked");
+
+ progressEl.style.width =
+ ((checkedNumber.length - 1) / (stepsEl.length - 1)) * 100 + "%";
+
+ if (currentChecked === 1) {
+ prevEl.disabled = true;
+ } else if (currentChecked === stepsEl.length) {
+ nextEl.disabled = true;
+ } else {
+ prevEl.disabled = false;
+ nextEl.disabled = false;
+ }
+}
diff --git a/step-progress-bar/style.css b/step-progress-bar/style.css
new file mode 100644
index 0000000..dcc340e
--- /dev/null
+++ b/step-progress-bar/style.css
@@ -0,0 +1,97 @@
+body {
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ height: 100vh;
+ align-items: center;
+ background-color: yellow;
+}
+
+.container {
+ text-align: center;
+}
+
+.progress-container {
+ width: 500px;
+ display: flex;
+ position: relative;
+ justify-content: space-between;
+}
+
+.progress-bar-back {
+ position: absolute;
+ height: 4px;
+ width: 100%;
+ background-color: lightgray;
+ border: none;
+ z-index: -1;
+ margin: 0;
+ top: 50%;
+ transform: translateY(-50%);
+}
+.progress-bar-front {
+ position: absolute;
+ height: 4px;
+ width: 0%;
+ background-color: green;
+ border: none;
+ z-index: -1;
+ margin: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ transition: 0.4s linear width;
+}
+
+.step {
+ width: 30px;
+ height: 30px;
+ background-color: white;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 4px solid lightgray;
+ color: lightgray;
+}
+
+.step.checked {
+ color: green;
+ border-color: green;
+ transition: all 0.4s linear;
+ transition-delay: 0.3s;
+}
+
+.step.checked small {
+ position: absolute;
+ bottom: -20px;
+ font-family: cursive;
+}
+
+.btn {
+ background-color: slateblue;
+ border: none;
+ color: white;
+ padding: 10px 20px;
+ margin: 70px 10px 0;
+ border-radius: 5px;
+ cursor: pointer;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.btn:hover {
+ opacity: 0.9;
+}
+
+.btn:active {
+ transform: scale(0.97);
+}
+
+.btn:disabled {
+ background-color: lightgray;
+}
+
+@media (max-width: 500px) {
+ .progress-container {
+ width: 90vw;
+ }
+}
diff --git a/video-trailer-popup/index.html b/video-trailer-popup/index.html
new file mode 100644
index 0000000..1598d6f
--- /dev/null
+++ b/video-trailer-popup/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
Video Trailer Popup - BY NIDHI UPMAN
+
+
+
+
+
+ Video Trailer Popup - BY NIDHI UPMAN
+
+
+
+
+
+
About Me
+
+ Hi, I'm Nidhi Upman! I've graduated in Computer Science and Engineering and 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.
+
+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. If you're looking for a dedicated and enthusiastic professional, let's connect! Reach out and let's create
+
+something amazing together.
+
+
Watch now
+
+
+
+
+
diff --git a/video-trailer-popup/index.js b/video-trailer-popup/index.js
new file mode 100644
index 0000000..17c9771
--- /dev/null
+++ b/video-trailer-popup/index.js
@@ -0,0 +1,14 @@
+const btnEl = document.querySelector(".btn");
+const closeIconEl = document.querySelector(".close-icon");
+const trailerContainerEl = document.querySelector(".trailer-container");
+const videoEl = document.querySelector("video");
+
+btnEl.addEventListener("click", () => {
+ trailerContainerEl.classList.remove("active");
+});
+
+closeIconEl.addEventListener("click", () => {
+ trailerContainerEl.classList.add("active");
+ videoEl.pause();
+ videoEl.currentTime = 0;
+});
diff --git a/video-trailer-popup/style.css b/video-trailer-popup/style.css
new file mode 100644
index 0000000..82b012e
--- /dev/null
+++ b/video-trailer-popup/style.css
@@ -0,0 +1,83 @@
+body {
+ margin: 0;
+ box-sizing: border-box;
+ font-family: sans-serif;
+ display: flex;
+ justify-content: center;
+ height: 100vh;
+ align-items: center;
+ background-color: black;
+}
+
+.main-container {
+ max-width: 550px;
+ padding: 10px;
+}
+
+.main-container img {
+ max-width: 100%;
+ margin-bottom: 15px;
+ border-radius: 10px;
+}
+
+.main-container h1 {
+ color: white;
+ font-weight: 500;
+}
+
+.main-container p {
+ color: white;
+ margin: 15px 0;
+}
+
+.btn {
+ background-color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+.btn:hover {
+ background-color: orange;
+}
+
+.trailer-container {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: black;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 1;
+ transition: opacity 0.7s;
+}
+
+.active.trailer-container {
+ visibility: hidden;
+ opacity: 0;
+}
+
+.trailer-container video {
+ position: relative;
+ max-width: 900px;
+ outline: none;
+}
+
+@media (max-width: 991px) {
+ .trailer-container video {
+ max-width: 90%;
+ }
+}
+
+.close-icon {
+ position: absolute;
+ top: 30px;
+ right: 30px;
+ color: white;
+ cursor: pointer;
+}
diff --git a/video-trailer-popup/trailer.mp4 b/video-trailer-popup/trailer.mp4
new file mode 100644
index 0000000..9712b6f
Binary files /dev/null and b/video-trailer-popup/trailer.mp4 differ
diff --git a/weight-converter/index.html b/weight-converter/index.html
new file mode 100644
index 0000000..c447ada
--- /dev/null
+++ b/weight-converter/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
Weight Converter - BY NIDHI UPMAN
+
+
+
+
+
+ Weight Converter - BY NIDHI UPMAN
+
+
+
+
+
Weight Converter
+
+ Pounds:
+
+
Your weight in kg is:
+
+
+
\ No newline at end of file
diff --git a/weight-converter/index.js b/weight-converter/index.js
new file mode 100644
index 0000000..faf2a44
--- /dev/null
+++ b/weight-converter/index.js
@@ -0,0 +1,24 @@
+const inputEl = document.getElementById("input");
+const errorEl = document.getElementById("error");
+const resultEl = document.getElementById("result");
+let errorTime;
+let resultTime;
+function updateResults() {
+ if (inputEl.value <= 0 || isNaN(inputEl.value)) {
+ errorEl.innerText = "Please enter a valid number!";
+ clearTimeout(errorTime);
+ errorTime = setTimeout(() => {
+ errorEl.innerText = "";
+ inputEl.value = "";
+ }, 2000);
+ } else {
+ resultEl.innerText = (+inputEl.value / 2.2).toFixed(2);
+ clearTimeout(resultTime);
+ resultTime = setTimeout(() => {
+ resultEl.innerText = "";
+ inputEl.value = "";
+ }, 10000);
+ }
+}
+
+inputEl.addEventListener("input", updateResults);
diff --git a/weight-converter/style.css b/weight-converter/style.css
new file mode 100644
index 0000000..e69936b
--- /dev/null
+++ b/weight-converter/style.css
@@ -0,0 +1,42 @@
+body{
+ margin: 0;
+ background: linear-gradient(to left top, yellow, lightblue, yellow);
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: 'Courier New', Courier, monospace;
+ color: darkcyan;
+}
+
+.container{
+ background: rgba(255,255,255,0.3);
+ padding: 20px;
+ box-shadow: 0 4px 10px rgba(0,0,0,.3);
+ border-radius: 10px;
+ width: 85%;
+ max-width: 450px;
+}
+
+.input-container{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 18px;
+ font-weight: 700;
+}
+
+.input{
+ padding: 10px;
+ width: 70%;
+ background: rgba(255,255,255,0.3);
+ border-color: rgba(255,255,255,0.5);
+ font-size: 18px;
+ border-radius: 10px;
+ color: darkgreen;
+ outline: none;
+}
+
+.error{
+ color: red;
+}
\ No newline at end of file
+ 
`;
+ 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 += `
+ 
+
+ 
+ 
+ 
+ Unhappy
+ 
+ Neutral
+ 
+ Satisfied
+ 
+