スポンサーリンク
どうも多浪Fランぼっち底辺大学生です。
今回は【HTML/CSS, javascript】を使用して電卓機能を作ってみたいと思います。
興味のある人はサラッと参考までに読んでみて下さい。
超個人的な話ですが、Udemyのフロントエンジニア向けの教材
「[HTML/CSS/Javascript]フロントエンジニアになりたい人のWebプログラミング入門」
の受講を行い、復習をしようかなと思いました。
簡単な内容ですが、BootstrapとJavascriptを意識してみました。
今回はソースコードと実行結果だけの内容となっているので、詳しい内容は各自で調べてみて下さい。
スポンサーリンク
電卓アプリのソースコード
それでは早速ソースコードを載せますね(‘ω’)ノ
HTML（Javascriptを含む）ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="css/calc.css"> <title>電卓試作</title> </head> <body> <div class="container"> <div class="row justify-content-center"> <div class="offset-xs-4 col-xs-4"> <input id="result" value=''> </div> </div> <div class="row justify-content-center"> <div class="offset-xs-4 col-xs-4"> <input id="btn" value="AC" type="button" onclick="del()"> <input value="%" type="button" onclick="show(this)"> <input value="/" type="button" onclick="show(this)"> </div> </div> <div class="row justify-content-center"> <div class="offset-xs-4 col-xs-4"> <input value="7" type="button" onclick="show(this)"> <input value="8" type="button" onclick="show(this)"> <input value="9" type="button" onclick="show(this)"> <input value="*" type="button" onclick="show(this)"> </div> </div> <div class="row justify-content-center"> <div class="offset-xs-4 col-xs-4"> <input value="4" type="button" onclick="show(this)"> <input value="5" type="button" onclick="show(this)"> <input value="6" type="button" onclick="show(this)"> <input value="-" type="button" onclick="show(this)"> </div> </div> <div class="row justify-content-center"> <div class="offset-xs-4 col-xs-4"> <input value="1" type="button" onclick="show(this)"> <input value="2" type="button" onclick="show(this)"> <input value="3" type="button" onclick="show(this)"> <input value="+" type="button" onclick="show(this)"> </div> </div> <div class="row justify-content-center"> <div class="offset-xs-4 col-xs-4"> <input id="btn" value="0" type="button" onclick="show(this)"> <input value="." type="button" onclick="show(this)"> <input value="=" type="button" onclick="calc()"> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script....... src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script....... <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script language="javascript"> var result = document.getElementById("result"); function show(elem) { result.value = result.value + elem.value; } function del() { result.value = ''; } function calc() { result.value = new Function("return " + result.value)(); } </script> </body> </html> |
CSSのソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.container { padding: 30px 0; background-color: rgb(241, 239, 239); } input { height: 40px; width: 50px; } #result { width: 100%; border: solid 1.5px; } #btn { width: 104px; } .row { margin-bottom: 10px; } |
実行結果
実行結果は以下のようになります。
電卓としての必要最低限の機能が実装出来ました。
また、Bootstrap(ブートストラップ)により画面のサイズに合わせた配置も不自然なく動いていたと思います。
参考にした参考書など
リンク
リンク
