Skip to content

Commit 3ba9722

Browse files
mehul-m-prajapatimehul-m-prajapati
committed
Added task manager app
1 parent 9486280 commit 3ba9722

File tree

5 files changed

+175
-0
lines changed

5 files changed

+175
-0
lines changed

‎Angular-JS-Projects/Basic/Task-Manager/README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<h1 align='center'><b>📝 Task Manager 📝</b></h1>
2+
3+
<!-- -------------------------------------------------------------------------------------------------------------- -->
4+
5+
<h3 align='center'>Tech Stack Used 🎮</h3>
6+
<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
7+
8+
<div align='center'>
9+
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
10+
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
11+
![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white)
12+
</div>
13+
14+
![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
15+
16+
<!-- -------------------------------------------------------------------------------------------------------------- -->
17+
18+
## :zap: How to run it? 🕹️
19+
20+
- Fork the project and run the `index.html` file directly on any browser.
21+
22+
<!-- -------------------------------------------------------------------------------------------------------------- -->
23+
24+
## :zap: Screenshots 📸
25+
<img src='screenshot.png'> <!-- Replace with your actual screenshot URL -->
26+
27+
![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
28+
29+
<!-- -------------------------------------------------------------------------------------------------------------- -->
30+
31+
<h4 align='center'>Developed By <b><i>Mehul Prajapati</i></b> 👦</h4>
32+
<p align='center'>
33+
<a href='https://www.linkedin.com/in/your-linkedin'>
34+
<img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
35+
</a>
36+
<a href='https://github.com/your-github'>
37+
<img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
38+
</a>
39+
</p>
40+
41+
<h4 align='center'>Happy Coding 🧑‍💻</h4>
42+
43+
<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

‎Angular-JS-Projects/Basic/Task-Manager/app.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
angular.module('taskManagerApp', [])
2+
.controller('TaskController', function() {
3+
var vm = this;
4+
5+
vm.tasks = [];
6+
vm.newTask = '';
7+
8+
vm.addTask = function() {
9+
if (vm.newTask) {
10+
vm.tasks.push({ name: vm.newTask, editing: false });
11+
vm.newTask = '';
12+
}
13+
};
14+
15+
vm.deleteTask = function(task) {
16+
var index = vm.tasks.indexOf(task);
17+
if (index !== -1) {
18+
vm.tasks.splice(index, 1);
19+
}
20+
};
21+
});

‎Angular-JS-Projects/Basic/Task-Manager/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="taskManagerApp">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Task Manager</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
9+
<script src="app.js"></script>
10+
</head>
11+
<body ng-controller="TaskController as ctrl">
12+
<div class="container">
13+
<h1>Task Manager</h1>
14+
<input type="text" ng-model="ctrl.newTask" placeholder="Add new task" />
15+
<button ng-click="ctrl.addTask()">Add Task</button>
16+
17+
<ul>
18+
<li ng-repeat="task in ctrl.tasks">
19+
<span ng-if="!task.editing">{{ task.name }}</span>
20+
<input ng-if="task.editing" type="text" ng-model="task.name" />
21+
22+
<button ng-click="task.editing = !task.editing" ng-if="!task.editing">Edit</button>
23+
<button ng-click="task.editing = !task.editing" ng-if="task.editing">Save</button>
24+
<button ng-click="ctrl.deleteTask(task)">Delete</button>
25+
</li>
26+
</ul>
27+
</div>
28+
</body>
29+
</html>

‎Angular-JS-Projects/Basic/Task-Manager/screenshot.png‎

72.1 KB
Loading

‎Angular-JS-Projects/Basic/Task-Manager/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
background-color: #f0f8ff;
4+
padding: 20px;
5+
}
6+
7+
.container {
8+
max-width: 600px;
9+
margin: 0 auto;
10+
background: #ffffff;
11+
padding: 20px;
12+
border-radius: 8px;
13+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
14+
}
15+
16+
h1 {
17+
text-align: center;
18+
color: #333;
19+
margin-bottom: 20px;
20+
}
21+
22+
input[type="text"] {
23+
width: calc(100% - 100px);
24+
padding: 12px;
25+
margin-right: 10px;
26+
border: 1px solid #ddd;
27+
border-radius: 4px;
28+
font-size: 16px;
29+
transition: border-color 0.3s;
30+
}
31+
32+
input[type="text"]:focus {
33+
border-color: #007bff;
34+
outline: none;
35+
}
36+
37+
button {
38+
padding: 12px 15px;
39+
background-color: #007bff;
40+
color: #fff;
41+
border: none;
42+
border-radius: 4px;
43+
cursor: pointer;
44+
font-size: 16px;
45+
transition: background-color 0.3s;
46+
margin-top: 10px; /* Added margin to create space above the button */
47+
}
48+
49+
button:hover {
50+
background-color: #0056b3;
51+
}
52+
53+
54+
ul {
55+
list-style-type: none;
56+
padding: 0;
57+
}
58+
59+
li {
60+
display: flex;
61+
align-items: center;
62+
justify-content: space-between;
63+
padding: 10px;
64+
margin: 8px 0;
65+
background-color: #f9f9f9;
66+
border: 1px solid #e3e3e3;
67+
border-radius: 4px;
68+
transition: background-color 0.3s;
69+
}
70+
71+
li:hover {
72+
background-color: #e9ecef;
73+
}
74+
75+
span {
76+
flex: 1;
77+
color: #333;
78+
}
79+
80+
button {
81+
margin-left: 10px;
82+
}

0 commit comments

Comments
 (0)