Task Application
Program Details
HTML: HTML (Hypertext Markup Language) is used to structure the content and define the elements of a web page.
The <html> tag denotes the root element of the HTML document.
The <head> section contains meta information about the document, such as the title specified within the <title> tag.
The <body> section contains the visible content of the web page.
In this code, the HTML is used to define the structure and layout of the task manager application. It includes the title, a heading, an input field, and an unordered list for displaying the tasks.
CSS: CSS (Cascading Style Sheets) is used to describe the presentation and styling of the HTML elements.
The <style> block is placed within the <head> section to define the CSS rules.
In this code, CSS is used to style the various elements of the task manager application. It includes styles for the body, headings, input field, buttons, and task list. The defined styles control the font, alignment, margins, padding, and appearance of the elements.
JavaScript: JavaScript is a programming language that allows interactivity and dynamic behavior on web pages.
The JavaScript code is placed within the <script> tags, either inline or as an external script file.
In this code, JavaScript is used to handle the functionality of the task manager application. It defines the addTask() function, which is called when the "Add Task" button is clicked. The addTask() function performs the following tasks:
Retrieves the input field and task list elements from the HTML using document.getElementById().
Validates the input field to ensure a task name is entered, displaying an alert if it is empty.
If a valid task name is provided, it creates new HTML elements dynamically (checkbox, task name, delete button) using document.createElement().
Adds event listeners to the checkbox and delete button elements to handle marking tasks as completed and deleting tasks.
Appends the created elements to the task list and clears the input field.