diff --git a/index.html b/index.html index 75e3036..cac2a1d 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,9 @@


  • -
    Add Timer [WIP]
    +

    +

    Enable Timer
    +

    • diff --git a/quoteTest.html b/quoteTest.html index 6154ac0..fa3b6ec 100644 --- a/quoteTest.html +++ b/quoteTest.html @@ -15,6 +15,7 @@

    Quote Test

    Quotes will be listed below. +
    diff --git a/script/dropdownHandler.js b/script/dropdownHandler.js index 84360e4..aa50c7e 100644 --- a/script/dropdownHandler.js +++ b/script/dropdownHandler.js @@ -169,13 +169,6 @@ } - const timerBtn1 = document.getElementById("timerBtn1") - - timerBtn1.addEventListener("click", () => { - createPopup("blank", "info", "The timer feature has not been implemented yet!") - }) - - function createPopup(buttons, type, content) { return new Promise((resolve) => { diff --git a/script/indexquoteHandle.js b/script/indexquoteHandle.js index 2108b7d..eec4ced 100644 --- a/script/indexquoteHandle.js +++ b/script/indexquoteHandle.js @@ -153,7 +153,8 @@ document.getElementById("addQuote").addEventListener("click", function () { }); document.getElementById("submitQuotes").addEventListener("click", function () { - var intensitySetting = localStorage.getItem("intensity") ?? 50; + var settings = JSON.parse(localStorage.getItem("options")) ?? {}; + var intensitySetting = settings.intensity ?? 50; var quotes = document.getElementsByClassName("quote"); var quoteArray = []; for (var i = 0; i < quotes.length; i++) { @@ -167,7 +168,13 @@ document.getElementById("submitQuotes").addEventListener("click", function () { } localStorage.setItem("quotes", btoa(encodeURIComponent(JSON.stringify(quoteArray)))); - localStorage.setItem("intensity", intensitySetting) + + + let newOptions = JSON.parse(localStorage.getItem("options")) ?? {}; + + newOptions.intensity = intensitySetting; + + localStorage.setItem("options", JSON.stringify(newOptions)); window.location.href = "quoteTest.html?quotes=true"; }); diff --git a/script/optionHandle.js b/script/optionHandle.js index 3c6dcf1..3ec5af0 100644 --- a/script/optionHandle.js +++ b/script/optionHandle.js @@ -1,18 +1,178 @@ (function () { +function createPopup(buttons, type, content) { + return new Promise((resolve) => { + const popup = document.getElementById("popup") + const button1 = document.getElementById("button1") + const button2 = document.getElementById("button2") + const button3 = document.getElementById("button3") + const title = document.getElementById("popupTitle") + const text = document.getElementById("popupText") + const popupContent = document.getElementById("popupContent") + popup.style.overflow = "auto" + document.body.style.overflow = "hidden" + if (buttons === "yn") { + button1.style.display = "block" + button2.style.display = "block" + button1.innerHTML = "Yes" + button2.innerHTML = "No" + button1.addEventListener("click", () => { + resolve(true); + closePopup() + }); + button2.addEventListener("click", () => { + resolve(false); + closePopup() + }); + } + else if (buttons === "ok") { + button1.style.display = "block" + button1.innerHTML = "OK" + button1.addEventListener("click", () => { + resolve(true); + closePopup() + }) + } + else if (buttons === "blank") { + } + else if (buttons === "force") { + button1.style.display = "block"; + button2.style.display = "block"; + button1.innerHTML = "OK"; + button2.innerHTML = "Complete Anyway"; + button1.addEventListener("click", () => { + resolve(false) + closePopup(); + }) + button2.addEventListener("click", () => { + resolve(true); + closePopup(); + }) + } + else if (buttons === "timerSettings") { + button1.style.display = "block"; + button1.innerHTML = "Enable"; + + button1.addEventListener("click", () => { + resolve(true); + closePopup(); + }) + + button2.style.display = "block"; + button2.innerHTML = "Disable"; + button2.addEventListener("click", () => { + resolve(false); + closePopup(); + }) + } + else { + button1.style.display = "block" + button1.innerHTML = "debug: Invalid Button Type!!" + } + + if (type === "info") { + title.innerHTML = "ℹ️ Information" + title.style.color = "#67f5ff" + } + else if (type === "caution") { + title.innerHTML = "⚠️Caution"; + title.style.color = "#ffdf77"; + } + else if (type === "warning") { + title.innerHTML = "❗ Warning"; + title.style.color = "#cd1000" + } + else if (type === "error") { + title.innerHTML = "❗ Error"; + title.style.color = "#cd1000"; + } + else if (type === "timer") { + title.innerHTML = "⏲️ Timer"; + } + else { + title.innerHTML = type; + } + text.innerHTML = content; + popup.style.display = "block" + window.addEventListener("click", (event) => { + if (event.target == popup) { + closePopup(); + } + } + ) + const closeBtn = document.getElementById("closePopup") + function closePopup() { + popup.style.overflow = "hidden"; + popupContent.style.animation = "contentOut 0.6s"; + popup.style.animation = "bgOut 0.6s"; + popup.addEventListener("animationend", (event) => { + if (event.animationName === "bgOut") { + popup.style.display = "none" + button1.style.display = "none"; + button2.style.display = "none"; + button3.style.display = "none"; + popup.style.animation = ""; + popupContent.style.animation = ""; + document.body.style.overflow = "auto"; + } + }) + } + closeBtn.addEventListener("click", () => { + closePopup() + }) + }); +} + +function prepareTimerText(seconds) { + // Turn num to minutes if it's greater than 60 + var timeMinutes = Math.floor(seconds / 60); + var timeSeconds = seconds % 60; + + var minutesText = timeMinutes === 1 ? "minute" : "minutes"; + var secondsText = timeSeconds === 1 ? "second" : "seconds"; + + if (seconds >= 60) { + return `⏲️ Timer Enabled: ${timeMinutes} ${minutesText} and ${timeSeconds} ${secondsText}`; + } + else { + return `⏲️ Timer Enabled: ${timeSeconds} ${secondsText}`; + } + + +} + var intensity = document.getElementById("intensityRange") var intensityOutput = document.getElementById("intensityValue") intensityOutput.innerHTML = intensity.value; // Set the value of the range to the value stored in the local storage -if (localStorage.getItem("intensity") !== null) { - intensity.value = localStorage.getItem("intensity"); - intensityOutput.innerHTML = localStorage.getItem("intensity"); +if (localStorage.getItem("options") !== null) { + intensity.value = JSON.parse(localStorage.getItem("options")).intensity; + intensityOutput.innerHTML = JSON.parse(localStorage.getItem("options")).intensity; + + if (JSON.parse(localStorage.getItem("options")).timer !== undefined) { + const optionField = document.getElementsByClassName("optionsField")[0]; + + const timerText = document.createElement("div") + timerText.classList.add("timerText"); + + const num = JSON.parse(localStorage.getItem("options")).timer + + timerText.innerHTML = prepareTimerText(num); + + optionField.appendChild(timerText); + + document.getElementById("timerBtn1").innerHTML = "Edit Timer"; + } } intensity.oninput = function () { intensityOutput.innerHTML = this.value; - localStorage.setItem("intensity", this.value); + let newOptions = JSON.parse(localStorage.getItem("options")) ?? {}; + + newOptions.intensity = this.value; + + localStorage.setItem("options", JSON.stringify(newOptions)); // console.log(this.value); } @@ -24,7 +184,8 @@ optionText.addEventListener("click", function (element) { // console.log("Click") if (element.target.innerHTML.includes("▼")) { element.target.innerHTML = "⚙️ Options ▲"; - optionField.style.maxHeight = "200px"; + let estimatedHeight = optionField.scrollHeight; + optionField.style.maxHeight = estimatedHeight + "px"; optionField.style.padding = "10px"; optionText.classList.remove("optionsClosed"); optionText.classList.add("optionsOpened"); @@ -45,4 +206,117 @@ optionText.addEventListener("click", function (element) { }); } }); + +const timerBtn1 = document.getElementById("timerBtn1") + +timerBtn1.addEventListener("click", () => { + createPopup("timerSettings", "timer", "Select your time (In seconds):
    ") + + var input = document.createElement("input"); + input.type = "number"; + input.id = "timerInput"; + input.min = "1"; // restrict input to positive numbers + + if (localStorage.getItem("options") !== null && JSON.parse(localStorage.getItem("options")).timer !== undefined){ + input.value = JSON.parse(localStorage.getItem("options")).timer; + input.placeholder = JSON.parse(localStorage.getItem("options")).timer; + } + else { + input.value = 1; + input.placeholder = "1"; + } + + + input.classList.add("timerInput"); + + document.getElementById("popupText").appendChild(input); + + var buttonContainer = document.createElement("div"); + buttonContainer.classList.add("button-container"); + document.getElementById("popupText").appendChild(buttonContainer); + + var minus1 = document.createElement("button"); + minus1.innerHTML = "-1"; + minus1.classList.add("minus1"); + buttonContainer.appendChild(minus1); + + // Add +1 -1 buttons + var plus1 = document.createElement("button"); + plus1.innerHTML = "+1"; + plus1.classList.add("plus1"); + buttonContainer.appendChild(plus1); + + // Add event listeners to the buttons + plus1.addEventListener("click", () => { + var num = parseInt(input.value) + + if (isNaN(num) || num < 1) { + input.value = 1; + num = 1; + } + + input.value = num + 1; + }); + + minus1.addEventListener("click", () => { + var num = parseInt(input.value) + + if (isNaN(num) || num < 2) { + input.value = 2; + num = 2; + } + + input.value = num - 1; + }); + + // Wait till the user clicks OK + var timerInput = document.getElementById("timerInput"); + var button1 = document.getElementById("button1"); + button1.addEventListener("click", () => { + var num = parseInt(timerInput.value); + + const optionField = document.getElementsByClassName("optionsField")[0]; + + if (document.getElementsByClassName("timerText").length > 0) { + optionField.removeChild(document.getElementsByClassName("timerText")[0]); + } + + const timerText = document.createElement("div") + timerText.classList.add("timerText"); + + + timerText.innerHTML = prepareTimerText(num); + + optionField.appendChild(timerText); + + let newOptions = JSON.parse(localStorage.getItem("options")) ?? {}; + newOptions.timer = num; + + localStorage.setItem("options", JSON.stringify(newOptions)); + document.getElementById("timerBtn1").innerHTML = "Edit Timer"; + + // Recalcualte height + optionField.style.maxHeight = optionField.scrollHeight + "px"; + }); + + var button2 = document.getElementById("button2"); + + button2.addEventListener("click", () => { + const optionField = document.getElementsByClassName("optionsField")[0]; + + if (document.getElementsByClassName("timerText").length > 0) { + optionField.removeChild(document.getElementsByClassName("timerText")[0]); + } + + // Remove timer from local storage options + let newOptions = JSON.parse(localStorage.getItem("options")) ?? {}; + delete newOptions.timer; + + localStorage.setItem("options", JSON.stringify(newOptions)); + + document.getElementById("timerBtn1").innerHTML = "Enable Timer"; + }); + +}) + })(); \ No newline at end of file diff --git a/script/quoteHandle.js b/script/quoteHandle.js index 7849a8c..66eebeb 100644 --- a/script/quoteHandle.js +++ b/script/quoteHandle.js @@ -194,8 +194,9 @@ if (currentPage === "quoteTest" && quotes !== null) { // Is the quoteTest page var data = decodeURIComponent(atob(localStorage.getItem("quotes"))); - var intensity = localStorage.getItem("intensity") + var intensity = JSON.parse(localStorage.getItem("options")).intensity var inputdata = {}; + var submitted = false; if (data === null) { // No Quotes @@ -205,6 +206,7 @@ // Setup Listeners var submitButton = document.getElementsByClassName("submitButton")[0]; + var forcedSubmit = false; // Submit Button Listener submitButton.addEventListener("click", async function () { @@ -214,7 +216,7 @@ // Check if all inputs are filled var quotes = document.getElementsByClassName("quoteCheck"); for (var i = 0; i < quotes.length; i++) { - if (quotes[i].value === "") { + if (quotes[i].value === "" && !forcedSubmit) { var result = await createPopup("force", "caution", "Please fill in all the words to see your score.") // console.log(result) @@ -236,6 +238,11 @@ } + // Reset the flag to false after handling the click + skipModal = false; + + submitted = true; + // Check if all inputs are correct for (var j = 0; j < quotes.length; j++) { var quote = quotes[j]; @@ -318,6 +325,7 @@ window.location.href = "index.html"; }); + // Quote Setup Sequence var quotes = JSON.parse(data); var quoteList = document.getElementById("quoteList"); @@ -399,6 +407,34 @@ } // console.log("---- Quotes ----") // console.log(quotes) + + + // Check If Timer is enabled + if (localStorage.getItem("options") !== null && JSON.parse(localStorage.getItem("options")).timer) { + console.log("Timer Enabled") + var timer = JSON.parse(localStorage.getItem("options")).timer; + var timerElement = document.getElementById("timer"); + + timerElement.classList.add("timerStyle"); + + timerElement.innerHTML = "⏲️ Timer: " + timer + "s"; + var interval = setInterval(() => { + if (submitted) { + clearInterval(interval); + return; + } + + timer--; + timerElement.innerHTML = "⏲️ Timer: " + timer + "s"; + if (timer === 0) { + clearInterval(interval); + forcedSubmit = true; + submitButton.click(); + timerElement.innerHTML = "⏲️ Timer: Expired"; + + } + }, 1000); + } } else { var box = document.getElementsByClassName("border-box")[0] diff --git a/style/index.css b/style/index.css index 74a6921..70e6a42 100644 --- a/style/index.css +++ b/style/index.css @@ -60,6 +60,7 @@ a { border: ridge; border-color: rgb(45, 45, 168); border-bottom-right-radius: 10px; + z-index: 1; } .quoteForm { @@ -345,7 +346,7 @@ a { .popupContent { font-family: "Nunito"; width: 500px; - height: 300px; + min-height: 300px; position: absolute; top: 50%; left: 50%; @@ -670,6 +671,116 @@ a { font-family: "Nunito", sans-serif; } +.timerInput { + width: 60%; + height: 57px; + padding: 12px 20px; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + background-color: #f8f8f8; + font-size: 16px; + resize: none; + margin: 1rem auto; + text-align: center; + display: block; + -webkit-appearance: none; + -moz-appearance: textfield; +} + +/* Hide the spinner in WebKit browsers (like Chrome and Safari) */ +.timerInput::-webkit-outer-spin-button, +.timerInput::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Hide the spinner in Firefox */ +.timerInput { + -moz-appearance: textfield; +} + +.plus1 { + background-color: white; + border: 2px solid rgb(87, 62, 230); + border-radius: 10px; + color: rgb(87, 62, 230); + padding: 10px; + margin-bottom: 10px; + font-family: "Nunito", sans-serif; + font-size: 20px; + transition: background-color 300ms linear; + -webkit-transition: background-color 300ms linear; + -ms-transition: background-color 300ms linear; + -o-transition: background-color 300ms linear; + -ms-transition: background-color 300ms linear; + user-select: none; +} + +.plus1:hover { + cursor: pointer; + background-color: #7777ff; + color: white; +} + +.minus1 { + background-color: white; + border: 2px solid rgb(87, 62, 230); + border-radius: 10px; + color: rgb(87, 62, 230); + padding: 10px; + margin-bottom: 10px; + font-family: "Nunito", sans-serif; + font-size: 20px; + transition: background-color 300ms linear; + -webkit-transition: background-color 300ms linear; + -ms-transition: background-color 300ms linear; + -o-transition: background-color 300ms linear; + -ms-transition: background-color 300ms linear; + user-select: none; + margin-right: 10px; +} + +.minus1:hover { + cursor: pointer; + background-color: #7777ff; + color: white; +} + +.button-container { + display: flex; + justify-content: center; + align-items: center; +} + +.timerStyle { + position: fixed; + bottom: 5px; + left: 5px; + padding: 10px; + background-color: #3f3e3e; + border: 2px solid rgb(44 43 43); + border-radius: 10px; + color: rgb(255 255 255); + font-family: "Nunito", sans-serif; + font-size: 20px; + opacity: 95%; + box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75); + user-select: none; +} + +#timerBtn1 { + margin: auto; +} + +.timerText { + border-radius: 5px; + padding: 4px; + background-color: #573ee6; + font-size: 15px; + user-select: none; +} + @keyframes fadeIn { 0% { opacity: 0;