суббота, 30 декабря 2017 г.

Двоичный калькулятор




Day 9: Binary Calculator


Index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Binary Calculator</title>
    <link rel="stylesheet" href="css/binaryCalculator.css">   
</head>
<body>
    <div id="res"></div>
    <div id="btns">       
        <button id="btn0">0</button>
        <button id="btn1">1</button>
        <button id="btnClr">C</button>
        <button id="btnEql">=</button>
        <button id="btnSum">+</button>
        <button id="btnSub">-</button>
        <button id="btnMul">*</button>
        <button id="btnDiv">/</button>
    </div>

    <script src="js/binaryCalculator.js"></script>
</body>
</html>

binaryCalculator.css

body {
    width: 33%;
}

button {
    width: 25%;
    height: 36px;
    font-size: 18px;
    margin: 0px;
    float: left;
}

#res {
    background-color: lightgray;
    border: solid;
    height: 48px;
    font-size: 20px;   
}

#btn0, #btn1 {
    background-color: lightgreen;
    color: brown;
}

#btnClr, #btnEql {
    background-color: darkgreen;
    color: white;
}

#btnSum, #btnSub, #btnMul, #btnDiv{
    background-color: black;
    color: red;
}

binaryCalculator.js

"use strict";

let btns = document.querySelectorAll("#btnSum, #btnSub, #btnMul, #btnDiv, #btn0, #btn1, #btnClr");

for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {       
        if (this.innerHTML === "C") {
            document.getElementById("res").innerHTML = "";
        } else {
            document.getElementById("res").innerHTML += this.innerHTML;
        }
    }
}

document.getElementById("btnEql").onclick = function () {       
    let arr = document.getElementById("res").innerHTML.match(/([01]+)([\+\-\*\/])([01]+)/);
    let n = parseInt(arr[1], 2) + arr[2] + parseInt(arr[3], 2);
    document.getElementById("res").innerHTML = Math.floor(eval(n)).toString(2);
}


Создание кнопки




Day 8: Create a Button

Index.html

<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Button</title>
    <link rel="stylesheet" href="css/button.css" type="text/css">
</head>
<body>
    <script src="js/button.js" type="text/javascript"></script>
</body>
</html>

button.css

#btn {
    width: 96px;
    height: 48px;
    font-size: 24px;
}

button.js

var clickMeButton = document.createElement('button');
clickMeButton.innerHTML = '0';
clickMeButton.id = 'btn';
document.body.appendChild(clickMeButton);
btn.onclick = function () {
    /* This changes the button's label */
    btn.innerHTML++;
};

The Love-Letter Mystery

/* Джеймс раздобыл любовное письмо, которое его друг Гарри написал своей девушке. Будучи шутником, Джеймс решил изменить его. Он ...