Viewing Program

Program Data

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

Title	= SPACE =
ID	4529394008244224
Created	2 years ago, 1662666309775
Updated	2 years ago, 1662780438012
Code	<!DOCTYPE html> <!-- = SPACE EXPLORATION = by TDJ Created: 9/5/22. Finished: 9/8/22. Subscribe here: https://www.khanacademy.org/computer-programming/tdjs-homepage/4838951661649920 --> <html lang="en"> <head> <meta charset="utf-8"> <title>= SPACE =</title> <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=Montserrat&display=swap&family=Material+Icons" rel="stylesheet"> <style> :root { --red: #990120; } * { overflow-x: hidden; scroll-behavior: smooth; margin-top: 0px; margin-left: 0px; margin-right: -5px; margin-bottom: 0px; } body { font-family: "Montserrat", sans-serif; } .page { margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; } ::selection { background-color: #990120; color: black; } ::-webkit-scrollbar { width: 10px; background: white; } ::-webkit-scrollbar-thumb { background: black; } #navbar { background: black; width: 100%; padding: 10px; margin-top: 120px; position: sticky; } #navbar a { padding: 8px; text-decoration: none; color: #990120; font-weight: bold; } .title { background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 10)), url("https://upload.wikimedia.org/wikipedia/commons/9/95/Mercury_as_Never_Seen_Before.jpg"); width: 600px; height: 363px; text-align: center; padding-top: 40%; } #title { font-size: 50px; } a.explore { background: rgba(0, 0, 0, 0); border: 4px solid #990120; border-radius: 3px 10px 3px 10px; color: #990120; text-decoration: none; font-weight: bold; font-size: 20px; padding: 8px; transition: 0.5s border-radius; } a.explore:hover { border-radius: 10px 3px 10px 3px; } td { padding-bottom: 3px; width: 400px; } h1, h2 { margin-bottom: 0px; } .page-link { background: black; color: var(--red); padding: 50px; margin-top: 15px; } .page-link:hover { cursor: pointer; } ul#contents { margin-top: 5px; } ul#contents li { margin-left: -40px; padding-bottom: 10px; } footer { background: black; text-align: center; color: var(--red); padding: 20px; } footer a { text-decoration: none; } footer a:visited { color: #990120; text-decoration: none; padding: 20px 20px 20px 20px; } </style> </head> <body> <!--Title page--> <div class="title"> <span id="title"> <strong style="color: #990120">SPACE</strong> <strong style="color: #502">EXPLORATION</strong> </span> <div style="margin-bottom: 20%"></div> <a class="explore" id="explore-button" href="javascript: slightScroll(300)">Explore</a> <!--Navigation bar--> <nav id="navbar"> <a href="javascript: changePage(0)">Home</a> <a href="javascript: changePage(1)">History</a> <a href="javascript: changePage(2)">Future</a> <a href="javascript: changePage(3)">About</a> </nav> </div> <!--Home--> <div class="page"> <h1 id="home">Home</h1><br> <h2>Quick links</h2> <div class="page-link" onclick="javascript: changePage(1)"> <h3>Learn about the history of space exploration</h3> </div> <div class="page-link" onclick="javascript: changePage(2)"> <h3>What could the future hold?</h3> </div> <div class="page-link" onclick="javascript: changePage(3)"> <h3>About this website</h3> </div> </div> <!--History--> <div class="page"> <h1>The History of Space Exploration</h1> <h2>Contents</h2> <ul id="contents"> <li><a href="#interest">Interest in Space</a></li> <li><a href="#timeline-of-rock-dev">Timeline of Rocket Development</a></li> <li><a href="#moon-land">Moon Landing</a></li> <li><a href="#after-moon">After the Moon Landing</a></li> <li><a href="#last-lunar-landing">Last Lunar Landing</a></li> <li><a href="#later">More Later Exploration</a></li> <li><a href="#recent">Recent Space Exploration</a></li> </ul> <h2 id="interest">Interest in Space</h2> <p>Ever since Galileo first observed planets with a telescope in 1610, people have had a fascination with space - the great, unexplored unknown.</p> <h2 id="timeline-of-rock-dev">Timeline of Rocket Development Up To 1969</h2> <table id="timeline"></table> <script> var table = document.getElementById('timeline'); var events = [ { date: "1914", event: "Robert Goddard files patents on multistage and liquid fuelled rockets.", }, { date: "16 March 1926", event: "Robert Goddard launches the first liquid-fuelled rocket.", }, { date: "30 September 1929", event: "First successful public flight of a rocket-powered aircraft, the <a href='https://en.wikipedia.org/wiki/Opel_RAK.1'>OPAL RAK.1</a><span style='margin-right: 5px'></span>.", }, { date: "20 June 1944", event: "A German V-2 rocket reaches space, flying to an apogee of 109.3 miles (176 kilometers).", }, { date: "20 September 1956", event: "A US <a href='https://en.wikipedia.org/wiki/Jupiter-C/'>Jupiter-C</a><span style='margin-right: 11px'></span>rocket reaches the exosphere, reaching an altitude of 682 miles (1,098 km) altitude.", }, { date: "21 August 1957", event: "The USSR launches the first intercontinental ballistic missile (IBM).", }, { date: "4 October 1957", event: "The USSR launches the first artificial satellite, <a href='https://en.wikipedia.org/wiki/Sputnik_1'>Sputnik 1</a><span style='margin-right: 5px'></span>.", }, { date: "13 September 1959", event: "The USSR's <a href='https://en.wikipedia.org/wiki/Luna_2'>Luna 2</a><span style='margin-right: 5px'></span> achieves first impact on the moon.", }, { date: "March 1960", event: "US launches the first space probe.", }, { date: "12 April 1961", event: "First human spaceflight is made by <a href=''>Yuri Gagarin</a><span style='margin-right: 10px'></span>in the Vostok 1", }, { date: "5 May 1961", event: "First human-pilotted spaceflight. Made by Alan Shepherd in the <a href='https://en.wikipedia.org/wiki/Freedom_7'>Freedom 7</a><span style='margin-right: 5px'></span>.", }, { date: "19 July 1963", event: "First re-usable, crewed spacecraft - the <a href='https://en.wikipedia.org/wiki/X-15'>X-15</a> <span style='margin-right: 5px'></span> (suborbital).", }, { date: "3 February 1966", event: "The first soft landing on the moon is made by the USSR's <a href='https://en.wikipedia.org/wiki/Luna_9'>Luna 9</a><span style='margin-right: 5px'></span> unmanned spacecraft", }, { date: "August 1966", event: "First probe to map the moon - the US's <a href='https://en.wikipedia.org/wiki/Lunar_Orbiter_1'>Lunar Orbiter 1</a><span style='margin-right: 5px'></span>.", }, { date: "January 1969", event: "First crew exchange in space - made by the USSR's <a href='https://en.wikipedia.org/wiki/Soyuz_4'>Soyuz 4</a><span style='margin-right: 5px'></span> and <a href='https://en.wikipedia.org/wiki/Soyuz_5'>Soyuz 5</a><span style='margin-right: 5px'></span>.", }, ]; function timeline() { for (i in events) { table.innerHTML += "<tr><th>" + events[i].date + "<th><td>" + events[i].event + "</td></tr>"; } } timeline(); </script> <h2 id="moon-land">Moon Landing</h2> <p>On the 20th of July 1969, <a href="https://en.wikipedia.org/wiki/Apollo_11">Apollo 11</a><span style="margin-right: 5px"></span> made the first moon landing, bringing back samples.</p><br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Aldrin_Apollo_11_original.jpg/800px-Aldrin_Apollo_11_original.jpg" alt="Neil Armstrong on the moon, 20 July 1969." style="width: 560px"><br><br> <h2 id="after-moon">After the Moon Landing</h2> <p>After the moon landing, space exploration continued. Many probes were sent to orbit or land on other planets.</p><br> <h2 id="last-lunar-landing">Last Lunar Landing</h2> <p>On 7 December 1972, the final lunar landing was made by <a href="https://en.wikipedia.org/wiki/Apollo_17">Apollo 17</a><span style="margin-right: 5px"></span>.</p><br> <h2 id="later">More Later Exploration</h2> <p>Space exploration was no longer just the US and the USSR. The EU, China, Japan, India, France, Israel, the UNited Arab Emirates, South Korea, and others, all became involved in space exploration.</p><br> <h2 id="recent">Recent Space Exploration</h2> <p>In 2020, the <i>Ingenuity</i> helicopter mad the first powered flight on another planet - Mars.</p><br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/EmissionNebula_NGC6357.jpg/800px-EmissionNebula_NGC6357.jpg" style="width: 560px"> <h3><a href="javascript: changePage(2)">What might the future hold?</a></h3> </div> <!--Future--> <div class="page"> <h1>Future</h1> <p>Who knows what the future may hold, with more discoveries & developments in space exploration/travel.</p><br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Messier51_sRGB.jpg/1280px-Messier51_sRGB.jpg" style="width: 560px"> </div> <!--About--> <div class="page"> <h1>About this Website</h1> <p>This website was created for <a href="https://www.khanacademy.org/computer-programming/the-coding-showdown-2022-out-of-this-world/5887724991594496">The Coding Showdown 2022</a>, for the Exploring the Unknown Challenge.</p><br> <h2>Credits</h2> <p>Images are sourced from Wiki Commons.<br>Credit to <a href="https://www.khanacademy.org/profile/kaid_157624541333313939750668/projects">Bluebird</a><span style="margin-right: 5px"></span> for the thumbnail script.</p> <h2>Subscribe</h2> <p>Please consider subscribing to the creator, TDJ, <a href="https://www.khanacademy.org/computer-programming/tdjs-homepage/4838951661649920">here</a><span style="margin-right: 5px"></span>.</p> </div> <!--Footer--> <footer> <a href="#title"><i class="material-icons">keyboard_arrow_up</i></a> </footer> <!--Explore button scroll--> <script> function slightScroll(a) { window.scrollTo({ top: a, }); } </script> <!--switch page script--> <script> var page = document.getElementsByClassName('page'); function changePage(index) { for (var i = 0; i < page.length; i++) { page[i].style.display = 'none'; } page[index].style.display = 'block'; window.scroll(0, 0); } changePage(0); </script> <!--Credit to Bluebird for the thumbnail--> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <script type> var body = document.getElementsByTagName("body")[0]; window.addEventListener("keydown", function(e) { if (e.keyCode === 27) { document.getElementById("menu-wrap") .style.display = "none"; body.style.pointerEvents = "none"; } else if (e.keyCode === 65) { body.style.pointerEvents = "all"; document.getElementById("menu-wrap") .style.display = "block"; } }); var save = function() { html2canvas(document.body, { allowTaint: false, useCORS: true, width: document.documentElement.clientWidth, height: document.documentElement.clientWidth, }) .then(function(canvas) { b64Img = canvas.toDataURL(); 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	13,416
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKPH2-6FCAw
Votes	48
Spin-Offs	7
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	TDJ
Author Name	tdj.ka
Author ID	kaid_682972421482671044758972
Author Profile Access	PUBLIC

Archive Data

Added	23 days ago, 1734464225640
Updated	23 days ago, 1734464278116
Source Deleted	unknown