357 lines
20 KiB
HTML
357 lines
20 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||
|
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||
|
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||
|
|
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>FunnyClock²</title>
|
||
|
|
<link rel="stylesheet" href="./styles/root.css">
|
||
|
|
<link rel="stylesheet" href="./styles/clock.css">
|
||
|
|
<link rel="stylesheet" href="./styles/style.css">
|
||
|
|
<link rel="stylesheet" href="./styles/dialog.css">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
|
||
|
|
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
|
||
|
|
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
|
||
|
|
<script src="jqtp.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="back"></div>
|
||
|
|
<div id="backconstrain"></div>
|
||
|
|
<div class="header">
|
||
|
|
<div>
|
||
|
|
<button class="material-symbols-outlined hiw" data-title="Menu" onclick="this.parentElement.parentElement.classList.toggle('wide')">menu</button>
|
||
|
|
<sep></sep>
|
||
|
|
<button class="material-symbols-outlined" data-title="Add World Clock" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-timezone--').classList.add('open');">schedule</button>
|
||
|
|
<button class="material-symbols-outlined" data-title="Add Timer" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-timer--').classList.add('open');">timer</button>
|
||
|
|
<button class="material-symbols-outlined" data-title="Add Note" onclick="addNote();">description</button>
|
||
|
|
<button class="material-symbols-outlined" data-title="Add Checklist" onclick="addChecklist();">checklist</button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<button class="material-symbols-outlined" data-title="Customize Color" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-dialog--').classList.add('open');">palette</button>
|
||
|
|
<button class="material-symbols-outlined" data-title="Open Fullscreen" onclick="openFullscreen();">fullscreen</button>
|
||
|
|
<button class="material-symbols-outlined" data-title="About FunnyClock²" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-about--').classList.add('open');">info</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="body">
|
||
|
|
<div class="clock main-clock">
|
||
|
|
<canvas width="64" height="64"></canvas><!--
|
||
|
|
--><div class="labels">
|
||
|
|
<h1 class="title">Loading...</h1><br />
|
||
|
|
<p class="timezone">Loading...</p>
|
||
|
|
</div><br />
|
||
|
|
<textarea class="txt" title="Notes" placeholder="Take some notes..." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="dialog" id="updatedialog" style="display: none;">
|
||
|
|
<p class="dlg-top">There's an update!</p>
|
||
|
|
<p>You should restart - there's a new update of FunnyClock².</p>
|
||
|
|
<small id="updatesha">If you can see this message, well, you shouldn't! It's an error~!</small>
|
||
|
|
<br />
|
||
|
|
<div>
|
||
|
|
<button onclick="location.reload(true)">UPDATE</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="poplight">
|
||
|
|
<button class="hide material-symbols-outlined" data-title="Toggle Poplight Size" onclick="checkHeight(this.parentElement)">unfold_less</button>
|
||
|
|
<div class="drag material-symbols-outlined" data-title="Drag Poplight" ondblclick="checkHeight(this.parentElement)">open_with</div>
|
||
|
|
<button class="press material-symbols-outlined popped" onclick="this.classList.toggle('popped')"></button>
|
||
|
|
</div>
|
||
|
|
<div class="scrim-over-- scr-dialog--">
|
||
|
|
<div class="dialog" id="colordia">
|
||
|
|
<form id="color">
|
||
|
|
<p class="dlg-top">Customize Color</p>
|
||
|
|
<input type="radio" name="color" id="colorred" value="#FF0000|#400000|#800000|#FFFFFF" /><!--
|
||
|
|
--><label for="colorred" style="background-color:#800000">RED</label><!--
|
||
|
|
--><input type="radio" name="color" id="coloramber" value="#f2aa58|#582007|#7c300a|#FFFFFF" /><!--
|
||
|
|
--><label for="coloramber" style="background-color:#7c300a">AMBER</label><!--
|
||
|
|
--><input type="radio" name="color" id="colororange" value="#FF8000|#402000|#804000|#FFFFFF" /><!--
|
||
|
|
--><label for="colororange" style="background-color:#804000">ORANGE</label><!--
|
||
|
|
--><input type="radio" name="color" id="coloryellow" value="#FFFF00|#404000|#808000|#FFFFFF" /><!--
|
||
|
|
--><label for="coloryellow" style="background-color:#808000">YELLOW</label><!--
|
||
|
|
--><input type="radio" name="color" id="colorgreen" value="#00FF00|#003000|#006000|#FFFFFF" /><!--
|
||
|
|
--><label for="colorgreen" style="background-color:#006000">GREEN</label><!--
|
||
|
|
--><input type="radio" name="color" id="colorblue" value="#00FFFF|#003040|#006080|#FFFFFF" /><!--
|
||
|
|
--><label for="colorblue" style="background-color:#006080">BLUE</label><!--
|
||
|
|
--><input type="radio" name="color" id="colornavy" value="#5865f2|#08116a|#0b168e|#FFFFFF" /><!--
|
||
|
|
--><label for="colornavy" style="background-color:#0b168e">NAVY</label><!--
|
||
|
|
--><input type="radio" name="color" id="colorpurple" value="#FF00FF|#300030|#600060|#FFFFFF" /><!--
|
||
|
|
--><label for="colorpurple" style="background-color:#600060">PURPLE</label><!--
|
||
|
|
--><input type="radio" name="color" id="colordark" value="#FFFF00|#202020|#404040|#FFFFFF" checked /><!--
|
||
|
|
--><label for="colordark" style="background-color:#404040">DARK</label><!--
|
||
|
|
--><input type="radio" name="color" id="colorlight" value="#FFFF00|#d0d0d0|#b0b0b0|#000000" /><!--
|
||
|
|
--><label for="colorlight" style="background-color:#d0d0d0;color:#000000;">LIGHT</label><br /><!--
|
||
|
|
--><input type="radio" name="color" id="colortrans" value="#FF00FF|url(../assets/trans.png)|#004040|#FFFFFF" /><!--
|
||
|
|
--><label for="colortrans" style="background:url(./assets/trans.png)">TRANS</label><!--
|
||
|
|
--><input type="radio" name="color" id="colorrainbow" value="#FFFFFF|url(../assets/rainbow.png)|#400000|#FFFFFF" /><!--
|
||
|
|
--><label for="colorrainbow" style="background:url(./assets/rainbow.png)">RAINBOW</label><br />
|
||
|
|
<p class="dlg-top">Customize Background</p>
|
||
|
|
<input type="radio" name="background" id="bgnone" value="../assets/none.png" /><!--
|
||
|
|
--><label for="bgnone" style="background-image: url(./assets/none.png)">NOTHING</label><!--
|
||
|
|
--><input type="radio" name="background" id="bgclocks" value="../assets/clock.png" checked /><!--
|
||
|
|
--><label for="bgclocks" style="background-image: url(./assets/clock.png)">CLOCKS</label><!--
|
||
|
|
--><input type="radio" name="background" id="bgclockstwo" value="../assets/clock2.png" /><!--
|
||
|
|
--><label for="bgclockstwo" style="background-image: url(./assets/clock2.png)">CLOCKS 2</label><!--
|
||
|
|
--><input type="radio" name="background" id="bgsus" value="../assets/sussy.png" /><!--
|
||
|
|
--><label for="bgsus" style="background-image: url(./assets/sussy.png)">SUSSY</label><!--
|
||
|
|
--><input type="radio" name="background" id="bghour" value="../assets/hourglass.png" /><!--
|
||
|
|
--><label for="bghour" style="background-image: url(./assets/hourglass.png)">WORKING</label><!--
|
||
|
|
--><input type="radio" name="background" id="bginter" value="../assets/interro.png" /><!--
|
||
|
|
--><label for="bginter" style="background-image: url(./assets/interro.png)">INTERRO</label><!--
|
||
|
|
--><input type="radio" name="background" id="bgbad" value="../assets/chemistry.png" /><!--
|
||
|
|
--><label for="bgbad" style="background-image: url(./assets/chemistry.png)">CHEMIST</label><!--
|
||
|
|
--><input type="radio" name="background" id="bgsport" value="../assets/sport.png" /><!--
|
||
|
|
--><label for="bgsport" style="background-image: url(./assets/sport.png)">SPORT</label><!--
|
||
|
|
--><input type="radio" name="background" id="bgmark" value="../assets/mark.png" /><!--
|
||
|
|
--><label for="bgmark" style="background-image: url(./assets/mark.png)">MARK</label><!--
|
||
|
|
--><input type="radio" name="background" id="bgtile" value="../assets/tile.png" /><!--
|
||
|
|
--><label for="bgtile" style="background-image: url(./assets/tile.png)">TILE</label><!--
|
||
|
|
--><input type="radio" name="background" id="bgtiletwo" value="../assets/tile2.png" /><!--
|
||
|
|
--><label for="bgtiletwo" style="background-image: url(./assets/tile2.png)">DIAG</label><br />
|
||
|
|
<div>
|
||
|
|
<input type="submit" name="action" value="DONE"/>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="scrim-over-- scr-timezone--">
|
||
|
|
<div class="dialog" id="timezonedia">
|
||
|
|
<p class="dlg-top">Select Timezone</p>
|
||
|
|
<form id="timezone">
|
||
|
|
<select name="timezone" title="Timezone">
|
||
|
|
<option value="Etc/GMT">GMT</option>
|
||
|
|
<option value="Etc/GMT-1">GMT+1 ECT</option>
|
||
|
|
<option value="Etc/GMT-2">GMT+2 ART</option>
|
||
|
|
<option value="Etc/GMT-3">GMT+3 EAT</option>
|
||
|
|
<option value="Etc/GMT-4">GMT+4 NET</option>
|
||
|
|
<option value="Etc/GMT-5">GMT+5 IET</option>
|
||
|
|
<option value="Etc/GMT-6">GMT+6 BST</option>
|
||
|
|
<option value="Etc/GMT-7">GMT+7 VST</option>
|
||
|
|
<option value="Etc/GMT-8">GMT+8 CTT</option>
|
||
|
|
<option value="Etc/GMT-9">GMT+9 JST</option>
|
||
|
|
<option value="Etc/GMT-10">GMT+10 AET</option>
|
||
|
|
<option value="Etc/GMT-11">GMT+11 SST</option>
|
||
|
|
<option value="Etc/GMT+1">GMT-1 ???</option>
|
||
|
|
<option value="Etc/GMT+2">GMT-2 ???</option>
|
||
|
|
<option value="Etc/GMT+3">GMT-3 BET</option>
|
||
|
|
<option value="Etc/GMT+4">GMT-4 PRT</option>
|
||
|
|
<option value="Etc/GMT+5">GMT-5 EST</option>
|
||
|
|
<option value="Etc/GMT+6">GMT-6 CST</option>
|
||
|
|
<option value="Etc/GMT+7">GMT-7 MST</option>
|
||
|
|
<option value="Etc/GMT+8">GMT-8 PST</option>
|
||
|
|
<option value="Etc/GMT+9">GMT-9 AST</option>
|
||
|
|
<option value="Etc/GMT+10">GMT-10 HST</option>
|
||
|
|
<option value="Etc/GMT+11">GMT-11 ???</option>
|
||
|
|
<option value="Etc/GMT+12">GMT12</option>
|
||
|
|
</select>
|
||
|
|
<div>
|
||
|
|
<input type="submit" name="action" value="DONE"/>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="scrim-over-- scr-timer--">
|
||
|
|
<div class="dialog" id="timerdia">
|
||
|
|
<p class="dlg-top">Configure Timer</p>
|
||
|
|
<form id="timerform">
|
||
|
|
<!-- <Peter... the="horse" is h=ere /> -->
|
||
|
|
<input type="number" name="minute" placeholder="05" min="00" value="05" /><span>:</span><input type="number" name="second" placeholder="00" min="00" value="00" max="59" /><br />
|
||
|
|
<input type="checkbox" name="ctp" id="ctp" /> <label for="ctp">Connected To Poplight (running = on, done = off)</label><br />
|
||
|
|
<p class="dlg-top">Configure Tone</p>
|
||
|
|
<input type="radio" name="tone" id="tonebeet" value="beethoven" /><!--
|
||
|
|
--><label for="tonebeet">BEETHOVEN</label><!--
|
||
|
|
--><input type="radio" name="tone" id="tonemegalo" value="megalo" /><!--
|
||
|
|
--><label for="tonemegalo">MEGALO</label><!--
|
||
|
|
--><input type="radio" name="tone" id="toneringer" value="ringer" /><!--
|
||
|
|
--><label for="toneringer">RINGER</label><!--
|
||
|
|
--><input type="radio" name="tone" id="toneringertwo" value="ringer2" /><!--
|
||
|
|
--><label for="toneringertwo">RINGER 2</label><!--
|
||
|
|
--><input type="radio" name="tone" id="tonesweet" value="sweet" /><!--
|
||
|
|
--><label for="tonesweet">DANCE</label><!--
|
||
|
|
--><input type="radio" name="tone" id="tonetone" value="tone" checked /><!--
|
||
|
|
--><label for="tonetone">DRY</label><!--
|
||
|
|
--><input type="radio" name="tone" id="tonetwinkle" value="twinkle" /><!--
|
||
|
|
--><label for="tonetwinkle">TWINKLE</label><!--
|
||
|
|
--><input type="radio" name="tone" id="toneviolin" value="violin" /><!--
|
||
|
|
--><label for="toneviolin">VIOLIN</label><!--
|
||
|
|
--><input type="radio" name="tone" id="tonenone" value="none" /><!--
|
||
|
|
--><label for="tonenone">NONE</label>
|
||
|
|
<div>
|
||
|
|
<input type="submit" name="action" value="DONE"/>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="scrim-over-- scr-about--">
|
||
|
|
<div class="dialog" id="aboutdia">
|
||
|
|
<p class="dlg-top">About FunnyClock²</p>
|
||
|
|
<form id="aboutform">
|
||
|
|
<!-- FUCK -->
|
||
|
|
<p>FunnyClock² is the successor of FunnyClock, an application made for my school to show when smartboards are idle.</p>
|
||
|
|
<p>FunnyClock was originally a single-file local webpage hosted on the computers of the teachers, and now with FunnyClock², it's a multi-file customizable suite for clocks and timers.</p>
|
||
|
|
<p class="dlg-top">Special Thanks to</p>
|
||
|
|
<ul>
|
||
|
|
<li>Josh, science and tech teacher</li>
|
||
|
|
<li>Everyone who accepted my pitch for the FunnyClock² app</li>
|
||
|
|
<li>Among Us (Sussy background)</li>
|
||
|
|
<li>Portal 2 (Tile background)</li>
|
||
|
|
<li>Kaboom.js (Mark background)</li>
|
||
|
|
<li>Material Design (UI inspiration)</li>
|
||
|
|
</ul>
|
||
|
|
<div>
|
||
|
|
<input type="submit" name="action" value="OK"/>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div>
|
||
|
|
<script>
|
||
|
|
$(".poplight").draggable({
|
||
|
|
containment: $("#backconstrain"),
|
||
|
|
handle: "div.drag",
|
||
|
|
drag: (e, u) => {
|
||
|
|
var bottom = ($(window).height() - u.position.top);
|
||
|
|
if ((bottom < 210 && bottom >= 78) && !u.helper[0].classList.contains("hidden")) {
|
||
|
|
u.position.top = ($(window).height() - 210);
|
||
|
|
} else if (bottom < 78) {
|
||
|
|
u.helper[0].classList.add("hidden");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function checkHeight(el) {
|
||
|
|
var bottom = ($(window).height() - el.getBoundingClientRect().top);
|
||
|
|
if (bottom < 210) {
|
||
|
|
el.classList.add('hidden');
|
||
|
|
} else {
|
||
|
|
el.classList.toggle('hidden');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var elem = document.documentElement;
|
||
|
|
|
||
|
|
function openFullscreen() {
|
||
|
|
if (document.fullscreenElement == null) {
|
||
|
|
if (elem.requestFullscreen) {
|
||
|
|
elem.requestFullscreen();
|
||
|
|
} else if (elem.webkitRequestFullscreen) { /* Safari */
|
||
|
|
elem.webkitRequestFullscreen();
|
||
|
|
} else if (elem.msRequestFullscreen) { /* IE11 */
|
||
|
|
elem.msRequestFullscreen();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (document.exitFullscreen) {
|
||
|
|
document.exitFullscreen();
|
||
|
|
} else if (document.webkitExitFullscreen) { /* Safari */
|
||
|
|
document.webkitExitFullscreen();
|
||
|
|
} else if (document.msExitFullscreen) { /* IE11 */
|
||
|
|
document.msExitFullscreen();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.querySelector("#color").addEventListener("submit", (e) => {
|
||
|
|
const formData = new FormData(e.target);
|
||
|
|
var colors = formData.get("color").split("|");
|
||
|
|
localStorage.setItem("colors", formData.get("color"));
|
||
|
|
console.log(colors);
|
||
|
|
localStorage.setItem("background", formData.get("background"));
|
||
|
|
document.documentElement.style.setProperty('--main-color', colors[0]);
|
||
|
|
document.documentElement.style.setProperty('--background', colors[1]);
|
||
|
|
document.documentElement.style.setProperty('--background-light', colors[2]);
|
||
|
|
document.documentElement.style.setProperty('--foreground', colors[3]);
|
||
|
|
document.documentElement.style.setProperty('--background-image', "url(" + formData.get("background") + ")");
|
||
|
|
document.querySelector('.scr-dialog--').classList.remove('open');
|
||
|
|
event.preventDefault();
|
||
|
|
})
|
||
|
|
|
||
|
|
var colors = (localStorage.getItem("colors") ?? "#FFFF00|#202020|#404040|#FFFFFF").split("|");
|
||
|
|
document.documentElement.style.setProperty('--main-color', colors[0]);
|
||
|
|
document.documentElement.style.setProperty('--background', colors[1]);
|
||
|
|
document.documentElement.style.setProperty('--background-light', colors[2]);
|
||
|
|
document.documentElement.style.setProperty('--foreground', colors[3]);
|
||
|
|
document.documentElement.style.setProperty('--background-image', "url(" + (localStorage.getItem("background") ?? "../assets/clock.png") + ")");
|
||
|
|
|
||
|
|
document.querySelector("#color").addEventListener("change", (e) => {
|
||
|
|
const formData = new FormData(document.querySelector("#color"));
|
||
|
|
var colors = formData.get("color").split("|");
|
||
|
|
document.documentElement.style.setProperty('--main-color', colors[0]);
|
||
|
|
document.documentElement.style.setProperty('--background', colors[1]);
|
||
|
|
document.documentElement.style.setProperty('--foreground', colors[3]);
|
||
|
|
document.documentElement.style.setProperty('--background-light', colors[2]);
|
||
|
|
})
|
||
|
|
|
||
|
|
document.querySelector("#timerform").addEventListener("submit", (e) => {
|
||
|
|
event.preventDefault();
|
||
|
|
const formData = new FormData(e.target);
|
||
|
|
var checked = formData.get("ctp") == "on";
|
||
|
|
var time = (parseInt(formData.get("minute")) * 60) + parseInt(formData.get("second"));
|
||
|
|
document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="timer timer-enabled" data-time="${time}" data-orig="${time}" data-ctp="${checked}" data-tone="${formData.get("tone")}">
|
||
|
|
<canvas width="64" height="64"></canvas><!--
|
||
|
|
--><div class="labels">
|
||
|
|
<h1 class="time"><span class="mins">00</span>:<span class="seconds">00</span></h1><br />
|
||
|
|
</div><br />
|
||
|
|
<button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
|
||
|
|
<button class="normalclock material-symbols-outlined" onclick="this.parentElement.classList.toggle('timer-paused');">pause</button>
|
||
|
|
<button class="normalclock material-symbols-outlined" onclick="this.parentElement.dataset.time = this.parentElement.dataset.orig;this.parentElement.classList.add('timer-enabled');updateTimer()">refresh</button>
|
||
|
|
</div>`);
|
||
|
|
if (checked) {
|
||
|
|
document.querySelector(".poplight .press").classList.remove("popped");
|
||
|
|
}
|
||
|
|
updateTimer();
|
||
|
|
document.querySelector('.scr-timer--').classList.remove('open');
|
||
|
|
})
|
||
|
|
|
||
|
|
document.querySelector("#aboutform").addEventListener("submit", (e) => {
|
||
|
|
event.preventDefault();
|
||
|
|
document.querySelector('.scr-about--').classList.remove('open');
|
||
|
|
})
|
||
|
|
|
||
|
|
document.querySelector("#timezone").addEventListener("submit", (e) => {
|
||
|
|
event.preventDefault();
|
||
|
|
const formData = new FormData(e.target);
|
||
|
|
document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="clock" data-timezone="${formData.get("timezone")}">
|
||
|
|
<canvas width="64" height="64"></canvas><!--
|
||
|
|
--><div class="labels">
|
||
|
|
<h1 class="title">Loading...</h1><br />
|
||
|
|
<p class="timezone">Loading...</p>
|
||
|
|
</div><br />
|
||
|
|
<button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
|
||
|
|
</div>`);
|
||
|
|
update();
|
||
|
|
document.querySelector('.scr-timezone--').classList.remove('open');
|
||
|
|
})
|
||
|
|
|
||
|
|
function addNote() {
|
||
|
|
document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="noteobject">
|
||
|
|
<textarea class="txt" title="Notes" placeholder="Take some notes..." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
|
||
|
|
<button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
|
||
|
|
</div>`);
|
||
|
|
}
|
||
|
|
|
||
|
|
function addChecklist() {
|
||
|
|
document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="noteobject">
|
||
|
|
<div class="lister">
|
||
|
|
<div class="checkobject">
|
||
|
|
<button onclick="this.parentElement.remove();" class="deleteclock material-symbols-outlined">close</button>
|
||
|
|
<input type="text" placeholder="Checklist item" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
|
||
|
|
<button class="normalclock material-symbols-outlined" onclick="addCheckbox(this.parentElement.querySelector('.lister'));">add</button>
|
||
|
|
</div>`);
|
||
|
|
}
|
||
|
|
|
||
|
|
function addCheckbox(obj) {
|
||
|
|
obj.insertAdjacentHTML( "beforeend", `<div class="checkobject">
|
||
|
|
<button onclick="this.parentElement.remove();" class="deleteclock material-symbols-outlined">close</button>
|
||
|
|
<input type="text" placeholder="Checklist item" />
|
||
|
|
</div>`);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script src="./canvas.js"></script>
|
||
|
|
<script src="./update.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|