DEV Community: Vasanth_sv

Auto Writing Effect

Vasanth_sv — Mon, 10 Apr 2023 10:15:19 +0000

The js makes everything simple

1.The auto writing Effect is purely done by javascript.
2.The speed of writing can be changed.The Pause and Resume features is added.
3.We can type out text and make the auto typing effect.
4.The given text is sliced by slice method.
5.The setTimeout function is used to call the typeEffect() function in the given second.
6.The textarea is used to enter the custom text.

Image Slider

Vasanth_sv — Sun, 08 May 2022 05:08:50 +0000

THE HTML part

 <body>
        <h1>The Image Slider</h1>
     <div class="slider">
<div class="slides">
        <img src="https://images.pexels.com/photos/355321/pexels-photo-355321.jpeg?cs=srgb&dl=pexels-pixabay-355321.jpg&fm=jpg" alt="Photo 1" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/1546166/pexels-photo-1546166.jpeg?cs=srgb&dl=pexels-david-mcbee-1546166.jpg&fm=jpg" alt="Photo 2" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/853199/pexels-photo-853199.jpeg?cs=srgb&dl=pexels-artem-beliaikin-853199.jpg&fm=jpg" alt="Photo 3" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?cs=srgb&dl=pexels-pixabay-33545.jpg&fm=jpg" alt="Photo 4" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg?cs=srgb&dl=pexels-eberhard-grossgasteiger-443446.jpg&fm=jpg" alt="Photo 5" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/1287460/pexels-photo-1287460.jpeg?cs=srgb&dl=pexels-asad-photo-maldives-1287460.jpg&fm=jpg" alt="Photo 6" />
      </div>
      <div class="slides">
        <img src="https://images.pexels.com/photos/1643389/pexels-photo-1643389.jpeg?cs=srgb&dl=pexels-vecislavas-popa-1643389.jpg&fm=jpg" alt="Photo 7" />
</div>


      <button class="btn btn__left">&larr;</button>
      <button class="btn btn__right">&rarr;</button>
      <div class="dots"></div>
    </div>
</body>

The css part

   * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        background-color: rgb(122, 184, 255);
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
          sans-serif;
        background: url(https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?cs=srgb&dl=pexels-moose-photos-1037992.jpg&fm=jpg);
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
      }
      h1 {
        text-align: center;
      }
      .slider {
        position: relative;
        max-width: 80%;
        height: 35vmax;
box-shadow: 5px 10px 20px 10px grey;
        margin: 20px auto;
        overflow: hidden;
        top: 0;
      }
      .slides {
        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        transition: transform 1.3s ease;
      }
      .slides > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .btn {
        width: 60px;
        height: 60px;
        z-index: 10;
        position: absolute;
        text-align: center;
        background-color: transparent;
        border: none;
        font-size: 3em;
        font-weight: 1000;
        cursor: pointer;
        color: rgb(253, 139, 139);
      }
      .btn__left {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 6%;
        top: 45%;
      }
      .btn__right {
        position: absolute;
        transform: translate(50%, -50%);
        right: 6%;
        top: 45%;
      }
      .btn:hover {
        color: lightblue;
      }
      .dots {
        position: absolute;
        left: 40%;
        bottom: 5%;
        display: flex;
      }
      .dot {
        width: 0.9vmax;
        height: 0.9vmax;
        border-radius: 50%;
        border: none;
        margin-right: 5px;
        transition: all 0.7s ease;
        top: 80%;
        background-color: lightblue;
        margin-right: 1.5rem;
      }
      .dot__active {
        background-color: rgb(253, 139, 139);
      }
      @media only screen and (max-width: 689px) {
        .slider {
          width: 100%;
          height: 35%;
        }
        .dots {
          left: 25%;
        }
        .btn {
          font-size: 1.8rem;
        }
      }
      @media only screen and (max-width: 400px) {
        h1 {
          font-size: 1.7rem;
        }
        .slider {
          width: 100%;
          height: 20%;
        }
        .dots {
          left: 13%;
        }
      } ;

The js part

 const slider = document.querySelector(".slider");
      const slides = document.querySelectorAll(".slides");
      const btnLeft = document.querySelector(".btn__left");
      const btnRight = document.querySelector(".btn__right");
      const dotContainer = document.querySelector(".dots");
      let curSlide = 0;
      let maxSlide = slides.length - 1;

      const createNewdots = function () {
        slides.forEach((_, i) => {
          dotContainer.insertAdjacentHTML(
            "beforeend",
            `<button class="dot" data-slide="${i}"></button>`
          );
        });
      };
      // moving logic
      const slideMover = function (curSlide) {
        slides.forEach((s, i) => {
          s.style.transform = `translate(${100 * (i - curSlide)}%)`;
        });
      };
       // Active dot logic
      const dotActive = function (curr) {
        document.querySelectorAll(".dot").forEach((s, i) => {
          s.classList.remove("dot__active");
        });
        document
          .querySelector(`.dot[data-slide="${curr}"]`)
          .classList.add("dot__active");
        curSlide = curr;
      };
  // sliding forward
      const nextSlide = function () {
        if (curSlide == maxSlide) {
          curSlide = 0;
        } else {
          curSlide++;
        }
        slideMover(curSlide);
        dotActive(curSlide);
      };
// sliding backward
      const prevSlide = function () {
        if (curSlide == 0) {
          curSlide = maxSlide;
        } else {
          curSlide--;
        }
        slideMover(curSlide);
        dotActive(curSlide);
        clearInterval(automatic);
      };

      const initializer = function () {
        slideMover(0);
        createNewdots();
        dotActive(0);
      };
      initializer();

      btnRight.addEventListener("click", nextSlide);
      btnRight.addEventListener("click", function () {
        clearInterval(automatic);
      });
      btnLeft.addEventListener("click", prevSlide);
      dotContainer.addEventListener("click", function (e) {
        if (e.target.classList.contains("dot")) {
          const clicked = e.target.dataset.slide;

          slideMover(clicked);
          dotActive(clicked);
          clearInterval(automatic);
        }
      });
document .addEventListener("keydown",function(e){
  console.log(e.key)
  if(e.key==="ArrowRight"){

    nextSlide()
         clearInterval(automatic);
  }
  if (e.key==="ArrowLeft"){
    prevSlide()
         clearInterval(automatic);

  }
})
// automatic sliding effect
      const automatic = setInterval(() => {
        nextSlide();
      }, 2000);

html

creating div having class "slider"
inside slider div another div called slides each slides have the images
creating buttons Left and Right
creating div called dot

CSS

giving height,width and overflow hidden, position to slider div

2.giving display flex,absolute to slide div

3.using media query made it to responsive

JS
1.using transform:translateX() we make the slide to move
2.implementing forward and backward sliding moment logics
3.creating dot buttons inside Dots container
4.giving dot button logics

smooth scrolling

Vasanth_sv — Wed, 04 May 2022 13:55:27 +0000

The HTML code,

<nav class="nav">
      <ul class="nav__links">
        <li class="nav__item">
          <a class="nav__link" href="#section-1">Home</a>
        </li>
        <li class="nav__item">
          <a class="nav__link" href="#section-2">Operations</a>
        </li>{% embed  %}
        <li class="nav__item">
          <a class="nav__link" href="#section-3">Funds</a>
        </li>
        <li class="nav__item">
          <a class="nav__link" href="#section-4">Open account</a>
        </li>
        <li class="nav__item">
          <a class="nav__link" href="#section-5">close account</a>
        </li>
      </ul>
    </nav>
    <div class="main">
      <div class="section" id="section-1">
        <h1>section-1</h1>
      </div>
      <div class="section" id="section-2"><h1>section-2</h1></div>
      <div class="section" id="section-3"><h1>section-3</h1></div>
      <div class="section" id="section-4"><h1>section-4</h1></div>
      <div class="section" id="section-5"><h1>section-5</h1></div>
    </div>```



## css styles


```* {
        margin: 0;
      }
      .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 5rem;
        width: 100%;
        padding: 0;
        background-color: bisque;
      }

      .nav__links {
        display: flex;
        align-items: center;
        list-style: none;
      }

      .nav__item {
        margin-left: 4rem;
      }

      .nav__link{
        font-size: 1.7rem;
        font-weight: 400;
        color: inherit;
        text-decoration: none;
        display: block;
        transition: all 0.3s;
      }
      .main {
        width: 100%;
        height: auto;
      }

      .section {
        width: 100%;
        position: relative;
        height: 50rem;
        background-color: #ff585f;
        text-align: center;
        border-bottom: 2px solid #000;
        text-transform: capitalize;
      }```


## The JavaScript,


```const allLinks=document.querySelectorAll(".nav__link")
 const navLink=document.querySelector(".nav__links");

      navLink.addEventListener("click",function(e){
       e.preventDefault();
        if(e.target.classList.contains("nav__link")){
          const clicked=e.target.getAttribute("href");
      document.querySelector(clicked).scrollIntoView({behavior:"smooth"});
      //red color on clicked link
          e.target.style.color="red";

        }
        // clearing the red color after 2sec
        setTimeout(()=>{allLinks.forEach((s,i)=>{
        if(e.target.color="red"){

             s.style.color="black";
            }
        })},5000)
      })```

New year countdown

Vasanth_sv — Fri, 31 Dec 2021 14:41:01 +0000

html codes

<html>
<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>Timer</title>
    <link rel="stylesheet" href="timer.css" />
  </head>
  <body>
    <h1>countdown timer</h1>
    <div class="container">
      <div class="days">
        <p class="bigText" id="days">0</p>
        <span>days</span>
      </div>
      <div class="hours">
        <p class="bigText" id="hours">0</p>
        <span>hours</span>
      </div>
      <div class="minutes">
        <p class="bigText" id="minutes">0</p>
        <span>mins</span>
      </div>
      <div class="seconds">
        <p class="bigText" id="seconds">0</p>
        <span>seconds</span>
      </div>
      <div class="newContent hidden"></div>
      <div class="images hidden">
      <img src="https://wallpaperaccess.com/thumb/7673258.jpg"  />
      </div>
    </div>

    <script src="timer.js"></script>
  </body>
</html>

css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-image: url(https://images.pexels.com/photos/624015/pexels-photo-624015.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  background-attachment: initial;
  background-position: center;
  font-family: "Poppins", sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 4rem;
  margin-top: -7%;
  color: rgb(109, 221, 221);
  text-transform: capitalize;
  box-shadow: 2px 2px 7px rgb(123, 209, 190),
    -2px -2px 7px rgba(39, 80, 194, 0.938);
  border-radius: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.container {
  display: flex;
  margin-top: -20px;
  text-align: center;
  text-transform: capitalize;
}
.bigText {
  font-weight: bold;
  font-size: 3.5rem;
  margin: 3rem 2rem 0.5rem 2rem;
  color: rgb(28, 1, 78);
  text-shadow: 2px 2px 5px rgb(106, 194, 187);
  box-shadow: 2px 2px 7px rgb(123, 209, 190), -2px -2px 7px rgba(39, 80, 194, 1);
  padding: 10px 20px;
  border-radius: 2px;
}

.container span {
  font-size: 1.5rem;
  color: rgb(145, 203, 226);
  /* box-shadow: 2px 2px 5px rgb(255, 255, 255), -2px -2px 5px rgb(80, 138, 224);
  border-radius: 5px;
 */
}

.images {
  position: absolute;
  min-width: 30%;
  height: 70%;
  background-color: antiquewhite;
  top: 15%;
  left: 25%;
  z-index: 10;
}
img {
  position: relative;
  z-index: 10;
  opacity: 1;
}
.newContent {
  position: absolute;

  background-color: thistle;
  opacity: 0.3;
  filter: blur(100px);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 7;
  /* transform: translate(-29.6%, -33%); */
}

.hidden {
  display: none;
}

/* media queries */

@media screen and (max-width: 1000px) {
  .images {
    left: 15%;
  }
}
@media screen and (max-width: 867px) {
  .images {
    width:15%;
    height:30%;
    left:10%;
  }
}
@media screen and (max-width: 750px) {
  .bigText {
    font-size: 2rem;
    margin: 3rem 1rem 0.5rem 1rem;
  }
  .container span {
    font-size: 1rem;
    font-weight: bolder;
  }
  h1 {
    font-size: 2.8rem;
  }
  .images {
    width:60% ;
    height: 60%;
    top: 25%;
    left: 20%;
  }
  img{
    width:100%;
    height:100%;
  }
}

@media screen and (max-width: 425px) {
  .bigText {
    font-size: 1.3rem;
    margin: 3rem 0.6rem 0.5rem 0.2rem;
  }
  .container span {
    font-size: 0.8rem;
    font-weight: bolder;
    letter-spacing: 2px;
  }
  h1 {
    font-size: 1.9rem;
  }
  .images {
    width: 275px;
    height: 175px;
    left: 10%;
  }
  img {
    width: 275px;
    height: 175px;
  }
}
@media screen and (max-width: 300px) {
  .images {
    left: 2%;
  }
}

js

const days1 = document.getElementById("days");
const hours1 = document.getElementById("hours");
const minutes1 = document.getElementById("minutes");
const seconds1 = document.getElementById("seconds");
const showMessage = document.querySelector(".newContent");
const overlay = document.querySelector(".images");


const timer = () => {
 // In future you can set date you want.

  future = new Date("jan 1, 2022");
  now = new Date();
  diff = future - now;

  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const mins = Math.floor(diff / (1000 * 60));
  const seconds = Math.floor(diff / 1000);

  const d = days;
  const h = hours - days * 24;
  const m = mins - hours * 60;
  const s = seconds - mins * 60;
  days1.textContent = d;
  hours1.textContent = h;
  minutes1.textContent = m;
  seconds1.textContent = s;

// show ,is for after timer stops it shows a picture
// you can set manual stop time here

  const show = d == 0 && h == 0 && m == 0 && s == 0;

  if (show) {
    showMessage.classList.remove("hidden");
    overlay.classList.remove("hidden");
    clearInterval(run);
  }
};

const run = setInterval("timer()", 1000);
closefunction = () => {
  showMessage.classList.add("hidden");
  overlay.classList.add("hidden");
};

overlay.addEventListener("click", closefunction);
showMessage.addEventListener("click", closefunction);