quotes frontend further added

static/app.js

@@ -56,6 +56,7 @@ var placeFeatures = document.querySelectorAll("#place-list li");
 var clock1Features = document.querySelectorAll("#clock1-features li");
 var clock2Features = document.querySelectorAll("#clock2-features li");
 var worldclockFeatures = document.querySelectorAll("#worldclock-features li");
+var quotesFeatures = document.querySelectorAll("#quotes-list li");
 
 var allFeaturesList = [
   stocksFeatures,
@@ -83,6 +84,7 @@ var allFeaturesList = [
   clock1Features,
   clock2Features,
   worldclockFeatures,
+  quotesFeatures,
 ];
 
 // features remove buttons
@@ -117,6 +119,7 @@ var placeRemoveBtn = document.getElementById("place-remove-btn");
 var clock1RemoveBtn = document.getElementById("clock1-remove-btn");
 var clock2RemoveBtn = document.getElementById("clock2-remove-btn");
 var worldclockRemoveBtn = document.getElementById("worldclock-remove-btn");
+var quotesRemoveBtn = document.getElementById("quotes-remove-btn");
 
 var allFeaturesRemoveBtns = [
   stocksRemoveBtn,
@@ -144,6 +147,7 @@ var allFeaturesRemoveBtns = [
   clock1RemoveBtn,
   clock2RemoveBtn,
   worldclockRemoveBtn,
+  quotesRemoveBtn,
 ];
 // features increase buttons
 var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
@@ -177,6 +181,7 @@ var placeincreaseBtn = document.getElementById("place-increase-btn");
 var clock1increaseBtn = document.getElementById("clock1-increase-btn");
 var clock2increaseBtn = document.getElementById("clock2-increase-btn");
 var worldclockincreaseBtn = document.getElementById("worldclock-increase-btn");
+var quotesincreaseBtn = document.getElementById("quotes-increase-btn");
 
 var allFeaturesIncreaseBtns = [
   stocksincreaseBtn,
@@ -204,6 +209,7 @@ var allFeaturesIncreaseBtns = [
   clock1increaseBtn,
   clock2increaseBtn,
   worldclockincreaseBtn,
+  quotesincreaseBtn,
 ];
 
 // features decrease buttons
@@ -238,6 +244,7 @@ var placeDecreaseBtn = document.getElementById("place-decrease-btn");
 var clock1DecreaseBtn = document.getElementById("clock1-decrease-btn");
 var clock2DecreaseBtn = document.getElementById("clock2-decrease-btn");
 var worldclockDecreaseBtn = document.getElementById("worldclock-decrease-btn");
+var quotesDecreaseBtn = document.getElementById("quotes-decrease-btn");
 
 var allFeaturesDecreaseBtns = [
   stocksDecreaseBtn,
@@ -265,6 +272,7 @@ var allFeaturesDecreaseBtns = [
   clock1DecreaseBtn,
   clock2DecreaseBtn,
   worldclockDecreaseBtn,
+  quotesDecreaseBtn,
 ];
 
 const changeVarValue = () => {
@@ -299,6 +307,7 @@ const changeVarValue = () => {
   clock1Features = document.querySelectorAll("#clock1-features li");
   clock2Features = document.querySelectorAll("#clock2-features li");
   worldclockFeatures = document.querySelectorAll("#worldclock-features li");
+  quotesFeatures = document.querySelectorAll("#quotes-list li");
   
   allFeaturesList = [
     stocksFeatures,
@@ -326,6 +335,7 @@ const changeVarValue = () => {
     clock1Features,
     clock2Features,
     worldclockFeatures,
+    quotesFeatures,
   ];
 };
 
@@ -711,6 +721,7 @@ var place = document.getElementById("place-list");
 var clock1 = document.getElementById("clock1-features");
 var clock2 = document.getElementById("clock2-features");
 var worldclock = document.getElementById("worldclock-features");
+var quotes = document.getElementById("quotes-list");
 
 var allFeatures = [
   stocks,
@@ -738,6 +749,7 @@ var allFeatures = [
   clock1,
   clock2,
   worldclock,
+  quotes,
 ];
 
 // features select box
@@ -778,6 +790,7 @@ var allFeaturesSelectBox = [
   null,
   null,
   null,
+  null,
 ];
 
 // features select add buttons
@@ -818,6 +831,7 @@ var allFeaturesSelectAddBtn = [
   null,
   null,
   null,
+  null,
 ];
 
 allFeaturesSelectAddBtn.map((value, index) => {
@@ -863,6 +877,7 @@ var allFeaturesFile = [
   null,
   null,
   null,
+  null,
 ];
 // features file add button
 var imagesFileAddBtn = document.getElementById("inputTextBtn11");
@@ -894,6 +909,7 @@ var allFeaturesFileAddBtn = [
   null,
   null,
   null,
+  null,
 ];
 
 // features input text
@@ -932,6 +948,7 @@ var allFeaturesText = [
   null,
   null,
   null,
+  null,
 ];
 
 // features text add button
@@ -970,6 +987,7 @@ var allFeaturesTextAddBtn = [
   null,
   null,
   null,
+  null,
 ];
 
 
@@ -999,6 +1017,7 @@ var allFeaturesLimit = [
   null,
   null,
   null,
+  null,
 ];
 
 
@@ -1279,6 +1298,7 @@ function getFeatureSettings() {
     "Clock 1",
     "Clock 2",
     "World Clock",
+    "Inspirational Quotes",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1365,6 +1385,9 @@ function getFeatureSettings() {
     case 25:
       s = getWorldclockSettings(page);
       break;
+    case 26:
+      s = getQuotesSettings(page);
+      break;
   }
   
   settings = { ...settings, ...s }; // merge both sets of settings
@@ -1572,6 +1595,7 @@ function saveMovieAPIKey(){
     "Clock 1",
     "Clock 2",
     "World Clock",
+    "Inspirational Quotes",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1621,6 +1645,7 @@ function saveIpoAPIKey(){
     "Clock 1",
     "Clock 2",
     "World Clock",
+    "Inspirational Quotes",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -2153,7 +2178,7 @@ inputAnimationBtn.addEventListener("click", () => {
 // scroll speed row two
 let inputScrollSpeedRow = [];
 
-for (let i = 1; i <= 25; i++) {
+for (let i = 1; i <= 26; i++) {
   inputScrollSpeedRow.push(
     document.getElementById(
       i === 1 ? "inputScrollSpeedRow" : `inputScrollSpeedRow${i}`
@@ -3568,7 +3593,7 @@ function featureSavePrompt() {
 
 
 const pageIDs = ['Page1', 'Page2', 'Page3', 'Page4', 'Page5', 'Page6', 'Page7', 'Page8', 'Page9', 'Page10', 'Page11', 'Page12', 'Page13',
-  'Page14', 'Page15', 'Page16', 'Page17', 'Page18', 'Page19', 'Page20', 'Page21', 'Page22', 'Page23', 'Page24', 'Page25'];
+  'Page14', 'Page15', 'Page16', 'Page17', 'Page18', 'Page19', 'Page20', 'Page21', 'Page22', 'Page23', 'Page24', 'Page25', 'Page26'];
 
 for (const pageID of pageIDs) {
   // Select the parent div