Viewing Program

Program Data

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

Title	Team Bug Bashers
ID	5072233106423808
Created	6 months ago, 1719152586594
Updated	6 months ago, 1719152754262
Code	<!DOCTYPE html> <!-- Bug Bashers Homepage by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects) The Bug Bashers are a team competing in The Coding Olympics 2024! Enjoy this homepage made with vanilla HTML, CSS, JS! I chose to revisit KACP Contest: Make Your Colors Count , which I didn't get to participate in because it was held before I created my account on Khan Academy. The colors I chose to use are Golden Yellow (#FFE100) because our mascot is a honey bee, as well as black (#000) and white (#FFF). Contest: Celebrations! I have chosen to revisit "Contest: Make Your Colors Count" I have completed 100% of Khan Academy's 'Intro to HTML/CSS' and have been programming for 54 months. I would prefer to be placed in the Advanced bracket Released 23 June 2024 Updated 23 June 2024 Estimated work time: 18 hours Lines of code: 2600+ --> <html lang='en' class='no-js'> <!-- Head: Metadata, Fonts, Stylesheet --> <head> <!-- Character encoding to UTF-8 --> <meta charset="UTF-8"> <!-- A good practice to include: meta description for SEO purposes --> <meta name="description" content="Team Alpha (c) 2024 by LeaferStudios"> <!-- Webpage Title --> <title>Team Bug Bashers</title> <!-- Link to a CSS file that resets default browser styles, which ensures consistent rendering across different browsers --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css"> <!-- Meta tag to ensure the website scales the same across all devices for responsive web design --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Link to Google Material Icons, a library of icons for use in the webpage --> <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" /> <!-- Preconnect to the Google Fonts API to improve loading performance --> <link rel="preconnect" href="https://fonts.googleapis.com"> <!-- Preconnect to the Google Fonts API's static assets (like font files) to improve loading performance --> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- Link to Google Fonts (IBM Plex Mono, IBM Plex Sans) --> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;700;900&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> <!-- data.js --> <script type='application/javascript'> // other team + our team total scores var scores = [{ team: "Binary Bulldogs", score: 10, mascot: "https://www.khanacademy.org/computer-programming/new-program/6522737220304896/latest.png", homepage: 'https://www.khanacademy.org/computing/computer-programming/browse', }, { team: "Program Penguins", score: 0, mascot: "https://www.khanacademy.org/computer-programming/new-program/5235102132649984/latest.png", homepage: 'https://www.khanacademy.org/computing/computer-programming/browse', }, { team: "Bug Bashers", score: 20, mascot: "https://www.khanacademy.org/computer-programming/new-program/5329725127573504/latest.png", homepage: 'https://www.khanacademy.org/computing/computer-programming/browse', } ]; // projects by our team var projects = [{ link: 'https://www.khanacademy.org/computer-programming/bug-bashers-homepage-entry-tco/5036468477542400', author: 'Digits & Kineto', event: 0, }, { link: "https://www.khanacademy.org/computer-programming/new-webpage/5272426764746752", author: 'LT', event: 0, }, { link: "https://www.khanacademy.org/computer-programming/tco-homepage-challenge-entry-bug-bashers-wip/4923406089109504", author: 'windawine', event: 0, }, { link: 'https://www.khanacademy.org/computer-programming/new-webpage/6604715731632128', author: 'Wort-Head', event: 0, }, { link: 'https://www.khanacademy.org/computer-programming/-bug-bashers-/4873199699804160', author: 'snow.', event: 0, }, { link: 'https://www.khanacademy.org/computer-programming/no-promises/4593132331515904', author: 'Arrow.programming', event: 0, }, { link: 'https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016', author: 'ThisIsAnExample, User1', event: 0, }, ]; // members in our team var members = [{ name: 'snow.', team: 'bugs', level: 0, points: 0, link: 'https://www.khanacademy.org/profile/kaid_4256000964378823438644462/discussion', }, { name: 'Wort-Head', team: 'bugs', level: 1, points: 0, link: 'https://www.khanacademy.org/profile/kaid_423431091603467965233651/discussion', }, { name: 'im bob', team: 'bugs', level: 0, points: 0, link: 'https://www.khanacademy.org/profile/kaid_7500540694222150489044752/discussion', }, { name: 'LeaferStudios', team: 'bugs', level: 2, points: 0, link: 'https://www.khanacademy.org/profile/kaid_553656479258879622339276/discussion', }, { name: 'THE BEHEMOTH', team: 'bugs', level: 1, points: 0, link: 'https://www.khanacademy.org/profile/kaid_162227050418593899377700/discussion', }, { name: 'JSCoder', team: 'bugs', level: 0, points: 0, link: 'https://www.khanacademy.org/profile/kaid_3032679493880386290676439/discussion', }, { name: 'Trenton', team: 'bugs', level: 0, points: 0, link: 'https://www.khanacademy.org/profile/kaid_410286367188224854354605/discussion', }, { name: 'Yokiebob', team: 'bugs', level: 1, points: 0, link: 'https://www.khanacademy.org/profile/kaid_681887786554114354822051/discussion', }, { name: 'TJJ2008', link: 'https://www.khanacademy.org/profile/kaid_6798618193679000901164966/discussion', team: 'bugs', level: 0, points: 0, }, { name: 'Lily', team: 'bugs', level: 1, points: 0, link: 'https://www.khanacademy.org/profile/kaid_1467619524522028467342202/discussion', }, { name: 'Arrow.programming', team: 'bugs', level: 2, points: 0, link: 'https://www.khanacademy.org/profile/kaid_5229809678324099512179597/discussion', }, { name: 'Animator101', team: 'bugs', level: 2, points: 0, link: 'https://www.khanacademy.org/profile/kaid_457601383838709034574070/discussion', }, { name: 'Digits & Kineto', team: 'bugs', level: 1, points: 0, link: 'https://www.khanacademy.org/profile/kaid_2298263796310006197020196/discussion', }, { name: 'windawine', team: 'bugs', level: 1, points: 0, link: 'https://www.khanacademy.org/profile/kaid_316582545582561029284805/discussion', }, { name: 'LT', team: 'bugs', level: 1, points: 0, link: 'https://www.khanacademy.org/profile/kaid_4330226992425990267160254/discussion', }, ]; // schedule for competition (auto updates) var schedule = [{ event: 'Joining and Homepage Contest', start: '2024-06-17', end: '2024-06-24', desc: 'Use HTML or PJS to design a unique homepage for your team. The top entry from each team will become the Team Captain. The 2 top entries in the whole competition will get 20 and 10 points respectively.', }, { event: 'First Challenge', start: '2024-06-24', end: '2024-07-08' }, { event: 'Second Challenge', start: '2024-07-08', end: '2024-07-22' }, { event: 'Third Challenge', start: '2024-07-22', end: '2024-08-05' }, { event: 'Grand Finale', start: '2024-08-05', end: '2024-08-26' } ]; // quotes for navbar var quotes = [ "\"Ship early, ship often.\"<br><p id='sayer'>-Eric Raymond</p>", "\"Code never lies, comments sometimes do.\"<br><p id='sayer'>-Ron Jeffries</p>", "\"Debugging is like being the detective.\"<br><p id='sayer'>-Anand Sharma</p>", "\"Code is where the bugs hide.\"<br><p id='sayer'>-Marcus Meissner</p>", "\"Simplicity is prerequisite for reliability.\"<br><p id='sayer'>-Edsger Dijkstra</p>", "\"Programming is thinking, not typing.\"<br><p id='sayer'>-Casey Patton</p>", "\"Code is like humor. When you have to explain it, it’s bad.\"<br><p id='sayer'>-Bill Gates</p>", "\"When something is important enough, you do it even if the odds are not in your favour.\"<br><p id='sayer'>-Elon Musk</p>", "\"Move fast and break things.\"<br><p id='sayer'>-Mark Zuckerberg</p>", "\"Innovation distinguishes between a leader and a follower.\"<br><p id='sayer'>-Steve Jobs</p>", "\"Talk is cheap. Show me the code.\"<br><p id='sayer'>-Linus Torvalds</p>" ]; </script> <!-- main.css --> <style> /* root / { box-sizing: border-box; --primary: rgb(255, 225, 0); } /* html & body / html, body { width: 100%; height: 100%; margin: 0; font-family: "IBM Plex Sans", sans-serif; } / no select / .noselect { -webkit-user-select: none; / Safari / -khtml-user-select: none; / KHTML / -moz-user-select: none; / Older Firefox / -ms-user-select: none; / IE / user-select: none; / Chrome, Edge, Opera and Firefox / } / remove outline on :focus / :focus { outline: none; } / smooth out font for headers, not too light but not too heavy / h1, h2, h3, h4, h5, h6 { font-weight: 500; font-family: "IBM Plex Sans", sans-serif; } / create nice hr tag / hr { background: gainsboro; height: 1px; border: none; } / navbar styling / nav { background: #FAFAFA; font-family: "IBM Plex Sans", sans-serif; display: flex; / flexbox / justify-content: space-between; / spaces items / height: 65px; line-height: 65px; box-shadow: 0px 0.5px 1.3px rgba(0, 0, 0, 0.191); position: fixed; / sticky navbar / right: 0; / stick to the right, left, and top / left: 0; top: 0; z-index: 100; / navbar is on top / } nav a { color: #111; } nav a:after { content: ""; background-color: var(--primary); width: 0%; z-index: -1; position: absolute; height: 0%; top: 0%; left: 0px; animation: 1s forwards grow; } nav a i.material-icons { vertical-align: middle; / align it properly (vertically) / font-weight: normal; } nav a b { font-weight: 500; } nav .nav-cc { width: 65px; text-align: center; transition: background 0.1s; } nav .nav-cc:hover { background: rgb(0, 0, 0, 0.03); color: #000; } / menu/sidebar css / #menu { position: fixed; top: 0px; left: -16rem; bottom: 0px; z-index: 105; background: white; width: 15rem; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.18); transition: all 0.2s; border-top: 65px solid var(--primary); } #menu #quote { margin-top: -55px; padding-right: 10px; height: 65px; line-height: 1.2; position: relative; } #quote #sayer { position: absolute; bottom: 5px; right: 5px; } #menu .menu-link { display: block; text-decoration: none; color: #000; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; height: 48px; line-height: 48px; padding-left: 15px; font-size: 15px; letter-spacing: 0.5px; transition: background 0.08s; } #menu .menu-link.active { background-color: #000; color: var(--primary); } #menu .menu-link.active:active { background-color: #000; } #menu .menu-link.active i.material-icons { color: var(--primary); } #menu a:after { content: ""; background-color: var(--primary); width: 0%; z-index: -1; position: absolute; height: 100%; top: 0%; left: -100%; animation: 1s forwards grow; } #menu a:hover:after { content: ""; background-color: var(--primary); width: 0%; z-index: -1; position: absolute; height: 100%; top: 0px; left: 0px; animation: 1s forwards grow; } #menu .menu-link.active:hover:after { content: ""; background-color: inherit; width: 0%; z-index: -1; position: absolute; height: 100%; top: 0px; left: 0px; animation: 1s forwards grow; } #menu .menu-link i.material-icons { vertical-align: middle; color: #000; margin-right: 20px; font-size: 20px; } #menu .menu-link:hover {} #menu .menu-link:active { background: rgba(79, 60, 8, 0.1); } #menu .sb-head { padding-left: 15px; } #menu.open { left: 0px; } / menu overlay / #overlay { background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 101; display: none; } / Utilities / .text-center { text-align: center; } / Margin & Padding Utilities / .p-t-0 { padding-top: 0; } .p-t-1 { padding-top: 0.25rem; } .p-t-2 { padding-top: 0.5rem; } .p-t-3 { padding-top: 1rem; } .p-t-4 { padding-top: 1.5rem; } .p-t-5 { padding-top: 3rem; } .p-b-0 { padding-bottom: 0; } .p-b-1 { padding-bottom: 0.25rem; } .p-b-2 { padding-bottom: 0.5rem; } .p-b-3 { padding-bottom: 1rem; } .p-b-4 { padding-bottom: 1.5rem; } .p-b-5 { padding-bottom: 3rem; } .p-l-0 { padding-left: 0; } .p-l-1 { padding-left: 0.25rem; } .p-l-2 { padding-left: 0.5rem; } .p-l-3 { padding-left: 1rem; } .p-l-4 { padding-left: 1.5rem; } .p-l-5 { padding-left: 3rem; } .p-r-0 { padding-right: 0; } .p-r-1 { padding-right: 0.25rem; } .p-r-2 { padding-right: 0.5rem; } .p-r-3 { padding-right: 1rem; } .p-r-4 { padding-right: 1.5rem; } .p-r-5 { padding-right: 3rem; } [class="m-1"] { margin: 0.25rem; } [class="m-2"] { margin: 0.5rem; } [class="m-3"] { margin: 1rem; } [class="m-4"] { margin: 1.5rem; } [class="m-5"] { margin: 3rem; } .m-t-0 { margin-top: 0; } .m-t-1 { margin-top: 0.25rem; } .m-t-2 { margin-top: 0.5rem; } .m-t-3 { margin-top: 1rem; } .m-t-4 { margin-top: 1.5rem; } .m-t-5 { margin-top: 3rem; } .m-b-0 { margin-bottom: 0; } .m-b-1 { margin-bottom: 0.25rem; } .m-b-2 { margin-bottom: 0.5rem; } .m-b-3 { margin-bottom: 1rem; } .m-b-4 { margin-bottom: 1.5rem; } .m-b-5 { margin-bottom: 3rem; } .m-l-0 { margin-left: 0; } .m-l-1 { margin-left: 0.25rem; } .m-l-2 { margin-left: 0.5rem; } .m-l-3 { margin-left: 1rem; } .m-l-4 { margin-left: 1.5rem; } .m-l-5 { margin-left: 3rem; } .m-r-0 { margin-right: 0; } .m-r-1 { margin-right: 0.25rem; } .m-r-2 { margin-right: 0.5rem; } .m-r-3 { margin-right: 1rem; } .m-r-4 { margin-right: 1.5rem; } .m-r-5 { margin-right: 3rem; } [class="p-1"] { padding: 0.25rem; } [class="p-2"] { padding: 0.5rem; } [class="p-3"] { padding: 1rem; } [class="p-4"] { padding: 1.5rem; } [class="p-5"] { padding: 3rem; } / Responsive Grid System / .row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; } .col { flex: 1 1 0; padding: 0 0.75rem; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 576px) { .col-sm-1 { flex: 0 0 8.33333333%; } .col-sm-2 { flex: 0 0 16.66666667%; } .col-sm-3 { flex: 0 0 25%; } .col-sm-4 { flex: 0 0 33.33333333%; } .col-sm-5 { flex: 0 0 41.66666667%; } .col-sm-6 { flex: 0 0 50%; } .col-sm-7 { flex: 0 0 58.33333333%; } .col-sm-8 { flex: 0 0 66.66666667%; } .col-sm-9 { flex: 0 0 75%; } .col-sm-10 { flex: 0 0 83.33333333%; } .col-sm-11 { flex: 0 0 91.66666667%; } .col-sm-12 { flex: 0 0 100%; } } @media (min-width: 768px) { .col-md-1 { flex: 0 0 8.33333333%; } .col-md-2 { flex: 0 0 16.66666667%; } .col-md-3 { flex: 0 0 25%; } .col-md-4 { flex: 0 0 33.33333333%; } .col-md-5 { flex: 0 0 41.66666667%; } .col-md-6 { flex: 0 0 50%; } .col-md-7 { flex: 0 0 58.33333333%; } .col-md-8 { flex: 0 0 66.66666667%; } .col-md-9 { flex: 0 0 75%; } .col-md-10 { flex: 0 0 83.33333333%; } .col-md-11 { flex: 0 0 91.66666667%; } .col-md-12 { flex: 0 0 100%; } } @media (min-width: 992px) { .col-lg-1 { flex: 0 0 8.33333333%; } .col-lg-2 { flex: 0 0 16.66666667%; } .col-lg-3 { flex: 0 0 25%; } .col-lg-4 { flex: 0 0 33.33333333%; } .col-lg-5 { flex: 0 0 41.66666667%; } .col-lg-6 { flex: 0 0 50%; } .col-lg-7 { flex: 0 0 58.33333333%; } .col-lg-8 { flex: 0 0 66.66666667%; } .col-lg-9 { flex: 0 0 75%; } .col-lg-10 { flex: 0 0 83.33333333%; } .col-lg-11 { flex: 0 0 91.66666667%; } .col-lg-12 { flex: 0 0 100%; } } @media (min-width: 1200px) { .col-xl-1 { flex: 0 0 8.33333333%; } .col-xl-2 { flex: 0 0 16.66666667%; } .col-xl-3 { flex: 0 0 25%; } .col-xl-4 { flex: 0 0 33.33333333%; } .col-xl-5 { flex: 0 0 41.66666667%; } .col-xl-6 { flex: 0 0 50%; } .col-xl-7 { flex: 0 0 58.33333333%; } .col-xl-8 { flex: 0 0 66.66666667%; } .col-xl-9 { flex: 0 0 75%; } .col-xl-10 { flex: 0 0 83.33333333%; } .col-xl-11 { flex: 0 0 91.66666667%; } .col-xl-12 { flex: 0 0 100%; } } / container / .container { margin: 0 auto; padding: 1rem; } / button (primary) / .btn-primary { font-size: 16px; font-weight: 200; letter-spacing: 1px; padding: 13px 20px 13px; outline: 0; border: 1px solid black; cursor: pointer; position: relative; background-color: rgba(0, 0, 0, 0); user-select: none; -webkit-user-select: none; / KHTML / -moz-user-select: none; / Older Firefox / -ms-user-select: none; / IE / user-select: none; / Chrome, Edge, Opera and Firefox / } .btn-primary:after { content: ""; background-color: var(--primary); width: 100%; z-index: -1; position: absolute; height: 100%; top: 7px; left: 7px; transition: 0.2s; } .btn-primary:hover:after { top: 0px; left: 0px; } @media (min-width: 768px) { .btn-primary { padding: 13px 50px 13px; } } i.material-icons { vertical-align: middle; } .highlight { position: relative; } .highlight:after { content: ""; background-color: var(--primary); width: 0%; z-index: -1; position: absolute; height: 31%; top: 26px; left: 0px; animation: 1s forwards grow; } @keyframes grow { 0% { width: 0%; } 100% { width: 100%; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .fade { opacity: 0; / Start with opacity 0 / position: relative; top: 0px; transform: scale(0.95); transition: all 0.6s ease; / Smooth transition effect / } .fade.faded-in { top: 0px; transform: scale(1); opacity: 1; / Opacity 1 when faded-in class is added / } / quote / #quote { font-family: 'IBM Plex Sans', monospace; padding-right: 5px; } a { color: #000; text-decoration: none; position: relative; transition: all 0.3s; } a:after { content: ""; background-color: var(--primary); width: 0%; z-index: -1; position: absolute; height: 31%; top: 12px; left: 0px; transition: all 0.3s; animation: 1s forwards grow; } a:hover { color: #000; } a:hover:after { content: ""; background-color: var(--primary); width: 0%; z-index: -1; position: absolute; height: 100%; top: 0px; left: 0px; animation: 1s forwards grow; } / logo / .logo { font-size: 19px; text-decoration: none; padding-right: 15px; cursor: pointer; font-weight: 300; font-family: 'IBM Plex Mono', monospace; } .logo i { font-weight: 400; } / notif snackbar / .notif { margin-top: 45px; margin-bottom: -25px; background-color: #000; border-radius: 15px; color: var(--primary); font-family: 'IBM Plex Mono', monospace; font-size: 15px; height: 30px; line-height: 30px; text-align: left; justify-content: space-between; display: flex; padding: 0 10px; } .notif i.material-icons { font-size: 18px; } .notif a { color: var(--primary); cursor: pointer; } .notif a:after { background: none; } / secondary / .btn-secondary { background-color: var(--primary); border: 1px solid var(--primary); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px 0; box-sizing: border-box; color: #000; cursor: pointer; font-family: 'IBM Plex Mono', sans-serif; font-size: 16px; font-weight: 400; outline: none; outline: 0; padding: 10px 25px; text-align: center; transform: translateY(0); transition: transform 150ms, box-shadow 150ms; user-select: none; -webkit-user-select: none; / KHTML / -moz-user-select: none; / Older Firefox / -ms-user-select: none; / IE / user-select: none; / Chrome, Edge, Opera and Firefox / } .btn-secondary:hover { box-shadow: rgba(0, 0, 0, .25) 0 3px 9px 0; transform: translateY(-2px); } .btn-secondary.btn-black { background-color: #000; border: 1px solid #000; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px 0; box-sizing: border-box; color: var(--primary); cursor: pointer; font-family: 'IBM Plex Mono', sans-serif; font-size: 16px; font-weight: 400; outline: none; outline: 0; padding: 10px 25px; text-align: center; transform: translateY(0); transition: transform 150ms, box-shadow 150ms; user-select: none; -webkit-user-select: none; / KHTML / -moz-user-select: none; / Older Firefox / -ms-user-select: none; / IE / user-select: none; / Chrome, Edge, Opera and Firefox / } .btn-secondary.btn-black:hover { box-shadow: rgba(0, 0, 0, .25) 0 3px 9px 0; transform: translateY(-2px); } .btn-secondary.btn-black i { color: var(--primary); } / bg / .bg { background-size: cover; background-position: center; background-attachment: fixed; box-shadow: inset -1000px -1000px 30px rgba(0, 0, 0, 0.5); color: var(--primary); position: relative; text-align: center; padding-top: 10px; padding-bottom: 55px; width: 100%; } / Modal styles / .modal { display: none; / Hidden by default / position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); animation: fadeIn 0.5s; } .modal.show { display: block; opacity: 1; } .modal.hide { opacity: 0; transition: opacity 0.5s; pointer-events: none; } .modal-content { background-color: #fefefe; z-index: 101; padding: 20px; width: 90%; margin: 5% auto; height: 90%; overflow-y: scroll; animation: slideIn 0.5s; } .close-btn { color: #000; float: right; font-size: 28px; font-weight: bold; transition: all 0.3s; z-index: 103; } .close-btn .bg1 { width: 40px; height: 40px; background: var(--primary); border-radius: 50%; transition: all 0.2s ease-in-out; display: flex; justify-content: center; align-items: center; position: relative; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5); } .close-btn .bg1:hover { transform: scale(1.1); } .close-btn .material-icons { font-size: 24px; color: #000; z-index: 1; transition: all 0.2s ease-in-out; position: relative; / Ensure icon stays above the background circle / } .close-btn:hover .material-icons { color: var(--primary); } .close-btn:hover .bg1 { background: #000; } .close-btn:hover { text-decoration: none; cursor: pointer; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateY(-50px)scale(0.95); } to { transform: translateY(0)scale(1); } } / loading animations / .no-js .loader { display: none; } .preloader { background: white; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .loader { width: 100%; height: 4.8px; display: inline-block; background: rgba(0, 0, 0, 0.15); position: relative; overflow: hidden; top: 50%; transform: translateY(-50%); } .loader::after { content: ''; width: 0%; height: 4.8px; background-color: var(--primary); font-size: 15px; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); background-size: 1em 1em; position: absolute; top: 0; left: 0; box-sizing: border-box; animation: animFw 0.3s ease-in-out forwards, barStripe 1s linear infinite; } @keyframes barStripe { 0% { background-position: 1em 0; } 100% { background-position: 0 0; } } @keyframes animFw { 0% { width: 0; } 100% { width: 100%; } } .fallback-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 25px; color: #000; } / more line height / p { line-height: 22px; } /footer/ footer { background-color: #000; color: white; text-align: center; padding: 20px; position: relative; overflow: hidden; } footer p { color: var(--primary); margin: 0; } / card link (behind card) / .customA:after { content: ""; background-color: #000; width: 0%; z-index: -1; position: absolute; height: 0%; top: 50%; left: 0px; opacity: 0; border-radius: 8px; padding: 0; animation: 1s forwards grow; } .customA:hover:after { content: ""; background-color: #000; width: 0%; z-index: -1; position: absolute; height: 100%; top: 0%; left: 0px; opacity: 1; animation: 1s forwards grow; } / team cards / .card { background: var(--primary); background: #FFF; padding: 5px 16px; margin: 8px; border-radius: 8px; box-shadow: inset 0px 2px 10px rgba(0, 0, 0, 0.1); color: #000; font-family: 'IBM Plex Sans'; position: relative; transition: all 0.2s ease-in; } .card:hover { background-color: var(--primary); cursor: pointer; transform: scale(1.02); } .card:active { transform: scale(1.00); } .card h3 { font-family: 'IBM Plex Sans', helvetica, arial; font-size: 22px; } .card p { letter-spacing: 0.3px; font-weight: 300; } .card .big-points { position: absolute; top: 20px; right: 10px; transform: translateY(-50%); font-size: 50px; text-align: center; font-weight: 400; } .card .big-points span { font-size: 10px; font-family: 'IBM Plex Mono'; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 400; } / sort headers for team page / .header { display: flex; justify-content: space-between; margin-bottom: 16px; width: 100%; } .header button { padding: 8px 16px; background-color: #000; color: var(--primary); width: 100%; border: none; font-family: 'IBM Plex Sans'; transition: all 0.2s; cursor: pointer; position: relative; } .header button:hover { background-color: var(--primary); color: #000; } .header button:first-child { border-right: 1px solid var(--primary); } .header button:last-child { border-left: 1px solid var(--primary); } .header button.active { background-color: var(--primary); color: #000; } .header button.active:hover { background-color: var(--primary); color: #000; } .header button.active::before { content: ''; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; } .header button.asc.active::before { border-bottom: 6px solid #000; / Up arrow / } .header button.desc.active::before { border-top: 6px solid #000; / Down arrow / } / .header button:hover.asc.active::before { border-bottom: 6px solid var(--primary); } .header button:hover.desc.active::before { border-top: 6px solid var(--primary); } / .header button:first-child { border-right: 1px solid var(--primary); } .header button:last-child { border-left: 1px solid var(--primary); } / events / .event-card { background-color: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .event-card h3 { margin-top: 0; font-size: 1.5rem; color: #000; } .event-card p { margin: 8px 0; } .breadcrumb { display: flex; justify-content: center; align-items: center; background-color: #000; color: var(--primary); padding: 7px 8px; border-radius: 30px; margin-bottom: 20px; font-size: 14px; -webkit-user-select: none; / Safari / -khtml-user-select: none; / KHTML / -moz-user-select: none; / Older Firefox / -ms-user-select: none; / IE / user-select: none; / Chrome, Edge, Opera and Firefox / } .breadcrumb.current { background-color: #000; color: var(--primary); } .breadcrumb.upcoming { background-color: var(--primary); color: #000; } .breadcrumb.past { background-color: transparent; border: 1.5px solid var(--primary); color: #000; } / plain link / a.plain { color: #000; border-bottom: 1px solid var(--primary); transition: all 0.1s; } a.plain:hover { text-decoration: none; border-bottom: 2px solid var(--primary); } a.plain:after { display: none; } / fancy inputs / .form-control { position: relative; margin: 35px 0 35px; border-radius: 50px; width: 100%; background-color: transparent; } .form-control input { background-color: #000; border: 1.5px solid #000; border-radius: 5px; width: 100%; padding: 15px 15px; font-size: 18px; transition: all 0.25s ease-in; color: #FFF; font-family: 'IBM Plex Sans', helvetica; } .form-control input:focus, .form-control input:valid { outline: 0; background-color: var(--primary); border: 1.5px solid #000; color: #000; } .form-control label { position: absolute; top: 15px; left: 10px; pointer-events: none; } .form-control label span { display: inline-block; font-size: 18px; min-width: 5px; color: var(--primary); transition: 0.255s all cubic-bezier(.48, .68, .59, 1.67); } .form-control input:focus+label span, .form-control input:valid+label span { color: #000; transform: translateY(-36px); } / podium / #podium { display: flex; justify-content: center; align-items: flex-end; margin-top: -30px; } .podium-item { width: 120px; margin: 0 0px; padding: 10px 5px; text-align: center; color: #000; position: relative; cursor: pointer; } .podium-item img { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #fff; margin-bottom: 10px; background: #FFF; filter: grayscale(100%); -webkit-filter: grayscale(100%); } .first { background-color: var(--primary); color: #000; height: 400px; border-radius: 50px 50px 0 0; } .second { background-color: #000; height: 300px; color: var(--primary); border-radius: 50px 0px 0 0; } .third { background-color: #000; height: 250px; color: var(--primary); border-radius: 0px 50px 0 0; } .podium-rank { font-size: 24px; font-weight: bold; margin-top: -5px; } .podium-name { margin-top: 1px; font-size: 14px; } </style> </head> <!-- Body: HTML and JavaScript --> <body> <div class='preloader'> <div class="loader"> </div> <div class="fallback-text" style="display: none;">Loading...</div> </div> <div id='everything'> <div id="overlay"></div> <nav> <a href="javascript: openMenu();" class="nav-cc"> <i class="material-icons">menu</i> </a> <div onclick="window.scroll(0,0);" class='logo'> <i class='material-icons'>bug_report</i> <b>Bug Bashers</b> </div> </nav> <div id="menu"> <div class="sb-head"> <p style="font-size: 13px;" id='quote'></p> </div> <br> <a href="#" class="menu-link" onclick="closeMenu();goTo(0);"> <i class="material-icons">folder</i> <span>Home</span> </a> <a href="#" class="menu-link" onclick="closeMenu();goTo(1);"> <i class="material-icons">event</i> <span>Info</span> </a> <a href="#" class="menu-link" onclick="closeMenu();goTo(2);"> <i class="material-icons">people</i> <span>Team</span> </a> <a href="#" class="menu-link" onclick="closeMenu();goTo(3);"> <i class="material-icons">code</i> <span>Projects</span> </a> <a href="#" class="menu-link" onclick="closeMenu();goTo(4);"> <i class="material-icons">info</i> <span>About</span> </a> <a href="#" class="menu-link" onclick="closeMenu();goTo(5);"> <i class="material-icons">emoji_events</i> <span>Standings</span> </a> </div> <div style='height:50px;'></div> <div class='scene'> <div class='text-center p-b-5 p-l-4 p-r-4 p-t-5' style='position:relative;'> <h1 class='fade'>We are <span class='highlight'>Bug Bashers</span></h1> <p class='fade'>One of the 3 teams competing in the <a href='https://www.khanacademy.org/computer-programming/the-coding-olympics-2024/6446070763012096' target='_blank'>TCO 2024</a></p> <p class='fade'><i>The Coding Olympics</i> is a summer programming competition made for coders of all levels to code, collaborate, and compete!</p> <div class='fade'> <button class='btn-primary ' onclick='goTo(2);'>Team <i class='material-icons'>arrow_forward</i></button> <button class='btn-primary ' onclick='goTo(3);'>Projects <i class='material-icons'>arrow_forward</i></button> </div> <div class='fade notif'> <div class='notif-content'> <i class='material-icons'>notifications</i> <span id='notif'>Loading info...</span> </div> <div class='notif-link'> <a href='https://www.khanacademy.org/computer-programming/the-coding-olympics-2024/6446070763012096' target='_blank'>Enter <i class='material-icons'>timer</i> </a> </div> </div> </div> <div class='bg' style='background-image:url("https://upload.wikimedia.org/wikipedia/commons/0/05/Honeycombs-rayons-de-miel-4.jpg");'> <h1 class='fade'><i class='material-icons' style='color:var(--primary);text-shadow:0px 3px 5px rgba(0,0,0,0.2);font-size:100px;'>event</i><br>Competition Information</h1> <p class='fade'>News, FAQ, and more about TCO 2024! </p> <div class='fade'> <button class='btn-secondary' onclick='goTo(1);'>Info <i class='material-icons'>arrow_forward</i></button> </div> </div> <div class='p-t-5 p-l-4 p-r-4 p-b-5'> <h1 class='fade'><span class='highlight'>Subscribe</span> to Us</h1> <p class='fade'>Get the latest team and competition updates.</p> <div class='fade'> <button class='btn-primary open-modal-btn' data-modal='modal1'>Subscribe <i class='material-icons'>arrow_forward</i></button> </div> </div> <div class='bg' style='background-image:url("https://upload.wikimedia.org/wikipedia/commons/4/4a/Todd_Huffman_-_Lattice_%28by%29.jpg");'> <h1 class='fade'><i class='material-icons' style='color:var(--primary);text-shadow:0px 3px 5px rgba(0,0,0,0.2);font-size:100px;'>military_tech</i><br>All Coders Welcome</h1> <p class='fade'>We are a team for everyone! </p> <div class='fade'> <button class='btn-secondary' onclick='goTo(4);'>About <i class='material-icons'>arrow_forward</i></button> </div> </div> <div class='p-t-5 p-l-4 p-r-4 p-b-5' style='border-bottom: 1px solid gainsboro;border-radius:0px;padding-bottom:30px;'> <h1 class='fade'><span class='highlight'>Professionally</span> Led</h1> <p class='fade'>"I'm an expert programmer with over 700 projects released on Khan Academy and a proven track record of leading teams to victory. Together, we'll unleash our potential, achieve remarkable victories, and make a lasting impact on our community."<br>-<a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects' target='_blank'>LeaferStudios</a>, Team Captain</p> </div> <div class=' bg' style='background-image:url("https://upload.wikimedia.org/wikipedia/commons/e/e4/Perdita_luteola%2C_female%2C_face_2012-08-01-16.02.40_ZS_PMax.jpg");background-position: center 0px;'> <h1 class='fade'><i class='material-icons' style='color:var(--primary);text-shadow:0px 3px 5px rgba(0,0,0,0.2);font-size:100px;'>mic</i><br>Share your Thoughts</h1> <p class='fade'>Feedback is greatly appreciated! </p> <div class='fade'> <button class='btn-secondary open-modal-btn' data-modal='modal2'>Feedback <i class='material-icons'>arrow_forward</i></button> </div> </div> <div class='p-t-5 p-l-4 p-r-4 p-b-5' style='border-bottom: 1px solid gainsboro;border-radius:0px;padding-bottom:30px;'> <h1 class='fade'><span class='highlight'>Standings</span></h1> <p class='fade'>Updated after judging results are posted on the <a href='https://www.khanacademy.org/computer-programming/the-coding-olympics-2024/6446070763012096' target='_blank'>TCO homepage</a>.</p> <div class='fade'> <button class='btn-primary' onclick='goTo(5);'>Standings <i class='material-icons'>arrow_forward</i></button> </div> </div> </div> <!-- info --> <div class='scene'> <div class=' bg' style='background-image:url("https://upload.wikimedia.org/wikipedia/commons/7/77/Pollen_in_Wabe_31b.jpg");background-position:bottom;'> <h1 class='fade'><i class='material-icons' style='color:var(--primary);text-shadow:0px 3px 5px rgba(0,0,0,0.2);font-size:100px;'>event</i><br>Competition Information</h1> <p class='fade'>News, FAQ, and more about TCO 2024! </p> </div> <div class='p-t-5 p-l-4 p-r-4 p-b-5' style='border-bottom: 1px solid gainsboro;border-radius:0px;padding-bottom:30px;'> <h1 class='fade'><span class='highlight'>Events</span></h1> <p class='fade'>All entries will be submitted in the <a href='https://www.khanacademy.org/computer-programming/the-coding-olympics-2024/6446070763012096' target='_blank'>TCO homepage</a>'s Tips & Thanks section.</p> <div id='events'></div> </div> <div class='p-t-5 p-l-4 p-r-4 p-b-5' style='border-bottom: 1px solid gainsboro;border-radius:0px;padding-bottom:30px;'> <h1 class='fade'><span class='highlight'>About TCO</span></h1> <p class='fade'><a href='https://www.khanacademy.org/computer-programming/the-coding-olympics-2024/6446070763012096' target='_blank'>The Coding Olympics</a> (TCO) is an unofficial annual summer coding competition on Khan Academy. It is usually held from June to August with around 5 challenges. It has been running since the summer of 2020 and has had over 750 programs submitted to be judged. This year, there are 3 teams with around 14 members per team.</p> <h1 class='fade'><span class='highlight'>Judging</span></h1> <p class='fade'>All submissions will be judged on the following criteria: Complexity, Creativity, Design, Cleanliness, and Efficiency. For an in-depth description of the judging criteria, please visit the <a href='https://www.khanacademy.org/computer-programming/i/4541335760060416' target='_blank'>TCO judging criteria</a> guide.</p> <p class='fade'>Current judges:</p> <ul> <li class='fade'>Liam K. (host) <a href='https://www.khanacademy.org/profile/kaid_160653079463992085090428/discussion' target='_blank'>@liamk.ka</a></li> <li class='fade'>Timothy (host) <a href='https://www.khanacademy.org/profile/kaid_580436051254509721948310/discussion' target='_blank'>@ty11ty</a></li> <li class='fade'>Ace Rogers (judge) <a href='https://www.khanacademy.org/profile/kaid_714276242204949021450419/discussion' target='_blank'>@AmericanGuard</a></li> <li class='fade'>Bearkirb314 (judge) <a href='https://www.khanacademy.org/profile/Bearkirb314/discussion' target='_blank'>@BearKirb314</a></li> <li class='fade'>F4stB01 (judge) <a href='https://www.khanacademy.org/profile/f4stb01/discussion' target='_blank'>@f4stb01</a></li> <li class='fade'>S. M. V. (judge) <a href='https://www.khanacademy.org/profile/MildlyAwkward/discussion' target='_blank'>@MildlyAwkward</a></li> <li class='fade'>MushyAvocado <a href='https://www.khanacademy.org/profile/MushyAvocado/discussion' target='_blank'>@MushyAvocado</a></li> <li class='fade'>Duke (judge) <a href='https://www.khanacademy.org/profile/SethCochran11/discussion' target='_blank'>@SethCochran11</a></li> <li class='fade'>Henry (judge) <a href='https://www.khanacademy.org/profile/staplecactus764/discussion' target='_blank'>@staplecactus764</a></li> </ul> </div> </div> <!-- team --> <div class='scene'> <div class=' bg' style='background-image:url("https://upload.wikimedia.org/wikipedia/commons/2/29/My_own_Buckfast_breeder_B02_from_2013._Photo_taken_2015.jpg");background-position: center 0px;'> <h1 class='fade'><i class='material-icons' style='color:var(--primary);text-shadow:0px 3px 5px rgba(0,0,0,0.2);font-size:100px;'>people</i><br>Team Members</h1> <p class='fade'>Meet the Bug Bashers! Click the headers to sort. </p> </div> <div class='container'> <p class='fade' style='display:flex;justify-content:space-between;'><span id='total-members'></span><span id='current-sort'>Current sort: None</span></p> </div> <div class="header fade"> <button id="sort-name" class="sort-button" data-sort="name">Sort by Name</button> <button id="sort-level" class="sort-button" data-sort="level">Sort by Level</button> <button id="sort-points" class="sort-button" data-sort="points">Sort by Points</button> </div> <div class='p-t-5 p-l-4 p-r-4 p-b-5' style='border-bottom: 1px solid gainsboro;border-radius:0px;padding-bottom:30px;'> <div id='members'> </div> </div> <div class='container text-center'> <p class='fade'>You've reached the end!</p> </div> </div> <!-- projects --> <div class='scene'> <div class=' bg' style='background-image:url("https://upload.wikimedia.org/wikipedia/commons/5/58/Yellow_flowers_a.jpg");box-shadow:inset -1000px -1000px 0px rgba(0,0,0,0.71);background-position: center 0px;background-size:50%;'> <h1 class='fade'><i class='material-icons' style='color:var(--primary);text-shadow:0px 3px 5px rgba(0,0,0,0.2);font-size:100px;'>code</i><br>Projects</h1> <p class='fade'>All submissions by Team Bug Bashers members! </p> </div> <div class='p-t-5 p-l-4 p-r-4 p-b-5' style='border-bottom: 1px solid gainsboro;border-radius:0px;padding-bottom:30px;'> <h1 class='fade'><span class='highlight'>All projects</span></h1> <p class='fade'>Projects list will be updated based on information from the entry threads. If your project does not show up, you can message me in the Tips & Thanks with the project link and the name of the challenge it was submitted to.</p> <div class="form-control"> <input type="text" id="searchInput" oninput="displayProjects();" required='' autocomplete="off"> <label class='form-d' data-text='Search by user...'> </label> </div> <div id='projects'></div> </div> </div> <!-- about --> <div class='scene'> <div class=' bg' style='background-image:url("https://upload.wikimedia.org/wikipedia/commons/b/b1/Field_of_yellow_flowers_%286080049195%29.jpg");background-position: center 0px;box-shadow:inset -1000px -1000px 0px rgba(0, 0, 0,0.7);color:var(--primary);'> <h1 class='fade'><i class='material-icons' style='color:var(--primary);text-shadow:0px 3px 5px rgba(0,0,0,0.2);font-size:100px;'>info</i><br>About Team Bug Bashers</h1> <p class='fade'>The purpose of Team Bug Bashers.</p> <button class='btn-secondary open-modal-btn' data-modal='modal3'>Read Now</button> </div> <div class=' bg' style='background-image:url("https://upload.wikimedia.org/wikipedia/commons/b/b1/Field_of_yellow_flowers_%286080049195%29.jpg");background-position: center 0px;box-shadow:inset -1000px -1000px 0px rgba(255,255,0,0.8);color:#000;'> <h1 class='fade'><i class='material-icons' style='color:#000;text-shadow:0px 3px 5px rgba(0,0,0,0.2);font-size:100px;'>person</i><br>About This Site</h1> <p class='fade'>Site development overview.</p> <button class='btn-secondary btn-black open-modal-btn' data-modal='modal4'>Read Now</button> </div> </div> <!-- standings --> <div class='scene'> <div class=' bg' style='background-image:url("https://upload.wikimedia.org/wikipedia/commons/e/e4/Perdita_luteola%2C_female%2C_face_2012-08-01-16.02.40_ZS_PMax.jpg");background-position: center 0px;'> <h1 class='fade'><i class='material-icons' style='color:var(--primary);text-shadow:0px 3px 5px rgba(0,0,0,0.2);font-size:100px;'>emoji_events</i><br>Standings</h1> <p class='fade'>Find out who is winning! </p> </div> <div class='p-t-5 p-l-4 p-r-4 p-b-5' style='border-bottom: 1px solid gainsboro;border-radius:0px;padding-bottom:30px;'> <div id='podium'></div> </div> </div> <!-- modals --> <div class="modal" id="modal1"> <div class="modal-content"> <div class="close-btn"> <div class="bg1"> <span class="material-icons">close</span> </div> </div> <h1>Subscribe</h1> <p>To subscribe, you need to scroll down to the Tips & Thanks of this program on Khan Academy and post a single dot (.) inside the <b>Subscribe Thread</b>. You will get notified when we release interesting programs or have something important to share.<br><br><a href='#' target='_blank'><button class='btn-secondary'>Subscribe Thread Link</button></a><br><br>Note: There is no back-end subscription system in this homepage because TCO is a Khan Academy competition and the Khan Academy Computer Programming environment only supports front-end projects.</p> </div> </div> <div class="modal" id="modal2"> <div class="modal-content"> <div class="close-btn"> <div class="bg1"> <span class="material-icons">close</span> </div> </div> <h1>Feedback</h1> <p>To share your feedback, you need to scroll down to the Tips & Thanks of this program on Khan Academy and post a comment in the <b>Feedback Thread</b>.<br><br><a href='#' target='_blank'><button class='btn-secondary'>Feedback Thread Link</button></a><br><br>Note: There is no back-end feedback system in this homepage because TCO is a Khan Academy competition and the Khan Academy Computer Programming environment only supports front-end projects.</p> </div> </div> <div class="modal" id="modal3"> <div class="modal-content"> <div class="close-btn"> <div class="bg1"> <span class="material-icons">close</span> </div> </div> <h1>About Team Bug Bashers</h1> <p>We are a programming competing in an unofficial Khan Academy programming competition called The Coding Olympics. Throughout the summer of 2024, we will program a variety of cool projects, collaborate with each other, and grow our computer programming and teamwork skills.<br><br>Notice: You cannot join through the Tips & Thanks of this program because we are a team competing in TCO 2024 (The Coding Olympics 2024). You have to sign up to join TCO, and they will let you in if there is an open spot.</p><br><a href='https://www.khanacademy.org/computer-programming/the-coding-olympics-2024/6446070763012096?qa_expand_key=ag5zfmtoYW4tYWNhZGVteXJACxIIVXNlckRhdGEiHWthaWRfMTYwNjUzMDc5NDYzOTkyMDg1MDkwNDI4DAsSCEZlZWRiYWNrGICAm8jm0ZsKDA&qa_expand_type=comment' target='_blank'><button class='btn-secondary'>TCO 2024 Join Thread</button></a> </div> </div> <div class="modal" id="modal4"> <div class="modal-content"> <div class="close-btn"> <div class="bg1"> <span class="material-icons">close</span> </div> </div> <h1>About This Site</h1> <p>Started: 19 June 2024<br>Completed: 22 June 2024<br>Estimated work time: 18 hours<br>Lines of code: 2600+<br>Languages: Vanilla HTML, CSS, JS</p> <p>This website was programmed by me (<a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects' target='_blank' class='plain'>LeaferStudios</a>) as an entry to Khan Academy Computer Programming (KACP) <a href='https://www.khanacademy.org/computer-programming/contest-celebrations/4629927613349888' target='_blank' class='plain'>Contest: Celebrations</a>. I chose to revisit KACP <a href='https://www.khanacademy.org/computer-programming/contest-make-your-colors-count/6051050327801856' target='_blank' class='plain'>Contest: Make Your Colors Count</a> , which I didn't get to participate in because it was held before I created my account on Khan Academy. The colors I chose to use are Golden Yellow (<span style='background-color:var(--primary);color:#000;'>#FFE100</span>) because our mascot is a honey bee, as well as black (<span style='background-color:#000;color:#FFF;'>#000</span>) and white (#FFF).<br>This is also an entry to The Coding Olympics <a href='https://www.khanacademy.org/computer-programming/contest-celebrations/4629927613349888' target='_blank' class='plain'>Homepage Challenge</a>.</p> <a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016' target='_blank'><button class='btn-secondary'>Subscribe to LeaferStudios</button></a> </div> </div> <footer> <p>(c) 2024<span id='currYear'></span> LeaferStudios</p> </footer> </div> <!-- index.js --> <script> // developer mode if true var testing = false; var testScene = 0; var currentDate = new Date(); // update year if (new Date().getFullYear() !== 2024) { document.querySelector("#currYear").innerText = '-' + new Date().getFullYear(); } /* Loading animations */ // check if browser supports css animations function supportsCSSAnimations() { var animation = false, animationString = 'animation', keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), elm = document.createElement('div'); if (elm.style.animationName !== undefined) { animation = true; } if (animation === false) { for (var i = 0; i < domPrefixes.length; i++) { if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) { animationString = domPrefixes[i] + 'Animation'; animation = true; break; } } } // return result of animation return animation; } // remove no js if js is supported document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, ''); // page load document.addEventListener('DOMContentLoaded', function() { var preloader = document.querySelector('.preloader'); if (preloader && testing === false) { if (supportsCSSAnimations()) { document.getElementById('everything').style.display = 'none'; fadeOut(preloader, 600, function() { preloader.parentNode.removeChild(preloader); document.getElementById('everything').style.display = ''; goTo(0); }); } else { document.getElementById('everything').style.display = 'none'; document.querySelector('.loader').style.display = 'none'; document.querySelector('.fallback-text').style.display = 'block'; setTimeout(function() { preloader.parentNode.removeChild(preloader); document.getElementById('everything').style.display = ''; goTo(0); }, 100); } } else { preloader.parentNode.removeChild(preloader); document.getElementById('everything').style.display = ''; } }); // fade out function (for aesthetics) function fadeOut(element, speed, callback) { var opacity = 1; var interval = 50; var duration = speed === 'slow' ? 600 : 300; var gap = interval / duration; function fade() { opacity -= gap; element.style.opacity = opacity; if (opacity <= 0) { clearInterval(fading); element.style.display = 'none'; if (typeof callback === 'function') { callback(); } } } var fading = setInterval(fade, interval); } // Function to get a random quote function getRandomQuote() { return quotes[Math.floor(Math.random() quotes.length)]; } // Function to set the random quote function setRandomQuote() { document.getElementById('quote').innerHTML = quotes[Math.floor(Math.random() * quotes.length)]; } // Function to open the menu function openMenu() { document.getElementById('menu').classList.add('open'); document.getElementById('overlay').style.display = 'block'; setRandomQuote(); } // Function to close the menu function closeMenu() { document.getElementById('menu').classList.remove('open'); document.getElementById('overlay').style.display = 'none'; } // Add event listener to overlay to close menu when clicked document.getElementById('overlay').onclick = closeMenu; // for scroll based animations function checkScroll() { var fadeElements = document.querySelectorAll('.fade'); fadeElements.forEach(function(element) { if (isInViewport(element)) { if (!element.classList.contains('faded-in')) { element.classList.add('faded-in'); } } else { element.classList.remove('faded-in'); } }); } // check if element is in viewport function isInViewport(element) { var rect = element.getBoundingClientRect(); return ( rect.bottom > 65 && // Make sure the bottom is greater than 65 to ensure it's not above the viewport rect.right > 0 && // Make sure the right is greater than 0 to ensure it's not to the left of the viewport rect.top < (window.innerHeight \|\| document.documentElement.clientHeight) && // Make sure the top is less than the viewport height rect.left < (window.innerWidth \|\| document.documentElement.clientWidth) // Make sure the left is less than the viewport width ); } // Initial check when the page loads checkScroll(); // Throttle scroll event to improve performance var isScrolling = false; window.addEventListener('scroll', function() { if (!isScrolling) { setTimeout(function() { checkScroll(); isScrolling = false; }, 100); // Debounce time isScrolling = true; } }); // Navigation function function goTo(section) { window.scroll(0, 0); setTimeout(function() { checkScroll(); }, 100); // For the first time on Khan Academy... xD var scenes = document.querySelectorAll('.scene'); scenes.forEach(function(scene, i) { if (i === section) { scene.style.display = 'block'; } else { scene.style.display = 'none'; } }); // Remove 'active' class from all elements with class 'menu-link' document.querySelectorAll('.menu-link').forEach(function(element) { element.classList.remove('active'); }); // Add 'active' class to the element at the specified index document.querySelectorAll('.menu-link')[section].classList.add('active'); } if (testing === true) { goTo(testScene); } var sortCriteria = ''; var sortOrder = 'asc'; function displayMembers() { var membersDiv = document.getElementById('members'); membersDiv.innerHTML = ''; members.forEach(function(member) { var hiddenLink = document.createElement('a'); hiddenLink.href = member.link; hiddenLink.target = '_blank'; hiddenLink.className = 'customA'; var card = document.createElement('div'); card.className = 'card'; //card.classList.add('fade'); var finalLevel = ''; if (member.level === 0) { finalLevel = 'Beginner'; } else if (member.level === 1) { finalLevel = 'Intermediate'; } else { finalLevel = 'Advanced'; } card.innerHTML = '<h3>' + member.name + '</h3>' + '<p>Level: ' + finalLevel + '</p>' + '<p class="big-points">' + (member.points) + '<br><span>Total Points</span></p>'; hiddenLink.appendChild(card); membersDiv.appendChild(hiddenLink); }); } document.getElementById('total-members').innerHTML = 'Total Members: ' + members.length; function updateSortText() { var sortText = 'Current Sort: '; if (sortCriteria) { sortText += sortCriteria.charAt(0).toUpperCase() + sortCriteria.slice(1) + ' (' + sortOrder.toUpperCase() + ')'; } else { sortText += 'None'; } document.getElementById('current-sort').textContent = sortText; } function sortMembers(criteria) { if (sortCriteria === criteria) { sortOrder = (sortOrder === 'asc') ? 'desc' : 'asc'; } else { sortCriteria = criteria; sortOrder = 'asc'; } members.sort(function(a, b) { if (a[criteria] < b[criteria]) return sortOrder === 'asc' ? -1 : 1; if (a[criteria] > b[criteria]) return sortOrder === 'asc' ? 1 : -1; return 0; }); displayMembers(); updateSortText(); // Update button styles updateButtonStyles(criteria); } function updateButtonStyles(activeButton) { var buttons = document.getElementsByClassName('sort-button'); for (var i = 0; i < buttons.length; i++) { var button = buttons[i]; if (button.getAttribute('data-sort') === activeButton) { button.classList.add('active'); button.classList.remove(sortOrder === 'asc' ? 'desc' : 'asc'); button.classList.add(sortOrder === 'asc' ? 'asc' : 'desc'); } else { button.classList.remove('active', 'asc', 'desc'); } } } // Initial sort by 'level' descending (twice = descending, once = ascending) sortMembers('level'); sortMembers('level'); // Event listeners for sorting buttons document.getElementById('sort-name').addEventListener('click', function() { sortMembers('name'); }); document.getElementById('sort-level').addEventListener('click', function() { sortMembers('level'); }); document.getElementById('sort-points').addEventListener('click', function() { sortMembers('points'); }); function displayEvents() { var eventsDiv = document.getElementById('events'); eventsDiv.innerHTML = ''; schedule.forEach(function(eventItem) { var eventCard = document.createElement('div'); eventCard.className = 'event-card'; var breadcrumbClass = getEventStatus(eventItem, currentDate); var breadcrumbText = getEventStatusText(eventItem, currentDate); var breadcrumb = document.createElement('div'); breadcrumb.className = 'breadcrumb ' + breadcrumbClass; breadcrumb.textContent = breadcrumbText; eventCard.appendChild(breadcrumb); var eventDetails = document.createElement('div'); eventCard.classList.add('fade'); eventDetails.innerHTML = '<h3>' + eventItem.event + '</h3>' + '<p><strong>Start:</strong> ' + eventItem.start + '</p>' + '<p><strong>End:</strong> ' + eventItem.end + '</p>' + '<p class="description">' + (eventItem.desc \|\| 'To Be Announced') + '</p>'; eventCard.appendChild(eventDetails); eventsDiv.appendChild(eventCard); }); } function getEventStatus(eventItem, currentDate) { var eventStartDate = new Date(eventItem.start); var eventEndDate = new Date(eventItem.end); if (currentDate < eventStartDate) { return 'upcoming'; } else if (currentDate >= eventStartDate && currentDate <= eventEndDate) { return 'current'; } else { return 'past'; } } function getEventStatusText(eventItem, currentDate) { var eventStartDate = new Date(eventItem.start); var eventEndDate = new Date(eventItem.end); if (currentDate < eventStartDate) { return 'Upcoming Event'; } else if (currentDate >= eventStartDate && currentDate <= eventEndDate) { return 'Current Event'; } else { return 'Past Event'; } } // display events displayEvents(); // to display projects function displayProjects() { var projectsDiv = document.getElementById('projects'); // Get search input and convert to lowercase var searchInput = document.getElementById('searchInput').value.toLowerCase(); projectsDiv.innerHTML = ''; projects.forEach(function(project) { if (project.author.toLowerCase().includes(searchInput)) { // Find the corresponding author's details var authorDetails = findAuthorDetails(project.author); // Create project card HTML var card = document.createElement('div'); card.className = 'event-card'; if (project.author.includes(',')) { card.innerHTML = "<div class='breadcrumb'>Collaboration</div><h3>" + project.author + "'s Entry</h3>" + 'Database Information:<ul><li>Collaborators: ' + project.author + '</li>' + '<li>Event for entry: ' + findEventDesc(project.event) + '</li>' + '</ul><div style="display:flex;justify-content:space-between;width:100%;"><button class="btn-secondary"><a href="' + project.link + '" target="_blank"> Entry Link <i class="material-icons">open_in_new</i></a></button></div>'; } else { card.innerHTML = "<h3>" + project.author + "'s Entry</h3>" + 'Database Information:<ul><li>Username: ' + authorDetails.name + '</li>' + '<li>Event for entry: ' + findEventDesc(project.event) + '</li>' + '<li>Current User Level: ' + authorDetails.level + '</li>' + '<li>Total User Points: ' + authorDetails.points + '</li>' + '</ul><div style="display:flex;justify-content:space-between;width:100%;"><button class="btn-secondary"><a href="' + project.link + '" target="_blank"> Entry Link <i class="material-icons">open_in_new</i></a></button><button class="btn-secondary"><a href="' + authorDetails.link + '" target="_blank">User Profile <i class="material-icons">person</i></a></button></div>'; } projectsDiv.appendChild(card); } }); } function findAuthorDetails(authorName) { var member = members.find(function(member) { return member.name === authorName; }); return member ? member : { name: 'Unknown', team: 'Unknown', level: 'Unknown', points: 0, link: '#' }; } // Find the event description based on event index function findEventDesc(eventIndex) { var event = schedule[eventIndex]; return event ? event.event : 'To Be Announced'; } displayProjects(); /* for the fancy inputs, based on data-text attribute / function createSpans() { var labels = document.querySelectorAll('.form-d[data-text]'); labels.forEach(function(label) { var text = label.getAttribute('data-text'); if (text) { label.innerHTML = ''; // Clear existing content inside label for (var i = 0; i < text.length; i++) { var span = document.createElement('span'); span.style.transitionDelay = i 50 + 'ms'; // Adjust transition delay span.textContent = text[i]; label.appendChild(span); } } }); } // call createSpans createSpans(); // Function to update the notification function updateNotification() { var message = 'Competition over'; // Iterate through the schedule for (var i = 0; i < schedule.length; i++) { var eventStart = new Date(schedule[i].start); var eventEnd = new Date(schedule[i].end); // Check if the current date is within the event range if (currentDate >= eventStart && currentDate <= eventEnd) { message = 'Current event: ' + schedule[i].event; break; } } // Update the #notif element document.getElementById('notif').innerText = message; } // Call the function to update the notification updateNotification(); // modals // Get all the buttons that open modals var openModalBtns = document.querySelectorAll(".open-modal-btn"); // Get all the close buttons var closeBtns = document.querySelectorAll(".close-btn"); // Add event listener to each open modal button openModalBtns.forEach(function(btn) { btn.addEventListener("click", function() { var modalId = btn.getAttribute("data-modal"); var modal = document.getElementById(modalId); modal.style.display = "block"; }); }); // test to open first one /var modalId = document.querySelectorAll(".open-modal-btn")[0].getAttribute("data-modal"); var modal = document.getElementById(modalId); modal.style.display = "block";/ // Sort the array by score in descending order scores.sort(function(a, b) { return b.score - a.score; }); // Get the podium element var podium = document.getElementById('podium'); // Create a podium item var createPodiumItem = function(rank, item) { var podiumItem = document.createElement('div'); podiumItem.classList.add('podium-item', rank); var podiumImg = document.createElement('img'); podiumImg.src = item.mascot; var podiumRank = document.createElement('div'); podiumRank.classList.add('podium-rank'); podiumRank.textContent = rank === 'first' ? '1' : rank === 'second' ? '2' : '3'; var podiumName = document.createElement('div'); podiumName.classList.add('podium-name'); podiumName.innerHTML = item.team + ":<br><br> " + item.score + ' total points'; // click event listener podiumItem.addEventListener('click', function() { window.open(item.homepage, '_blank'); // Open link in a new tab }); podiumItem.appendChild(podiumImg); podiumItem.appendChild(podiumRank); podiumItem.appendChild(podiumName); return podiumItem; }; podium.appendChild(createPodiumItem('second', scores[1])); podium.appendChild(createPodiumItem('first', scores[0])); podium.appendChild(createPodiumItem('third', scores[2])); // Add event listener to each close button closeBtns.forEach(function(btn) { btn.addEventListener("click", function() { var modal = btn.closest(".modal"); modal.style.display = "none"; }); }); // Add event listener to close the modal when clicking outside of it window.addEventListener("click", function(event) { var modals = document.querySelectorAll(".modal"); modals.forEach(function(modal) { if (event.target == modal) { modal.style.display = "none"; } }); }); </script> <!-- [Thumbnail Fix] For Khan Academy deployment only --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> /** * Why is this needed? Due to Khan Academy's program thumbnail not being super clear, this makes it extra clear in HTML programs. */ // credit to Bluebird@kaid_157624541333313939750668 for this Khan Academy thumbnail resolution fix var r = 600, s = document.documentElement.clientWidth; window.parent.html2canvas = t => { try { html2canvas(document.body, { width: s, height: s, useCORS: !0 }).then(t => { var e = document.createElement("canvas"); e.width = r, e.height = r, e.getContext("2d").drawImage(t, 0, 0, t.width, t.height, 0, 0, r, r), window.top.postMessage(e.toDataURL(), "") }).catch(t => { alert("Thumbnail Script Error: " + t) }) } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), "*") } }; </script> </body> </html> <!-- All code by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects) Licensed under the MIT License -->
Folds	30,1796,1799,2656
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJvktKWBCQw
Votes	3
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"4810038945955840","title":"Contest: Celebrations - HTML Submissions","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	LeaferStudios
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1719153151933
Updated	6 months ago, 1719153151933
Source Deleted	unknown