Ir para o conteúdo
document.addEventListener('DOMContentLoaded', function() {
const textInput = document.getElementById('textInput');
const practiceButton = document.getElementById('practiceButton');
const recordButton = document.getElementById('recordButton');
const itemList = document.getElementById('itemList');
const searchInput = document.getElementById('searchInput');
let tasks = [];
let recording = false;
let mediaRecorder;
let audioChunks = [];
// Load tasks from localStorage
if (localStorage.getItem('tasks')) {
tasks = JSON.parse(localStorage.getItem('tasks'));
renderTasks();
}
// Save tasks to localStorage
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// Render tasks to the DOM
function renderTasks() {
itemList.innerHTML = '';
const searchText = searchInput.value.toLowerCase();
tasks.forEach(function(task, index) {
if (task.name.toLowerCase().includes(searchText)) {
const li = document.createElement('li');
const taskName = document.createElement('span');
taskName.textContent = task.name || 'Untitled Task';
taskName.classList.add('task-name');
li.appendChild(taskName);
// Editing functionality
taskName.addEventListener('dblclick', function() {
editTask(task, index, taskName);
});
if (task.audio) {
// Add play button
const playButton = document.createElement('button');
playButton.innerHTML = '';
playButton.className = 'playButton';
playButton.addEventListener('click', function() {
const audio = new Audio(task.audio);
audio.play();
});
li.appendChild(playButton);
}
if (task.isGreen) {
li.classList.add('green');
}
const checkButton = document.createElement('button');
checkButton.innerHTML = '';
checkButton.className = 'checkButton';
checkButton.addEventListener('click', function() {
// Turn the task green
li.classList.add('green');
task.isGreen = true;
saveTasks();
// Check if all tasks are green
const allGreen = tasks.every(function(t) {
return t.isGreen;
});
if (allGreen) {
// Reset all tasks to normal color
tasks.forEach(function(t) {
t.isGreen = false;
});
saveTasks();
renderTasks();
}
// Show popup
showPopup(li, index);
});
li.appendChild(checkButton);
// Add delete button
const deleteButton = document.createElement('button');
deleteButton.innerHTML = '';
deleteButton.className = 'deleteButton';
deleteButton.addEventListener('click', function() {
tasks.splice(index, 1);
saveTasks();
renderTasks();
});
li.appendChild(deleteButton);
itemList.appendChild(li);
}
});
}
function editTask(task, index, taskNameElement) {
const input = document.createElement('input');
input.type = 'text';
input.value = task.name;
input.classList.add('edit-input');
taskNameElement.replaceWith(input);
input.focus();
input.addEventListener('blur', function() {
task.name = input.value.trim() || 'Untitled Task';
saveTasks();
renderTasks();
});
input.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
input.blur();
}
});
}
// Add text task
practiceButton.addEventListener('click', function() {
const text = textInput.value.trim();
if (text !== '') {
const task = {
name: text,
text: text,
isGreen: false
};
tasks.push(task);
saveTasks();
renderTasks();
textInput.value = '';
}
});
// Press Enter to trigger "Practice" button
textInput.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
practiceButton.click();
}
});
// Record audio
recordButton.addEventListener('click', function() {
if (!recording) {
// Start recording
startRecording();
recordButton.innerHTML = '';
} else {
// Stop recording
stopRecording();
recordButton.innerHTML = '';
}
recording = !recording;
});
function startRecording() {
audioChunks = [];
navigator.mediaDevices.getUserMedia({ audio: true })
.then(function(stream) {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
mediaRecorder.ondataavailable = function(e) {
audioChunks.push(e.data);
};
})
.catch(function(err) {
alert('The following error occurred: ' + err);
});
}
function stopRecording() {
mediaRecorder.stop();
mediaRecorder.onstop = function() {
const blob = new Blob(audioChunks, { 'type' : 'audio/webm; codecs=opus' });
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
const base64data = reader.result;
// Prompt for task name
const taskName = prompt('Enter a name for this audio task:', textInput.value.trim() || 'Untitled Task');
if (taskName !== null) {
const task = {
name: taskName.trim() || 'Untitled Task',
audio: base64data,
isGreen: false
};
tasks.push(task);
saveTasks();
renderTasks();
textInput.value = '';
}
};
};
}
function showPopup(itemElement, index) {
// Show overlay and popup
const overlay = document.getElementById('overlay');
const popup = document.getElementById('popup');
overlay.classList.add('active');
popup.classList.add('active');
popup.innerHTML = '';
const message = document.createElement('p');
message.textContent = 'Select Difficulty:';
popup.appendChild(message);
const difficulties = ['HARD', 'MEDIUM', 'EASY'];
difficulties.forEach(function(level) {
const button = document.createElement('button');
button.textContent = level;
button.addEventListener('click', function() {
moveItem(level.toLowerCase(), index);
overlay.classList.remove('active');
popup.classList.remove('active');
});
popup.appendChild(button);
});
}
function moveItem(difficulty, index) {
// Remove the item from its current position in tasks array
const task = tasks.splice(index, 1)[0];
if (difficulty === 'hard') {
// Move to top
tasks.unshift(task);
} else if (difficulty === 'medium') {
// Move to middle
const middleIndex = Math.floor(tasks.length / 2);
tasks.splice(middleIndex, 0, task);
} else if (difficulty === 'easy') {
// Move to bottom
tasks.push(task);
}
saveTasks();
renderTasks();
}
// Search functionality
searchInput.addEventListener('input', function() {
renderTasks();
});
});
