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> -->
<div class="flex justify-end items-center gap-2"> <div class="flex justify-end items-center gap-2">
<button <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> <i class="fa fa-play"></i>
</button> </button>
<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> <i class="fa fa-pause"></i>
</button> </button>
<button <button
@ -78,42 +80,11 @@
</div> </div>
<div class="w-full"> <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>
</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 %} {% endif %}
{% if point.status == 'Completed' %} {% if point.status == 'Completed' %}
@ -156,6 +127,10 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<!---------------------- JS SCRIPTS -------------------->
<script type="text/javascript" src='{% static "js/points.js" %}'></script>
</body> </body>
</html> </html>
Loading…
Cancel
Save