Spark Boulder, Summer 2017
Session 10: Nemesis
For your third project, I'd like you to create an app that flips a coin and records the results!
I'd like for you to create a page with two buttons: "Flip coin" and "Reset". Every time you click the "Flip coin" button, your page writes either a "Heads" or "Tails" to the page. Every time you click the "Flip coin" button, the old results stick around, so eventually you'll have a big long list of "Heads" and "Tails".
If you click the "Reset" button, it should clear out all the previous results, and allow you to click the "Flip coin" button for more results.
I should also mention, there should be a 50/50 chance for heads/tails :)
A couple things:
submit 14 http://my-awesome-coin-flipping-app.site44.com/index.htmlon @classbot.
For the first half of the class, we focused exclusively on HTML and CSS.
This is a bit of a cognitive leap that we have to make.
Before, we were just using markup languages (HTML and CSS) to tell the browser what to put on the page and what to make it look like.
Now, we're going to use a programming language to give instructions to the computer, sometimes unrelated to what we want to display on the page. Things like changing the contents of the page, listening for user interaction events, and communicating with servers.
In 1995, a programmer at Netscape named Brendan Eich wrote a language that would make it easier for early web developers to manipulate on the content on web pages. He wrote it in 10 days, and initially named it Mocha.
Java is a cross-platform programming language designed to be easy to run natively on lots of devices - desktops, early cell phones, ATMs, satnav systems, etc.
(still a complete clusterfuck)
Don't worry about knowing any of those things! That's a list of what professional web devs use in big companies and in startups today. If they use a specific stack, framework, or library, they'll generally teach it to you before you start working on it.
If you're an ultra-über-advanced professional web developer, companies will probably expect you to have a decent amount of knowledge on one or two of those technologies, and some slight familiarity with the rest. Try to be a "T-shaped" person!
Prepare your text editors!
<!-- index.html --> <html> <body> <script> alert("Mathematical!"); </script> </body> </html>
For the time being, you should include your script as the last element in the
<body> tag. More on that when we start working with the Browser API!
Technically, you can put a
<script>tag wherever you'd like on a page! The browser evaluates your HTML from top-to-bottom, and whenever it sees a
<script>tag, it goes ahead and executes it.
<!-- index.html --> <html> <body> <script src="myscript.js"></script> </body> </html>
// myscript.js alert("Algebraic!");
<!-- index.html --> <script> alert("This is one of those annoying popups that asks if you’re sure that you want to leave this site"); </script>
Notice that everything within the parentheses is also wrapped in quotation marks!
<!-- index.html --> <script> console.log("Where does this message get logged to?"); </script>
What happens if you don't put everything in quotation marks?
<!-- index.html --> <script> document.write("<h1>asdfasdfasdf</h1>"); </script>
There's a semicolon at the end of all of these, but it's not technically required. Generally a good idea to include it anyway.
What questions are there?