Typing Animation Javascript Added

HarshCasper · Jul 25, 2023 · 0b22e49 · 0b22e49
1 parent b43a764
commit 0b22e49
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 0 deletions.
diff --git a/JavaScript/Image_Slider/Image1.png b/JavaScript/Image_Slider/Image1.png
diff --git a/JavaScript/Image_Slider/Image2.jpg b/JavaScript/Image_Slider/Image2.jpg
diff --git a/JavaScript/Image_Slider/Image3.png b/JavaScript/Image_Slider/Image3.png
diff --git a/JavaScript/Image_Slider/Index.html b/JavaScript/Image_Slider/Index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Slider</title>
+    <link rel="stylesheet" href="style.css">  <!--Styles and layout of the page can be changed from here -->
+</head>
+<body>
+
+    <div class="ImageSlides">
+        <div class="Images">
+            <img src="Image1.png">          <!--Images can be added as per users choice here-->
+        </div>
+        <div class="Images">
+            <img src="Image2.jpg">
+        </div>
+        <div class="Images">
+            <img src="Image3.png">
+        </div>
+
+        <a class="prev-btn slider-btn" onclick="setSlides(-1)"><</a>
+        <a class="next-btn slider-btn" onclick="setSlides(1)">></a>
+    </div>
+
+
+    <script src="slider.js"></script>
+</body>
+</html>
diff --git a/JavaScript/Image_Slider/README.md 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
@@ -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 <slides.length ; x++){    //hiding all slides
+        slides[x].style.display = "none";
+
+    }
+
+    slides[currentindex - 1].style.display = "block";  //making only one slide visible
+}
diff --git a/JavaScript/Image_Slider/style.css b/JavaScript/Image_Slider/style.css
@@ -0,0 +1,53 @@
+*{
+  overflow: hidden;
+}
+.Images {
+    display: none
+  }
+
+  img {
+    margin: auto;
+    display: block;
+    width: 100%;
+  }
+
+  /* Our main images-slideshow container */
+  .ImageSlides {
+    max-width: 612px;
+    position: relative;
+    margin: auto;
+  }
+
+  /*Style for ">" 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);
+  }
diff --git 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
@@ -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
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <title>Typing Animation</title>
+</head>
+<body>
+  <div class="typewriter">
+    <h2 id="text"></h2>
+  </div>
+
+  <script src="typeWriter.js"></script>
+</body>
+</html>
diff --git a/JavaScript/Typewriter_Animation/style.css 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;
+  }
+
diff --git a/JavaScript/Typewriter_Animation/typeWriter.js 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();