calculator

HTML

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <header class="top_header">
        <nav class="main_menu">
            <ul>
                <li>
                    <a href="#">Calculator</a>
                </li>
                <li>
                    <a href="#">About me</a>
                </li>
                <li>
                    <a href="#">Instagram</a>
                </li>
                <li>
                    <a href="#">Youtube</a>
                </li>
                <li>
                    <a href="#">Facebook</a>
                </li>
            </ul>
        </nav>
    </header>
    <!--- Header end -->
    <div class="container">
        <section class="info_box">
            <article>
                <header class="second_header">
                    <h1>Calculator</h1>
                    <p>Posted on
                        <time datetime="2018-07-04T16:31:24+02:00">July 11th 2018</time> by
                        <a href="#">Writer: Zsena</a>
                        <a href="#comments">5 comments</a>
                    </p>
                </header>
                <h2>This is my first program in <span class="important_word">2018</span> years.</h2>
                <p>Another way of creating a motivation for myself. It was soo funny and interesting because I didn't know many
                    basic things. I realized that when I'm not copying then the website creation is a little bit difficult.
                    I hope it will be a good reference work for me.</p>
        </section>
        <section class="calculator">
            <div class="calc_menu">
                <ul>
                    <li><a href="#">View</a></li>
                    <li><a href="#">Edit</a></li>
                    <li><a href="#">Help</a></li>
                </ul>
            </div>
            <div...

CSS

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&subset=latin-ext');

body {
    font-family: 'Quicksand', sans-serif;
    font-size: 100%;
    margin: 0;
    background-image: url('img/math-free.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right top; 
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

li {
    list-style-type: none;
}

a {
    color: #777;
    text-decoration: none;
}


ul li a {
    text-decoration: none;
    color: #fff;
}
ul li a:hover {
    text-decoration: underline;
}

button {
    color:#fff;
    border: 1px solid white;
}


.important_word {
    font-size: 2.8em;
    border: 2px solid #009688;
}




/*** CONTAINER ***/
.container {
    display: block;
    margin: auto;
    width: 80%;
    padding-top: 10%;
}









/*** HEADER ***/
.top_header {
    background-color: #009688;
    opacity: 0.8;
    padding: 5px;
    position: fixed;
    width: 100%;
    z-index: 9999;
}







/*** NAV ***/
nav.main_menu {
    text-align: center;
}

nav ul li {
    display: inline;
    padding: 20px;
}








/*** CALCULATOR ***/
.calculator {
    background: #bbb;
    width: 41%;
    margin: auto;
    height: 460px;
    border-radius: 10px;
    box-shadow: 0px 4px aquamarine, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
.calc_menu {
    height: 30px;
}
.calc_menu ul li {
    float: left;
    padding: 5px;
}
.calc_keys, .calc_operators {
    float: left;
     cursor: pointer;
    width: 66px;
    height: 36px;
    margin: 0 23px 12px 0;
}
.calc_display {
    position: relative;
    height: 60px;
    width: 90%;
    margin: auto;
    background: aquamarine;
    border: 5px solid #ddd;
    border-radius: 3px;
	box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2)
}
.calc_container {
    position: relative;
    width: 90%;
    margin: auto;
    display: block;
}

.calc_container button {
    width: 80px;
    height: 80px;
    background-color:...

JavaScript

var buttons = document.querySelectorAll;

console.log(buttons);


var keys = document.querySelectorAll(".calculator");
var operators = document.querySelector("data-action");

function myFunction() {
    function onclick() {
        for (i = 0; i < keys.length; i++) {
            keys.onclick() = function() {
                var display = [document.querySelector(".calc_display")];
                var input = innerHTML;
                var btn = document.querySelector(".num");
                if (keys === operators) {
                    display.push(btn, operators);
                }
            }
        }
    }
}