Created
June 30, 2017 19:34
-
-
Save AndrwM/56c5ff6cdae2c6231de59d7eebba58d8 to your computer and use it in GitHub Desktop.
CHS JS Crash Course 🐬 (updated html & js)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| var $field = $('[data-answer]'); | |
| var appendValue = function(value) { | |
| if ( $field.html().length < 20 ) { | |
| $field.append(value); | |
| } else { | |
| alert('The number is too large!'); | |
| } | |
| }; | |
| $('[data-value]').click(function() { | |
| appendValue( $(this).data('value') ); | |
| }); | |
| $('[data-clear]').click(function() { | |
| $('[data-answer]').html(''); | |
| }); | |
| $('[data-function]').click(function() { | |
| appendValue( $(this).data('function') ); | |
| }); | |
| $('[data-eval]').click(function() { | |
| value = $field.html(); | |
| $field.html( eval(value) ); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="main.css" /> | |
| <title>Number Muncher 9000</title> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="wrapper clearfix"> | |
| <div class="sidebar"> | |
| <h1>Number Muncher 9000</h1> | |
| <h2>The Iron Yard Academy</h2> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="wrapper main clearfix"> | |
| <div class="sidebar"> | |
| <p>A web standards calculator built with HTML, CSS, and JavaScript.</p> | |
| <p>Add numbers, subtract numbers, divide and multiply numbers! Amaze your friends!</p> | |
| <p>This Crash Course will teach you a little about how HTML, CSS and JavaScript work together to create the web apps you use and love every day.</p> | |
| <p>Enjoy!</p> | |
| </div> | |
| <div class="calculator"> | |
| <h1 class="logo"><img src="img/logo.svg" alt=""></h1> | |
| <div class="inner clearfix"> | |
| <div class="answer_wrapper"><div id="answer" data-answer></div></div> | |
| <button class="clear" data-clear>C</button> | |
| <div class="numbers"> | |
| <div><button class="digit" data-value="7">7</button></div> | |
| <div><button class="digit" data-value="8">8</button></div> | |
| <div><button class="digit" data-value="9">9</button></div> | |
| <div><button class="digit" data-value="4">4</button></div> | |
| <div><button class="digit" data-value="5">5</button></div> | |
| <div><button class="digit" data-value="6">6</button></div> | |
| <div><button class="digit" data-value="1">1</button></div> | |
| <div><button class="digit" data-value="2">2</button></div> | |
| <div><button class="digit" data-value="3">3</button></div> | |
| <div><button class="digit" data-value=".">.</button></div> | |
| <div><button class="digit" data-value="0">0</button></div> | |
| <div><button class="equals" data-eval>=</button></div> | |
| </div> | |
| <div class="operators"> | |
| <button class="op" data-function="/">÷</button> | |
| <button class="op" data-function="*">x</button> | |
| <button class="op" data-function="-">-</button> | |
| <button class="op" data-function="+">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.js"></script> | |
| <script src="global.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment