diff --git a/JavaScript/Image_Slider/Image1.png b/JavaScript/Image_Slider/Image1.png new file mode 100644 index 000000000..fb4a1bcc1 Binary files /dev/null and b/JavaScript/Image_Slider/Image1.png differ diff --git a/JavaScript/Image_Slider/Image2.jpg b/JavaScript/Image_Slider/Image2.jpg new file mode 100644 index 000000000..8293ca616 Binary files /dev/null and b/JavaScript/Image_Slider/Image2.jpg differ diff --git a/JavaScript/Image_Slider/Image3.png b/JavaScript/Image_Slider/Image3.png new file mode 100644 index 000000000..1d9e94fa9 Binary files /dev/null and b/JavaScript/Image_Slider/Image3.png differ diff --git a/JavaScript/Image_Slider/Index.html b/JavaScript/Image_Slider/Index.html new file mode 100644 index 000000000..82ce2c9ef --- /dev/null +++ b/JavaScript/Image_Slider/Index.html @@ -0,0 +1,29 @@ + + + + + + Image Slider + + + + +
+
+ +
+
+ +
+
+ +
+ + < + > +
+ + + + + \ No newline at end of file diff --git a/JavaScript/Image_Slider/README.md b/JavaScript/Image_Slider/README.md new file mode 100644 index 000000000..3259d4533 --- /dev/null +++ b/JavaScript/Image_Slider/README.md @@ -0,0 +1,18 @@ +# Image Slider using JavaScript + +This script creates an image slider that automatically cycles through a set of images. It's a great way to showcase a series of images or create a banner on your website. + + +## Setup instructions + +- Open the `Image_Slider` directory and run the `index.html` file in the web browser. +- Images can be updated as per users choice + + +## Output + +Video of output is [here](https://www.veed.io/view/ce5cd8e2-1c07-43f8-b76a-1aedf11b8f1f?panel=share) + +## Author + +Mahima Churi diff --git a/JavaScript/Image_Slider/slider.js b/JavaScript/Image_Slider/slider.js new file mode 100644 index 000000000..c8f545189 --- /dev/null +++ b/JavaScript/Image_Slider/slider.js @@ -0,0 +1,26 @@ + +var currentindex = 1 +displaySlides(currentindex); //Displaying the first slide + +function setSlides(num){ + + displaySlides(currentindex+=num) //updating which slides to display + +} + +function displaySlides(num){ + var x; + var slides = document.getElementsByClassName("Images"); + if (num > slides.length){ //Looping back to first slide + currentindex = 1 + } + if (num < 1){ //looping back to last slide + currentindex = slides.length + } + for(x =0 ; x " next and "<" previous buttons */ + .slider-btn{ + cursor: pointer; + position: fixed; + top: 50%; + width: auto; + padding: 8px 16px; + margin-top: -22px; + color: rgb(0, 0, 0); + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + background-color: rgba(201, 201, 201, 0.932); + border-radius: 50%; + } + + /* setting the position of the previous button towards left */ + .prev-btn { + left: 10px; + } + /* setting the position of the next button towards right */ + .next-btn { + right: 10px; + } + + /* On hover, adding a background color */ + .prev-btn:hover, + .next-btn:hover { + color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.8); + } \ No newline at end of file diff --git a/JavaScript/README.md b/JavaScript/README.md index b349ce6b0..b722e297f 100644 --- a/JavaScript/README.md +++ b/JavaScript/README.md @@ -30,3 +30,5 @@ - [Who don't follow you on Instagram](Who_Don't_Follow_You) - [Who unfollowed you on Github](Github_Unfollowers) - [LinkedIn endorsements](LinkedIn_Endorsements) +- [Type Writer Animation](Typewriter_Animation) +- [Image Slider](Image_Slider) diff --git a/JavaScript/Typewriter_Animation/README.md b/JavaScript/Typewriter_Animation/README.md new file mode 100644 index 000000000..2799e1314 --- /dev/null +++ b/JavaScript/Typewriter_Animation/README.md @@ -0,0 +1,19 @@ +# Typing Animation using JavaScript + +This script creates a typing effect where text is gradually displayed on the screen, as if it's being typed. +It is used to make websites more engaging. + + +## Setup instructions + +- Open the `Typewriter_Animation` directory and run the `index.html` file in the web browser. +- The text content in `typeWriter.js` can be updated as per user's choice + + +## Output + +Video of output is [here](https://www.veed.io/view/04495b8a-6cd6-4683-84fd-b5e01ac74232?panel=share) + +## Author + +Mahima Churi diff --git a/JavaScript/Typewriter_Animation/index.html b/JavaScript/Typewriter_Animation/index.html new file mode 100644 index 000000000..a836d6396 --- /dev/null +++ b/JavaScript/Typewriter_Animation/index.html @@ -0,0 +1,14 @@ + + + + + Typing Animation + + +
+

+
+ + + + diff --git a/JavaScript/Typewriter_Animation/style.css b/JavaScript/Typewriter_Animation/style.css new file mode 100644 index 000000000..a9eea169c --- /dev/null +++ b/JavaScript/Typewriter_Animation/style.css @@ -0,0 +1,21 @@ +*{ + overflow: hidden; + background-color: bisque; +} +.typewriter { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + width: 100vw; + } + +#text { + font-family: monospace; + font-size: 20px; + white-space: nowrap; + overflow: hidden; + text-align: center; + border-right: 2px solid #000; + } + \ No newline at end of file diff --git a/JavaScript/Typewriter_Animation/typeWriter.js b/JavaScript/Typewriter_Animation/typeWriter.js new file mode 100644 index 000000000..21ca7e03e --- /dev/null +++ b/JavaScript/Typewriter_Animation/typeWriter.js @@ -0,0 +1,17 @@ +const text = "Hello, World..!!"; +let index = 0; +const textElement = document.getElementById("text"); + +function typeWriter() { + textElement.textContent = text.substring(0, index); + + if (index < text.length) { + index++; + } else { + index = 0; // Reset index to 0 once it reaches the end of the text + } + + setTimeout(typeWriter, 300); +} + +typeWriter();