15 amazing things you can do with simple JavaScript

JavaScript is an incredibly versatile programming language that powers the modern web. While many developers know it for building interactive websites, JavaScript can do far more with its extensive built-in capabilities. In this blog, we’ll explore 15 amazing things you can achieve with simple JavaScript, including platform detection, animations, and even games.

15 amazing things you can do with simple JavaScript

JavaScript has become a cornerstone of web development, enabling everything from responsive design to complex applications. But you don’t always need sophisticated frameworks to accomplish incredible tasks. Let’s dive into 15 cool things you can achieve using plain JavaScript.


1. Detect the User’s Platform

JavaScript provides the navigator.platform property, which allows you to detect the user’s operating system or platform.

console.log(`You are using: ${navigator.platform}`);

This feature is useful for tailoring experiences based on whether a user is on mobile, macOS, Windows, or Linux.


2. Create a Countdown Timer

Building a simple countdown timer requires only a few lines of JavaScript and can be applied to sales pages, event sites, or apps.

const countdown = (seconds) => {   
       let remaining = seconds;   
       const timer = setInterval(() => { 
             console.log(${remaining} seconds left);     
             if (remaining === 0) {       
                clearInterval(timer);       
                console.log("Time's up!");     
             }     
      remaining--;   }, 1000); };
 countdown(10); 

3. Add Animations

With the Element.animate() method, you can add animations to elements effortlessly.

const box = document.querySelector('.box'); 
box.animate([{ transform: 'translateX(0px)' }, { transform: 'translateX(100px)' }], {   duration: 1000,   iterations: Infinity, }); 

4. Fetch API for Data Retrieval

The Fetch API makes it easy to retrieve data from servers and APIs without any external libraries.

fetch('https://api.example.com/data').then((response) => response.json()).then((data) => console.log(data)).catch((error) => console.error('Error fetching data:', error)); 

5. Build a Simple To-Do List

You can create an interactive to-do list app with plain JavaScript, adding tasks dynamically to a webpage.


6. Generate Random Quotes

Use JavaScript to randomly display motivational quotes from an array, refreshing each time the page loads.


7. Detect Online/Offline Status

With the navigator.onLine property, you can check if a user is online or offline.

console.log(navigator.onLine ? 'Online' : 'Offline'); 

8. Play Sounds

The Audio API allows you to play sound files in response to user actions.

const audio = new Audio('sound.mp3'); audio.play(); 

9. Sort and Filter Arrays

JavaScript offers built-in methods like filter() and sort() to manipulate data arrays easily.


10. Build a Simple Stopwatch

Create a stopwatch with the setInterval and clearInterval functions.


11. Geolocation API

Get a user’s current location with the Geolocation API for mapping and location-based services.


12. Dark Mode Toggle

Toggle between light and dark themes with simple event listeners and CSS classes.


13. Drag and Drop Functionality

Enable draggable items on your webpage using the HTML Drag and Drop API with JavaScript.


14. Generate QR Codes

Use a simple library or JavaScript logic to generate QR codes dynamically.


15. Create a Simple Game

You can use JavaScript to build small games like tic-tac-toe or a simple Snake game, requiring just basic DOM manipulation.

Follow Us

Connect with us on social media to stay updated on our latest news and offerings.