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 \n

1 / 3

Ocean View

\n\n

2 / 3

Flower Valley

\n\n

3 / 3

Icy Tundra

\n\n \n ❮\n ❯\n

\n
\n\n \n

\n \n \n \n

\n \n","deleted","label","children",[],[167],{"_106":187,"_99":188,"_168":119,"_170":-5,"_171":149,"_172":189,"_174":121,"_108":190,"_103":33,"_177":191,"_179":192,"_181":22,"_182":-5,"_183":193,"_102":194},"7e335792-2858-11f1-890c-42dde27851f2","main.ts",1,["D",1774449596293],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[],[188],{"_106":196,"_99":197,"_168":198,"_170":-5,"_171":149,"_172":148,"_174":121,"_108":199,"_103":200,"_177":201,"_179":202,"_181":22,"_182":-5,"_183":203,"_102":204},"9f33eb08-285a-11f1-b338-42dde27851f2","script.js","019d2570-1812-74bd-9b14-fd13ea8c6a5f",["D",1774450510820],2,"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(\"bgcolor\", \"#e0e0ee\");\n location.replace(\"index.html\");\n}\n\nfunction loadSettings() {\n // add lines to read data and set style here, like this\n const bgcolor = localStorage.getItem(\"bgcolor\");\n document.documentElement.style.setProperty(\"--bg-color\",bgcolor);\n );\n\n\n let slideIndex = 1;\nshowSlides(slideIndex);\n\n// Next/previous controls\nfunction plusSlides(n) {\n showSlides(slideIndex += n);\n}\n\n// Thumbnail image controls\nfunction currentSlide(n) {\n showSlides(slideIndex = n);\n}\n\nfunction showSlides(n) {\n let i;\n let slides = document.getElementsByClassName(\"mySlides\");\n let dots = document.getElementsByClassName(\"dot\");\n if (n > slides.length) {slideIndex = 1}\n if (n < 1) {slideIndex = slides.length}\n for (i = 0; i < slides.length; i++) {\n slides[i].style.display = \"none\";\n }\n for (i = 0; i < dots.length; i++) {\n dots[i].className = dots[i].className.replace(\" active\", \"\");\n }\n slides[slideIndex-1].style.display = \"block\";\n dots[slideIndex-1].className += \" active\";\n}\n}",[],[197],{"_106":206,"_99":207,"_168":208,"_170":-5,"_171":149,"_172":189,"_174":121,"_108":209,"_103":33,"_177":178,"_179":210,"_181":22,"_182":-5,"_183":211,"_102":212},"7e336f3e-2858-11f1-890c-42dde27851f2","settings.html","019d2570-1812-74bd-9b15-01f78dc05cdc",["D",1774449596293],"\n\n \n JS Practice\n \n \n \n \n \n \n

Settings

\n\n Background Color \n
\n Dark Mode\n
\n \n \n",[],[207],{"_106":214,"_99":215,"_168":216,"_170":-5,"_171":149,"_172":200,"_174":121,"_108":217,"_103":189,"_177":178,"_179":218,"_181":22,"_182":-5,"_183":219,"_102":220},"ce4843c8-2858-11f1-b305-42dde27851f2","style.css","019d2570-1812-74bd-9b15-05b5007bbb12",["D",1774449730814],":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}\n\n* {\n box-sizing: border-box;\n}\n\n/* Slideshow container */\n.slideshow-container {\n max-width: 1000px;\n position: relative;\n margin: auto;\n}\n\n/* Hide the images by default */\n.mySlides {\n display: none;\n}\n\n/* Next & previous buttons */\n.prev, .next {\n cursor: pointer;\n position: absolute;\n top: 50%;\n width: auto;\n margin-top: -22px;\n padding: 16px;\n color: white;\n font-weight: bold;\n font-size: 18px;\n transition: 0.6s ease;\n border-radius: 0 3px 3px 0;\n user-select: none;\n}\n\n/* Position the \"next button\" to the right */\n.next {\n right: 0;\n border-radius: 3px 0 0 3px;\n}\n\n/* On hover, add a black background color with a little bit see-through */\n.prev:hover, .next:hover {\n background-color: rgba(0, 0, 0, 0.8);\n}\n\n/* Caption text */\n.text {\n color: #f2f2f2;\n font-size: 15px;\n padding: 8px 12px;\n position: absolute;\n bottom: 8px;\n width: 100%;\n text-align: center;\n}\n\n/* Number text (1/3 etc) */\n.numbertext {\n color: #f2f2f2;\n font-size: 12px;\n padding: 8px 12px;\n position: absolute;\n top: 0;\n}\n\n/* The dots/bullets/indicators */\n.dot {\n cursor: pointer;\n height: 15px;\n width: 15px;\n margin: 0 2px;\n background-color: #bbb;\n border-radius: 50%;\n display: inline-block;\n transition: background-color 0.6s ease;\n}\n\n.active, .dot:hover {\n background-color: #717171;\n}\n\n/* Fading animation */\n.fade {\n animation-name: fade;\n animation-duration: 1.5s;\n}\n\n@keyframes fade {\n from {\n opacity: 0.4;\n }\n to {\n opacity: 1;\n }\n}",[],[215],"files",[165,186,195,205,213],"counts",{"_225":33,"_226":189,"_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":176,"_177":178,"_179":180,"_181":22,"_182":-5,"_102":239},["D",1774450413342],[167],{"_106":187,"_99":188,"_168":119,"_170":-5,"_171":149,"_172":189,"_174":121,"_108":241,"_103":33,"_177":191,"_179":192,"_181":22,"_182":-5,"_102":242},["D",1774449596293],[188],{"_106":196,"_99":197,"_168":198,"_170":-5,"_171":149,"_172":148,"_174":121,"_108":244,"_103":200,"_177":201,"_179":202,"_181":22,"_182":-5,"_102":245},["D",1774450510820],[197],{"_106":206,"_99":207,"_168":208,"_170":-5,"_171":149,"_172":189,"_174":121,"_108":247,"_103":33,"_177":178,"_179":210,"_181":22,"_182":-5,"_102":248},["D",1774449596293],[207],{"_106":214,"_99":215,"_168":216,"_170":-5,"_171":149,"_172":200,"_174":121,"_108":250,"_103":189,"_177":178,"_179":218,"_181":22,"_182":-5,"_102":251},["D",1774449730814],[215],"upstreamProject",{"_106":157,"_99":254,"_114":115,"_116":-5,"_112":113,"_23":255},"js-practice",{"_97":256,"_139":257},"ceculbe","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zN294dm1HMFFyZ0NhbWJUNmpBeEN3U0s1QWgifQ","upstreamBranch",{"_106":152,"_108":260,"_261":262,"_99":45,"_150":157,"_103":154,"_151":263,"_153":264,"_265":266,"_110":-5,"_162":22,"_112":113,"_161":256,"_16":159,"_160":254},["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":273,"_235":278,"_294":-7,"_295":296,"_299":-5,"_221":300,"_321":305,"_322":173,"_323":33,"_324":22,"_325":22},{"_106":107,"_99":100,"_108":274,"_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":275,"_141":276,"_146":277,"_162":22},["D",1774449596293],{"_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},[279,282,285,288,291],{"_106":166,"_99":167,"_168":169,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":280,"_103":176,"_177":178,"_179":180,"_181":22,"_182":-5,"_102":281},["D",1774450413342],[167],{"_106":187,"_99":188,"_168":119,"_170":-5,"_171":149,"_172":189,"_174":121,"_108":283,"_103":33,"_177":191,"_179":192,"_181":22,"_182":-5,"_102":284},["D",1774449596293],[188],{"_106":196,"_99":197,"_168":198,"_170":-5,"_171":149,"_172":148,"_174":121,"_108":286,"_103":200,"_177":201,"_179":202,"_181":22,"_182":-5,"_102":287},["D",1774450510820],[197],{"_106":206,"_99":207,"_168":208,"_170":-5,"_171":149,"_172":189,"_174":121,"_108":289,"_103":33,"_177":178,"_179":210,"_181":22,"_182":-5,"_102":290},["D",1774449596293],[207],{"_106":214,"_99":215,"_168":216,"_170":-5,"_171":149,"_172":200,"_174":121,"_108":292,"_103":189,"_177":178,"_179":218,"_181":22,"_182":-5,"_102":293},["D",1774449730814],[215],"readme","upstream",{"_106":152,"_108":297,"_261":298,"_99":45,"_150":157,"_103":154,"_151":263,"_153":264,"_265":266,"_110":-5,"_162":22,"_112":113,"_161":256,"_16":159,"_160":254},["D",1773842928975],["D",1774227802392],"pull",[301,305,309,313,317],{"_106":166,"_99":167,"_168":169,"_170":-5,"_171":149,"_172":173,"_174":121,"_108":302,"_103":176,"_177":178,"_179":180,"_181":22,"_182":-5,"_183":303,"_102":304},["D",1774450413342],[],[167],{"_106":187,"_99":188,"_168":119,"_170":-5,"_171":149,"_172":189,"_174":121,"_108":306,"_103":33,"_177":191,"_179":192,"_181":22,"_182":-5,"_183":307,"_102":308},["D",1774449596293],[],[188],{"_106":196,"_99":197,"_168":198,"_170":-5,"_171":149,"_172":148,"_174":121,"_108":310,"_103":200,"_177":201,"_179":202,"_181":22,"_182":-5,"_183":311,"_102":312},["D",1774450510820],[],[197],{"_106":206,"_99":207,"_168":208,"_170":-5,"_171":149,"_172":189,"_174":121,"_108":314,"_103":33,"_177":178,"_179":210,"_181":22,"_182":-5,"_183":315,"_102":316},["D",1774449596293],[],[207],{"_106":214,"_99":215,"_168":216,"_170":-5,"_171":149,"_172":200,"_174":121,"_108":318,"_103":189,"_177":178,"_179":218,"_181":22,"_182":-5,"_183":319,"_102":320},["D",1774449730814],[],[215],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

jolicollette

js-slideshowpractice