General Overview of my Contributions:
- Throughout the project, me and Aidan Lau served as Co-Scrum Masters and organized the group to effectively create backend and frontend code
- I centered on frontend code, specifically integration with the overall calendar and daily plan, as well as homework timers
- Created majority of designs and graphics on the page, including the homepage
- Organized tasks and the project plan
My Code
Daily Plan Page:
- I created the daily plan page as an html page linked to the overall website nav bar
- Created editable textarea blocks for user to input their daily plans into
- Used functions to show when tasks were completed based on time of day and time logged into code
- Developed a showcase page for usage at N@TM based on my plan
- Created buttons to start a pop-up timer for each task set to the exact amount of time for the event by linking to a secondary html page
---
layout: base
title: Daily Plan
permalink: /dailyPlan/
---
<style>
body {
background: lightgray;
width: 100vw;
height: 100vh;
}
.site-header
{
background-color: darkblue;
}
.site-header .wrapper
{
background-color: darkblue;
}
.page-content
{
background-color: white;
}
.wrapper
{
background-color: white;
}
.h-card
{
background-color: rgb(0, 0, 0);
}
.site-footer
{
background-color: darkgreen;
}
.site-footer .wrapper
{
background-color:darkgreen;
}
.site-nav .trigger
{
background-color: darkblue;
}
.page-link
{
background-color: darkblue; /* Set background color to dark blue for page links */
}
.text-center {
color: rgb(10, 10, 10); /* Set font color to black for text elements with class text-center */
}
/*
body {
Font-Family: 'Noto Serif', Serif;
font-size: 16px;
line-height: 1;
}
h1 {
font-family: 'Varela Round', sans-serif;
}
*/
textarea {
background: transparent;
border: none;
resize: none;
border-left: 1px solid #88898C;
padding: 10px;
}
.jumbotron {
text-align: center;
background-color: transparent;
color: black;
border-radius: 0;
border-bottom: 10px solid #88898C;
}
.description {
white-space: pre-wrap;
}
.time-block {
text-align: center;
border-radius: 15px;
}
*/
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #88898C;
}
.past {
background-color: orange;
color: white;
}
.present {
background-color: #D96A29;
color: white;
}
.future {
background-color: #69AFBF;
color: white;
}
.saveBtn {
border: 1px solid #88898C;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #152C40;
color: white;
}
.saveBtn i:hover {
font-size: 25px;
transition: all .3s ease-in-out;
}
</style>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- linking bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<!-- linking fonts -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&family=Varela+Round&display=swap" rel="stylesheet">
<!-- linking css -->
<link rel="stylesheet" href="Assets/style.css" />
<title>Work Day Scheduler</title>
</head>
<body>
<header class="jumbotron text-center">
<h1 class="display-3">Daily Plan Showcase </h1>
<p class="lead">A simple calendar app for scheduling your work day. This is a showcase for Rayyan Darugar</p>
<p class="lead">Click the Save Button to the right of your task to save the assignment (closed for showcase) and open a timer</p>
<p id="currentDay" class="lead"></p>
</header>
<!-- Timeblocks 9AM to 5PM -->
<div class="container">
<div class="row time-block" id="17.5">
<div class="col-1 hour pt-2">5:30 PM</div>
<textarea class="col-10 plan" readonly> Get Home From School </textarea>
<button onclick="openTimerPopup30()" class="col-1 saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class="row time-block" id="18">
<div class="col-1 hour pt-2">6:00 PM</div>
<textarea class="col-10 plan" readonly> Walk Dog & Eat </textarea>
<button onclick="openTimerPopup1()" class="col-1 saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class="row time-block" id="19">
<div class="col-1 hour pt-2">7:00 PM</div>
<textarea class="col-10 plan" readonly> AP Calc HW </textarea>
<button onclick="openTimerPopup1()" class="col-1 saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class="row time-block" id="20">
<div class="col-1 hour pt-2" value="12PM">8:00 PM</div>
<textarea class="col-10 plan" readonly> 30 Min Break </textarea>
<button onclick="openTimerPopup30()" class="col-1 saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class="row time-block" id="20.5">
<div class="col-1 hour pt-2">8:30 PM</div>
<textarea class="col-10 plan" readonly> APUSH HW </textarea>
<button onclick="openTimerPopup1()" class="col-1 saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class="row time-block" id="21.5">
<div class="col-1 hour pt-2">9:30 PM</div>
<textarea class="col-10 plan" readonly> APEL HW </textarea>
<button onclick="openTimerPopup1()" class="col-1 saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class="row time-block" id="22.5">
<div class="col-1 hour pt-2">10:30 PM</div>
<textarea class="col-10 plan" readonly> Robotics Grant Applications </textarea>
<button onclick="openTimerPopup30()" class="col-1 saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class="row time-block" id="23">
<div class="col-1 hour pt-2">11:00 PM</div>
<textarea class="col-10 plan" readonly> AP CSP Work </textarea>
<button onclick="openTimerPopup1()" class="col-1 saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class="row time-block" id="24">
<div class="col-1 hour pt-2">12:00 AM</div>
<textarea class="col-10 plan" readonly> GO TO SLEEP </textarea>
<button class="col-1 saveBtn"><i class="fas fa-save"></i></button>
</div>
</div>
<!-- js scripts, jquery, moment.js, bootstrap js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="Assets/script.js"></script>
</body>
</html>
<script>
/**
* CRITERIA
*/
// GIVEN I am using a daily planner to create a schedule
// WHEN I open the planner
// THEN the current day is displayed at the top of the calendar
// WHEN I scroll down
// THEN I am presented with time blocks for standard business hours
// WHEN I view the time blocks for that day
// THEN each time block is color-coded to indicate whether it is in the past, present, or future
// WHEN I click into a time block
// THEN I can enter an event
// WHEN I click the save button for that time block
// THEN the text for that event is saved in local storage
// WHEN I refresh the page
// THEN the saved events persist
/**
* DEFINE VARIABLES
*/
var saveBtn = $(".saveBtn");
/**
* FUNCTIONS
*/
// current day is displayed at the top of the calendar
$("#currentDay").text(moment().format('dddd MMMM Do YYYY'));
// each time block is color-coded to indicate whether it is in the past, present, or future
function timeBlockColor() {
var hour = moment().hours();
$(".time-block").each(function() {
var currHour = parseFloat($(this).attr("id"));
// console.log(this); //each time-block
if (currHour > hour) {
$(this).addClass("future");
} else if (currHour === hour) {
$(this).addClass("present");
} else {
$(this).addClass("past");
}
})
};
// WHEN I click the save button for that time block
saveBtn.on("click", function() {
// console.log(this); //save button
var time = $(this).siblings(".hour").text();
var plan = $(this).siblings(".plan").val();
// THEN the text for that event is saved in local storage
localStorage.setItem(time, plan);
});
// WHEN I refresh the page
// THEN the saved events persist
function usePlanner() {
$(".hour").each(function() {
var currHour = $(this).text();
var currPlan = localStorage.getItem(currHour);
// console.log(this);
// console.log(currHour);
if(currPlan !== null) {
$(this).siblings(".plan").val(currPlan);
}
});
}
/**
* CALL FUNCTIONS
*/
timeBlockColor();
usePlanner();
</script>
<style>
.page-link
{
background-color: darkblue; /* Set background color to dark blue for page links */
border: transparent
}
.site-header
{
border-top: 0
}
</style>
<style>
.plan[readonly] {
font-size: 32px;
height: 65px;
display: flex; /* Enable flexbox layout */
text-align: center; /* Center the text horizontally */
background: transparent;
overflow: hidden;
}
.col-10.plan {
background-color: transparent !important;
}
</style>
<script>
function openTimerPopup1() {
// Specify the URL of the timer page
var timerURL = "/schedulingappfrontend/timer2.html";
// Open the timer page in a new window with specific dimensions
var timerPopup = window.open(timerURL, "Timer Popup", "width=450, height=350");
}
</script>
<script>
function openTimerPopup30() {
// Specify the URL of the timer page
var timerURL = "/schedulingappfrontend/timer.html";
// Open the timer page in a new window with specific dimensions
var timerPopup = window.open(timerURL, "Timer Popup", "width=450, height=350");
}
</script>
Timer Program:
- Animated timer set to exact times of 30mins or 1:00hr for usage in the daily plan
- Referenced from timer created in the lessons on html
- Linked as a pop-up window in Daily Plan Code
<html>
<div id="app"></div>
</html>
<script>
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
}
};
const TIME_LIMIT = 1800;
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>
`;
startTimer();
function playSound () {
let ding = new Audio('/schedulingappfrontend/images/ding.mp3');
ding.play();
}
function onTimesUp() {
clearInterval(timerInterval);
playSound();
}
function onTimesUp() {
clearInterval(timerInterval);
}
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}`;
}
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>
<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>
Overall Impression of Project
- Really fun to work and design on, end product was both useful and interesting
- Super cool to research and see usage of Canvas API for the calendar
- Hope to add to the code by making the daily plan autogenerated based on the tasks you have written in your calendar
- Would serve to be visually more appealing and give users access to the Timer features for every task
- Would also just be a cool project - I have ideas about making a database to save all the tasks, not just the ones we get from Canvas, into our backend server and reference them on a blank template Daily Plan page
- Already have systems in place, just need to replace the textarea pre-filled in text with a variable and make timers variable as well
- Need to develop a smarter way to see which user is checking which calendar page to help differentiate
- Definitely learned a lot from the project, wished I could have worked more on backend code but learned a ton about integrating the two sides with linking