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

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)