DEV Community: Saravana Kumar Putta Selvaraj

JS:Snippets — Copy text to the clipboard using javascript in 5 minutes.

Saravana Kumar Putta Selvaraj — Mon, 03 Aug 2020 09:44:59 +0000

In this article, we are going to build the functionality of copying the text to the clipboard using javascript in 5 minutes.

HTML STRUCTURE

<div>
  <input type="text" id="text" placeholder="Enter text"/>
  <button onClick="copyTextToClipBoard()">Copy To ClipBoard</button>
</div>

JS Function

function copyTextToClipBoard(){
  //Input Element with id "text"
  let textToBeCopied = document.getElementById('text');
  //Select the content in the input element
  textToBeCopied.select();
  textToBeCopied.setSelectionRange(0, 99999);
  //copy the text inside the input element to clipboard
  document.execCommand('copy');
  alert('Text copied to Clipboard');
}

Buit-in Functions used

select
setSelectionRange
execCommand

Full code

Codepen

This article is made with ❤️. Please let me know what content you want me to write. Always for you.

JS:DS - Queue Data Structure in JavaScript

Saravana Kumar Putta Selvaraj — Fri, 12 Jun 2020 15:37:33 +0000

The Second Article on the JS:DS series. In this write up we are going to see the Queue Data Structure implementation in javascript and we use arrays for that.

For Stack Data Structure in JS. Please read in the below post.

JS:DS - Stack Data Structure in JavaScript

Saravana Kumar Putta Selvaraj ・ Jun 1 '20 ・ 1 min read

#javascript #datastructure #jsds

What is Queue?

The queue is a data structure to store the data in the order of insertion where the item gets inserted at the first into the queue will be the first one to be removed.

In shorter terms First In First Out(FIFO).

How are we going to implement it?

The following are the methods we are going to have in Queue DS.

initialize — Initialize the storage and queue size
enqueue — push item to the queue
dequeue — remove the first pushed item from the queue
getQueueSize — Get the current queue size

initialize

@parmas — size — Queue Size
storage — an array to store the items of the queue DS
currentQueueSize — to track the size of the queue
queueSize — application users can set the predefined size of the queue

class Queue {
  constructor(size) {
    this.storage = [];
    this.currentqueueSize = 0;
    this.queueSize = size ? size : 10;
  }
}

enqueue - Add items to the queue

Check the current size of the queue is less than the actual queue size.
If the above condition gets a pass, increase the current queue size by 1, and push the item to the Queue.
Else throw the error saying that the queue is full!

class Queue {
  constructor(size) {
    this.storage = [];
    this.currentqueueSize = 0;
    this.queueSize = size ? size : 10;
  }
  enqueue(item) {
    if (this.currentqueueSize < this.queueSize) {
      this.queueSize++;
      this.storage.push(item);
    } else {
      throw 'Cannot enqueu. Since the Queue is full!'
    }
  }
}

dequeue - Remove items from the queue

Check the current size of the queue is greater than 0.
If the above condition gets a pass, decrease the current queue size by 1, and remove the item from the first position in an array using shift().
Else throw the error saying that the queue is empty!

class Queue {
  constructor(size) {
    this.storage = [];
    this.currentqueueSize = 0;
    this.queueSize = size ? size : 10;
  }
  dequeue() {
    if (this.currentqueueSize > 0) {
      this.currentqueueSize--;
      return this.storage.shift();
    }
    throw 'Cannot dequeue. Since the Queue is empty!'
  }
}

getQueueSize

Return the current Queue size from the initialization part

class Queue {
  constructor(size) {
    this.storage = [];
    this.currentqueueSize = 0;
    this.queueSize = size ? size : 10;
  }
  getQueueSize() {
    return this.currentqueueSize;
  }
}

Complete code in below gist

This article is made with ❤️ and am always thankful for the dev community around us!

Please follow me to get to know about latest write ups.

JS:Snippets — Carousel/Slider using plain HTML, CSS and JS

Saravana Kumar Putta Selvaraj — Fri, 05 Jun 2020 12:01:30 +0000

Hey guys! Welcome back to my JS series blogs. Please do check out my previous blog on Stack Data Structure implementation in js from below card.

JS:DS - Stack Data Structure in JavaScript

Saravana Kumar Putta Selvaraj ・ Jun 1 '20

#javascript #datastructure #jsds

In this write up we are going to see how to build the carousel/slider using the plain HTML, CSS, and Javascript. The simplest one!

What is Carousel/Slider?

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. Content Source from Bootstrap.

How are we gonna build?

We will have the Carousel container which holds the slides with previous and next icon.
We will implement the function to show the slide one at a time.
We will add the previous and next functionality to the carousel.

Carousel HTML & CSS


<div class="carouselContainer">
   <div class="carouselImgs slide1">
     <h1>Slide1</h1>
   </div>
   <div class="carouselImgs slide2">
     <h1>Slide2</h1>
   </div>
   <div class="carouselImgs slide3">
     <h1>Slide3</h1>
   </div>
   <div class="carouselImgs slide4">
     <h1>Slide4</h1>
   </div>
   <span class="prev" id="prev"> < </span>
   <span class="next" id="next"> > </span>
</div>

Styles

.carouselContainer {
  width: 60%;
  height: 60%;
  margin: 0 auto;
  position: relative;
  background-color: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
}
.carouselImgs {
  width: 100%;
  height: 100%;
  animation: fade 1.5s;
  display: none;
  padding: 20px;
  text-align: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
}
.prev, .next {
  position: absolute;
  top: 49%;
  cursor: pointer
}
.prev { left: 10px; }
.next { right: 10px; }
.slide1 { background-color: #d8e2dc; }
.slide2 { background-color: #577399; }
.slide3 { background-color: #bdd5ea; }
.slide4 { background-color: #f7f7ff; }
//animation css for carousel children
@keyframes fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

Function: Show

var currentSlide = 1;
function showSlide(slideIndex) {
const slides = document.getElementsByClassName('carouselImgs');
 if (slideIndex > slides.length) { currentSlide = 1 }
 if (slideIndex < 1) { currentSlide = slides.length }
 for (var i = 0; i < slides.length; i++) {
  slides[i].style.display = 'none'
 }
 slides[currentSlide - 1].style.display = 'flex'
}

f the slideIndex exceeds the slides count we need to reset the currentSlide to 1.
If the slideIndex becomes zero or lesser, reset the currentSlide to slides length.
This resetting makes the previous and next actions to iterate through the existing slides like infinite.

Function: previous

function previousSlide() {
  showSlide(currentSlide -= 1);
}

Function: next

function nextSlide() {
  showSlide(currentSlide += 1);
}

Codepen

GitHub Page for demo here

For full code, please go to the below GitHub repo:

saravanakumarputta / js-snippets-carousel-slider

What are the more features that can be added?

Automatic slide show based on the interval.
Can disable the previous/next when the limit is reached.
Images to the slides.
Different animations on slide transition.

Credits: I learned from web.dev Instagram handle

JS:DS - Stack Data Structure in JavaScript

Saravana Kumar Putta Selvaraj — Mon, 01 Jun 2020 09:30:24 +0000

In this write-up, we are going to see how the stack data structure can be implemented in Javascript.

What is a Stack?

The stack is a data structure to store the data in the order of insertion where the item gets inserted at the last into the stack will be the first one to be removed.

In shorter terms Last In First Out(LIFO).

How are we going to implement it?

The following are the methods that we are going to implement in Stack DS.

initialize — Initialize the storage and stack size
push — push data to the stack
pop — Remove the last pushed item from the stack
getStackSize — Get the current stack size

initialize

class Stack {  
 /* Initialization */  
 constructor() {    
   this.storage = {};    
   this.stackLength = 0;  
 }
}

push

class Stack {
  /* Initialization */
  constructor() {
    this.storage = {};
    this.stackLength = 0;
  }

  /* Add item to the stack */
  push(item) {
    this.storage[this.stackLength] = item;
    this.stackLength++;
  }
}

pop

class Stack {
  /* Initialization */
  constructor() {
    this.storage = {};
    this.stackLength = 0;
  }

  /* Remove Item from the stack with below conditions
   1. Get the last index
   2. check the stack is non-empty
   3. remove the item from the storage
  */
  pop() {
    let endIndex = this.stackLength - 1;
    if (endIndex >= 0) {
      delete this.storage[endIndex]
      this.stackLength--;
    } else {
      throw "Stack is Empty, cannot pop!"
    }
  }
}

getStackSize

class Stack {
  /* Initialization */
  constructor() {
    this.storage = {};
    this.stackLength = 0;
  }

  /* To get the stack size */
  getStackSize() {
    return this.stackLength;
  }
}

Complete Code

Please find the complete gits code here