Skip to main content

電卓

目標#

今月のカレンダーをWebページに表示しよう

サンプルコード#

  1. HTMLのコードを、Glitchの index.html に追加しよう！
<div class="dentaku">    <input type="text" id="result" />    <div>        <a class="edit-btn">1</a>        <a class="edit-btn">2</a>        <a class="edit-btn">3</a>        <a class="edit-btn">+</a>    </div>    <div>        <a class="edit-btn">4</a>        <a class="edit-btn">5</a>        <a class="edit-btn">6</a>        <a class="edit-btn">-</a>    </div>    <div>        <a class="edit-btn">7</a>        <a class="edit-btn">8</a>        <a class="edit-btn">9</a>        <a class="edit-btn">/</a>    </div>    <div>        <a class="edit-btn">0</a>        <a class="edit-btn">.</a>        <a class="edit-btn">*</a>        <a id="calc-btn">=</a>    </div></div>

2.CSSのコードを、Glitchの style.css に追加しよう！#

.dentaku {    background-color: #feb396;    border: #333 1px solid;    border-radius: 10px;    width: 175px;    margin: 30px;    padding: 10px;    text-align: center;}.dentaku input {    margin-bottom: 10px;}.dentaku a {    display: inline-block;    text-align: center;    width: 30px;    line-height: 30px;    border: #333 1px solid;    background-color: ivory;    border-radius: 50%;    margin: 5px 1px;}

3.JavaScriptのコードを、Glitchの script.js に追加しよう！#

let result = document.getElementById("result")function edit(elem) {    result.value = result.value + elem.innerText}function calc() {    result.value = new Function("return " + result.value)()}
const btns = document.getElementsByClassName("edit-btn")for (let i = 0; i < btns.length; i++) {    btns[i].onclick = function (e) {        edit(e.target)    }}const equal = document.getElementById("calc-btn")equal.onclick = calc