Viewing Program

Program Data

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

Title	A New Type Of Button
ID	6351962321584128
Created	8 years ago, 1470958136103
Updated	5 years ago, 1559534335505
Code	<!DOCTYPE html> <!-- Welcome to the ultimate HTML button program. I don't really have a lot to say, why don't you try talking to the button over there? → As always, please post any and all feedback you might have. Credit for the original idea of an HTML button from here: khanacademy.org/cs/i/5664409271795712 and Splo did it here: khanacademy.org/cs/i/5084588077744128 --> <html> <head> <meta charset="utf-8"> <title>A New Type Of Button</title> <style> body { background: #F6F6F6; color: #2B2B2B; width: 99%; height: 99%; position: absolute; margin: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; } /* White: #F6F6F6 Yellow: #E9E581 Red: #DE1B1B Black: #2B2B2B */ #button { background: #2B2B2B; color: #F6F6F6; text-decoration: none; transform: translate(-50%, -50%); border: solid #DE1B1B 7px; position: absolute; left: 50%; padding: 25px; font-family: Impact; text-align: center; top: 50%; -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px; font-size: 50px; } #button:hover { cursor: pointer; } .saying { position: absolute; left: 50%; transform: translate(-50%, -50%); text-align: center; font-family: 'Oxygen', Verdana, sans-serif; width: 75%; } #say1 { top: 17%; font-weight: 400; font-size: 1.5em; } #say2 { top: 83%; font-weight: 300; } .italic { font-style: italic; } .underline { text-decoration: underline; } .bold { font-weight: 700; } #on { font-family: "Lucida Console", Monaco, monospace; position: absolute; top: 90%; left: 5%; } .quote { background-color: #ddd; } </style> <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'> </head> <body> <div class="saying" id="say1"></div> <a href="#" id="button">Click Me!</a> <div class="saying" id="say2"></div> <div id="on"></div> <script> var on = 0; var active = false; var button = document.getElementById("button"); //Syntax: a string contains just top text // An array is top text, bottom text, and a function for additional effects. var sayings = [ "", "Hello.", "I'm a button.", "You'd be surprised at how many people hate me just because of that.", "Can you imagine? They don't like button programs!", 'Say they "Clog the hot list" and "Don\'t take any effort to create."', "Well let me tell you,", "I'm no ordinary button.", "To start with, look at that code over there.<br>\u2190", ["100%, original, flawless, amazing HTML!","Excepting the styling, which is CSS; and the updating, which is javascript."], "Most button programs are made using processing.js, but not me!", "This means I can do some pretty awesome things!", "Like this...", ["Pretty cool, right?", "And if you were wondering, this is allowed under KA's HTML rules.", function () { alert("Your classic button programs can't do this, can they\u203D"); }], ["As well, I can <span class='bold'>bold</span>, <span class='italic'>italic</span>, and <span class='underline'>underline</span> inline, without having to load multiple fonts or use different text() commands!","Some prior CSS and font configuring necessary."], "I can also include links, and do a bunch of other cool stuff.", ["If you'd like to learn HTML and CSS, you can do so with <a id='toKAHTML' href='javscript:void(0)'>Khan Academy's lessons!</a>","", function(){ document.getElementById("toKAHTML").setAttribute("onclick","window.open('http://www.khanacademy.org/cs/html-css')") }], ["Now I expect every button program in the future to use HTML!","And if they don't..."], "Now, for the second reason I'm far better than <span class='italics'>other</span> button programs.", "My code is clean, concise, and simple!", "All these sayings are stored in arrays.", "So you can add more sayings super easily.", "But enough about me, let's talk about you.", "How are you doing?", ["Well; I hope.","\"Good\" is an adjective, so it wouldn't work as an answer."], ["I'm doing quite well myself.","I sure like being inside this fancy computer."], ["Ahh!","", function () { button.innerHTML="Don't Click Me!" }], "What happened\u203D", "My text changed! I should probably fix that.", ["Give me a second.","", function () { for (var i = 0; i < 21; i++) { for (var j = ""; j.length <= (i % 3); j += "."){} sayings.splice(on + i+1, 0, j); } }], [".","3"],["..","2"],["...","1"], ["There! That's better.","", function () { button.innerHTML="Click Me!" }], "Unlike other buttons, I like being clicked", ["Besides, I could always just leave", "So I don't have to blow up the world."], ["I could move over here!","", function () { button.style.left = "0px"; button.style.top = "0px"; button.style.display = 'none'; button.offsetHeight; button.style.display = ''; }], ["Or over here","", function () { button.style.left = "100%"; button.style.top = "100%"; button.style.display = 'none'; button.offsetHeight; button.style.display = ''; }], "But I better not.", ["Hmm...","", function () { button.style.left = "50%"; button.style.top = "50%"; button.style.display = 'none'; button.offsetHeight; button.style.display = ''; }], "You're still here.", "I'm running out of things to say.", "I suppose I could tell some jokes.", ["But I feel like everyone would already know any jokes I had to tell.","Besides, they're not in your language anyways."], "You're probably pretty bored.", "I don't have to worry about that: I'm a button.", ["I could just count to 100 for the fun of it.","", function () { for (var i = 1; i <= 100; i++) { sayings.splice(on+i, 0, i.toString()); } }], "See, I'm not bored at all!", "I could do it again!", "1","2","3","What's that?", "Oh, of course. I forgot you still get bored.", "Well then, I suppose I should entertain you.", "Ohh!", "I got a really good fact to share with you!", "Are you ready\u203D", "You...", "Are...", "Reading this on a screen!", "Are you amazed?", "You should be.", "You know what else would amaze you?", "Checking out some of my creator's other programs!", "Besides, I'm tired of talking.", "Why don't you go over to his profile,", "and I'll leave.", "That's a great idea!", "","","","", "Why are you still here?", "Don't make me...", ["I'll give you twenty clicks, then I'm leaving.","",function () { for (var i = 1; i <= 20; i++) { sayings.splice(on + i,0,["",i]); } }], "Wow! I must be more entertaining than I thought.", "I don't have anything else to say.", ":(", ["I really have to go.","I have...um...important button things to do..."], "I'm leaving in 10 clicks.", "I don't want to spring it on you.", "I'll leave.", "","","","","","","",["","Bye..."], ["","", function () { button.style.display = "none"; document.getElementById("on").style.display = "none"; }], "Wait, what!? You're not supposed to be here!", "Go away!", "Leave me alone!" ]; var next = function () { on++; document.getElementById("on").innerHTML=on; var saying = sayings[on]; if (typeof saying === "string") { document.getElementById("say1").innerHTML=saying; document.getElementById("say2").innerHTML=""; }else if (typeof saying === "object") { document.getElementById("say1").innerHTML=saying[0]; document.getElementById("say2").innerHTML=saying[1]; saying[2] ? saying[2]() : null; } }; var down = function () { active = true; button.style.transform = "translate(-45%, -45%)"; }; var up = function () { if (active) { active = false; button.style.transform = "translate(-50%, -50%)"; next(); } }; button.addEventListener("mousedown", down); document.body.addEventListener("mouseup", up); </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLjOt6KkCww
Votes	768
Spin-Offs	42
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Matthias (Soli Deo gloria)
Author Name	MatthiasSaihttam
Author ID	kaid_757721856896775939251306
Author Profile Access	COACH

Archive Data

Added	2 months ago, 1739456908650
Updated	4 days ago, 1744820613074
Source Deleted	unknown