Javascript | Some unique examples

Here are some unique JavaScript examples:

Detecting Adblockers:

if(typeof adBlock === 'undefined') {
  alert('Please disable your adblocker to view this website.');
}

This code checks if the variable adBlock exists, which is commonly used by adblockers. If it doesn’t exist, it alerts the user to disable their adblocker.

Random Password Generator:

function generatePassword(length) {
  var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]\:;?><,./-=";
  var password = "";
  for (var i = 0; i < length; i++) {
    password += charset.charAt(Math.floor(Math.random() * charset.length));
  }
  return password;
}

console.log(generatePassword(12)); // Example output: Rf$%w5@jKpI^

This code generates a random password using a string of characters as the possible characters in the password. It then returns the generated password. The length parameter specifies the length of the password.

Custom Cursor:

document.addEventListener("mousemove", function(e) {
  var cursor = document.getElementById("cursor");
  cursor.style.left = e.clientX + "px";
  cursor.style.top = e.clientY + "px";
});

document.addEventListener("mouseenter", function() {
  var cursor = document.getElementById("cursor");
  cursor.style.display = "block";
});

document.addEventListener("mouseleave", function() {
  var cursor = document.getElementById("cursor");
  cursor.style.display = "none";
});

This code creates a custom cursor on the page that follows the mouse movement. It creates a div element with an id of “cursor” that is positioned absolutely on the page. The mousemove event listener updates the position of the cursor element to follow the mouse movement. The mouseenter and mouseleave event listeners show and hide the cursor element, respectively.

Geolocation:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    console.log("Latitude: " + latitude + ", Longitude: " + longitude);
  });
} else {
  console.log("Geolocation is not supported by this browser.");
}

This code uses the getCurrentPosition() method to get the current latitude and longitude of the user’s location using the Geolocation API. If the Geolocation API is not supported by the user’s browser, it displays an error message.

Image Carousel:

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }    
  slides[slideIndex-1].style.display = "block";  
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }    
  slides[slideIndex-1].style.display = "block";  
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

This code creates an image carousel that cycles through a set of images every 2 seconds. It uses a for loop to set the display property of all the images to “none” and then sets the display property of the current image to “block”. It then sets a timeout to call the showSlides() function again after 2 seconds, causing the next image to be displayed.

Same article on my medium blog is at

https://medium.com/web3-use-case/javascript-some-unique-examples-270c61184a43