Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Snippets
ID	5475366706659328
Created	2 years ago, 1644550826588
Updated	2 years ago, 1645819639121
Code	<!DOCTYPE html> <!-- Contest: Teach a CS Concept I have completed 10% of Khan Academy's 'Intro to HTML' and have been programming HTML: 1 month PJS: 14 months I would prefer to be placed in the [Beginner] bracket Credits Credit to Bluebird for thumbnail saving function see line 1410. --> <!-- Judges: Hello! Thanks for taking the time to judge this! Regarding comments: I have never commented a website before, so for the most part I split up the code into subsections, and then commented each section! Important: I was the first person to use/create(?) fullscreen in this contest, and I pride myself in that! It was fun to have implemented such a cool new feature, and I see that a few submissions use this! Code for this is on line 1442. Features: - scroll animations - flex-containers (very useful, once I got the hang of it) - custom scrollbar - theme toggling (dark/light) - fullscreen - cool rotating menu animation (side navigation) - responsive design (found in .lesson-cards, .pics, and .text-content classes) - search bar (search for lessons) Brief Bug Summary: - Safari has a 'background-size: cover' bug, where a fixed background will stretch to the size of the entire document. The fix: setting the background-size to contain. - Safari has a window resize bug when first implementing scroll animations, regardless of overflow-x: hidden in the body. The fix: add an .overflow-wrapper class to every scroll-element - Chrome on mobile CSS animations don't work all the time, and are otherwise extremely buggy. The fix: This has apparently been filed as a bug, which has not been fixed since 2019: https://discourse.webflow.com/t/animations-do-not-work-on-google-chrome-in-ios/96531 --> <html lang='en'> <head> <meta charset="utf-8"> <meta name='viewport'content='width=device-width, initial-scale=1'> <meta name='description'content='Snippets teaches aspiring programmers with tough computer science and makes them more easy. We do so with short lessons and brief "Snippets" of code.'> <title>Snippets</title> <!--Fonts--> <link rel='preconnect' href='https://fonts.googleapis.com'> <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin> <link href='https://fonts.googleapis.com/css2?&family=Open+Sans&family=Material+Icons&family=Google+Sans&family=Roboto+Mono&display=swap' rel='stylesheet'> <link rel='stylesheet' id='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/atom-one-dark.min.css'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js'></script> <!--Styling--> <!--General--> <style> :root{/root values for the website. I went with Google's approach and made heavy and light versions of background and text colors. This made it very easy to apply animations to active elements! main color is just the green color for the logo/ --main-color: #33cc33; --lighttext-color: #444444; --heavytext-color: #000000; --heavybg-color: #ffffff; --lightbg-color: #efefef; } {/I find that this makes things easier. Sometimes there will be a random margin or something and this makes the canvas more blank slate; easier to program on!/ margin: 0; padding: 0; } html, body{/setting up the website, we set up the background and text color and fonts. Now, it will be styled well even if we forget to style an element. We also set up the font-size everything will be based on!/ background-color: var(--heavybg-color); color: var(--lighttext-color); font-family: 'Google Sans', 'Open Sans'; font-size: 3.2vmin; transition: 0.5s background-color, 0.5s color; } body{/This is important! Google icons sometimes show up as text when rendering for the briefest of moments. So I made the entire body transparent until everything loads. Not recommended if you have a massive website, but this is a very minimal website so it' s okay!/ opacity: 0;/changing this to 1 when the icons load!/ } .button, .material-icons{/change cursor when hovering buttons or Google Icons/ cursor: pointer; } ::-webkit-scrollbar{/Basic scrollbar setup. Don't know why I thought this was hard. Support for mozilla and webkit!/ width: 0.75em; background-color: var(--heavybg-color); } ::-webkit-scrollbar-thumb{ background-color: var(--lighttext-color); border-radius: 10px; } ::-webkit-scrollbar-thumb:active{ background-color: var(--heavytext-color); } ::-moz-scrollbar{ width: 0.75em; background-color: var(--heavybg-color); } ::-moz-scrollbar-thumb{ background-color: var(--lighttext-color); border-radius: 10px; } ::-moz-scrollbar-thumb:active{ background-color: var(--heavytext-color); } input:focus::-webkit-input-placeholder{/These are just so that when the input placehodler is focused, it changes to green. Just a cool animation. The input is for the lessons search bar./ color: var(--main-color); font-size: 1rem; } input:focus:-moz-placeholder{ color: var(--main-color); font-size: 1rem; } input:focus::-moz-placeholder{ color: var(--main-color); font-size: 1rem; } input:focus:-ms-input-placeholder{ color: var(--main-color); font-size: 1rem; } main{/The central content area will be styled underneath the 'fixed' header. This is so it doesn't get cut off./ margin-top: 10vmin; } pre code.hljs{ background-color: #121212; color: #eeeeee; border-radius: 1vmin; padding: 3vmin; margin: 5% 0; } article{ display: flex;/I chose to display as flex-container because I can apply padding without messing up the top-margin set by the main!/ flex-direction: column; padding: 5% 5%; line-height: 2;/My teacher would be proud./ } /Rest of this is just basic styling for font sizes. If you didn't know: rem bases all font sizes off of the parent font. Remember we set the parent font size to 3.2vmin/ code{ font-size: 1rem; font-family: 'Roboto Mono'; } p, li, a{ font-size: 1.1rem; } h1, h2{ font-size: 2rem; } h3{ font-size: 1.5rem; } </style><!--General Document--> <style> /to make sure x doesnt oveflow in safari. to use this apply it to all scroll-elements on your page!/ .overflow-wrapper{ width: 100%; position: relative; overflow: hidden; } @keyframes fadeIn{/we will get full browser support for these animations/ from{ opacity: 0; } to{ opacity: 1; } } @-webkit-keyframes fadeIn{/webkit is most important, imo since it supports a great range of browsers/ from{ opacity: 0; } to{ opacity: 1; } } @-moz-keyframes fadeIn {/mozilla is great since it supports mozilla browsers/ from{ opacity: 0; } to{ opacity: 1; } } .page{ animation: fadeIn 0.5s ease forwards; -webkit-animation: fadeIn 0.5s ease forwards; -moz-animation: fadeIn 0.5s ease forwards; } .scroll-element{ opacity: 0; transition: 0.5s opacity; -webkit-transition: 0.5s opacity; -moz-transition: 0.5s opacity; } .scrolled{/whenever js is scrolled, fade in/ opacity: 1; } @keyframes slideIn-left{/again, full support. we use translate 3d since it causes the hardware to work faster there is no need to comment every single one of these, as they are all very similar/ from{ transform: translate3d(-100px,0,0); } to{ transform: translate3d(0); } } @-webkit-keyframes slideIn-left{ from{ -webkit-transform: translate3d(-100px,0,0); } to{ -webkit-transform: translate3d(0); } } @-moz-keyframes slideIn-left{ from{ -moz-transform: translate3d(-100px,0,0); } to{ -moz-transform: translate3d(0); } } .scrolled.left{ animation: slideIn-left 0.5s ease forwards; -webkit-animation: slideIn-left 0.5s ease forwards; -moz-animation: slideIn-left 0.5s ease forwards; } @keyframes slideIn-right{ from{ transform: translate3d(100px,0,0); } to{ transform: translate3d(0); } } @-webkit-keyframes slideIn-right{ from{ -webkit-transform: translate3d(100px,0,0); } to{ -webkit-transform: translate3d(0); } } @-moz-keyframes slideIn-right{ from{ -moz-transform: translate3d(100px,0,0); } to{ -moz-transform: translate3d(0); } } .scrolled.right{ animation: slideIn-right 0.5s ease-in-out both; } @keyframes slideIn-up{ from{ transform: translate3d(0,100px,0); } to{ transform: translate3d(0); } } @-webkit-keyframes slideIn-up{ from{ -webkit-transform: translate3d(0,100px,0); } to{ -webkit-transform: translate3d(0); } } @-moz-keyframes slideIn-up{ from{ -moz-transform: translate3d(0,100px,0); } to{ -moz-transform: translate3d(0); } } .scrolled.up{ animation: slideIn-up 0.5s ease-in-out both; } </style><!--Animations--> <style> / These are all basic styling for the 'text-content' elements. This just means that they are formatted with the correct margin and so they display well on mobile! / .text-content{ display: flex; flex-direction: column; } @media (min-device-width : 320px){ .text-content{ width: 90%; } } @media (min-width : 500px){ .text-content{ width: clamp(500px, 60vmax, 100%); } } @media(min-width : 1224px) { .text-content{ width: 60%; } } / These should be self-explanatory. They align both the elements and text to the correct side. Very good-looking when combined with scroll animations. Common implementations: class='scroll-element up text-content align-center' class='scroll-element left text-content align-left' class='scroll-element right text-content align-right' very easy! / .align-right{ margin: 5% 5% 0 auto; text-align: right; } .align-left{ margin: 5% auto 0 5%; text-align: left; align-items: flex-start; } .align-center{ margin: 5% auto 0; text-align: center; align-items: center; } .hero{/styling for the two heros. These are the large images on the top of Lessons and Home./ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-attachment: fixed; color: #fefefe; height: 90vmin; } </style><!--General Text--> <style> .green-button, .blue-button{ color: #fefefe;/always white text. black text looks weird on these colors./ padding: 2vmin;/some extra room/ border-radius: 1vmin;/rectangles are too sharp/ margin-top: 2vmin; font-size: 3vmin; } .green-button{ background-color: var(--main-color); } .green-button:hover{ background-color: #33bb33; } .blue-button{ background-color: #3333cc; } .blue-button:hover{ background-color: #3333aa; } .underline{/I usually apply this to links and stuff/ text-decoration: underline; color: var(--heavytext-color); } </style><!--Buttons--> <!--Specific--> <style> / To make a header position fixed as well as a flex-container, you need to do this: / header{ position: fixed;/display as fixed/ z-index: 1; display: flex;/display as flex. but since it is flex it isn't width 100%. we can't use 100%, so we align it with left: 0 right: 0 and top: 0. Genius!/ left: 0; right: 0; top: 0; justify-content: space-between;/space out the contents. In this case the #buttons and the logo!/ align-items: center;/vertically align/ height: 10vmin;/set the height/ border-bottom: 1px solid var(--lighttext-color);/Google inspired border! fonts.google.com inspired!/ background-color: var(--heavybg-color); color: var(--lighttext-color); padding: 0 5%;/set up the padding. I like to use 5% on both sides!/ transition: 0.5s background-color, 0.5s color;/only the most basic transitions/ } header h1 span{ color: var(--main-color);/this is for the < >/ } #buttons{ display: flex; align-items: center;/since it's a new element, we need to re-align it!/ } #buttons .material-icons{ font-size: 6vmin; margin-left: 1vw; transition: 250ms;/we want hover transitions minimal. not that important./ } #buttons .material-icons:hover{ color: var(--main-color); } #buttons #menu{ transition: 0.5s transform;/This is for the rotate animation. This is my favorite animation!/ } .rotate{/also for the rotate animation. apparently if you use a class it can be faster./ transform: rotate(360deg); } </style><!--Header--> <style> nav{ position: fixed;/so we can access it at all times/ overflow: hidden;/dont't want text showing up!/ width: 0;/It's closed!/ right: 0; top: 10vmin;/below the header!/ height: 90vh;/if the vmin is the same as vh, this will make it full height!/ z-index: 2; background-color: var(--heavybg-color); color: var(--lighttext-color); transition: 0.5s all;/takes care of animation timing. nothing special here!/ display: flex; flex-direction: column; } nav a{ margin: 3vh 5vw 0 2vw;/spacing out the nav buttons/ } nav a:hover{ text-decoration: underline;/went for a more classic approach/ } .extend-nav{/as the name suggests. again, saving it in a class for later./ width: 40% !important; border-left: 1px solid var(--lighttext-color); } </style><!--Menu (Nav)--> <style> /the intro at the end!/ footer{ height: 60vmin; display: flex; flex-direction: column; background-color: #121212;/I like these colors for the footer There is no change with dark theme!/ color: #fefefe; margin-top: 5vh;/just in case, we give it some extra room!/ } footer a{ color: var(--main-color);/Ooo green!/ } footer a:hover{ text-decoration: underline;/old-fashioned/ } #footer-top{/contents: statement and links/ height: 70%; display: flex; margin: 5%; } #footer-bottom{/contents: author and contest/ border-top: 1px solid white; height: 30%; display: flex; align-items: center; justify-content: center; margin: 0 5%; } #footer-left{/contents: statement/ width: 50%; display: flex; height: 100%; } #footer-right{/contents: links/ width: 45%; padding-left: 5%; display: flex; height: 100%; align-items: start; flex-direction: column; } </style><!--Footer--> <style> #code-joke{/so the code isn't squished to the right/ text-align: left; } #home.hero{/I used linear gradient to add a tint/ background: linear-gradient(90deg, #33cc3388, #12121200), url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Man_page_on_Linux_screenshot.png/800px-Man_page_on_Linux_screenshot.png'); } #pics{/These will store the 'Our Site Is' pictures/ display: flex; flex-wrap: wrap;/This is so it is 'responsive' and the pictuers can overflow/ margin: 0 5%; width: 90%; } .pic-card{/Each picture will be displayed like this/ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } @media (min-device-width : 320px){ .pic-card{ width: 100%; } } @media (min-width : 500px){ .pic-card{ width: 50%; } } @media(min-width : 1224px) { .pic-card{ width: 25%; } } .hacker{ width: 100%; } .hopper, .purple-pi{ width: 55%; } .avatar-team{ width: 70%; } </style><!--Homepage--> <style> #lessons.hero{ background: linear-gradient(90deg, #00000033, #00000033), url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/ComputerProgrammer.jpg/675px-ComputerProgrammer.jpg'); background-size: cover; } #lessons-container{ display: flex; flex-wrap: wrap; } .lesson-card{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; margin: 5%; padding: 5% 0; height: 75vmin; border-radius: 2%; outline: 1px solid var(--heavybg-color); } @media (min-device-width : 320px){ .lesson-card{ width: 100%; } } @media (min-width : 500px){ .lesson-card{ width: 40%; } } @media(min-width : 1000px) { .lesson-card{ width: 23%; } } .lesson-card:hover{ outline: 1px solid var(--main-color); } .lesson-card img{ background-color: #ffffff; object-fit: cover; width: 50%; max-height: 50%; } .lesson-card p{ margin: 0 5%; } #lesson-search{ margin: 0 5%; width: 90%; height: 10vh; border: 0; font-size: 1rem; background-color: var(--heavybg-color); color: var(--heavytext-color); transition: 0.5s all; } #lesson-search:focus{ outline: 0; caret-color: var(--main-color); font-size: 1rem; } </style><!--Lessons--> <style> .no-scroll{ position: fixed !important; overflow: hidden !important; } #popup{ overflow: hidden; position: fixed; display: flex; flex-direction: column; left: 5%; right: 5%; top: 5%; bottom: 5%; background-color: var(--heavybg-color); color: var(--lighttext-color); z-index: 2; padding: 5%; border: 1vmin solid var(--heavytext-color); } #popup h1{ color: var(--heavytext-color); align-self: center; } #popup img{ width: 100px; align-self: center; } #popup #close{ align-self: end; color: var(--heavytext-color); } #popup #close:hover{ color: var(--main-color); } #popup-buttons{ width: 100%; display: flex; justify-content: space-between; align-items: center; } #continue, #popupsc{ cursor: pointer; } </style><!--Popup--> </head> <body> <!--DOM--> <!--Fixed--> <nav> <a class='nav button'id='home'>Home</a> <a class='nav button'id='lessons'>Lessons</a> <a class='nav button'id='about'>About</a> </nav> <header> <div id='home'class='button'> <h1><span>&lt</span> Snippets <span>&gt</span></h1> </div> <div id='buttons'> <span class='material-icons'id='screen'>fullscreen</span> <span class='material-icons'id='theme'>dark_mode</span> <span class='material-icons'id='menu'>menu</span> </div> </header> <div id='popup'> <span class='material-icons'id='close'>close</span> <h1>Welcome!</h1><br> <img src='https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Jumping.png'> <p>Would you like to use the fullscreen feature? This will silence the relentless Oh Noes from complaining about the JavaScript!<br><br>Fullscreen can also be accessed in the top-right at any time.</p><br> <div id='popup-buttons'> <a id='popupsc'class='green-button'>Open in Fullscreen</a> <a id='continue'class='green-button'>Continue</a> </div> </div><!--Popup--> <!--Static--> <!--Content--> <main> <!--The Central Pages--> <div id='home'class='page'> <div class='hero'id='home'> <h1>Computer Science Made Easy</h1> <a class='green-button button' id='lessons'>Get Started</a> </div> <div class='overflow-wrapper'> <div id='code-joke'class='scroll-element right align-right text-content'> <pre class='language-javascript'><code>function Snippets(author){ if(author === 'Polar'){ return vote; } }</code></pre> </div> <div class='scroll-element left align-left text-content'> <h3>Meet the Creator</h3><br> <p>As interesting as this site is, before you dive in you may want to check out the about page!</p> <a style='margin-top:10px'class='blue-button button' id='about'>Learn More</a> </div> <div class='scroll-element up'> <div class='text-content align-center'> <h3>Read Some Lessons</h3> <p>Learn about computer science straight away! Get started with your journey towards greatness today!</p> <a class='green-button button'id='lessons'>Go to Lessons</a> </div> </div> <div class='scroll-element up'> <div class='text-content align-center'> <h2>Recent Articles</h2> </div> <div id='lessons-container'> <div class='lesson-card button'id='objects'> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CPT-OOP-objects_and_classes.svg/640px-CPT-OOP-objects_and_classes.svg.png'> <h3>Objects</h3> <p>Learn about the data structure which is the centerpiece of many games! Objects are a data structure which can hold their own values and are easily changeable, making them suitable to play different roles in games!</p> </div> <div class='lesson-card button'id='objectpool'> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/RoI_pooling_animated.gif/640px-RoI_pooling_animated.gif'> <h3>Object Pool</h3> <p>Learn about an algorithm which helps keep memory leakage at a minimum! Using object a lot can cause our games to have memory 'gaps', or little spaces where data can't fit. This algorithm is a solution!</p> </div> </div> </div> <div class='scroll-element up'> <div class='text-content align-center'> <h3>Our Site Is</h3> </div> <div id='pics'> <div class='pic-card'> <img class='hacker'src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Cartoon_Headless_Man_Hacking_A_Laptop.svg/2560px-Cartoon_Headless_Man_Hacking_A_Laptop.svg.png'> <p>Sneaky.</p> </div> <div class='pic-card'> <img class='hopper'src='https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Cool.png'> <p>Cool.</p> </div> <div class='pic-card'> <img class='avatar-team'src='https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/avatar-team.png'> <p>Friendly.</p> </div> <div class='pic-card'> <img class='purple-pi'src='https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/purple-pi-pink.png'> <p>Rational.</p> </div> </div> </div> <div class='scroll-element left text-content align-left'> <h3>It's Not Too Late!</h3> <p>There is still time to join Contest Teach a CS Concept! Be sure to get your submission in by January 25th!</p> <a style='text-decoration:none; margin-top: 20px;'class='blue-button'href='https://www.khanacademy.org/computer-programming/contest-teach-a-cs-concept/6648817392861184'target='_blank'>Let me join!</a> </div> </div> </div><!--Home--> <div id='lessons'class='page'> <div class='hero'id='lessons'> <h1>Learn Computer Science!</h1> <p>One of 3 pages. Woo hoo.</p> </div> <div class='text-content align-left'> <h1>Lessons!</h1> <p>Welcome to lessons! Click on any of the lessons below to read more about it. These lessons are also responsive, so if you are on a phone they will be readable as well!</p> </div> <input id='lesson-search'type='text'placeholder='Search Lessons'autocorrect='false'autofill='false'autocapitalize='false'spellcheck='false'> <div class='text-content align-center'> <h2>Data Structures</h2> </div> <div id='lessons-container'> <div class='lesson-card button'id='objects'> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CPT-OOP-objects_and_classes.svg/640px-CPT-OOP-objects_and_classes.svg.png'> <h3>Objects</h3> <p>Learn about the data structure which is the centerpiece of many games! Objects are a data structure which can hold their own values and are easily changeable, making them suitable to play different roles in games!</p> </div> <div class='lesson-card button'id='arrays'> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/CPT-programming-array.svg/505px-CPT-programming-array.svg.png'> <h3>Arrays</h3> <p>The ultimate storage device for programmers! Can hold objects and values alike! Can be used by programmers from any experience level! Only $5.99!</p> </div> </div> <div class='text-content align-center'> <h2>Algorithms</h2> </div> <div id='lessons-container'> <div class='lesson-card button'id='objectpool'> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/RoI_pooling_animated.gif/640px-RoI_pooling_animated.gif'> <h3>Object Pool</h3> <p>Object pool can help with game development by making it so that memory fragmentation is kept to a minimum. Store items instead of deleting them, using an old algorithm and technique!</p> </div> <div class='lesson-card button'id='bubblesort'> <img src='https://upload.wikimedia.org/wikipedia/commons/3/37/Bubble_sort_animation.gif'> <h3>Bubble Sort</h3> <p>Elementary array sorting, introduction to sorting algorithms, bubble sort is great for learning how to program an algorithm!</p> </div> <div class='lesson-card button'id='quicksort'> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Sorting_quicksort_anim.gif/220px-Sorting_quicksort_anim.gif'> <h3>Quicksort</h3> <p>One of the most advanced techniques for sorting items quickly brought to you on a silver platter.</p> </div> </div> <div class='text-content align-center'> <h2>Game Development</h2> </div> <div id='lessons-container'> <div class='lesson-card button'id='events'> <img src='https://upload.wikimedia.org/wikipedia/commons/9/9c/Gameloop.PNG'> <h3>Events and Scene Management</h3> <p>Learn how to separate the different sections in your games into more managable parts as well as key and click events to take your games to the next level!</p> </div> <div class='lesson-card button'id='particles'> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Particle_sys_fire.jpg/220px-Particle_sys_fire.jpg'> <h3>Particles</h3> <p>Learn about the most overused feature in any game on Khan Academy. Garner more attention for a feature which takes only a few minutes!</p> </div> </div> </div><!--Lessons--> <div id='about'class='page'> <article> <h1>About</h1> <p>Congratulations! You have made it to the least visited portion of the website! You are likely here because you are either overwhelmed by the sheer nature of this site or you have read every lesson beginning to end. Okay, more likely the former than the latter.</p> <h2>Who am I?</h2> <p>I go by Polar, and I like to create websites like this one! I started learning web development (starting with HTML) a few weeks ago, and it seems that I have learned quite a bit in such a short time period! My main goal in every website is that you guys will learn something in each and every site!</p> <h2>What is this site's purpose?</h2> <p>The purpose of this website is to teach computer science topics which are really helpful for creating many different programs! One of the hardest parts of computer programming is when you just need someone to explain it to you in the right way! This site is here to give you another way!</p> <h2>Interesting Facts about Snippets</h2> <li>The fullscreen button was created since Oh Noes yells about the JavaScript lag too much. Silly Oh Noes!</li> <li>The menu button rotate animation was based off of the menu button on <a class='underline'href='https://thornela.com'>thornela.com</a>. My dad was just looking at the landscaping site and I thought it would be perfect for this site!</li> <li>I learned an enormous amount of content regarding web development during the production of Snippets. This includes learning CSS animations, flexbox-oriented design, custom properties in :root, setTimeout/setInterval, and much, much more.</li> <li>I spent roughly 4-6 hours a day programming or reading programming articles. The more I learn, the more I realize that I have to learn!</li> <p>A lot of those were actually me just bragging. Ignore that.</p> </article> </div><!--About--> <!--The Beautiful Articles (listed by id)--> <div id='objects' class='page'> <article> <h1>Objects</h1> <p>Objects are the first data structure which I think is the most important to learn. There is quite a bit of controversy in the programming community regarding when the right time is to implement these sometimes finicky data structures, but the general consensus is that they are very useful!</p> <h2>How to Set Up an Object</h2> <p>Let's start with the basic setup of an object. We will create a 'ball' object, which will take on the desired color whenever we call it.</p> <pre class='language-javascript'><code>function ball(x, y, color){ this.x = x; this.y = y; this.color = color; }</code></pre> <p>Great! Now we can create a new ball object, and let's make it blue!</p> <pre class='language-javascript'><code>function ball(x, y, color){ this.x = x; this.y = y; this.color = color; } var blueBall = new ball(200, 200, color(255, 255, 0));</code></pre> <p>Nice! Now we have an object. But we can't really see it yet! Let's go ahead and create a function (also known as a method) to display our ball object! We can do this in one of two ways:</p> <pre class='language-javascript'><code>function ball(x, y, color){ this.x = x; this.y = y; this.color = color; //the first way this.display = function(){ fill(this.color); ellipse(this.x, this.y, 20, 20); }; } //the second way, the more common way ball.prototype.display = function(){ fill(this.color); ellipse(this.x, this.y, 20, 20); }; var blueBall = new ball(200, 200, color(255, 255, 0)); //now we call our drawing function blueBall.display(); </code></pre> <p>Perfect! Now we have a nice function (aka a method) to draw the ball whenever we want! Some things to note:</p> <li>When using the first way of creating a method, it is important that you are only creating one instance of this Object! Otherwise you might run into some overhead in later deviations of the Object! Definitely stick with .prototype if you are not sure!</li> <li>When using the second way of creating a method for the object, you should use objectName.prototype.functionName format.</li> <li>When we call our method, we need to use the name of the object we are currently targeting. So we can't simply call ball.display();, but instead have to call blueBall.display(); since it is the specific object we want to draw.</li> <h2>Why is this useful?</h2> <p>This becomes more apparent in later lessons, but essentially if you combine Objects with Arrays, it results in a powerful device to create complex game mechanics. The way this works is that arrays can hold Objects in them, and so you can store let's say 50 enemies each with their own coordinates without having to use var enemyX1, var enemyX2 and other things like that. Instead you can iterate through the array and use the coordinates for each enemy however you want!</p> <a class='underline button' id='arrays'>Continue to Arrays →</a> </article> </div><!--objects--> <div id='arrays' class='page'> <article> <h1>Arrays</h1> <p>Arrays are perhaps the most widely used data structure, and if used correctly, can cut the time to create your computer program into almost nothing. The most complicated data structures are derivatives of arrays!</p> <p>Inside of an array, each element is assigned a positive numerical value, also known as an index. An index always starts at 0! For example, if you had an array of [5, 3, 2, 4], the 5 would have an index of 0, the 3 would have an index of 1, and so on!</p> <pre class='language-javascript'><code>myArray = [5, 3, 2, 4]; console.log(myArray[0]);//returns 5 console.log(myArray[1]);//returns 3</code></pre> <h1>Operations</h1> <p>An array can be manipulated in many ways, but for the purposes of game devlopment, these are the most important:</p> <li>myArray.splice();</li> <li>myArray.push();</li> <li>myArray.findIndex();</li> <p>These are less important, but still commonly used:</p> <li>myArray.forEach();</li> <li>myArray.filter();</li> <li>myArray.every();</li> <li>myArray.some();</li> <p>We will go over each of these briefly, in order to understand their significance.</p> <h2>myArray.push();</h2> <p>The .push method is useful for storing objects inside of arrays, so that they can later be manipulated.</p> <pre class='language-javascript'><code>//we are going to store the balls in here var ballArray = []; function ball(x, y){ this.x = x; this.y = y; } ball.prototype.display = function(){ ellipse(x, y, 20, 20); }; for(var i = 0; i &lt 20; i++){ //pushes 20 random balls into our array ballArray.push(new ball(random(0, 400), random(0, 400)); } //to draw every element in the array, we can use a for loop to //iterate through it all for(var i = ballArray.length; i--;){ ballArray[i].display(); }</code></pre> <h2>myArray.splice();</h2> <p>This method is very useful, since it allows us to 'cut' certain values from our array, which is useful for features such as an enemy death!</p> <pre class='language-javascript'><code>var ballArray = []; function ball(x, y){ this.x = x; this.y = y; //every ball has a timer of 100 frames this.timer = 100; } ball.prototype.display = function(){ //count the timer down for each object this.timer--; ellipse(x, y, 20, 20); }; for(var i = 0; i &lt 20; i++){ ballArray.push(new ball(random(0, 400), random(0, 400)); } draw = function(){ for(var i = ballArray.length; i--;){ ballArray[i].display(); //if the current ball's timer is less than 1 if(ballArray[i].timer &lt 1){ //splice 1 object at the current index; or this ball! ballArray.splice(i, 1); } } }; </code></pre> <h2>myArray.findIndex();</h2> <p>myArray.findIndex is useful for an algorithm known as object pool, which will be explained in a another lesson. For now, we will go over the basics of the function.</p> <pre class='language-javascript'><code>//first, the function which checks for prime numbers function isPrime(num) { for (var i = 2; num > i; i++) { if (num % i == 0) { return false; } } return num > 1; } //use findIndex to 'short circuit' it; call back function at //the first prime number console.log([4, 6, 8, 9, 12].findIndex(isPrime)); console.log([4, 6, 7, 9, 12].findIndex(isPrime));</code></pre> <h2>A Useful Data Structure</h2> <p>That's about it for arrays! This is only a brief introduction to arrays: there is so much more to learn! I'm glad you read through this, as it sets up stuff for algorithms in other lessons!</p> <a class='underline button' id='objectpool'>Continue to Object Pool →</a> </article> </div><!--arrays--> <div id='objectpool' class='page'> <article> <h1>Object Pool Algorithm</h1> <p>This is technically an algorithm, and is used widely for game development, for one very common reason: reducing garbage collection. I was actually taught this by famous programmer, Larry Serflaten for the reason that I would use the .splice method too often and ended up in a laggy game!</p> <h2>What does this do?</h2> <p>Think about a traditional game. Every time we want to spawn an enemy we would do something like this:</p> <pre class='language-javascript'><code>enemies.push(new enemy(100, 100));</code></pre> <p>And when we wanted to delete that enemy, for example if it died we would use:</p> <pre class='language-javascript'><code>for(var i = enemies.length; i--;){ if(enemies[i].hp &lt 1){ enemies[i].splice(i, 1); } }</code></pre> <p>Now, this is okay for smaller programs. But the problem here is that every time we remove an enemy from storage, it leaves a small hole in the total storage of the program. This is because when a new object is added and has more data than the space which is empty in the middle, it just adds the object to the end. We can stop this from happening by simply adding all our objects on the initial call of the program, and not deleting any of them. This way we eliminate the gaps completely!</p> <h2>Creating an Object Pool</h2> <p>Let's create a simple object pool for explosions!</p> <pre class='language-javascript'><code>//to store pooled objects var pool = []; //whenever blast is called, create a new object var blast = function(x, y){ return {t:50, x:x, y:y}; }; //switch displays between the timer for this object var boom = function(b){ //count down each frame b.t--; switch (true){ case (b.t>40): fill(255); ellipse(b.x, b.y, 10, 10); break; case (b.t>20): fill(255, 255, 100); ellipse(b.x, b.y, 20, 20); break; case (b.t>0): fill(155, 0, 0); ellipse(b.x, b.y, 35, 35); } }; mousePressed = function(){ //if mouse is Pressed, add a bomb object var bomb = blast(mouseX, mouseY); //find the first pool object which is not currently exploding var idx = pool.findIndex(function(b){return b.t&lt0;}); //if there is an object, replace it with timer of 50 if (idx >= 0 ){ pool[idx] = bomb; }else{ //or else add a new bomb to the pool pool.push(bomb); } }; draw = function() { background(0); //run the explosion for each item in the pool pool.forEach(boom); fill(255); text('POOL: ' + pool.length, 20, 20); };</code></pre> <p>As you can see, it is really easy to add in an object pool to your program. Another interesting way to do it is to add the objects before you start your program.</p> <pre class='language-javascript'><code>var pool = []; function enemy(x, y){ this.x = x; this.y = y; this.active = false; } for(var i = 20; i--;){ pool.push(new enemy(0, 0)); } function callEnemy(x, y){ var myEnemy = pool.findIndex(function(e){ return !e.active; }); myEnemy.active = true; myEnemy.x = x; myEnemy.y = y; }</code></pre> <p>In order to use this method, you must set a cap on the amount of enemies you need in the first place. For example, you would have only 20 enemies to use throughout the whole game, and if you wanted to add a new one, you could not. This is the major disadvantage of this method.</p> <h2>Great Algorithm</h2> <p>You can use this algorithm in many different ways, and it helps immensely with garbage collection and overall data consumption. Hope this helped you!</p> <a class='underline button' id='bubblesort'>Continue to Bubble Sort →</a> </article> </div><!--objectpool--> <div id='bubblesort' class='page'> <article> <h1>Bubble Sort</h1> <p>Bubble sort is a sorting algorithm which is really easy to implement, but it helps many amateur programmers understand the basics of sorting algorithms in general. They get slower the larger the list is that you are trying to sort.</p> <h2>How It Works</h2> <p>Bubble sort works very simply. It iterates through every value, and sees if the next value is greater than it. If it is, it swaps itself with that one! There is no return in bubble sort, so it will continue to iterate through each loop array.length^2 times.</p> <h2>Setting Up the High Scores</h2> <p>To start, we are going to want a list of high scores to sort.</p> <pre class='language/javascript'><code>var scores = [200, 45, 267, 103];</code></pre> <p>Great! Now we are going to set up the function which actually sorts our array.</p> <pre class='language/javascript'><code>function bubbleSort(Array){ var len = Array.length;/first, cache the length, since we are iterating forwards/ for(var i = 0; i &lt len; i++){//iterate once for(var j = 0; j &lt len; j++){/iterate again to take care of any stragglers/ if (Array[j] > Array[j + 1]){/if current is greater than next.../ var tmp = Array[j];/store the current index/ Array[j] = Array[j + 1];/replace current with next index/ Array[j + 1] = tmp;/replace next index with current/ } } } return Array;/after we iterate, return the new array!/ }</code></pre> <p>To test out if this works, we can use println(); on our scores, which we already set up earlier!</p> <pre class='language/javascript'><code>println(bubbleSort(scores));//returns 45,103,200,267 </code></pre> <p>That's about it for Bubble Sort! Do you see why it is mostly a demostrative sorting algorithm? The time it takes to return a value increases by array.length^2 since it is a double-nested loop! If you want to see one of the most advanced, but wildly efficient sorting algorithms, see Quick Sort!</p> <a class='underline button' id='quicksort'>Continue to Quick Sort</a> </article> </div><!--bubblesort--> <div id='quicksort'class='page'> <article> <h1>Quick Sort</h1> <p>This is a fantastic algorithm which we can use to sort scores incredibly quickly! It is a little more advanced, so be sure to read along!</p> <h2>How Quick Sort Works</h2> <p>We can understand quick sort in a few steps. This will be taken directly from <a href='https://www.khanacademy.org/computing/computer-science/algorithms/quick-sort/a/overview-of-quicksort'target='_blank'>Khan Academy's Quicksort overview</a>. <br><br>We can understand quicksort in 3 easy steps:<li>Divide the array from the selected "pivot", or index which we will be comparing data to.<li>Next, we will sort out the subarrays. <li>Finally, we combine the subarrays, which will automatically be sorted.</p> <h2>Setting up the Algorithm</h2> <p>First, we should set up the function which will swap elements. Since we will be doing this a lot, it makes sense!</p> <pre class='language/javascript'><code>function swap(items, leftIndex, rightIndex){ var temp = items[leftIndex]; items[leftIndex] = items[rightIndex]; items[rightIndex] = temp;/We went over this in Bubble Sort!/ }</code></pre> <p>Next, we will set up the function which will set up the partition function. This is important since it will separate the array into smaller arrays, which will be sorted into smaller ones, etc.</p> <pre class='language/javascript'><code>function partition(Array, left, right) { /set variables: center, left, right/ var pivot = Array[Math.floor((right + left) / 2)], i = left, j = right; while(i &lt= j){/while the left is greater than the right/ while(Array[i] &lt pivot){ i++;/increase index to pivot/ } while(Array[j] > pivot){ j--;/decrease to pivot/ } if(i &lt= j){/simple swapping function/ swap(Array, i, j); i++; j--; } } return i; }</code></pre> <p>Great! Now we just need the function that controls the whole thing!</p> <pre class='language/javascript'><code>function quickSort(Array, left, right) { var index; if(Array.length > 1){/If it is less than 1 it wouldn't need to be sorted anyway/ index = partition(Array, left, right);/returned from partition: the left-most index!/ if (left &lt index - 1) {/if we have more elements on the left/ quickSort(Array, left, index - 1);/move the right index down and go again/ } if(index &lt right){/if there are more elements on right/ quickSort(Array, index, right);/call again with updated index(from partition function)/ } } return Array; }</code></pre> <p>Notice how we used a recursive function: that is, calling a function inside itself. This is so that we can use minimal amounts of code to execute the same task! Now, we will test it out on some high scores!</p> <pre class='language/javascript'><code>var scores = [500, 1000, 2030, 20, 300, 9182, 1234, 444, 1223]; var tiMe = millis();/get current millis/ for(var i = 500; i--;){/run 500 times/ println(quickSort(scores, 0, scores.length - 1)); } println((millis() - tiMe)/500 + 'ms');/print average time/ function mouseClicked(){ Program.restart();/you can restart on click!/ }</code></pre> <h2>Results</h2> <p>My computer results in 2.59 ms on average, but I have a slow computer so you might have a different result. <a href='https://www.khanacademy.org/computer-programming/quick-sort/6019853832994816'target='_blank'>You can try it out for yourself.</a><br>Great work following along! Be sure to check out the next article, but that is about it for algorithms!</p> <a class='underline button'id='events'>Continue to Events and Scene Management</a> </article> </div><!--quicksort--> <div id='events' class='page'> <article> <h1>Events and Scene Management</h1> <p>For the most part, the first stumbling block when a new programmer begins to make a game is the different scenes. These would be the title screen, game scene, gameover scene, and maybe even a high scores screen!</p> <h2>Separating Different Scenes</h2> <p>Let's go ahead and create a couple scenes: title, game, and gameover.</p> <pre class='language-javascript'><code>var scene, title, game gameover; function title(){ background(0); text('this is the title!', 200, 200); } function game(){ background(0); text('this is the game!', 200, 200); } function gameover(){ background(0); text('this is the gameover!', 200, 200); }</code></pre> <p>Now that we have these functions, we can simply store them inside of the 'scene' variable and run scene() in the draw loop!</p> <pre class='language-javascript'><code>scene = game; draw = function(){ scene(); };</code></pre> <p>This is great! Except that we can only see the title function right now. We need a way to change between the different sections of our game.</p> <h2>Events</h2> <p>In an old version of event management, we would continously check if there was an event happening, and then call a particular function. It would look something like this:</p> <pre class='language-javascript'><code>while(true){ if(keyIsPressed){ keyFunction.run(); }else if(mouseIsPressed){ mouseFunction.run(); } }</code></pre> <p>This is a bit of psuedo-code, bear in mind. In our version, we want the functions to be separated, so when a key is pressed or the mouse is clicked, we dont want the same thing to always happen. <br>Let's add a new variable called 'clicked'.</p> <pre class='language-javascript'><code>var clicked = false; function mouseReleased(){ clicked = true; } draw = function(){ clicked = false; };</code></pre> <p>Now that we have this new variable in place, we can use it to detect whenever the mouse is clicked once.</p> <p>The reason we do not use Khan Academy's mouseIsPressed is because that would make the variable be true every frame. Let's go ahead and add the code to our game loop.</p> <pre class='language-javascript'><code>var scene, title, game gameover; function title(){ background(0); text('this is the title!', 200, 200); if(clicked){ scene = game; } } function game(){ background(0); text('this is the game!', 200, 200); if(clicked){ scene = gameover; } } function gameover(){ background(0); text('this is the gameover!', 200, 200); if(clicked){ scene = title; } } var clicked = false; function mouseReleased(){ clicked = true; } scene = title; draw = function(){ scene(); clicked = false; };</code></pre> <h2>Key Events</h2> <p>You may be wondering how to add key events to your program. After all, there is a lot more interaction with such a wide array of inputs. Using a key array, we can make it really easy to add keys to a game.</p> <pre class='language-javascript'><code>var keys = [];//holds key values function keyPressed(){ keys[keyCode] = true; } function keyReleased(){ keys[keyCode] = false; }</code></pre> <p>You may be wondering how we can use this function. It is really simple, actually. We can simply put if(keys[yourkeycode]){doSomething();}. Just take a look!</p> <pre class='language-javascript'><code>if(keys[UP]){ ellipse(random(20, 380), random(20, 380), 20, 20); }</code></pre> <p>Here are the list of special keys which can be used inside the if statement:</p> <li>ENTER</li> <li>BACKSPACE</li> <li>DELETE</li> <li>UP</li> <li>RIGHT</li> <li>DOWN</li> <li>LEFT</li> <p>Otherwise, you want to use a great site called a <a href='https://keycode.info' class='underline'>keycode.info</a>. This will give you the keycode value for any key that you might want! This lets you add special features, such as WASD movement!</p> <a class='button underline'id='particles'>Continue to Particles →</a> </article> </div><!--events--> <div id='particles' class='page'> <article> <h1>Particles</h1> <p>Okay, I know that particles are technically not part of Computer Science, but I figured they might be helpful to know, as far as game development goes.</p> <h2>Setting Up a Particle Object</h2> <p>First, we need an object for the particle to show up as. We'll make it a white explosion, so we will need white ellipse objects.</p> <pre class='language-javascript'><code>function whiteParticle(x, y){ this.x = x; this.y = y; this.v = random(-2, 2);//initial velocity randomly left or right this.V = random(-1, -3);//initial velocity always starts up } whiteParticle.prototype.run = function(){ //update it this.x += this.v;//x increases by velocity this.y += this.V;//y increases by y velocity this.V ++;//y velocity increases (gravity) //draw it fill(255, 255, 255); ellipse(this.x, this.y, 3, 3); };</code></pre> <h2>Adding Particles</h2> <p>Now that we have these particles, we need a way to add them. We can do this by simply adding our 'clicked' variable from earlier, and when we click we add a bunch of them!</p> <pre class='language-javascript'><code>function whiteParticle(x, y){ this.x = x; this.y = y; this.v = random(-2, 2);//initial velocity randomly left or right this.V = random(-1, -3);//initial velocity always starts up } whiteParticle.prototype.run = function(){ //update it this.x += this.v;//x increases by velocity this.y += this.V;//y increases by y velocity this.V ++;//y velocity increases (gravity) //draw it fill(255, 255, 255); ellipse(this.x, this.y, 3, 3); }; //to store the particles var particles = []; var clicked = false; function mouseReleased(){ clicked = true; } draw = function(){ if(clicked){ //add 20 particles for(var i = 20; i--;){ particles.push(new particle(mouseX, mouseY)); } } clicked = false; };</code></pre> <p>That's fantastic! But you can't actually see the particles. Let's change that!</p> <pre class='language-javascript'><code>function whiteParticle(x, y){ this.x = x; this.y = y; this.v = random(-2, 2);//initial velocity randomly left or right this.V = random(-1, -3);//initial velocity always starts up } whiteParticle.prototype.run = function(){ //update it this.x += this.v;//x increases by velocity this.y += this.V;//y increases by y velocity this.V ++;//y velocity increases (gravity) //draw it fill(255, 255, 255); ellipse(this.x, this.y, 3, 3); }; //to store the particles var particles = []; var clicked = false; function mouseReleased(){ clicked = true; } draw = function(){ if(clicked){ //add 20 particles for(var i = 20; i--;){ particles.push(new particle(mouseX, mouseY)); } } for(var i = particles.length; i--;){ particles[i].run();//draws them yay! } clicked = false; };</code></pre> <h2>Removing Particles</h2> <p>I mean, that kind of worked, but now the particles don't go away and it lags terribly. We can fix this by adding a time for them. We should also make their fill fade out while the timer ticks down.</p> <pre class='language-javascript'><code>function whiteParticle(x, y){ this.x = x; this.y = y; this.v = random(-2, 2);//initial velocity randomly left or right this.V = random(-1, -3);//initial velocity always starts up this.timer = 300;//the timer! } whiteParticle.prototype.run = function(){ //update it this.x += this.v;//x increases by velocity this.y += this.V;//y increases by y velocity this.V ++;//y velocity increases (gravity) this.timer--;//ticks down //draw it fill(255, 255, 255, this.timer);//fades out ellipse(this.x, this.y, 3, 3); }; //to store the particles var particles = []; var clicked = false; function mouseReleased(){ clicked = true; } draw = function(){ if(clicked){ //add 20 particles for(var i = 20; i--;){ particles.push(new particle(mouseX, mouseY)); } } for(var i = particles.length; i--;){ particles[i].run();//draws them yay! //cuts the particles if(particles[i].timer === 0){ particles.splice(i, 1); } } clicked = false; };</code></pre> <p>Well, that is about it for particles. If you haven't already, take a look around at the other articles. If you have, thank you for taking the time to read!</p> </article> </div><!--particles--> </main> <footer> <div id='footer-top'> <div id='footer-left'> <h4>Our goal is to teach computer science topics to programmers of any experience level.</h4> </div> <div id='footer-right'> <a class='button'id='home'>Home</a> <a class='button'id='lessons'>Lessons</a> <a class='button'id='about'>About</a> </div> </div> <div id='footer-bottom'> <p>Created by Polar for <a href='https://www.khanacademy.org/computer-programming/contest-teach-a-cs-concept/6648817392861184'>Contest: Teach a CS Concept</a></p> </div> </footer><!--Footer--> <!--Scripts--> <!--General--> <script> hljs.highlightAll();/The first function called: apply syntax highlighting to all code elements!/ document.querySelector('body').style.opacity = '1';/This is so that the material icons don't display as weird text for the brief second of loading./ </script><!--On Load--> <script type='application/javascript'> (function(){ const scrollElements = document.querySelectorAll('.scroll-element');/Select every class of scroll-element/ const checkScroll = (el) => {/el are the elements we want to apply scroll check to/ for(let i = el.length; i--;){ if(el[i].getBoundingClientRect().top1.25 < window.innerHeight){/1.25 is so that you can actually see the animation/ el[i].classList.add('scrolled'); }else if(el[i].getBoundingClientRect().top > window.innerHeight){ el[i].classList.remove('scrolled');/remove it if it's off screen/ } } } //add event listener window.addEventListener('scroll', () => checkScroll(scrollElements)); })(); </script><!--Scroll Animations--> <script type='application/javascript'> (function(){ const pages = document.querySelectorAll('.page');/Select all page elements/ const navigateTo = (page) => { for(let i = pages.length; i--;){ pages[i].style.display = 'none';/hide all pages/ if(pages[i].id === page){ void pages[i].offsetWidth;/trigger reflow, so you know if you pushed a button/ pages[i].style.display = 'block';/show the page if the id is selected/ } } window.scroll(0, 0);/scroll to top. no need for smooth scroll!/ } const buttons = document.querySelectorAll('.button');/select all buttons/ for(let i = buttons.length; i--;){ buttons[i].addEventListener('click', () => navigateTo(buttons[i].id));/apply navigation event listener to each buttons and navigation to the button's id. so if I had <a class='button'id='home'>Home</a> It would navigate to the <div id='home'class='page'></div>/ } navigateTo('home');/Navigate to home on load/ })(); </script><!--Navigation--> <!--Specific--> <script> function toggleNav(){/set this up as a global function so I can reuse it later/ document.querySelector('nav').classList.toggle('extend-nav'); document.querySelector('#menu').classList.toggle('rotate'); if(document.querySelector('nav').classList.contains('extend-nav')){ setTimeout(document.getElementById('menu').innerHTML = 'close', 250);/Change the icon halfway/ }else{ setTimeout(document.getElementById('menu').innerHTML = 'menu', 250);/Change icon halfway again/ } } document.querySelector('#menu').addEventListener('click', function(){/add evvent listener to menu (top right)/ toggleNav(); }); let navbuttons = document.getElementsByClassName('nav'); for(var i = 0; i < navbuttons.length; i++){ navbuttons[i].addEventListener('click', toggleNav); }/add all <a> within the menu an event listener as well/ </script><!--Menu--> <script type='application/javascript'> (function(){ let dark = false;/I figured this was faster than checking an attribute value/ document.querySelector('#theme').addEventListener('click', function(){ const root = document.querySelector(':root').style;/select root values/ if(!dark){/dark values/ root.setProperty('--heavytext-color', '#ffffff'); root.setProperty('--lightbg-color', '#121212'); root.setProperty('--lighttext-color', '#dcdcdc'); root.setProperty('--heavybg-color', '#181818'); }else{/light values/ root.setProperty('--lighttext-color', '#444444'); root.setProperty('--lightbg-color', '#efefef'); root.setProperty('--heavytext-color', '#000000'); root.setProperty('--heavybg-color', '#ffffff'); } dark = !dark;/change it so the theme is different next time/ }); })(); </script><!--Theme--> <script> function addData(data){/as a global variable, I can manipulate the data variable however I want!/ document.getElementById('popupsc').addEventListener('click', function(){ var w = window.open(); w.document.open(); w.document.write(data.revision.code); w.document.close(); }); document.getElementById('screen').addEventListener('click', function(){ var w = window.open(); w.document.open(); w.document.write(data.revision.code); w.document.close(); }); } </script><!--Fullscreen--> <script type='application/javascript'> (function(){ const lessons = document.getElementsByClassName('lesson-card');/select all lesson cards/ const searchLessons = () => { let input = document.querySelector('#lesson-search').value.toLowerCase();/get the value from lesson search. value is just whatever characters we had put in/ for(let i = lessons.length; i--;){/iterate through every lesson/ if (!lessons[i].textContent.toLowerCase().includes(input)){ lessons[i].style.display = 'none';/if the text does not include the value hide/ }else{ lessons[i].style.display = 'flex';/else, it's a flex container/ } } } document.querySelector('#lesson-search').addEventListener('keyup', searchLessons);/add the event listener to the search bar to when you release a key/ })(); </script><!--Lesson Search--> <script> document.querySelector('body').classList.add('no-scroll'); document.querySelector('#close').addEventListener('click', function(){ document.querySelector('#popup').style.display = 'none'; document.querySelector('body').classList.remove('no-scroll'); }); document.querySelector('#continue').addEventListener('click', function(){ document.querySelector('#popup').style.display = 'none'; document.querySelector('body').classList.remove('no-scroll'); }); </script><!--Popup--> <!--Since we used 'callback=addData', we can tell the script to go back the the addData() global function above! No jQuery needed! The only issue is it only executes on the first load.--> <script src='https://www.khanacademy.org/api/labs/scratchpads/5475366706659328?callback=addData'></script> <!--Save function. All credit to Bluebird @BirdWatcher03.--> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <script> var save = function(){ html2canvas(document.body,{ allowTaint : false, useCORS: true, width:document.documentElement.clientWidth, height:document.documentElement.clientWidth }) .then(function(canvas){ b64Img = canvas.toDataURL(); if(b64Img.length > 1033500){// alert("Oh no, the thumbnail is to big!\nTry making your webpage display size smaller."); } else{ window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }}); }; var handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { console.log("Saving..."); save(); }, 1000) } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', handleSave); window.parent.savers += 1; for (window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', handleSave) } </script> </body> </html>
Folds	58,153,155,283,285,341,343,368,371,412,414,439,441,483,485,530,532,595,597,643,650,654,655,664,666,675,683,754,756,816,818,833,837,883,885,975,977,1063,1065,1098,1100,1171,1173,1272,1274,1412,1416,1430,1435,1438,1440,1455,1457,1476,1479,1496,1498,1517,1519,1534,1536,1551,1553,1563,1570,1601
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMO8kvrcCQw
Votes	105
Spin-Offs	5
Type	WEBPAGE
Width	400
Height	500
User Flagged	false
Origin Scratchpad	{"id":"4811554451144704","title":"Contest: Teach a CS Concept - HTML Submissions","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Polar
Author Name	notpolar
Author ID	kaid_80710011086149831327935
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1709835012085
Updated	10 months ago, 1709835012085
Source Deleted	unknown