PatrickOrg/ULTIMATE-JAVASCRIPT-PROJECT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complet Collabaration

Browse Source
This commit is contained in:
Deepak Kumar
2024-07-06 06:40:15 +05:30
parent cbc752b0f0
commit b08538538f
4 changed files with 290 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
Collaboration Tools/4-time_tracking_app/README.md
View File

@@ -2,20 +2,82 @@
## Description
A brief description of the time tracking app project.
The Time Tracking App is designed to help users manage and track their time efficiently. This application allows users to log the time spent on various tasks and projects, providing insights into productivity and time allocation. It's a valuable tool for individuals and teams aiming to improve their time management skills.
## Features
- Feature 1
- Feature 2
- Feature 3
- **Task Management**: Create, update, and delete tasks.
- **Time Logging**: Log the time spent on each task.
- **Reports and Insights**: Generate reports to analyze time allocation and productivity.
## Technologies Used
- JavaScript
- HTML
- CSS
- **JavaScript**: For dynamic interactions and logic.
- **HTML**: For the structure of the web pages.
- **CSS**: For styling and layout.
## Setup
Instructions to set up and run the project.
Follow these instructions to set up and run the project locally:
1. **Clone the Repository**:
```bash
git clone https://github.com/deepakkumar55/ULTIMATE-JAVASCRIPT-PROJECT.git
cd ULTIMATE-JAVASCRIPT-PROJECT/Collaboration%20Tools/4-time_tracking_app
```
2. **Open the Project**:
Open the `index.html` file in your preferred web browser.
3. **Install Dependencies** (if applicable):
If your project has dependencies managed by a package manager (e.g., npm), run:
```bash
npm install
```
4. **Run the Project**:
If you are using a development server, start the server with:
```bash
npm start
```
## Contribution Guidelines
We welcome contributions to the Time Tracking App! Here’s how you can help:
1. **Fork the Repository**: Click the "Fork" button at the top right of the repository page on GitHub.
2. **Clone Your Fork**:
```bash
git clone https://github.com/yourusername/ULTIMATE-JAVASCRIPT-PROJECT.git
cd ULTIMATE-JAVASCRIPT-PROJECT/Collaboration%20Tools/4-time_tracking_app
```
3. **Create a Branch**:
Create a new branch for your feature or bug fix.
```bash
git checkout -b feature-or-bugfix-name
```
4. **Make Changes**:
Implement your feature or bug fix. Be sure to follow the project's coding style and guidelines.
5. **Commit Your Changes**:
Commit your changes with a descriptive commit message.
```bash
git commit -m "Add feature X or Fix bug Y"
```
6. **Push to Your Fork**:
Push your changes to your forked repository.
```bash
git push origin feature-or-bugfix-name
```
7. **Create a Pull Request**:
Go to the original repository on GitHub and create a pull request from your forked branch. Provide a detailed description of your changes and the reason for the contribution.
8. **Code Review**:
Your pull request will be reviewed by the project maintainers. Be prepared to make any necessary changes based on feedback.
Thank you for contributing to the Time Tracking App! Your efforts help make this project better for everyone.

21
Collaboration Tools/4-time_tracking_app/index.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Tracking App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Time Tracking App</h1>
<form id="taskForm">
<input type="text" id="taskName" placeholder="Enter task name">
<button type="submit">Add Task</button>
</form>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>

122
Collaboration Tools/4-time_tracking_app/script.js Normal file
View File

@@ -0,0 +1,122 @@
// Sample data (can be replaced with actual data handling logic)
let tasks = [];
// Selectors
const taskForm = document.getElementById('taskForm');
const taskNameInput = document.getElementById('taskName');
const taskList = document.getElementById('taskList');
// Event listeners
taskForm.addEventListener('submit', function(event) {
event.preventDefault();
const taskName = taskNameInput.value.trim();
if (taskName !== '') {
addTask(taskName);
taskNameInput.value = '';
}
});
taskList.addEventListener('click', function(event) {
const element = event.target;
if (element.tagName === 'BUTTON') {
const taskId = element.parentElement.dataset.taskId;
const action = element.dataset.action;
if (action === 'delete') {
deleteTask(taskId);
} else if (action === 'start') {
startTask(taskId);
} else if (action === 'pause') {
pauseTask(taskId);
} else if (action === 'end') {
endTask(taskId);
}
}
});
// Functions
function addTask(taskName) {
const task = {
id: Date.now(),
name: taskName,
startTime: null,
endTime: null,
totalTime: 0,
paused: false,
completed: false
};
tasks.push(task);
renderTasks();
}
function deleteTask(taskId) {
tasks = tasks.filter(task => task.id != taskId);
renderTasks();
}
function startTask(taskId) {
const task = tasks.find(task => task.id == taskId);
if (task) {
task.startTime = new Date();
task.paused = false;
renderTasks();
}
}
function pauseTask(taskId) {
const task = tasks.find(task => task.id == taskId);
if (task && !task.paused && task.startTime) {
const currentTime = new Date();
const elapsed = currentTime - task.startTime;
task.totalTime += elapsed;
task.paused = true;
renderTasks();
}
}
function endTask(taskId) {
const task = tasks.find(task => task.id == taskId);
if (task && task.startTime && !task.completed) {
const currentTime = new Date();
const elapsed = currentTime - task.startTime;
task.totalTime += elapsed;
task.endTime = currentTime;
task.completed = true;
renderTasks();
}
}
function renderTasks() {
taskList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
li.dataset.taskId = task.id;
let taskInfo = `${task.name}`;
if (task.startTime && !task.completed) {
taskInfo += ` - Time: ${formatTime(task.totalTime)}`;
li.innerHTML = `<span>${taskInfo}</span>
<button data-action="pause">Pause</button>
<button data-action="end">End</button>
<button data-action="delete">Delete</button>`;
} else if (task.completed) {
const totalTimeFormatted = formatTime(task.totalTime);
li.innerHTML = `<span>${taskInfo} - Completed (Total Time: ${totalTimeFormatted})</span>
<button data-action="delete">Delete</button>`;
} else {
li.innerHTML = `<span>${taskInfo}</span>
<button data-action="start">Start</button>
<button data-action="delete">Delete</button>`;
}
taskList.appendChild(li);
});
}
function formatTime(milliseconds) {
const seconds = Math.floor(milliseconds / 1000);
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes}m ${remainingSeconds}s`;
}
// Initial render
renderTasks();

77
Collaboration Tools/4-time_tracking_app/styles.css Normal file
View File

@@ -0,0 +1,77 @@
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
}
form {
display: flex;
margin-bottom: 10px;
}
input[type="text"] {
flex: 1;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
margin-bottom: 5px;
background-color: #f9f9f9;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
li span {
margin-right: 10px;
}
li button {
background-color: #dc3545;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
float: right;
}
li button:hover {
background-color: #c82333;
}