Game of Thrones Calculator. Freecodecamp project.
A Pen by Paulina Fischer on CodePen.
Last active
December 27, 2019 11:28
-
-
Save paulinafischer/064ceb6ad126c3e26b14b554875ecad0 to your computer and use it in GitHub Desktop.
GOT Calculator
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
| <div class = "jumbotron text-center animated fadeIn"> | |
| <h1 class="animated pulse">GOT</h1> | |
| <h3>Calculator</h3> | |
| <audio autoplay loop> | |
| <source src="http://res.cloudinary.com/dfqxzvppi/video/upload/q_35/v1505077454/got.mp3" type="audio/mpeg"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| </div> | |
| <div class="container-fluid" id="calc"> | |
| <div class="row text-center"> | |
| <div class="col-md-4 col-md-offset-4"> | |
| <div class ="container-fluid animated slideInUp" id="box"> | |
| <div class= "well well-lg text-cen ter" id="input"></div> | |
| <div id = "bt" class="buttonContainer"> | |
| <div id = "start" class="row text-center"> | |
| <button id="CE" class="bt clear btn btn-default">CE</button> | |
| <button id="C" class="bt clear btn btn-default">C</button> | |
| <button id="back" class="bt clear btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span></button> | |
| <button id="divide" class="bt btn btn-default">/</button> | |
| </div> | |
| <div class="row text-center"> | |
| <button id="seven" class="bt btn btn-default">7</button> | |
| <button id="acht" class="bt btn btn-default">8</button> | |
| <button id="nue" class="bt btn btn-default">9</button> | |
| <button id="X" class="bt btn btn-default">X</button> | |
| </div> | |
| <div class="row text-center"> | |
| <button id="cua" class="bt btn btn-default">4</button> | |
| <button id="five" class="bt btn btn-default">5</button> | |
| <button id="six" class="bt btn btn-default">6</button> | |
| <button id="minus" class="bt btn btn-default">-</button> | |
| </div> | |
| <div class="row text-center"> | |
| <button id="one" class="bt btn btn-default">1</button> | |
| <button id="dos" class="bt btn btn-default">2</button> | |
| <button id="tres" class="bt btn btn-default">3</button> | |
| <button id="plus" class="bt btn btn-default">+</button> | |
| </div> | |
| <div class="row text-center"> | |
| <button id="pm" class="bt btn btn-default">+-</button> | |
| <button id="o" class="bt btn btn-default">0</button> | |
| <button id="decimal" class="bt btn btn-default">.</button> | |
| <button id="equal" class="bt btn btn-default">=</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <hr class="hr"> | |
| <div class="container-footer text-center"><p>Created by: Paulina Fischer</p><br><p>Library from | |
| <a href="https://www.youtube.com/channel/UCLG_lIjyLPqjN-KtHK_aE-Q" target="_blank">Happy Coder</a> and freeCodeCamp.</p></div> |
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
| var result=[]; | |
| var g; | |
| var o; | |
| var t; | |
| $('.clear').on('click', function () { | |
| result.splice(0); | |
| $('#input').empty(); | |
| }); | |
| $('#one').on('click', function () { | |
| result.push(1); | |
| $('#input').html(result); | |
| }); | |
| $('#dos').on('click', function () { | |
| result.push(2); | |
| $('#input').html(result); | |
| }); | |
| $('#tres').on('click', function () { | |
| result.push(3); | |
| $('#input').html(result); | |
| }); | |
| $('#cua').on('click', function () { | |
| result.push(4); | |
| $('#input').html(result); | |
| }); | |
| $('#five').on('click', function () { | |
| result.push(5); | |
| $('#input').html(result); | |
| }); | |
| $('#six').on('click', function () { | |
| result.push(6); | |
| $('#input').html(result); | |
| }); | |
| $('#seven').on('click', function () { | |
| result.push(7); | |
| $('#input').html(result); | |
| }); | |
| $('#acht').on('click', function () { | |
| result.push(8); | |
| $('#input').html(result); | |
| }); | |
| $('#nue').on('click', function () { | |
| result.push(9); | |
| $('#input').html(result); | |
| }); | |
| $('#o').on('click', function () { | |
| result.push(0); | |
| $('#input').html(result); | |
| }); | |
| $('#decimal').on('click', function () { | |
| result.push('.'); | |
| $('#input').html(result); | |
| }); | |
| function calculation(){ | |
| result.forEach(function(element,index,array){ | |
| if (isNaN(parseInt(element)) && element != "." && index != result.length-1) { | |
| g = result.splice(0,index).join(""); | |
| o = result.splice(1,result.length-2).join(""); | |
| if (element=="+") { | |
| t = parseFloat(g) + parseFloat(o); | |
| } | |
| if (element=="-") { | |
| t = parseFloat(g) - parseFloat(o); | |
| } | |
| if (element=="x") { | |
| t = parseFloat(g) * parseFloat(o); | |
| } | |
| if (element=="/") { | |
| t = parseFloat(g) / parseFloat(o); | |
| } | |
| result[0]=t; | |
| $('#input').html(t); | |
| } | |
| }); | |
| } | |
| function empty(){ | |
| if (parseFloat(t)!= 0 && result.length == 0) { | |
| result[0] = t; | |
| } | |
| } | |
| $('#plus').on('click', function () { | |
| empty(); | |
| result.push('+'); | |
| $('#input').html(result); | |
| calculation(); | |
| }); | |
| $('#minus').on('click', function () { | |
| empty(); | |
| result.push('-'); | |
| $('#input').html(result); | |
| calculation(); | |
| }); | |
| $('#divide').on('click', function () { | |
| empty(); | |
| result.push('/'); | |
| $('#input').html(result); | |
| calculation(); | |
| }); | |
| $('#X').on('click', function () { | |
| empty(); | |
| result.push('x'); | |
| $('#input').html(result); | |
| calculation(); | |
| }); | |
| $('#equal').on('click', function(){ | |
| result.forEach(function(element,index,array){ | |
| if (isNaN(parseInt(element)) && element != ".") { | |
| g= result.splice(0,index).join(""); | |
| o = result.splice(1).join(""); | |
| if (element=="+") { | |
| t = parseFloat(g) + parseFloat(o); | |
| } | |
| if (element=="-") { | |
| t = parseFloat(g) - parseFloat(o); | |
| } | |
| if (element=="x") { | |
| t = parseFloat(g) * parseFloat(o); | |
| } | |
| if (element=="/") { | |
| t = parseFloat(g) / parseFloat(o); | |
| } | |
| $('#input').html(t); | |
| result.splice(0); | |
| } | |
| }); | |
| }); | |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
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
| #calc,body{ | |
| background-color:black; | |
| padding:0px; | |
| margin:0px; | |
| } | |
| .jumbotron{ | |
| background-color:black; | |
| background-image:url("http://res.cloudinary.com/dfqxzvppi/image/upload/q_82/v1507318693/got.jpg"); | |
| background-repeat:no-repeat; | |
| background-attachment: fixed; | |
| background-position: center; | |
| width:100%; | |
| height:400px; | |
| color:#AFEEEE; | |
| } | |
| #box{ | |
| background-color:#2F4F4F; | |
| background-image:url("https://www.carbonbrief.org/wp-content/uploads/2015/04/ice-caves-iceland-dark-ice.jpg"); | |
| border-radius:20px; | |
| padding:10px; | |
| border:#2F4F4F 2px solid; | |
| } | |
| #bt{ | |
| padding:30px; | |
| background-color: rgba(0, 0, 0, 0.8); | |
| margin:35px; | |
| border-radius:20px; | |
| box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px; | |
| -webkit-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px; | |
| -moz-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px; | |
| border:#000 2px solid; | |
| } | |
| #input { | |
| background-color:black; | |
| color:blue; | |
| font-size:30px; | |
| } | |
| #one:hover,#one:focus,#dos:hover,#dos:focus,#tres:hover,#tres:focus,#cua:hover,#cua:focus,#five:hover, #five:focus,#six:hover,#six:focus,#seven:hover,#seven:focus,#acht:hover,#acht:focus,#nue:hover,#nue:focus,#o:hover,#o:focus,#C:hover,#C:focus,#CE:hover,#CE:focus,#back:hover,#back:focus,#plus:hover,#plus:focus,#minus:hover,#minus:focus,#equal:hover,#equal:focus,#decimal:hover,#decimal:focus,#divide:hover,#divide:focus,#X:hover,#X:focus,#pm:hover,#pm:focus{ | |
| background:black; | |
| color:#00BFFF; | |
| font-size:29px; | |
| } | |
| .well{ | |
| width:100%; | |
| height:60px; | |
| margin-top:30px; | |
| border-radius:20px; | |
| padding:10px; | |
| background-color:#2F4F4F; | |
| padding-bottom:15px; | |
| border-radius:20px; | |
| box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px; | |
| -webkit-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px; | |
| -moz-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px; | |
| border:#000 2px solid; | |
| } | |
| .btn{ | |
| border: black 3px solid; | |
| width: 45px; | |
| height: 45px; | |
| text-align:center; | |
| font-size:20px; | |
| padding:1px; | |
| margin: 10px; | |
| letter-spacing: 1px; | |
| border-radius:10px; | |
| box-sizing:border-box; | |
| cursor: pointer; | |
| color: rgba(255, 255, 255, 0.0); | |
| } | |
| #calc { | |
| } | |
| #one{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504600909/jon.jpg"); | |
| background-size: 45px 45px; | |
| } | |
| #dos{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504600909/cer.jpg"); | |
| background-size: 45px 45px; | |
| background-repeat:no-repeat; | |
| } | |
| #tres{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504600908/dany.jpg"); | |
| background-size: 45px 45px; | |
| color:;} | |
| #cua{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504600908/tyr.jpg"); | |
| background-size: 45px 45px; | |
| color:;} | |
| #five{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/c_scale,w_90/v1504601833/lit.jpg"); | |
| background-size: 55px 45px; | |
| background-repeat:no-repeat; | |
| color:;} | |
| #six{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504600908/sansa.jpg"); | |
| background-size: ; | |
| color:;} | |
| #seven{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504600908/to.jpg"); | |
| background-size: ; | |
| color:;} | |
| #acht{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504600908/e.jpg"); | |
| color:;} | |
| #nue{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504600920/aria.jpg"); | |
| color:;} | |
| #minus{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504598746/king.png"); | |
| background-size: 44px 60px; | |
| background-repeat:no-repeat; | |
| color:;} | |
| #o{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/c_scale,w_95/v1504598652/crow.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 46px 45px; | |
| color:;} | |
| #divide{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504619486/ja_ltdcol.jpg"); | |
| color:;} | |
| #plus{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/c_scale,w_50/v1504598074/wolf.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| color:;} | |
| #X{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/c_scale,h_52/v1504516079/bolt_xw417j.png"); | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| color:;} | |
| #CE{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/c_scale,w_91/v1504598548/drag.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| color:;} | |
| #C{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504599564/child.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| color:;} | |
| #{background-image: url("http://cdn.hbowatch.com/wp-content/uploads/2012/04/Drogon-Game-of-Thrones.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| color:;} | |
| #back{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/c_scale,w_102/v1504684453/bran.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 70px 45px; | |
| position:; | |
| color:;} | |
| #{background-image: url("http://cdn.hbowatch.com/wp-content/uploads/2012/04/Drogon-Game-of-Thrones.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| color:;} | |
| #{background-image: url("http://cdn.hbowatch.com/wp-content/uploads/2012/04/Drogon-Game-of-Thrones.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| color:;} | |
| #pm{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/c_scale,w_71/v1504599757/bravos.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| color:;} | |
| #equal{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504600449/Iron.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| color:;} | |
| #decimal{background-image: url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1504600908/me.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: 45px 45px; | |
| } | |
| h1{ | |
| letter-spacing:6px; | |
| text-shadow:1px 2px black; | |
| font-family: 'Volkhov', serif; | |
| } | |
| h3{ | |
| font-family: 'Abel', sans-serif; | |
| } | |
| .container-footer{ | |
| background:black; | |
| color:whitesmoke; | |
| } |
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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment