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},"a6dbce46-26c7-11f1-84c9-42dde27851f2","main.ts",["D",1774277436350],"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},"8128c6a0-26cb-11f1-90b9-42dde27851f2","script.js","019d1b2d-242e-76e4-9cf5-b4fa4d2da617",["D",1774279091221],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(\"fname\", \"Chloe Lavazza\");\n localStorage.setItem(\"bgcolor\", \"#e0e0ee\");\n localStorage.setItem(\"darkmode\", \"true\");\n location.replace(\"index.html\");\n}\n\nfunction loadSettings() {\n // add lines to read data and set style here, like this\n\n const darkmode = localStorage.getItem(\"darkmode\");\n const fname = localStorage.getItem(\"fname\");\n const bgcolor = localStorage.getItem(\"bgcolor\");\n\n console.log(\"Name=\" + fname);\n console.log(\"BG Color=\" + 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 document.documentElement.style.setProperty(\"--bg-color\", bgcolor);\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},"a6e1834c-26ca-11f1-ab34-42dde27851f2","settings.html","019d1b2d-242e-76e4-9cf5-b86fc196805a",10,["D",1774278725001],5,"\n\n \n JS Practice\n \n \n \n \n \n \n

Settings

\n\n Background Color \n
\n Dark Mode\n
\n Full Name\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},"a6dbe282-26c7-11f1-84c9-42dde27851f2","style.css","019d1b2d-242e-76e4-9cf5-bf1bc125e0ac",["D",1774277436350],":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",1774277436350],[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",1774277436350],[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",1774279091221],[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",1774278725001],[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",1774277436350],[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",1774277436350],{"_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",1774277436350],[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",1774277436350],[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",1774279091221],[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",1774278725001],[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",1774277436350],[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",1774277436350],[],[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",1774277436350],[],[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",1774279091221],[],[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",1774278725001],[],[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",1774277436350],[],[215],"preview","ahead",16,"behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

chloelavazza

js-practice