Task Management App HTML, CSS, JavaScript

This project is a simple note-taking web application built using HTML, CSS, and JavaScript. The app allows users to create, edit, and delete notes. The user interface is designed to be simple and intuitive, with a heading, an information text, and a grid of note-taking text areas, each with a plus button to create a new note.

The HTML code defines the basic structure of the app. The head section includes meta tags for defining the document properties, a title tag, and a link to the CSS file. The body section includes a heading, an information text, a container div with an ID of "app," and a script tag that links to the JavaScript file.

The CSS code defines the styles of the elements in the HTML code. The body has a linear gradient background, and the font is set to "Courier New." The heading and information text are styled using color, text-align, and font-size properties. The app container has a display of grid, with the grid-template-columns property set to repeat(auto-fill, 300px) to create a responsive layout. The note-taking text areas have various properties like padding, border-radius, and box-shadow to create a visually appealing user interface. The plus button has a height, border-color, and background property, among others.

The JavaScript code handles the note-taking functionality of the app. The code loads any previously saved notes from the local storage and renders them on the page. Each note is represented by a text area element, and the createNoteEl function creates this element with an ID and content. The function also adds event listeners to the text area element for double-clicking and inputting. Double-clicking on a note prompts the user to confirm deletion, and if accepted, the note is removed from the app and local storage. Inputting on a note saves the content in local storage.

The addNote function creates a new note object and element, adds it to the app container, and saves it in local storage. The getNotes function retrieves any saved notes from local storage, and the saveNote function saves the notes in local storage.

Overall, this project is a simple and functional note-taking web application that showcases the use of HTML, CSS, and JavaScript for building a user interface and handling user input. The app's design is visually appealing and intuitive, making it easy to use for anyone looking for a simple note-taking solution.