Viewing Program

Program Data

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

Title	Google
ID	5811780932026368
Created	4 years ago, 1615140629965
Updated	3 years ago, 1646679760674
Code	<!DOCTYPE html> <!-- Currently only two working searches. Working on the fonts and tiny edits right now. **************************************************** WORKING SEARCHES: animals sports ANYTHING ELSE: Will just open a google search with your search. **************************************************** just took a while to get the main page done. Want to get notified when I update this? sub to the update thread Very messy code, so look at your own risk. My best HTML project. Have feedback or tips? Post then in T&T Credits: Malycia \| Peace for the colors of the Google and for the font mohinathsivaneswaran for fixing the plus sign problem James Miller for making the I'm feeling lucky button work and the magnifying glass. --> <html> <head> <meta charset="utf-8"> <title>Google</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap" rel="stylesheet"> <style> body { background-color:white; font-family: 'Google Sans', 'Kumbh Sans'; } body, html { margin: 0; box-sizing: border-box; font-family: arial; } , :before, :after { box-sizing: inherit; } #search_btns { width: 400px; margin: 30px auto; padding-left: 60px; } #search_btns button:nth-child(2) { width: 144px; } #search_btns button:nth-child(1) { bottom: -4px; } #search_btns button { position: relative; height: 34px; margin: 3px; font-weight: bold; color: gray; background: #f1f1f1; border: 1px solid #f1f1f1; border-radius: 2px; padding: 0 15px; overflow: hidden; } #search_btns button:hover { color: black; border: 1px solid #bdbdbd; box-shadow: 0px 0.5px 0px 0px #d3d3d3; cursor:pointer; } #search_btns button:active { border: 1px solid #7f7fff; } #search_btns button:focus { outline: 0; } #search_btns button ul li { list-style-type: none; padding: 5px 0; text-align: left; } #search_btns button ul { padding-left: 0; position: absolute; bottom: -135px; width: 144px; } .blueLetter { color:#4285F4; } #o1 { color:#EA4335; } #o2 { color:#FBBC05; } #l { color:#34A853; } #e { color:#EA4335; } #title { text-align:center; font-size:100px; } #searchBar { width: 60%; position:absolute; height:30px; top:200px; left:20%; border-radius:20px; outline:none; border:solid 1px rgb(220, 220, 220); } #googleSearchButton { position:absolute; left:27%; top:255px; background-color:rgb(230, 230, 230); border:none; outline:none; width:130px; height:30px; border-radius:5px; } #googleSearchButton:hover { cursor:pointer; border:solid 1px rgb(200, 200, 200); } #pfp { position:absolute; top:20px; left:90%; border:none; border-radius:100px; } #pfp:hover { border:solid 4px rgb(210, 210, 210); cursor:pointer; top:15px; left:89.5%; } #imFeelingLucky { position:absolute; left:53%; top:255px; background-color:rgb(230, 230, 230); border:none; outline:none; width:130px; height:30px; border-radius:5px; } #imFeelingLucky:hover { cursor:pointer; border:solid 1px rgb(200, 200, 200); } #gmailLink { color:black; position:absolute; left:70%; top:8%; text-decoration:none; font-family:sans; } #gmailLink:hover { text-decoration:underline; } #imageLink { color:black; position:absolute; left:80%; top:8%; text-decoration:none; font-family:sans; } #imageLink:hover { text-decoration:underline; } #aboutLink { color:black; position:absolute; left:3%; top:8%; text-decoration:none; font-family:sans; } #aboutLink:hover { text-decoration:underline; } #storeLink { color:black; position:absolute; left:13%; top:8%; text-decoration:none; font-family:sans; } #storeLink:hover { text-decoration:underline; } #go { position:absolute; left:16%; top:49%; height:30px; border-radius:7px; font-size:15px; } #go:hover { cursor:pointer; } #homePage { display:block; } #animalPage { display:none; } #searchedBar { width: 60%; position:absolute; height:30px; top:20px; left:17%; border-radius:20px; outline:none; border:solid 1px rgb(220, 220, 220); } .aboutResults { color:rgb(120, 120, 120); left:17%; top:20%; position:absolute; } .all { text-decoration:underline; position:absolute; font-size:20px; top:12%; left:17%; } .all:hover { cursor:pointer; } .images { position:absolute; font-size:20px; top:12%; left:23%; } .images:hover { cursor:pointer; } .videos { position:absolute; font-size:20px; top:12%; left:36%; } .videos:hover { cursor:pointer; } .news { position:absolute; font-size:20px; top:12%; left:48%; } .news:hover { cursor:pointer; } .books { position:absolute; font-size:20px; top:12%; left:58%; } .books:hover { cursor:pointer; } #natGeoSearchanimal { position:absolute; top:30%; left:17%; color:rgb(80, 80, 80); } #natGeoSearchanimalInfo { font-size:15px; color:black; } #natGeoSearchanimalLink { font-size:22px; text-decoration:none; font-family:sans-serif; } #natGeoSearchanimalLink:hover { text-decoration:underline; } #animalPageBack:hover { cursor:pointer; } #whatAlwaysShowsUpAfterASearch { display:none; } #azAnimalsseachanimalInfo { font-size:15px; color:black; } #yahooSearchSportsInfo { font-size:15px; color:black; } #azAnimalsseachanimalLink { font-size:22px; text-decoration:none; font-family:sans-serif; } #azAnimalsseachanimalLink:hover { text-decoration:underline; } #yahooSearchSportsLink { font-size:22px; text-decoration:none; font-family:sans-serif; } #yahooSearchSportsLink:hover { text-decoration:underline; } #azAnimalsseachanimal { position:absolute; top:60%; left:17%; color:rgb(80,80,80); } #sportsPage { display:none; } #yahooSearchSports { position:absolute; top:30%; left:17%; color:rgb(80, 80, 80); } </style> </head> <!-- jeez basically all styles XD --> <body> <div id = "homePage"> <h1 id = "title"><span class = "blueLetter">G</span><span id = "o1">o</span><span id = "o2">o</span><span class = "blueLetter">g</span><span id = "l">l</span><span id = "e">e</span></h1> <input title = "Search" id = "searchBar" type = "text"> <div id="search_btns"> <button>Google Search</button> <button> <ul> <li>I'm Feeling Stellar</li> <li>I'm Feeling Artistic</li> <li>I'm Feeling Wonderful</li> <li>I'm Feeling Curious</li> <li>I'm Feeling Hungry</li> <li>I'm Feeling Lucky</li> <li>I'm Feeling Doodley</li> <li>I'm Feeling Generous</li> <li>I'm Feeling Trendy</li> <li>I'm Feeling Puzzled</li> <li>I'm Feeling Playful</li> </ul> </button> </div> <img src = "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leaf-green.png" width = "40" id = "pfp" title="Google Account Khan Academy Khanacademy@gmail.com"> <a id = "gmailLink" href = "https://mail.google.com">Gmail</a> <a id = "imageLink" href = "https://www.google.com/imghp">Images</a> <a id = "aboutLink" href = "https://about.google/">About</a> <a id = "storeLink" href = "https://store.google.com/">Store</a> <h1 id = "go">🔍</h1> </div> <div id = 'whatAlwaysShowsUpAfterASearch'> <h2 id = "animalPageBack">Google</h2> <input id = "searchedBar"> <p class = 'all'>All</p> <p class = 'images'>Images</p> <p class = 'videos'>Videos</p> <p class = 'news'>News <p class = 'books'>Books </div> <div id = "animalPage"> <p class = "aboutResults">About 2 results (0 seconds)</p> <p id = "natGeoSearchanimal"><span id = 'natGeoSearchanimalInfo'>kids.nationalgeographic.com › animals</span><br><a id = "natGeoSearchanimalLink" href = 'https://kids.nationalgeographic.com/animals'>National Geographic Kids - Animals</a><br>Animals. Animal Types. Mammals. Mammals. See More. Birds. Birds. See More. Reptiles. Reptiles. See More. Amphibians. Amphibians. See More. Invertebrates.</p> <br> <p id = 'azAnimalsseachanimal'><span id = 'azAnimalsseachanimalInfo'>a-z-animals.com</span><br><a id = "azAnimalsseachanimalLink" href = 'https://a-z-animals.com/'>AZ Animals: Animals - Facts, Pictures and Resources</a><br>The world's largest & most trusted collection of animal facts, pictures and more! Discover more than 1000 new animals today!</p> </div> <div id = 'sportsPage'> <p class = "aboutResults">About 1 result (0 seconds)</p> <p id = "yahooSearchSports"><span id = "yahooSearchSportsInfo">sports.yahoo.com</span><br><a id = "yahooSearchSportsLink" href = "https://sports.yahoo.com/">Yahoo! Sports - News, Scores, Standings, Rumors, Fantasy ...</a><br>Yahoo! Sports - Comprehensive news, scores, standings, fantasy games, rumors, and more.</p> </div> <script> var homePage = document.getElementById('homePage') var go = document.getElementById("go"); var animalPage = document.getElementById("animalPage"); var sportPage = document.getElementById("sportsPage"); go.addEventListener('click', function() { var search = document.getElementById("searchBar").value.replace("+", "%2B"); var stuffOnTop = document.getElementById('whatAlwaysShowsUpAfterASearch'); if (search === "Animal" \|\| search === "animal" \|\| search === "Animals" \|\| search === "animals") { homePage.style.display = "none"; animalPage.style.display = "block"; sportPage.style.display = "none" document.getElementById("searchedBar").value = search; stuffOnTop.style.display = 'block'; } else if (search === "Sport" \|\| search === "sport" \|\| search === "Sports" \|\| search === "sports") { document.getElementById("searchedBar").value = search; stuffOnTop.style.display = 'block'; homePage.style.display = "none"; sportPage.style.display = "block"; } else { search.replace("+", "%2B"); window.open("https://www.google.com/search?q="+search); } }) document.getElementById('animalPageBack').addEventListener('click', function() { homePage.style.display = 'block'; animalPage.style.display = "none" sportPage.style.display = "none" document.getElementById('whatAlwaysShowsUpAfterASearch').style.display = 'none' search = ""; }) var pfp = document.getElementById("pfp"); pfp.onclick = function () { window.open("https://www.khanacademy.org/computer-programming/google-apps/5225525111898112") } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> $('#search_btns button:nth-child(2)').hover(function() { btnTimeID = setTimeout(function() { // We are using the math object to randomly pick a number between 1 - 11, and then applying the formula (5n-3)5 to this number, which leaves us with a randomly selected number that is applied to the <ul> (i.e. -185) and corresponds to the position of a word (or <li> element, i.e. "I'm Feeling Curious"). var pos = -((Math.floor((Math.random() 11) + 1)) * 5 - 3) * 5 if (pos === -135) { console.log("position didn't change, let's force change") pos = -35; } $('#search_btns button:nth-child(2) ul').animate({'bottom':pos + 'px'}, 300); // Change the width of the button to fit the currently selected word. if (pos === -35 \|\| pos === -110 \|\| pos === -185 \|\| pos === -10 \|\| pos === -60 \|\| pos === -160) { console.log(pos + ' = -35, -110, -185, -10, -60, -160'); $('#search_btns button:nth-child(2)').css('width', '149px'); } else if (pos === -85) { console.log(pos + ' = -85'); $('#search_btns button:nth-child(2)').css('width', '160px'); } else if (pos === -210) { console.log(pos + ' = -210'); $('#search_btns button:nth-child(2)').css('width', '165px'); } else { console.log(pos + ' = -260, -235'); $('#search_btns button:nth-child(2)').css('width', '144px'); } },200); }, function() { clearTimeout(btnTimeID); setTimeout(function() { console.log('setTimeout function'); $('#search_btns button:nth-child(2) ul').css('bottom', '-135px'); // this is the original position $('#search_btns button:nth-child(2)').css('width', '144px'); // reset the original width of the button },200); }); </script> </body> <!-- not much of everything else --> </html>
Folds	39,502
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN2Pi7mpCgw
Votes	244
Spin-Offs	20
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Spy Potato
Author Name	Potaytos
Author ID	kaid_931352858014271734232290
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1739449409186
Updated	6 months ago, 1739449417669
Source Deleted	unknown