10 Amazing Things You Can Do with JavaScript: A Beginner’s Guide

JavaScript is a versatile and dynamic programming language that powers much of the interactive content on the web. As a beginner, learning JavaScript can be intimidating, but the possibilities of what you can create with it are endless. In this article, we’ll showcase 10 amazing things you can do with JavaScript to inspire and motivate you to take your skills to the next level. We’ll provide source code snippets to help you get started on your journey.

Create an Interactive Calculator:

With JavaScript, you can create an interactive calculator that can perform basic arithmetic operations. Here’s a code snippet to get you started:

function calculate() {
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
  var operator = document.getElementById("operator").value;
  var result;
  
  if (operator == "+") {
    result = parseInt(num1) + parseInt(num2);
  } else if (operator == "-") {
    result = parseInt(num1) - parseInt(num2);
  } else if (operator == "*") {
    result = parseInt(num1) * parseInt(num2);
  } else if (operator == "/") {
    result = parseInt(num1) / parseInt(num2);
  }
  
  document.getElementById("result").innerHTML = result;
}

Build a To-Do List:

JavaScript can be used to create a simple to-do list that allows you to add and remove items dynamically. Here’s a code snippet to get you started:

var list = document.getElementById("list");
var input = document.getElementById("input");

function addItem() {
  var li = document.createElement("li");
  var text = document.createTextNode(input.value);
  li.appendChild(text);
  list.appendChild(li);
  input.value = "";
}

function removeItem() {
  var items = list.getElementsByTagName("li");
  list.removeChild(items[0]);
}

Create an Image Slider:

JavaScript can be used to create a dynamic image slider that allows users to view a series of images. Here’s a code snippet to get you started:

var slides = document.getElementsByClassName("slide");
var index = 0;

function showSlide(n) {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  index += n;
  if (index > slides.length) {
    index = 1;
  }
  if (index < 1) {
    index = slides.length;
  }
  slides[index-1].style.display = "block";
}

showSlide(0);

Build a Countdown Timer:

JavaScript can be used to create a countdown timer that displays the remaining time until a specific date and time. Here’s a code snippet to get you started:

var countdown = document.getElementById("countdown");
var targetDate = new Date("December 31, 2023 23:59:59").getTime();

setInterval(function() {
  var now = new Date().getTime();
  var remainingTime = targetDate - now;
  
  var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
  
  countdown.innerHTML = days

Implement a Lightbox:

JavaScript can be used to create a dynamic image gallery that pops up with a larger version of an image when clicked. Here’s a code snippet to get you started:

var images = document.getElementsByClassName("image");
var modal = document.getElementById("modal");
var modalImage = document.getElementById("modal-image");

for (var i = 0; i < images.length; i++) {
  images[i].onclick = function() {
    modal.style.display = "block";
    modalImage.src = this.src;
  }
}

modal.onclick = function() {
  modal.style.display = "none";
}

Create a Random Quote Generator:

JavaScript can be used to create a simple web application that generates random quotes. Here’s a code snippet to get you started:

var quotes = [  "The only way to do great work is to love what you do. - Steve Jobs",  "I have not failed. I've just found 10,000 ways that won't work. - Thomas Edison",  "The greatest glory in living lies not in never falling, but in rising every time we fall. - Nelson Mandela",  "Believe you can and you're halfway there. - Theodore Roosevelt",  "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough. - Oprah Winfrey"];

var quote = document.getElementById("quote");
var button = document.getElementById("button");

button.onclick = function() {
  var randomIndex = Math.floor(Math.random() * quotes.length);
  quote.innerHTML = quotes[randomIndex];
}

Build a Responsive Navigation Bar:

JavaScript can be used to create a responsive navigation bar that adapts to different screen sizes. Here’s a code snippet to get you started:

var navbar = document.getElementById("navbar");

function toggleNavbar() {
  if (navbar.className === "topnav") {
    navbar.className += " responsive";
  } else {
    navbar.className = "topnav";
  }
}

Create a Password Strength Checker:

JavaScript can be used to create a password strength checker that evaluates the strength of a user’s password. Here’s a code snippet to get you started:

var passwordInput = document.getElementById("password");
var strengthText = document.getElementById("strength-text");

function checkPasswordStrength() {
  var password = passwordInput.value;
  var strength = 0;
  
  if (password.length >= 8) {
    strength += 1;
  }
  
  if (/[a-z]/.test(password)) {
    strength += 1;
  }
  
  if (/[A-Z]/.test(password)) {
    strength += 1;
  }
  
  if (/[0-9]/.test(password)) {
    strength += 1;
  }
  
  if (/[$@#&!]/.test(password)) {
    strength += 1;
  }
  
  if (strength === 0) {
    strengthText.innerHTML = "";
  } else if (strength === 1) {
    strengthText.innerHTML = "Weak";
  } else if (strength === 2) {
    strengthText.innerHTML = "Fair";
  } else if (strength === 3) {
    strengthText.innerHTML = "Good";
  } else if (strength === 4) {
    strengthText.innerHTML = "Strong";
  } else if (strength === 5) {
    strengthText.innerHTML = "Very Strong";
  }
}

passwordInput.onkeyup = checkPasswordStrength;

Implement a Drag and Drop Feature:

JavaScript can be used to create a drag-and-drop feature that allows users to move elements around on a webpage. Here’s a code snippet to get you started:

var dragItem = document.getElementById("drag-item");
var container = document.getElementById("container");

var startX, startY, initialX, initialY, deltaX, deltaY;

container.addEventListener("mousedown", dragStart);
container.addEventListener("mouseup", dragEnd);
container.addEventListener("mousemove", drag);

function dragStart(e) {
  startX = e.clientX;
  startY = e.clientY;
  initialX = dragItem.offsetLeft;
  initialY = dragItem.offsetTop;
  
  if (e.target === dragItem) {
    container.style.cursor = "grabbing";
  }
}

function dragEnd(e) {
  container.style.cursor = "grab";
}

function drag(e) {
  if (e.target === dragItem) {
    deltaX = e.clientX - startX;
    deltaY = e.clientY - startY;
    
    dragItem.style.left = initialX + deltaX + "px";
    dragItem.style.top = initialY + deltaY + "px";
  }
}

Create a Todo List:

JavaScript can be used to create a simple to-do list that allows users to add, edit, and delete items. Here’s a code snippet to get you started:

var todoList = document.getElementById("todo-list");
var todoInput = document.getElementById("todo-input");
var addButton = document.getElementById("add-button");

addButton.onclick = function() {
  var todoText = todoInput.value;
  var todoItem = document.createElement("li");
  var todoLabel = document.createElement("label");
  var todoEditInput = document.createElement("input");
  var todoEditButton = document.createElement("button");
  var todoDeleteButton = document.createElement("button");
  
  todoItem.appendChild(todoLabel);
  todoItem.appendChild(todoEditInput);
  todoItem.appendChild(todoEditButton);
  todoItem.appendChild(todoDeleteButton);
  
  todoLabel.innerHTML = todoText;
  todoEditInput.value = todoText;
  todoEditInput.type = "text";
  todoEditButton.innerHTML = "Edit";
  todoDeleteButton.innerHTML = "Delete";
  
  todoList.appendChild(todoItem);
  
  todoInput.value = "";
  
  todoDeleteButton.onclick = function() {
    todoList.removeChild(todoItem);
  };
  
  todoEditButton.onclick = function() {
    if (todoEditButton.innerHTML === "Edit") {
      todoLabel.style.display = "none";
      todoEditInput.style.display = "inline-block";
      todoEditInput.focus();
      todoEditButton.innerHTML = "Save";
    } else {
      todoLabel.innerHTML = todoEditInput.value;
      todoLabel.style.display = "inline-block";
      todoEditInput.style.display = "none";
      todoEditButton.innerHTML = "Edit";
    }
  };
  
  todoEditInput.onkeyup = function(e) {
    if (e.keyCode === 13) {
      todoEditButton.click();
    }
  };
};

JavaScript is a versatile programming language that can be used to create a wide range of interactive web applications. With these 10 amazing things you can do with JavaScript, you’re well on your way to becoming a skilled web developer. By experimenting with these code snippets and incorporating them into your own projects, you’ll be able to create dynamic and engaging web applications that users will love.