DEV Community

Cover image for Mastering Daily Tasks with JavaScript: A Practical Guide
MK
MK

Posted on • Originally published at webdesignguy.me on

Mastering Daily Tasks with JavaScript: A Practical Guide

#webdev #javascript #programming #learning

Discover the power of JavaScript to automate and simplify your everyday tasks. This guide provides practical JavaScript snippets that are perfect for enhancing your daily productivity.

In the ever-evolving world of programming, JavaScript stands out as a versatile tool that can automate and simplify your daily tasks. Here, Ive compiled a collection of JavaScript snippets that are not only practical but also fun to use.

JavaScript Snippets

  1. Quick ToDo List: Manage your daily tasks efficiently.

  2. Fetch and Display API Data: Easily access and display online data.

  3. Basic Countdown Timer: Keep track of your time with a simple timer.

  4. Simple Email Validator: Ensure valid email formats effortlessly.

  5. Toggle Element Visibility: Dynamically control the visibility of web elements.

JavaScript Snippet 1: Quick ToDo List

Organize your day with a simple, interactive ToDo list:

 let toDoList = []; function addToDo(task) { toDoList.push(task); console.log(`Added task: ${task}`); } function viewToDoList() { console.log("Your ToDo List:"); toDoList.forEach((task, index) => { console.log(`${index + 1}: ${task}`); }); } // Example usage addToDo("Learn JavaScript"); addToDo("Read a book"); viewToDoList();
Enter fullscreen mode Exit fullscreen mode

JavaScript Snippet 2: Fetch and Display API Data

Easily fetch and display data from any API:

 async function fetchData(url) { try { let response = await fetch(url); let data = await response.json(); console.log(data); } catch (error) { console.error("Fetching data failed:", error); } } // Example usage fetchData("https://jsonplaceholder.typicode.com/todos/1");
Enter fullscreen mode Exit fullscreen mode

JavaScript Snippet 3: Basic Countdown Timer

A simple timer to help you manage time effectively:

 function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0) { clearInterval(interval); console.log("Countdown finished!"); } }, 1000); } // Example usage startCountdown(10);
Enter fullscreen mode Exit fullscreen mode

JavaScript Snippet 4: Simple Email Validator

Quickly validate email formats in user inputs:

 function isValidEmail(email) { const emailRegex = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/; return emailRegex.test(email); } // Example usage console.log(isValidEmail("example@email.com")); // true console.log(isValidEmail("example.com")); // false
Enter fullscreen mode Exit fullscreen mode

JavaScript Snippet 5: Toggle Element Visibility

Toggle the visibility of elements on your webpage:

function toggleVisibility(elementId) { const element = document.getElementById(elementId); if (element.style.display === "none") { element.style.display = "block"; } else { element.style.display = "none"; } } // Example usage in HTML: <div id="myDiv">Content</div> toggleVisibility("myDiv");
Enter fullscreen mode Exit fullscreen mode

Wrapping Up

These JavaScript snippets are designed to add a spark of efficiency to your daily routine. Whether youre managing tasks, handling data, or just need a handy timer, JavaScript provides a simple yet powerful solution. Dive in, experiment, and see how these snippets can streamline your day!

Top comments (0)