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":185,"_99":186,"_167":119,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":187,"_103":33,"_175":188,"_177":189,"_179":22,"_180":-5,"_181":190,"_102":191},"bf274aac-26c7-11f1-912d-42dde27851f2","main.ts",["D",1774277477185],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[],[186],{"_106":193,"_99":194,"_167":195,"_169":-5,"_170":149,"_171":148,"_173":121,"_108":196,"_103":197,"_175":198,"_177":199,"_179":22,"_180":-5,"_181":200,"_102":201},"83eb0b0a-278e-11f1-98d4-42dde27851f2","script.js","019d1b2d-c379-769d-bfb3-044472c17ba9",["D",1774362847615],14,"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 // read the user's settings from the web page inputs\n const textbox = document.getElementById(\"username\") as HTMLInputElement;\n const username = textbox.value;\n \n const colorPicker = document.getElementById(\"bgcolor\") as HTMLInputElement;\n const bgcolor = colorPicker.value;\n \n const checkbox = document.getElementById(\"darkmode-check\") as HTMLInputElement;\n const darkmode = checkbox.checked;\n\n // save those settings to local storage\n localStorage.setItem(\"username\", username);\n localStorage.setItem(\"bgcolor\", bgcolor);\n localStorage.setItem(\"darkmode\", \"\"+darkmode);\n // reload the main page to see the changes\n //location.replace(\"index.html\");\n}\n\nfunction loadSettings() {\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}",[],[194],{"_106":203,"_99":204,"_167":205,"_169":-5,"_170":149,"_171":206,"_173":121,"_108":207,"_103":208,"_175":176,"_177":209,"_179":22,"_180":-5,"_181":210,"_102":211},"aecb25d2-278c-11f1-9f1d-42dde27851f2","settings.html","019d1b2d-c379-769d-bfb3-09302234a833",7,["D",1774362060657],2,"\n\n \n JS Practice\n \n \n \n \n \n \n

Settings

\n\n Username \n
\n\n Background Color \n
\n\n Dark Mode\n
\n\n \n \n",[],[204],{"_106":213,"_99":214,"_167":215,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":216,"_103":33,"_175":176,"_177":217,"_179":22,"_180":-5,"_181":218,"_102":219},"bf275e7a-26c7-11f1-912d-42dde27851f2","style.css","019d1b2d-c379-769d-bfb3-0c498ddd96a2",["D",1774277477185],":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}",[],[214],"files",[164,184,192,202,212],"counts",{"_224":33,"_225":172,"_226":33,"_227":228,"_231":232},"pulls","branches","forks","envVars",{"_229":33,"_230":33},"count","emptyCount","connections",{"_229":33,"_233":33},"unfilledCount","contents",[236,239,242,245,248],{"_106":165,"_99":166,"_167":168,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":237,"_103":33,"_175":176,"_177":178,"_179":22,"_180":-5,"_102":238},["D",1774277477185],[166],{"_106":185,"_99":186,"_167":119,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":240,"_103":33,"_175":188,"_177":189,"_179":22,"_180":-5,"_102":241},["D",1774277477185],[186],{"_106":193,"_99":194,"_167":195,"_169":-5,"_170":149,"_171":148,"_173":121,"_108":243,"_103":197,"_175":198,"_177":199,"_179":22,"_180":-5,"_102":244},["D",1774362847615],[194],{"_106":203,"_99":204,"_167":205,"_169":-5,"_170":149,"_171":206,"_173":121,"_108":246,"_103":208,"_175":176,"_177":209,"_179":22,"_180":-5,"_102":247},["D",1774362060657],[204],{"_106":213,"_99":214,"_167":215,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":249,"_103":33,"_175":176,"_177":217,"_179":22,"_180":-5,"_102":250},["D",1774277477185],[214],"upstreamProject",{"_106":157,"_99":253,"_114":115,"_116":-5,"_112":113,"_23":254},"js-practice",{"_97":98,"_139":140},"upstreamBranch",{"_106":152,"_108":257,"_258":259,"_99":45,"_150":157,"_103":154,"_151":260,"_153":261,"_262":263,"_110":-5,"_161":22,"_112":113,"_160":98,"_16":125,"_159":253},["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":270,"_234":275,"_291":-7,"_292":293,"_296":-5,"_220":297,"_318":302,"_319":320,"_321":33,"_322":22,"_323":22},{"_106":107,"_99":100,"_108":271,"_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":272,"_141":273,"_146":274,"_161":22},["D",1774277477185],{"_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},[276,279,282,285,288],{"_106":165,"_99":166,"_167":168,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":277,"_103":33,"_175":176,"_177":178,"_179":22,"_180":-5,"_102":278},["D",1774277477185],[166],{"_106":185,"_99":186,"_167":119,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":280,"_103":33,"_175":188,"_177":189,"_179":22,"_180":-5,"_102":281},["D",1774277477185],[186],{"_106":193,"_99":194,"_167":195,"_169":-5,"_170":149,"_171":148,"_173":121,"_108":283,"_103":197,"_175":198,"_177":199,"_179":22,"_180":-5,"_102":284},["D",1774362847615],[194],{"_106":203,"_99":204,"_167":205,"_169":-5,"_170":149,"_171":206,"_173":121,"_108":286,"_103":208,"_175":176,"_177":209,"_179":22,"_180":-5,"_102":287},["D",1774362060657],[204],{"_106":213,"_99":214,"_167":215,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":289,"_103":33,"_175":176,"_177":217,"_179":22,"_180":-5,"_102":290},["D",1774277477185],[214],"readme","upstream",{"_106":152,"_108":294,"_258":295,"_99":45,"_150":157,"_103":154,"_151":260,"_153":261,"_262":263,"_110":-5,"_161":22,"_112":113,"_160":98,"_16":125,"_159":253},["D",1773842928975],["D",1774227802392],"pull",[298,302,306,310,314],{"_106":165,"_99":166,"_167":168,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":299,"_103":33,"_175":176,"_177":178,"_179":22,"_180":-5,"_181":300,"_102":301},["D",1774277477185],[],[166],{"_106":185,"_99":186,"_167":119,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":303,"_103":33,"_175":188,"_177":189,"_179":22,"_180":-5,"_181":304,"_102":305},["D",1774277477185],[],[186],{"_106":193,"_99":194,"_167":195,"_169":-5,"_170":149,"_171":148,"_173":121,"_108":307,"_103":197,"_175":198,"_177":199,"_179":22,"_180":-5,"_181":308,"_102":309},["D",1774362847615],[],[194],{"_106":203,"_99":204,"_167":205,"_169":-5,"_170":149,"_171":206,"_173":121,"_108":311,"_103":208,"_175":176,"_177":209,"_179":22,"_180":-5,"_181":312,"_102":313},["D",1774362060657],[],[204],{"_106":213,"_99":214,"_167":215,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":315,"_103":33,"_175":176,"_177":217,"_179":22,"_180":-5,"_181":316,"_102":317},["D",1774277477185],[],[214],"preview","ahead",16,"behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

ceculbe

cookie-demo