diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..40b878d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
\ No newline at end of file
diff --git a/audioplayer/assets/maile.mp3 b/audioplayer/assets/maile.mp3
new file mode 100644
index 0000000..c16df20
Binary files /dev/null and b/audioplayer/assets/maile.mp3 differ
diff --git a/audioplayer/audioplayer.html b/audioplayer/audioplayer.html
new file mode 100644
index 0000000..1cf558f
--- /dev/null
+++ b/audioplayer/audioplayer.html
@@ -0,0 +1,70 @@
+
+
+
+
+ Audio Player
+
+
+ Hi, this is audio or music player build using ismple html, css, and javascript
+ This is a simple audio player with the functinality of play, pause, next, and farward. Here i have used
+ custom timing, next, pause, play and back functionality.
+
+
+
+
+
+
+
+
+
+ Maile Covered by John Chamling Rai
+
+
+ 00:00
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/audioplayer/js/audioplayer.js b/audioplayer/js/audioplayer.js
new file mode 100644
index 0000000..3fef5ca
--- /dev/null
+++ b/audioplayer/js/audioplayer.js
@@ -0,0 +1,77 @@
+let audioPlayer = document.getElementById("audio-player")
+let progressBar = document.getElementById("progressBar")
+let timer = document.querySelector(".audio-player-wrapper__timer")
+let audioPlayerWrapper = document.querySelector(".audio-player-wrapper")
+
+// controls
+let playBtn = document.querySelector(".audio-player-wrapper__play")
+let skipPrev = document.querySelector(".audio-player-wrapper__skipPrev")
+let skipNext = document.querySelector(".audio-player-wrapper__nextSkip")
+
+document.addEventListener("DOMContentLoaded", () => {
+ // Update progress bar as the audio plays
+ audioPlayer.addEventListener("timeupdate", () => {
+ const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100
+ progressBar.value = progress
+
+ // Calculate total time and current time
+ let totalSeconds = Math.floor(audioPlayer.duration || 0)
+ let minutes = Math.floor(totalSeconds / 60)
+ let seconds = totalSeconds % 60
+
+ let currentSeconds = Math.floor(audioPlayer.currentTime || 0)
+ let currentMinutes = Math.floor(currentSeconds / 60)
+ let currentDisplaySeconds = currentSeconds % 60
+
+ timer.innerHTML = `${currentMinutes
+ .toString()
+ .padStart(2, "0")}:${currentDisplaySeconds
+ .toString()
+ .padStart(2, "0")} / ${minutes}:${seconds.toString().padStart(2, "0")}`
+ })
+
+ // Play and pause functionality
+ playBtn.addEventListener("click", () => {
+ if (audioPlayer.paused) {
+ audioPlayer.play()
+ } else {
+ audioPlayer.pause()
+ }
+ })
+
+ // Update play/pause button icon
+ audioPlayer.addEventListener("play", () => {
+ playBtn.innerHTML = `Day 1 Assignments
+
+
+
+ Question 1 to 5 Consoles.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/day2/day2.html b/day2/day2.html
new file mode 100644
index 0000000..5c4e567
--- /dev/null
+++ b/day2/day2.html
@@ -0,0 +1,153 @@
+
+
+
+
+ Day Assignments
+
+
+
+ Day2 - Assignment 1
+
+ function isEven(num) {
+ let evenNumbers = []
+ for (let i = 1; i <= num; i++) { if (i % 2==0) { evenNumbers.push(i) } } return evenNumbers } // calling function and
+ function returns an array of even numbers. so we to loop through it. var even=isEven(100) // printing the array of
+ even numbers. console.log(even) // consoling each even number using for each loop. even.forEach((e)=> {
+ console.log(e)
+ })
+
+
+ Day2 - Assignment 2
+
+ // Create an array. Remove 3 elements starting from index 4, and insert 5 new elements at that position using the
+ appropriate method.
+
+ let fruits = [
+ "orange",
+ "apple",
+ "mango",
+ "grapes",
+ "pineaples",
+ "watermelon",
+ "guava",
+ "kiwi",
+ "strawberry",
+ ]
+ // removing the three elements from the fruits array.
+ fruits.pop() //this remove n-1 element
+ fruits.pop() // this remove n-2 element
+ fruits.pop() // this remove n-3 element
+
+ // ===== note that is implementing below
+ // or we can use splice() to remove the element from an array.
+ console.table(fruits)
+
+ // adding the element from index 4
+
+ fruits.splice(4, 0, "newFruit1", "newFruit2", "newFruit3") //starting from index 4 and remove 0 element from the array.
+ console.table(fruits)
+
+
+ Day2 - Assignment 3
+ // Create an array.
+ // Remove first element
+ // Remove last element
+ // Add new element at the beginning
+ // Add a new element at the end
+ // Console log all the arrays along with the original modified array.
+
+ const sampleArray = [
+ "apple",
+ "banana",
+ "cherry",
+ "date",
+ "elderberry",
+ "fig",
+ "grape",
+ "honeydew",
+ "kiwi",
+ "lemon",
+ ]
+ console.log("original array")
+ console.table(sampleArray)
+
+ // removing the first element of the array
+ sampleArray.shift()
+ console.log("removing the first element")
+ console.log(sampleArray)
+
+ // removing the last element
+ sampleArray.pop()
+ console.log("removing the element from the last")
+ console.log(sampleArray)
+
+ // adding the new element add the beginning
+ sampleArray.unshift("guava")
+ console.log("adding new element at the beginning")
+ console.log(sampleArray)
+
+ //add new element at the end
+ sampleArray.push("lastelement")
+ console.log("adding new element at last")
+ console.log(sampleArray)
+
+ Day2 -Assignment 4
+
+ // Create a new array element.
+ // Create a new array with the multiplication of 5
+ // Create a new array finding the maximum number of new array (task number 4.a)
+ // Also list out the even numbers of both new and original array.
+
+ const arrayNumbers = [1, 2, 3, 4, 5, 20, 6, 7, 8, 9, 10, 40, 60, 90, 200]
+
+ // creating a new array that is multiple of 5
+ let newArrayNumbers = arrayNumbers.map((x) => x * 5)
+
+ // creating new array based on newArrayNumbers, finding the maximum number.
+
+ // ========= METHOD 1
+ let maxNumber = newArrayNumbers.reduce((acc, curr) => (acc > curr ? acc : curr))
+ let newMaxArray = []
+ newMaxArray.push(maxNumber)
+
+ // ======== METHOD 2
+ let max = 0
+ for (let i = 0; i < newArrayNumbers.length; i++) { if (max> newArrayNumbers[i]) {
+ max = max
+ } else {
+ max = newArrayNumbers[i]
+ }
+ }
+
+ // defining new array
+ let newMaxArray1 = []
+ newMaxArray1.push(max)
+ // Consoling the output
+ // original array
+ console.log("Original array: ")
+ console.log(arrayNumbers)
+
+ // multiple of five
+ console.log("Multiple of 5 array:")
+ console.log(newArrayNumbers)
+
+ // max array
+ console.log("Finding the max array element using reduce function")
+ console.log(newMaxArray)
+ // second method console
+ console.log("Finding the max array elemment using loop:")
+ console.log(newMaxArray1)
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/day5/assets/css/slider.css b/day5/assets/css/slider.css
new file mode 100644
index 0000000..24c765d
--- /dev/null
+++ b/day5/assets/css/slider.css
@@ -0,0 +1,55 @@
+* {
+ margin: 0px;
+ padding: 0px;
+ box-sizing: border-box;
+}
+
+.swiper {
+ width: 100%;
+ height: 400px;
+}
+
+.thumbs-swiper {
+ width: 100%;
+ height: 150px;
+ margin-bottom: 20px;
+ padding: 20px 30px;
+}
+
+.swiper-slide img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ -o-object-position: center;
+ object-position: center;
+ overflow: hidden;
+}
+.swiper-slide img:hover {
+ cursor: pointer;
+}
+
+.thumbs-swiper .swiper-slide img {
+ border-radius: 10px;
+}
+
+@media screen and (min-width: 768px) {
+ .swiper {
+ height: 500px;
+ }
+ .thumbs-swiper {
+ height: 120px;
+ }
+}
+@media screen and (min-width: 1024px) {
+ .swiper,
+ .thumbs-swiper {
+ max-width: 1920px;
+ }
+ .swiper {
+ height: 760px;
+ }
+ .thumbs-swiper {
+ height: 200px;
+ }
+}/*# sourceMappingURL=slider.css.map */
\ No newline at end of file
diff --git a/day5/assets/css/slider.css.map b/day5/assets/css/slider.css.map
new file mode 100644
index 0000000..c6ee941
--- /dev/null
+++ b/day5/assets/css/slider.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["slider.scss","slider.css"],"names":[],"mappings":"AAAA;EACE,WAAA;EACA,YAAA;EACA,sBAAA;ACCF;;ADEA;EACE,WAAA;EACA,aAAA;ACCF;;ADEA;EACE,WAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;ACCF;;ADEA;EACE,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;EAEA,gBAAA;ACAF;ADEE;EACE,eAAA;ACAJ;;ADIA;EACE,mBAAA;ACDF;;ADIA;EACE;IACE,aAAA;ECDF;EDIA;IACE,aAAA;ECFF;AACF;ADKA;EACE;;IAEE,iBAAA;ECHF;EDMA;IACE,aAAA;ECJF;EDOA;IACE,aAAA;ECLF;AACF","file":"slider.css"}
\ No newline at end of file
diff --git a/day5/assets/css/slider.scss b/day5/assets/css/slider.scss
new file mode 100644
index 0000000..0082909
--- /dev/null
+++ b/day5/assets/css/slider.scss
@@ -0,0 +1,59 @@
+* {
+ margin: 0px;
+ padding: 0px;
+ box-sizing: border-box;
+}
+
+.swiper {
+ width: 100%;
+ height: 400px;
+}
+
+.thumbs-swiper {
+ width: 100%;
+ height: 150px;
+ margin-bottom: 20px;
+ padding: 20px 30px;
+}
+
+.swiper-slide img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+
+ overflow: hidden;
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.thumbs-swiper .swiper-slide img {
+ border-radius: 10px;
+}
+
+@media screen and (min-width: 768px) {
+ .swiper {
+ height: 500px;
+ }
+
+ .thumbs-swiper {
+ height: 120px;
+ }
+}
+
+@media screen and (min-width: 1024px) {
+ .swiper,
+ .thumbs-swiper {
+ max-width: 1920px;
+ }
+
+ .swiper {
+ height: 760px;
+ }
+
+ .thumbs-swiper {
+ height: 200px;
+ }
+}
diff --git a/day5/assets/image1.jpg b/day5/assets/image1.jpg
new file mode 100644
index 0000000..c851391
Binary files /dev/null and b/day5/assets/image1.jpg differ
diff --git a/day5/assets/image2.jpg b/day5/assets/image2.jpg
new file mode 100644
index 0000000..3dc61b7
Binary files /dev/null and b/day5/assets/image2.jpg differ
diff --git a/day5/assets/image3.jpg b/day5/assets/image3.jpg
new file mode 100644
index 0000000..70ac4c1
Binary files /dev/null and b/day5/assets/image3.jpg differ
diff --git a/day5/assets/image4.jpg b/day5/assets/image4.jpg
new file mode 100644
index 0000000..6fa5bc8
Binary files /dev/null and b/day5/assets/image4.jpg differ
diff --git a/day5/assets/image5.jpg b/day5/assets/image5.jpg
new file mode 100644
index 0000000..68a4b6f
Binary files /dev/null and b/day5/assets/image5.jpg differ
diff --git a/day5/assets/image6.jpg b/day5/assets/image6.jpg
new file mode 100644
index 0000000..739faf5
Binary files /dev/null and b/day5/assets/image6.jpg differ
diff --git a/day5/assets/image7.jpg b/day5/assets/image7.jpg
new file mode 100644
index 0000000..739faf5
Binary files /dev/null and b/day5/assets/image7.jpg differ
diff --git a/day5/assets/image8.jpg b/day5/assets/image8.jpg
new file mode 100644
index 0000000..540d3e2
Binary files /dev/null and b/day5/assets/image8.jpg differ
diff --git a/day5/slider.html b/day5/slider.html
new file mode 100644
index 0000000..05b4f32
--- /dev/null
+++ b/day5/slider.html
@@ -0,0 +1,37 @@
+
+
+
+
+ Slider using SwiperJS
+ JavaScript Final Assignment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Sports. Week. Extravaganza.
+
+ 3 Teams.
+ 1 Category.
+ Endless Fun.
+
+
Discover the Teams
+
+
+
+
+
+
+
+ Featured Teams Members
+
+
+
+
+
+
+
+
Team Member 2
+
+
+
+
+
Team Member 3
+
+
+
+
+
Team Member 4
+
+
+
+
+
Team Member 1
+
+
+
+
+
Team Member 1
+
+
+
+
+
Team Member 1
+
+
+
+
+
Team Member 1
+
+
+
+
+
Team Member 1
+
+
+
+
+
+
+
+
+
+ Our Events Teams
+
+
+
+
+
+
+
+
Team 1
+
+
+
+
+
Team 1
+
+
+
+
+
Team 1
+
+
+
+
+
Team 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/final/js/bubble.js b/final/js/bubble.js
new file mode 100644
index 0000000..16f46f9
--- /dev/null
+++ b/final/js/bubble.js
@@ -0,0 +1,91 @@
+const canvas = document.getElementById("bubbleCanvas")
+const ctx = canvas.getContext("2d")
+
+canvas.width = window.innerWidth
+canvas.height =350
+
+// Bubble class for handling each bubble's properties
+class Bubble {
+ constructor(x, y, radius, speedX, speedY, color) {
+ this.x = x
+ this.y = y
+ this.radius = radius
+ this.speedX = speedX
+ this.speedY = speedY
+ this.color = color
+ }
+
+ // Update the bubble's position and handle collision
+ update(bubbles) {
+ this.x += this.speedX
+ this.y += this.speedY
+
+ // Check for collision with the left and right edges and reverse the direction
+ if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
+ this.speedX = -this.speedX // Reverse direction on collision with edges
+ }
+
+ // Check for collision with the top and bottom edges
+ if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
+ this.speedY = -this.speedY // Bounce vertically without resetting
+ }
+
+ // Check for collision with other bubbles
+ for (let i = 0; i < bubbles.length; i++) {
+ if (this === bubbles[i]) continue
+
+ let dx = this.x - bubbles[i].x
+ let dy = this.y - bubbles[i].y
+ let distance = Math.sqrt(dx * dx + dy * dy)
+
+ if (distance < this.radius + bubbles[i].radius) {
+ this.speedX = -this.speedX
+ this.speedY = -this.speedY
+ this.color = getRandomColor()
+ }
+ }
+ }
+
+ // Draw the bubble
+ draw() {
+ ctx.beginPath()
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
+ ctx.fillStyle = this.color
+ ctx.fill()
+ ctx.closePath()
+ }
+}
+
+// Function to get random color
+function getRandomColor() {
+ const letters = "0123456789ABCDEF"
+ let color = "#"
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)]
+ }
+ return color
+}
+
+// Initialize bubbles
+let bubbles = []
+for (let i = 0; i < 6; i++) {
+ let radius = Math.random() * 30 + 10 // Bubble size between 10px and 40px
+ let x = Math.random() * canvas.width
+ let y = Math.random() * canvas.height
+ let speedX = (Math.random() - 0.5) * 3
+ let speedY = (Math.random() - 0.5) * 3
+ let color = getRandomColor()
+ bubbles.push(new Bubble(x, y, radius, speedX, speedY, color))
+}
+
+// Animation loop
+function animate() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
+ for (let bubble of bubbles) {
+ bubble.update(bubbles)
+ bubble.draw()
+ }
+ requestAnimationFrame(animate)
+}
+
+animate()
diff --git a/final/js/gsap.js b/final/js/gsap.js
new file mode 100644
index 0000000..4e616bb
--- /dev/null
+++ b/final/js/gsap.js
@@ -0,0 +1,174 @@
+gsap.registerPlugin(ScrollTrigger)
+
+// gradient colors collection
+const gradients = [
+ "linear-gradient(90deg, #D3F1DF, #85A98F)",
+ "linear-gradient(180deg, #D3F1DF, #5A6C57)",
+ "linear-gradient(45deg, #D3F1DF, #525B44)",
+ "linear-gradient(135deg, #85A98F, #5A6C57)",
+ "linear-gradient(360deg, #85A98F, #525B44)",
+ "radial-gradient(circle, #D3F1DF, #5A6C57)",
+ "radial-gradient(ellipse, #85A98F, #525B44)",
+ "radial-gradient(circle at center, #5A6C57, #D3F1DF)",
+]
+
+// Popup Section
+
+let gradientIndex = 0
+
+function changeGradient() {
+ gradientIndex = (gradientIndex + 1) % gradients.length
+
+ gsap.to(".popup", {
+ background: gradients[gradientIndex],
+ duration: 1,
+ })
+
+ gsap.to("#navbar", {
+ background: gradients[gradientIndex],
+ duration: 0.5,
+ })
+}
+setInterval(changeGradient, 5000)
+
+const text = document.getElementById("popup")
+const textContent = text.textContent
+text.innerHTML = textContent
+ .split(" ")
+ .map((word) => {
+ const color = gsap.utils.random([
+ "#2C3E50",
+ "#4A4A4A",
+ "#4B6A52",
+ "#3E4E43",
+ "#333333",
+ "#2C3E47",
+ ])
+ return ``
+ })
+ .join("")
+
+gsap.from(".popup-word", {
+ opacity: 0,
+ y: 20,
+ duration: 1,
+ stagger: 0.5,
+ ease: "power1.out",
+ onComplete: () => {
+ document.querySelector(".container__navbar").scrollIntoView({
+ behavior: "smooth",
+ })
+
+ // Animate the navbar after scrolling
+ gsap.fromTo(".container__navbar", {
+ y: 0,
+ duration: 2,
+ ease: "power2.inOut",
+ })
+ },
+})
+// Popup Section End
+
+// Menu Open
+
+document.addEventListener("DOMContentLoaded", () => {
+ let menu = document.querySelector(".menu")
+ let navbar = document.querySelector(".navbar__list")
+ let close = document.querySelector(".close")
+ let tl = gsap.timeline()
+
+ tl.to(".navbar__list", {
+ right: 0,
+ duration: 1.5,
+ })
+
+ tl.from(".navbar__item", {
+ x: 100,
+ duration: 0.8,
+ stagger: 0.5,
+ opacity: 0,
+ })
+ tl.pause()
+
+ if (menu) {
+ menu.addEventListener("click", (e) => {
+ tl.play()
+ })
+ } else {
+ console.log("menu is not")
+ }
+
+ // for closing the menu bar
+
+ if (close) {
+ close.addEventListener("click", (e) => {
+ tl.reverse()
+ })
+ } else {
+ console.log("close is not loaded.")
+ }
+})
+
+// End of Menu Open
+
+// Leadspace section
+let leadspace__title = document.querySelector(".leadspace__title")
+leadspace__title.innerHTML = leadspace__title.textContent
+ .split(" ")
+ .map((word) => {
+ const color = gsap.utils.random([
+ "#2C3E50",
+ "#4A4A4A",
+ "#4B6A52",
+ "#3E4E43",
+ "#333333",
+ "#2C3E47",
+ ])
+ return `${word} `
+ })
+ .join("javascript Assignments
day 1
@@ -48,14 +44,11 @@ javascript Assignments
day 2
-
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+