Simple Javascript Project Tutorial

Simple Javascript Project Tutorial

7 min read Jun 18, 2024
Simple Javascript Project Tutorial

Simple JavaScript Project: Building a To-Do List App

This tutorial will guide you through creating a basic to-do list application using JavaScript, HTML, and CSS. This project is perfect for beginners learning JavaScript and provides a solid foundation for building more complex web applications.

Project Setup

  1. Create a New Folder: Start by creating a new folder for your project. Name it something descriptive like "to-do-list."
  2. HTML File: Inside the folder, create an HTML file named "index.html." This file will contain the structure of your to-do list app.
  3. CSS File: Create a CSS file named "style.css" to style the elements of your application.
  4. JavaScript File: Create a JavaScript file named "script.js" to handle the application's functionality.

HTML Structure

Open "index.html" and add the following basic HTML structure:




    
    
    To-Do List
    


    

To-Do List

    Explanation:

    • HTML Structure: The HTML code defines the basic layout of the to-do list app.
    • Container: The <div class="container"> element is used to wrap all the content.
    • Heading: The <h1> tag displays the title "To-Do List."
    • Input Field: The <input type="text" id="taskInput"> element provides a field for users to enter new tasks.
    • Add Task Button: The <button id="addTaskBtn"> element is used to trigger adding a new task.
    • Task List: The <ul id="taskList"> element will hold the list of tasks.
    • CSS Link: The <link rel="stylesheet" href="style.css"> tag links the CSS file for styling.
    • JavaScript Link: The <script src="script.js"> tag links the JavaScript file for handling the functionality.

    CSS Styling

    In "style.css," you can add basic CSS styles to improve the appearance of your to-do list app. Here's a simple example:

    body {
        font-family: sans-serif;
        margin: 0;
        padding: 20px;
    }
    
    .container {
        width: 500px;
        margin: 0 auto;
        border: 1px solid #ccc;
        padding: 20px;
    }
    
    #taskList {
        list-style: none;
        padding: 0;
    }
    
    #taskList li {
        margin-bottom: 10px;
        padding: 10px;
        background-color: #f0f0f0;
        border-radius: 5px;
    }
    

    Explanation:

    • Body Styles: Basic styles for the body, including font, margin, and padding.
    • Container Styles: Styling for the container, including width, margin, border, and padding.
    • Task List Styles: Removing bullet points and padding for the task list.
    • Task Item Styles: Styling each task item with margin, padding, background color, and rounded corners.

    JavaScript Functionality

    Now, open "script.js" and add the following JavaScript code to make your to-do list app functional:

    const taskInput = document.getElementById('taskInput');
    const addTaskBtn = document.getElementById('addTaskBtn');
    const taskList = document.getElementById('taskList');
    
    addTaskBtn.addEventListener('click', () => {
        const taskText = taskInput.value.trim();
    
        if (taskText !== "") {
            const newTask = document.createElement('li');
            newTask.textContent = taskText;
            taskList.appendChild(newTask);
    
            taskInput.value = "";
        }
    });
    

    Explanation:

    • Selecting Elements: The code selects the HTML elements you created using document.getElementById().
    • Event Listener: An event listener is added to the "Add Task" button. When clicked, the function inside the listener will execute.
    • Getting Task Text: The value of the input field is retrieved and trimmed to remove whitespace.
    • Creating Task Item: If the input field is not empty, a new list item (<li>) is created.
    • Adding to Task List: The new list item is added to the task list (<ul>).
    • Clearing Input Field: The input field is cleared after adding the task.

    Running the App

    1. Open "index.html" in your web browser.
    2. You should see your simple to-do list app.
    3. Type a task into the input field and click "Add Task."
    4. Your new task will appear on the list.

    Further Improvements

    This is a very basic to-do list app. Here are some potential improvements you can make:

    • Delete Tasks: Add functionality to delete tasks from the list.
    • Mark Tasks as Complete: Allow users to mark tasks as completed, perhaps by adding a checkbox.
    • Local Storage: Store tasks in the browser's local storage so they persist even after the page is closed.
    • Styling: Add more CSS to create a more visually appealing design.

    This tutorial provides a starting point for building your own JavaScript projects. With practice and experimentation, you can create increasingly complex and interactive web applications.

    Related Post