New changes.

main
nataly 1 year ago
parent a52f83a8d2
commit cd429ec385

@ -0,0 +1,17 @@
function setTextColor(color) {
document.querySelector('.pointTotalTime').classList.remove('text-green-700', 'text-red-500');
document.querySelector('.pointTotalTime').classList.add(color);
}
document.getElementById('startPointButton').addEventListener('click', function() {
document.getElementById('startPointButton').style.display = 'none';
document.getElementById('pausePointButton').style.display = 'block';
setTextColor('text-green-700');
});
document.getElementById('pausePointButton').addEventListener('click', function() {
document.getElementById('pausePointButton').style.display = 'none';
document.getElementById('startPointButton').style.display = 'block';
setTextColor('text-red-500');
});

@ -49,11 +49,13 @@
</div> -->
<div class="flex justify-end items-center gap-2">
<button
class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 flex justify-center items-center hover:scale-105 transition-transform duration-300" id="startPointButton">
class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 flex justify-center items-center hover:scale-105 transition-transform duration-300"
id="startPointButton">
<i class="fa fa-play"></i>
</button>
<button
class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 justify-center items-center hidden hover:scale-105 transition-transform duration-300" id="pausePointButton">
class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 justify-center items-center hidden hover:scale-105 transition-transform duration-300"
id="pausePointButton">
<i class="fa fa-pause"></i>
</button>
<button
@ -78,42 +80,11 @@
</div>
<div class="w-full">
<p class="text-gray-500 text-sm">Total Time: <span class="font-semibold pointTotalTime text-red-500">0min</span></p>
<p class="text-gray-500 text-sm">Total Time: <span
class="font-semibold pointTotalTime text-red-500">0min</span></p>
</div>
</div>
<script>
function setTextColor(color) {
document.querySelector('.pointTotalTime').classList.remove('text-green-700', 'text-red-500');
document.querySelector('.pointTotalTime').classList.add(color);
}
document.getElementById('startPointButton').addEventListener('click', function() {
// Hide the play button
document.getElementById('startPointButton').style.display = 'none';
// Display the pause button
document.getElementById('pausePointButton').style.display = 'block';
// Set the text color to green
setTextColor('text-green-700');
});
document.getElementById('pausePointButton').addEventListener('click', function() {
// Hide the pause button
document.getElementById('pausePointButton').style.display = 'none';
// Display the play button
document.getElementById('startPointButton').style.display = 'block';
// Set the text color to red
setTextColor('text-red-500');
});
</script>
{% endif %}
{% if point.status == 'Completed' %}
@ -156,6 +127,10 @@
{% endfor %}
</div>
</div>
<!---------------------- JS SCRIPTS -------------------->
<script type="text/javascript" src='{% static "js/points.js" %}'></script>
</body>
</html>
Loading…
Cancel
Save