How to Build a Beginner-Friendly JavaScript Application ?

JavaScript Complete Guide - A to Z JavaScript Concepts

How to Create a Form with Multiple Steps using CSS and JavaScript ?

Building a JavaScript application can seem daunting for beginners, but breaking the process down into manageable steps can make it more approachable. We are going to build a Todo application using Javascript which is a Beginner-Friendly Javascript application.

Preview Image

Final Output

Prerequisites

Steps to Build a Beginner-Friendly JavaScript Application

Step 1. Set Up Your Development Environment:

To start, Install a code editor like Visual Studio Code (VS Code), which provides a range of features that simplify coding, such as syntax highlighting and error detection.

Step 2. Create a New Project Folder:

Organize your work by creating a new folder for your project. Open this folder in your code editor.

Step 3. Structure Your Project:

With your project folder ready, create the essential files an index.html file for the HTML structure, a script.js file for your JavaScript code, and a style.css file for your CSS. Link the CSS and JavaScript files to your HTML file using <link> and <script> tags respectively.

Step 4. Design the User Interface:

Begin by constructing the basic layout in index.html. Include fundamental elements such as a header, a main content area, and a footer. This provides a clear structure for your application. Style your application using style.css to make it visually appealing. Focus on simple, clean designs with readable fonts and a coherent color scheme to ensure a pleasant user experience.

Step 5. Write JavaScript to Add Functionality:

In script.js, start adding interactive features. Use document.querySelector or similar methods to select HTML elements. Add event listeners to these elements to handle user interactions like button clicks or form submissions. For instance, you can create a button that, when clicked, displays a message

Example: This example shows an implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <div class="app-container" id="taskList">
        <h1 class="app-header">TO DO LIST</h1>
        <div class="add-task">
            <input type="text" autocomplete="off" 
                   placeholder="Add New Task" 
                   class="task-input" id="txt">
            <input type="submit" value="" 
                   class="submit-task" 
                   title="Add Task" id="add">
        </div>

        <div id="mainDiv"></div>

        <script src="script.js"></script>
    </div>
</body>

</html>

CSS

@import 
url(
"https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");

* {
    box-sizing: border-box;
}

:root {
    --checkbox-shadow: rgba(238, 156, 167, 0.2);
    --add-button: #ee9ca7;
    --add-button-shadow: rgba(238, 156, 167, 0.4);
}

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(62deg,
            rgba(1, 95, 183, 0.9732216701223994) 13%,
            rgba(255, 122, 151, 0.5) 4%),
        linear-gradient(44deg,
            rgba(0, 43, 99, 0.07922090238615942) 39%,
            rgba(242, 140, 143, 0.5) 18%),
        linear-gradient(118deg,
            rgba(84, 202, 242, 0.03152997265339608) 40%,
            rgba(247, 155, 187, 0.5) 54%),
        linear-gradient(58deg,
            rgba(90, 90, 237, 0.16144443572260592) 83%,
            rgba(249, 156, 142, 0.5) 23%);
    background-blend-mode: normal, lighten, multiply, hard-light;
    font-family: "DM Sans", sans-serif;
    overflow: hidden;
    color: white;
}

input[type="checkbox"] {
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid green;
    appearance: none;
    outline: none;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: greenyellow;
}

input {
    outline: none;
}

.app-container {
    border-radius: 10px;
    width: 100%;
    max-width: 550px;
    max-height: 100%;
    background-color: #10101d;
    padding: 24px;
    overflow: auto;
    box-shadow: 0 10px 10px -1px black;
}

.app-header {
    font-size: 20px;
    line-height: 32px;
    margin: 0 0 12px 0;
    color: #fff;
}

.submit-task {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border: none;
    background: var(--add-button);
    color: #fff;
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 12px 0 
                  var(--add-button-shadow);
}

.add-task {
    height: 40px;
    font-size: 14px;
    display: flex;
}

.task-input {
    border-right: none;
    width: 100%;
    padding: 0 4px;
    outline: none;
    border: none;
    border-bottom: 1px solid #fff;
    background-color: transparent;
    margin-right: 12px;
    color: #fff;
    box-shadow: none;
    border-radius: 0;
    font-size: 20px;

    &:placeholder {
        color: #fff;
    }
}

.task-list-item {
    background-color: #191933;
    border-radius: 4px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 30px;
    justify-content: space-between;
    font-size: 20px;
}

.delete-btn {
    border: none;
    border-radius: 30px;
    cursor: pointer;
    background-color: #10101d;
    color: white;
    outline: none;
    display: block;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.edit-btn {
    border: none;
    border-radius: 30px;
    cursor: pointer;
    background-color: #10101d;
    color: white;
    outline: none;
    display: block;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

JavaScript

let arr = [];
let txt = document.querySelector("#txt");
let add = document.querySelector("#add");
let mainDiv = document.querySelector("#mainDiv");
let count = 1;

add.addEventListener("click", function () {
    let obj = {};
    obj.id = count;
    obj.title = txt.value;
    if (obj.title === "" || obj.title.trim() == "") {
        alert("Write Something");
    } else {
        arr.push(obj);
        addUI(obj);
        storeInLocalStorage();
    }
    obj.status = "Pending";
    count++;
});

function addUI(obj) {
    let div = document.createElement("div");
    div.classList.add("task-list-item");
    let span = document.createElement("span");
    let checkBox = document.createElement("input");
    checkBox.setAttribute("type", "checkbox");

    let editBtn = document.createElement("button");
    editBtn.classList.add("edit-btn");
    editBtn.innerText = "Edit";

    let deleteBtn = document.createElement("button");
    deleteBtn.innerHTML = "Delete";
    deleteBtn.classList.add("delete-btn");

    span.innerHTML = obj.title;
    div.append(checkBox);
    div.append(span);
    div.append(editBtn)
    div.append(deleteBtn);

    checkBox.addEventListener("click", function () {
        if (checkBox.checked === true) {
            span.style.textDecoration = "line-through";
            obj.status = "Completed";
            console.log(arr);
        } else {
            obj.status = "Pending";
            span.style.textDecoration = "none";
        }
        storeInLocalStorage();
    });

    if (obj.status == "Completed") {
        checkBox.checked = true;
        span.style.textDecoration = "line-through";
    }

    deleteBtn.addEventListener("click", removeTask);

    deleteBtn.addEventListener("click", function () {
        alert("Are you sure you want to delete this task?");
        arr = arr.filter((item) => {
            if (item.id != obj.id) {
                return true;
            }
        });
        console.log(arr);
        removeTask(div);
        storeInLocalStorage();
    });

    editBtn.addEventListener("click", function () {
        let newTitle = prompt("Edit your task:", obj.title);
        if (newTitle !== null && newTitle.trim() !== "") {
            obj.title = newTitle.trim();
            span.innerHTML = obj.title;
            storeInLocalStorage();
        }
    });

    mainDiv.append(div);
    txt.value = "";
    console.log(arr);
}

function removeTask(div) {
    div.remove();
}

function storeInLocalStorage() {
    localStorage.setItem("items", JSON.stringify(arr));
}

function getLocalStorage() {
    if (localStorage.getItem("items")) {
        arr = JSON.parse(localStorage.getItem("items"));
    }

    arr.forEach((element) => {
        addUI(element);
    });
}

getLocalStorage();

Output:

Output

Tags:

#JavaScript #Web Technologies