Code-A2Z · Avdhesh-Varshney · Oct 12, 2024 · Oct 8, 2024 · Oct 9, 2024 · Oct 11, 2024
diff --git a/Angular-JS-Projects/Basic/Task-Manager/README.md b/Angular-JS-Projects/Basic/Task-Manager/README.md
@@ -0,0 +1,43 @@
+<h1 align='center'><b>📝 Task Manager 📝</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+   ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+   ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+   ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white)
+</div>
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+- Fork the project and run the `index.html` file directly on any browser.
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<img src='screenshot.png'> <!-- Replace with your actual screenshot URL -->
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Mehul Prajapati</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/your-linkedin'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/your-github'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Angular-JS-Projects/Basic/Task-Manager/app.js b/Angular-JS-Projects/Basic/Task-Manager/app.js
@@ -0,0 +1,21 @@
+angular.module('taskManagerApp', [])
+.controller('TaskController', function() {
+    var vm = this;
+
+    vm.tasks = [];
+    vm.newTask = '';
+
+    vm.addTask = function() {
+        if (vm.newTask) {
+            vm.tasks.push({ name: vm.newTask, editing: false });
+            vm.newTask = '';
+        }
+    };
+
+    vm.deleteTask = function(task) {
+        var index = vm.tasks.indexOf(task);
+        if (index !== -1) {
+            vm.tasks.splice(index, 1);
+        }
+    };
+});
diff --git a/Angular-JS-Projects/Basic/Task-Manager/index.html b/Angular-JS-Projects/Basic/Task-Manager/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="taskManagerApp">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Task Manager</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
+    <script src="app.js"></script>
+</head>
+<body ng-controller="TaskController as ctrl">
+    <div class="container">
+        <h1>Task Manager</h1>
+        <input type="text" ng-model="ctrl.newTask" placeholder="Add new task" />
+        <button ng-click="ctrl.addTask()">Add Task</button>
+
+        <ul>
+            <li ng-repeat="task in ctrl.tasks">
+                <span ng-if="!task.editing">{{ task.name }}</span>
+                <input ng-if="task.editing" type="text" ng-model="task.name" />
+
+                <button ng-click="task.editing = !task.editing" ng-if="!task.editing">Edit</button>
+                <button ng-click="task.editing = !task.editing" ng-if="task.editing">Save</button>
+                <button ng-click="ctrl.deleteTask(task)">Delete</button>
+            </li>
+        </ul>
+    </div>
+</body>
+</html>
diff --git a/Angular-JS-Projects/Basic/Task-Manager/screenshot.png b/Angular-JS-Projects/Basic/Task-Manager/screenshot.png
diff --git a/Angular-JS-Projects/Basic/Task-Manager/style.css b/Angular-JS-Projects/Basic/Task-Manager/style.css
@@ -0,0 +1,82 @@
+body {
+  font-family: 'Arial', sans-serif;
+  background-color: #f0f8ff;
+  padding: 20px;
+}
+
+.container {
+  max-width: 600px;
+  margin: 0 auto;
+  background: #ffffff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+input[type="text"] {
+  width: calc(100% - 100px);
+  padding: 12px;
+  margin-right: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+  transition: border-color 0.3s;
+}
+
+input[type="text"]:focus {
+  border-color: #007bff;
+  outline: none;
+}
+
+button {
+  padding: 12px 15px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s;
+  margin-top: 10px; /* Added margin to create space above the button */
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  margin: 8px 0;
+  background-color: #f9f9f9;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+}
+
+li:hover {
+  background-color: #e9ecef;
+}
+
+span {
+  flex: 1;
+  color: #333;
+}
+
+button {
+  margin-left: 10px;
+}