%%html
<!-- put your HTML code in this cell, Make sure to press the Run button to see your results below -->
<!-- CODE WRITTEN BY RAYYAN DARUGAR AND Mateusz Rybczonec -->
<style>
body {
font-family: sans-serif;
display: grid;
height: 100vh;
place-items: center;
}
.base-timer {
position: relative;
width: 300px;
height: 300px;
}
.base-timer__svg {
transform: scaleX(-1);
}
.base-timer__circle {
fill: none;
stroke: none;
}
.base-timer__path-elapsed {
stroke-width: 7px;
stroke: grey;
}
.base-timer__path-remaining {
stroke-width: 7px;
stroke-linecap: round;
transform: rotate(90deg);
transform-origin: center;
transition: 1s linear all;
fill-rule: nonzero;
stroke: currentColor;
}
.base-timer__path-remaining.green {
color: rgb(65, 184, 131);
}
.base-timer__path-remaining.orange {
color: orange;
}
.base-timer__path-remaining.red {
color: red;
}
.base-timer__label {
position: absolute;
width: 300px;
height: 300px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}
</style>
<html>
<button
onclick="getUserInput()">Input Time
</button>
<div id="app"></div>
</html>
<html>
<div>
<!-- notice how tags can be put INSIDE eachother -->
<p>Click me to start a work timer</p>
<p>Use this to time your assignments and input durations</p>
</div>
<!-- second information -->
<div>
<!-- notice how tags can be put INSIDE eachother -->
<p>List out your homework subject, the time you spent working on it, and the importance of that classes homework (out of 5) </p>
</div>
<!--
<form id ="Schedule">
Subject:<br> <input type="text" name="subject" id ="subject"> <br><br>
<br>
Time Spent (Input as x:xx):<br> <input type="text" name="time" id ="time"> <br><br>
<br>
Homework Importance:<br> <input type="text" name="rank" id ="rank"> <br><br>
<input type="submit" value="Submit">
</form>
<div id="result"></div>
-->
<form id="schedule-form">
<div class="form-control">
<label for="subject">Class Subject</label>
<input id="subject" name="subject" type="text" />
</div>
<div class="form-control">
<label for="time">Time Spent Working</label>
<input id="time" name="time" type="number" />
</div>
<div class="form-control">
<label for="rank">Homework Importance</label>
<input id="rank" name="rank" type="number" />
</div>
<button class="btn" type="submit">Send</button>
</form>
</html>
<script>
function getUserInput(){
let timevalue = prompt("Enter Your Countdown Time");
console.log(timevalue);
TIME_LIMIT = timevalue;
timePassed = 0;
timeLeft = 0;
startTimer();
}
/*
function createSchedule(){
event.preventDefault(); // Prevent the form from submitting
var subject = document.getElementById("subject").value;
var time = document.getElementById("time").value;
var rank = document.getElementById("rank").value;
var schedule = {
subject: subject,
time: time,
rank: rank
};
// Display the created object
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "Created Object: " + JSON.stringify(schedule);
var form = document.getElementById("Schedule");
form.addEventListener("submit", createObject);
console.log(schedule)
}
*/
// alternate test code
/*
class Todo {
constructor(subject,time, rank){
this.subject =subject,
this.time = time,
this.rank = rank
}
}
var prevent = function(){
var form = document.querySelector("form").addEventListener("submit", function(event){
event.preventDefault();
})
}
prevent();
var data = document.getElementById("Submit").addEventListener("click", function(){
var newTask = new Todo();
newTask.subject = document.getElementById("subject").value;
newTask.time = document.getElementById("time").value;
newTask.rank = document.getElementById("rank").value;
alert(newTask.name);
})
*/
const form = document.getElementById('schedule-form');
form.addEventListener('submit', callbackFunction);
function callbackFunction(event) {
event.preventDefault();
const myFormData = new FormData(event.target);
const formDataObj = {};
myFormData.forEach((value, key) => (formDataObj[key] = value));
console.log(formDataObj);
};
// Credit: Mateusz Rybczonec
const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;
const COLOR_CODES = {
info: {
color: "green"
},
warning: {
color: "orange",
threshold: WARNING_THRESHOLD
},
alert: {
color: "red",
threshold: ALERT_THRESHOLD
}
};
let TIME_LIMIT = 0;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval = null;
let remainingPathColor = COLOR_CODES.info.color;
document.getElementById("app").innerHTML = `
<div class="base-timer">
<svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="base-timer__circle">
<circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
<path
id="base-timer-path-remaining"
stroke-dasharray="283"
class="base-timer__path-remaining ${remainingPathColor}"
d="
M 50, 50
m -45, 0
a 45,45 0 1,0 90,0
a 45,45 0 1,0 -90,0
"
></path>
</g>
</svg>
<span id="base-timer-label" class="base-timer__label">${formatTime(
timeLeft
)}</span>
</div>
`;
function playSound () {
let ding = new Audio('/student/images/ding.mp3');
ding.play();
}
function onTimesUp() {
clearInterval(timerInterval);
timePassed = 0;
timeLeft = 0;
TIME_LIMIT = 0;
playSound();
}
function startTimer() {
timerInterval = setInterval(() => {
timePassed = timePassed += 1;
timeLeft = TIME_LIMIT - timePassed;
document.getElementById("base-timer-label").innerHTML = formatTime(
timeLeft
);
setCircleDasharray();
setRemainingPathColor(timeLeft);
if (timeLeft <= 0) {
onTimesUp();
}
}, 1000);
}
function formatTime(time) {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
if (seconds < 10) {
seconds = `0${seconds}`;
}
if (time <= 0) {
return "0:00";
}
return `${minutes}:${seconds}`;
}
function setRemainingPathColor(timeLeft) {
const { alert, warning, info } = COLOR_CODES;
if (timeLeft <= alert.threshold) {
document
.getElementById("base-timer-path-remaining")
.classList.remove(warning.color);
document
.getElementById("base-timer-path-remaining")
.classList.add(alert.color);
} else if (timeLeft <= warning.threshold) {
document
.getElementById("base-timer-path-remaining")
.classList.remove(info.color);
document
.getElementById("base-timer-path-remaining")
.classList.add(warning.color);
}
}
function calculateTimeFraction() {
const rawTimeFraction = timeLeft / TIME_LIMIT;
return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
}
function setCircleDasharray() {
const circleDasharray = `${(
calculateTimeFraction() * FULL_DASH_ARRAY
).toFixed(0)} 283`;
document
.getElementById("base-timer-path-remaining")
.setAttribute("stroke-dasharray", circleDasharray);
}
</script>
Click me to start a work timer
Use this to time your assignments and input durations
List out your homework subject, the time you spent working on it, and the importance of that classes homework (out of 5)