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",[],[166],{"_106":184,"_99":185,"_167":119,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":186,"_103":33,"_174":187,"_176":188,"_178":22,"_179":-5,"_180":189,"_102":190},"051f8a5c-26ea-11f1-aab9-42dde27851f2","main.ts",["D",1774292197432],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[],[185],{"_106":192,"_99":193,"_167":194,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":195,"_103":33,"_174":196,"_176":197,"_178":22,"_179":-5,"_180":198,"_102":199},"051f8eda-26ea-11f1-aab9-42dde27851f2","script.js","019d1c0e-6090-77a1-a9f3-e7c0b3dee89d",["D",1774292197432],"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(\"username\", \"John Doe\");\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 const username = localStorage.getItem(\"username\");\n const bgcolor = localStorage.getItem(\"bgcolor\");\n const darkmode = localStorage.getItem(\"darkmode\");\n\n console.log(\"Name=\" + username);\n console.log(\"BG Color=\" + bgcolor);\n console.log(\"Dark?\" + 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}",[],[193],{"_106":201,"_99":202,"_167":203,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":204,"_103":33,"_174":175,"_176":205,"_178":22,"_179":-5,"_180":206,"_102":207},"051f9682-26ea-11f1-aab9-42dde27851f2","settings.html","019d1c0e-6090-77a1-a9f3-ebce05715156",["D",1774292197432],"\n\n \n JS Practice\n \n \n \n \n \n \n

Settings

\n\n Background Color \n
\n Dark Mode\n
\n Username\n
\n \n \n",[],[202],{"_106":209,"_99":210,"_167":211,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":212,"_103":33,"_174":175,"_176":213,"_178":22,"_179":-5,"_180":214,"_102":215},"051f9b14-26ea-11f1-aab9-42dde27851f2","style.css","019d1c0e-6090-77a1-a9f3-ecfc9179cb2c",["D",1774292197432],":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}",[],[210],"files",[164,183,191,200,208],"counts",{"_220":33,"_221":148,"_222":33,"_223":224,"_227":228},"pulls","branches","forks","envVars",{"_225":33,"_226":33},"count","emptyCount","connections",{"_225":33,"_229":33},"unfilledCount","contents",[232,235,238,241,244],{"_106":165,"_99":166,"_167":168,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":233,"_103":33,"_174":175,"_176":177,"_178":22,"_179":-5,"_102":234},["D",1774292197432],[166],{"_106":184,"_99":185,"_167":119,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":236,"_103":33,"_174":187,"_176":188,"_178":22,"_179":-5,"_102":237},["D",1774292197432],[185],{"_106":192,"_99":193,"_167":194,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":239,"_103":33,"_174":196,"_176":197,"_178":22,"_179":-5,"_102":240},["D",1774292197432],[193],{"_106":201,"_99":202,"_167":203,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":242,"_103":33,"_174":175,"_176":205,"_178":22,"_179":-5,"_102":243},["D",1774292197432],[202],{"_106":209,"_99":210,"_167":211,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":245,"_103":33,"_174":175,"_176":213,"_178":22,"_179":-5,"_102":246},["D",1774292197432],[210],"upstreamProject",{"_106":157,"_99":249,"_114":115,"_116":-5,"_112":113,"_23":250},"cookie-practice",{"_97":98,"_139":140},"upstreamBranch",{"_106":152,"_108":253,"_254":255,"_99":45,"_150":157,"_103":154,"_151":256,"_153":257,"_258":259,"_110":-5,"_161":22,"_112":113,"_160":98,"_16":125,"_159":249},["D",1774277511218],"updatedAt",["D",1774292187735],"fc3864dc-22d3-11f1-87e2-42dde27851f2",114,"lockfileKey","1774328023233-esm.town_v_Collin08_cookie-practice@20-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_97":98,"_99":100,"_101":-7,"_103":-7,"_104":266,"_230":271,"_287":-7,"_288":289,"_292":-5,"_216":293,"_314":298,"_315":33,"_316":33,"_317":22,"_318":22},{"_106":107,"_99":100,"_108":267,"_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":268,"_141":269,"_146":270,"_161":22},["D",1774292197432],{"_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":125,"_159":100,"_160":98},[272,275,278,281,284],{"_106":165,"_99":166,"_167":168,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":273,"_103":33,"_174":175,"_176":177,"_178":22,"_179":-5,"_102":274},["D",1774292197432],[166],{"_106":184,"_99":185,"_167":119,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":276,"_103":33,"_174":187,"_176":188,"_178":22,"_179":-5,"_102":277},["D",1774292197432],[185],{"_106":192,"_99":193,"_167":194,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":279,"_103":33,"_174":196,"_176":197,"_178":22,"_179":-5,"_102":280},["D",1774292197432],[193],{"_106":201,"_99":202,"_167":203,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":282,"_103":33,"_174":175,"_176":205,"_178":22,"_179":-5,"_102":283},["D",1774292197432],[202],{"_106":209,"_99":210,"_167":211,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":285,"_103":33,"_174":175,"_176":213,"_178":22,"_179":-5,"_102":286},["D",1774292197432],[210],"readme","upstream",{"_106":152,"_108":290,"_254":291,"_99":45,"_150":157,"_103":154,"_151":256,"_153":257,"_258":259,"_110":-5,"_161":22,"_112":113,"_160":98,"_16":125,"_159":249},["D",1774277511218],["D",1774292187735],"pull",[294,298,302,306,310],{"_106":165,"_99":166,"_167":168,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":295,"_103":33,"_174":175,"_176":177,"_178":22,"_179":-5,"_180":296,"_102":297},["D",1774292197432],[],[166],{"_106":184,"_99":185,"_167":119,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":299,"_103":33,"_174":187,"_176":188,"_178":22,"_179":-5,"_180":300,"_102":301},["D",1774292197432],[],[185],{"_106":192,"_99":193,"_167":194,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":303,"_103":33,"_174":196,"_176":197,"_178":22,"_179":-5,"_180":304,"_102":305},["D",1774292197432],[],[193],{"_106":201,"_99":202,"_167":203,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":307,"_103":33,"_174":175,"_176":205,"_178":22,"_179":-5,"_180":308,"_102":309},["D",1774292197432],[],[202],{"_106":209,"_99":210,"_167":211,"_169":-5,"_170":149,"_171":148,"_172":121,"_108":311,"_103":33,"_174":175,"_176":213,"_178":22,"_179":-5,"_180":312,"_102":313},["D",1774292197432],[],[210],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

Collin08

cookie-practice2