JavaScript Practice

\n This is a simple demonstration page for you to see and try various ways\n that JavaScript can be used to change the contents of a web page. Remember\n that HTML, CSS and JavaScript all work together to create the contests,\n style, and actions that are present on a web page. Look at each of the\n files in the project to see how it contributes to the whole.\n

\n\n \n

Click the button to show the current time and date

\n\n

\n Move this slider to change the date's text size.\n \n

\n\n ⚙️\n \n","deleted","label","children",[],[167],{"_106":186,"_99":187,"_168":119,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":188,"_103":33,"_176":189,"_178":190,"_180":22,"_181":-5,"_182":191,"_102":192},"acc29b14-26c7-11f1-9666-42dde27851f2","main.ts",["D",1774277446275],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[],[187],{"_106":194,"_99":195,"_168":196,"_170":-5,"_171":149,"_172":148,"_174":121,"_108":197,"_103":198,"_176":199,"_178":200,"_180":22,"_181":-5,"_182":201,"_102":202},"bcc95ae4-26cb-11f1-878b-42dde27851f2","script.js","019d1b2d-4aea-74f0-b7e9-f9529b27d450",["D",1774279191257],11,"script","//alert(\"Hi!\");\nloadSettings();\n\nfunction _click() {\n document.getElementById(\"date\").innerHTML = Date();\n document.getElementById(\"date\").style.color = \"red\";\n}\n\nfunction _changeSize(size) {\n //console.log(\"Size is: \" + size);\n document.getElementById(\"date\").style.fontSize = size + \"px\";\n}\n\nfunction _saveSettings() {\n //console.log(\"Saving settings\");\n // add lines to store data here, like this:\n localStorage.setItem(\"txtcolor\", \"030201\");\n localStorage.setItem(\"bgcolor\", \"#e0e0ee\");\n localStorage.setItem(\"darkmode\", \"false\");\n location.replace(\"index.html\");\n}\n\nfunction loadSettings() {\n const txtcolor = localStorage.getItem(\"txtcolor\");\n const bgcolor = localStorage.getItem(\"bgcolor\");\n const darkmode = localStorage.getItem(\"darkmode\");\n\n console.log(\"TxtColor=: \" + txtcolor);\n console.log(\"BgColor=: \" + bgcolor);\n console.log(\"DarkMode=: \" + darkmode);\n\n if (darkmode == \"true\") {\n document.documentElement.style.setProperty(\"--bg-color\", \"#222222\");\n document.documentElement.style.setProperty(\"--text-color\", \"#eeeeee\");\n } else {\n document.documentElement.style.setProperty(\"--bg-color\", bgcolor);\n document.documentElement.style.setProperty(\"--text-color\", \"000000\");\n }\n}",[],[195],{"_106":204,"_99":205,"_168":206,"_170":-5,"_171":149,"_172":207,"_174":121,"_108":208,"_103":209,"_176":177,"_178":210,"_180":22,"_181":-5,"_182":211,"_102":212},"65aa5d6a-26c8-11f1-9f80-42dde27851f2","settings.html","019d1b2d-4aea-74f0-b7e9-fee1ae5bf29c",5,["D",1774277756596],4,"\n\n \n JS Practice\n \n \n \n \n \n \n

Settings

\n\n Background Color \n
\n Text Color \n
\n Dark Mode\n
\n \n \n",[],[205],{"_106":214,"_99":215,"_168":216,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":217,"_103":33,"_176":177,"_178":218,"_180":22,"_181":-5,"_182":219,"_102":220},"acc2af46-26c7-11f1-9666-42dde27851f2","style.css","019d1b2d-4aea-74f0-b7ea-016c44a932e6",["D",1774277446275],":root {\n --text-color: #222222;\n --bg-color: white;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: var(--bg-color);\n color: var(--text-color);\n max-width: 600px;\n margin: auto;\n}\n\n.settings {\n text-decoration: none;\n font-size: 3vw;\n position: absolute;\n top: 1vw;\n right: 1vw;\n}",[],[215],"files",[165,185,193,203,213],"counts",{"_225":33,"_226":173,"_227":33,"_228":229,"_232":233},"pulls","branches","forks","envVars",{"_230":33,"_231":33},"count","emptyCount","connections",{"_230":33,"_234":33},"unfilledCount","contents",[237,240,243,246,249],{"_106":166,"_99":167,"_168":169,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":238,"_103":33,"_176":177,"_178":179,"_180":22,"_181":-5,"_102":239},["D",1774277446275],[167],{"_106":186,"_99":187,"_168":119,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":241,"_103":33,"_176":189,"_178":190,"_180":22,"_181":-5,"_102":242},["D",1774277446275],[187],{"_106":194,"_99":195,"_168":196,"_170":-5,"_171":149,"_172":148,"_174":121,"_108":244,"_103":198,"_176":199,"_178":200,"_180":22,"_181":-5,"_102":245},["D",1774279191257],[195],{"_106":204,"_99":205,"_168":206,"_170":-5,"_171":149,"_172":207,"_174":121,"_108":247,"_103":209,"_176":177,"_178":210,"_180":22,"_181":-5,"_102":248},["D",1774277756596],[205],{"_106":214,"_99":215,"_168":216,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":250,"_103":33,"_176":177,"_178":218,"_180":22,"_181":-5,"_102":251},["D",1774277446275],[215],"upstreamProject",{"_106":157,"_99":100,"_114":115,"_116":-5,"_112":113,"_23":254},{"_97":255,"_139":256},"ceculbe","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zN294dm1HMFFyZ0NhbWJUNmpBeEN3U0s1QWgifQ","upstreamBranch",{"_106":152,"_108":259,"_260":261,"_99":45,"_150":157,"_103":154,"_151":262,"_153":263,"_264":265,"_110":-5,"_162":22,"_112":113,"_161":255,"_16":159,"_160":100},["D",1773842928975],"updatedAt",["D",1774227802392],"70f419a8-ea65-11f0-9dd5-42dde27851f2",230,"lockfileKey","1774227807479-esm.town_v_ceculbe_js-practice@114-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_97":98,"_99":100,"_101":-7,"_103":-7,"_104":272,"_235":277,"_293":-7,"_294":295,"_298":-5,"_221":299,"_320":304,"_321":322,"_323":33,"_324":22,"_325":22},{"_106":107,"_99":100,"_108":273,"_110":-5,"_111":22,"_112":113,"_114":115,"_116":-5,"_14":117,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":33,"_16":125,"_126":-5,"_127":-5,"_128":-5,"_129":130,"_131":130,"_132":133,"_134":133,"_135":133,"_136":130,"_137":130,"_23":274,"_141":275,"_146":276,"_162":22},["D",1774277446275],{"_97":98,"_139":140},{"_97":98,"_143":140,"_14":117,"_144":145},{"_103":148,"_99":45,"_106":149,"_150":107,"_151":152,"_153":154,"_155":113,"_156":157,"_158":159,"_160":100,"_161":98},[278,281,284,287,290],{"_106":166,"_99":167,"_168":169,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":279,"_103":33,"_176":177,"_178":179,"_180":22,"_181":-5,"_102":280},["D",1774277446275],[167],{"_106":186,"_99":187,"_168":119,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":282,"_103":33,"_176":189,"_178":190,"_180":22,"_181":-5,"_102":283},["D",1774277446275],[187],{"_106":194,"_99":195,"_168":196,"_170":-5,"_171":149,"_172":148,"_174":121,"_108":285,"_103":198,"_176":199,"_178":200,"_180":22,"_181":-5,"_102":286},["D",1774279191257],[195],{"_106":204,"_99":205,"_168":206,"_170":-5,"_171":149,"_172":207,"_174":121,"_108":288,"_103":209,"_176":177,"_178":210,"_180":22,"_181":-5,"_102":289},["D",1774277756596],[205],{"_106":214,"_99":215,"_168":216,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":291,"_103":33,"_176":177,"_178":218,"_180":22,"_181":-5,"_102":292},["D",1774277446275],[215],"readme","upstream",{"_106":152,"_108":296,"_260":297,"_99":45,"_150":157,"_103":154,"_151":262,"_153":263,"_264":265,"_110":-5,"_162":22,"_112":113,"_161":255,"_16":159,"_160":100},["D",1773842928975],["D",1774227802392],"pull",[300,304,308,312,316],{"_106":166,"_99":167,"_168":169,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":301,"_103":33,"_176":177,"_178":179,"_180":22,"_181":-5,"_182":302,"_102":303},["D",1774277446275],[],[167],{"_106":186,"_99":187,"_168":119,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":305,"_103":33,"_176":189,"_178":190,"_180":22,"_181":-5,"_182":306,"_102":307},["D",1774277446275],[],[187],{"_106":194,"_99":195,"_168":196,"_170":-5,"_171":149,"_172":148,"_174":121,"_108":309,"_103":198,"_176":199,"_178":200,"_180":22,"_181":-5,"_182":310,"_102":311},["D",1774279191257],[],[195],{"_106":204,"_99":205,"_168":206,"_170":-5,"_171":149,"_172":207,"_174":121,"_108":313,"_103":209,"_176":177,"_178":210,"_180":22,"_181":-5,"_182":314,"_102":315},["D",1774277756596],[],[205],{"_106":214,"_99":215,"_168":216,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":317,"_103":33,"_176":177,"_178":218,"_180":22,"_181":-5,"_182":318,"_102":319},["D",1774277446275],[],[215],"preview","ahead",15,"behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

sammyk1234

js-practice