Scribd Logo
Upload

Welcome to Scribd!

  • Szamologep

    Uploaded by

    ASD
    6 views10 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views10 pages

    Szamologep

    Uploaded by

    ASD

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    HTML

    <html>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono"
    rel="stylesheet">
    </html>
    <body>
    <div class="doboz">
    <div class="kijelzo">
    <div id="felsoSor"></div>
    <div id="alsoSor">0</div>
    </div>
    <div class="nav">
    <div class="grid-container">
    <div class="item3" id="2nd">2<sup>nd</div>
    <div class="item4" id="ln">ln</div>
    <div class="item5" id="lg">lg</div>
    <div class="item6" id="M+">M+</div>
    <div class="item7" id="i7">sin</div>
    <div class="item8" id="i8">cos</div>
    <div class="item9" id="i9">tan</div>
    <div class="item10" id="i10">MR</div>
    <div class="item11" id="i11">x<sup>y</div>
    <div class="item12" id="i12">1/x</div>
    <div class="item13" id="i13">x<sup>2</div>
    <div class="item14" id="i14">MC</div>
    <div class="item15" id="AC">AC</div>
    <div class="item16" id="i16">EXP</div>
    <div class="item17" id="i17">x!</div>
    <div class="item18" id="egyenlo">=</div>
    </div>
    <div class="grid-container2">
    <div class="item53" id="7">7</div>
    <div class="item54" id="8">8</div>
    <div class="item55" id="9">9</div>
    <div class="item56" id="plusz">+</div>
    <div class="item57" id="4">4</div>
    <div class="item58" id="5">5</div>
    <div class="item59" id="6">6</div>
    <div class="item60" id="minusz">-</div>
    <div class="item61" id="1">1</div>
    <div class="item62" id="2">2</div>
    <div class="item63" id="3">3</div>
    <div class="item64" id="szorzas">*</div>
    <div class="item65" id="pont">.</div>
    <div class="item66" id="0">0</div>
    <div class="item67" id="i67">+/-</div>
    <div class="item68" id="osztas">/</div>
    </div>
    </div>
    </div>
    </body>
    </html>

    CSS
    @media(orientation: landscape){
    body {
    font-family: "Share Tech Mono", monospace;
    background-color: black;
    }

    .kijelzo {
    height: 15vh;
    color: black;
    background-color: gray;
    border-radius: 1vw;
    width: 96.8vw;
    }

    #felsoSor {
    font-size: 4vh;
    padding: 1vh;
    height: 6.5vh;
    }

    #alsoSor {
    font-size: 7vh;
    text-align: right;
    padding: 1px 3vh;
    }

    .nav {
    background-color: black;
    height: 70vh;
    display: grid;
    grid-template-areas: "grid-container grid-container2";
    grid-template-columns: 49vw 49vw;
    grid-template-rows: 98vh;
    }

    .grid-container {
    display: grid;
    grid-template-areas:
    "num7 num8 num9 num12"
    "num4 num5 num5 num13"
    "num1 num2 num3 num14"
    "num10 num0 num11 num15";
    grid-gap: 5px;
    background-color: black;
    padding: 1px;
    width: 50vw;
    height: 76vh;
    grid-template-columns: 12vw 12vw 12vw 11vw;
    text-align: center;
    margin-botton: 1vh;
    border-radius: 1vw;
    padding-top: 3vh;
    }

    .grid-container2 {
    display: grid;
    grid-template-areas:
    "num7 num8 num9 num12"
    "num4 num5 num5 num13"
    "num1 num2 num3 num14"
    "num10 num0 num11 num15";
    grid-gap: 5px;
    background-color: black;
    padding: 1px;
    width: 50vw;
    height: 76vh;
    grid-template-columns: 12vw 12vw 12vw 11vw;
    text-align: center;
    margin-botton: 1vh;
    border-radius: 1vw;
    padding-top: 3vh;

    .grid-container > div{


    border-radius: 1vw;
    background-color: #222222;
    color: white;
    font-size: 6vh;
    padding: 5vh;
    }

    .grid-container2 > div{


    border-radius: 1vw;
    background-color: gray;
    font-size: 6vh;
    padding: 5vh;
    }
    .grid-container > .item18{
    background-color: lightgreen;
    }
    .grid-container > .item15{
    background-color: red;
    }
    .grid-container > .item3{
    background-color: gold;
    }

    .grid-container2 > .item56{


    background-color: lightgray;
    }

    .grid-container2 > .item60{


    background-color: lightgray;
    }

    .grid-container2 > .item64{


    background-color: lightgray;
    }

    .grid-container2 > .item68{


    background-color: lightgray;

    .grid-container2 > .item65{


    background-color: lightgray;
    }

    .grid-container2 > .item67{


    background-color: lightgray;
    }

    /*******************************************************************************/

    @media(orientation: portrait){
    body {
    font-family: "Share Tech Mono", monospace;
    background-color: black;
    }

    .kijelzo {
    height: 15vh;
    width: 96vw;
    color: black;
    background-color: gray;
    border-radius: 2vw;

    margin-right: 13vw;
    }

    .doboz{
    height: 95vh;
    width: 90vw;

    #felsoSor {
    font-size: 4vh;
    padding: 1vh;
    height: 5.2vh;
    }

    #alsoSor {
    font-size: 7vh;
    text-align: right;
    padding: 1px 3vh;
    }
    .nav {
    background-color: black;
    height: 83vh;
    width: 96vw;
    display: grid;
    grid-template-areas: 'grid-container2'
    'grid-container';
    grid-template-columns: 0px 0px;
    grid-template-rows: 97vh;
    }

    .grid-container {
    display: grid;
    grid-template-areas:
    "num7 num8 num9 num12"
    "num4 num5 num5 num13"
    "num1 num2 num3 num14"
    "num10 num0 num11 num15";
    grid-gap: 5px;
    background-color: black;
    padding: 1px;
    height: 20vh;
    text-align: center;
    margin-top: 1vh;
    margin-bottom: 10vh;
    grid-template-columns: 24vw 24vw 24vw 23vw;

    .grid-container2 {
    display: grid;
    grid-template-areas:
    "num7 num8 num9 num12"
    "num4 num5 num5 num13"
    "num1 num2 num3 num14"
    "num10 num0 num11 num15";

    grid-gap: 5px;
    background-color: black;
    padding: 1px;
    height: 10vh;
    width: 18wv;
    text-align: center;
    margin-top: 41vh;
    grid-template-columns: 24vw 24vw 24vw 23vw;

    .grid-container > div{


    border-radius: 1vw;
    background-color: #222222;
    color: white;
    font-size: 3vh;
    padding: 2.8vh;
    }
    .grid-container2 > div{
    border-radius: 1vw;
    background-color: gray;
    font-size: 3vh;
    padding: 2.9vh;
    }
    .grid-container > .item18{
    background-color: lightgreen;
    }
    .grid-container > .item15{
    background-color: red;
    }
    .grid-container > .item3{
    background-color: gold;
    }

    .grid-container2 > .item56{


    background-color: lightgray;
    }

    .grid-container2 > .item60{


    background-color: lightgray;
    }

    .grid-container2 > .item64{


    background-color: lightgray;
    }

    .grid-container2 > .item68{


    background-color: lightgray;

    .grid-container2 > .item65{


    background-color: lightgray;
    }

    .grid-container2 > .item67{


    background-color: lightgray;
    }

    JavaScript

    var alsoSor ="0";


    var felsoSor;
    var elsoGomb=true;
    var tizedespont=false;
    var elsoSzamjegy=true;
    var vanNulla=false;
    var a;
    var elsoSzam;
    var masodikSzam;
    var eredmeny;
    var eredmenySzoveges;
    var folytatas=false;
    var muvelet;

    function szamgombnyomas(x)
    {
    if ((alsoSor.length<15) && !elsoGomb)
    alsoSor=alsoSor+x;
    if(elsoGomb)
    {
    alsoSor=x;
    elsoGomb=false;
    elsoSzamjegy=false;
    }
    document.getElementById("alsoSor").innerHTML=alsoSor;
    }

    function nullaGombnyomas()
    {
    if(!elsoGomb)
    {
    szamgombnyomas("0");
    }
    else if (tizedespont)
    {
    szamgombnyomas("0");
    }
    }

    function cOnClick()
    {
    előjel=false;
    folytatas=false;
    alsoSor="";
    elsoSzamjegy=true;
    elsoGomb=true;
    felsoSor="";
    tizedespont=false;
    vanNulla=false;
    document.getElementById("alsoSor").innerHTML="0";
    document.getElementById("felsoSor").innerHTML="";
    };

    document.getElementById("1").onclick = function () {
    szamgombnyomas("1");
    };
    document.getElementById("2").onclick = function () {
    szamgombnyomas("2");
    };
    document.getElementById("3").onclick = function () {
    szamgombnyomas("3");
    };
    document.getElementById("4").onclick = function () {
    szamgombnyomas("4");
    };
    document.getElementById("5").onclick = function () {
    szamgombnyomas("5");
    };
    document.getElementById("6").onclick = function () {
    szamgombnyomas("6");
    };
    document.getElementById("7").onclick = function () {
    szamgombnyomas("7");
    };
    document.getElementById("8").onclick = function () {
    szamgombnyomas("8");
    };
    document.getElementById("9").onclick = function () {
    szamgombnyomas("9");
    };
    document.getElementById("0").onclick = function () {
    nullaGombnyomas();
    };
    document.getElementById("AC").onclick = function() {
    cOnClick();
    };

    document.getElementById("pont").onclick = function ()
    {
    if (elsoGomb)
    {
    alsoSor="0.";
    elsoGomb=false;
    document.getElementById("alsoSor").innerHTML=alsoSor;
    tizedespont=true;
    };
    if (!tizedespont && (alsoSor.length > 0))
    {
    alsoSor=alsoSor+".";
    document.getElementById("alsoSor").innerHTML=alsoSor;
    };
    tizedespont=true;
    elsoSzamjegy=false;
    };

    document.getElementById("plusz").onclick = function ()
    {
    muvelet="+";
    felsoSor=alsoSor+"+";
    elsoSzam=parseFloat(alsoSor);
    document.getElementById("felsoSor").innerHTML=alsoSor+"+";
    document.getElementById("alsoSor").innerHTML="0";
    tizedespont=false;
    elsoGomb=true;
    elsoSzamjegy=true;
    folytatas=true;
    };

    document.getElementById("minusz").onclick = function ()
    {
    muvelet="-";
    felsoSor=alsoSor+"-";
    elsoSzam=parseFloat(alsoSor);
    document.getElementById("felsoSor").innerHTML=alsoSor+"-";
    document.getElementById("alsoSor").innerHTML="0";
    tizedespont=false;
    elsoGomb=true;
    elsoSzamjegy=true;
    folytatas=true;
    };

    document.getElementById("szorzas").onclick = function ()
    {
    muvelet="*";
    felsoSor=alsoSor+"*";
    elsoSzam=parseFloat(alsoSor);
    document.getElementById("felsoSor").innerHTML=alsoSor+"*";
    document.getElementById("alsoSor").innerHTML="0";
    tizedespont=false;
    elsoGomb=true;
    elsoSzamjegy=true;
    folytatas=true;
    };

    document.getElementById("osztas").onclick = function ()
    {
    muvelet="/";
    felsoSor=alsoSor+"/";
    elsoSzam=parseFloat(alsoSor);
    document.getElementById("felsoSor").innerHTML=alsoSor+"/";
    document.getElementById("alsoSor").innerHTML="0";
    tizedespont=false;
    elsoGomb=true;
    elsoSzamjegy=true;
    folytatas=true;
    };

    document.getElementById("egyenlo").onclick = function()
    {
    if(folytatas==true && alsoSor)
    {
    masodikSzam=parseFloat(alsoSor);
    if(muvelet==="+")
    {
    eredmeny = elsoSzam+masodikSzam;
    eredmeny = eredmeny.toString();
    felsoSor=felsoSor+alsoSor+"=";
    document.getElementById("felsoSor").innerHTML = felsoSor
    };
    if(muvelet==="-")
    {
    eredmeny = elsoSzam-masodikSzam;
    eredmeny = eredmeny.toString();
    felsoSor=felsoSor+alsoSor+"=";
    document.getElementById("felsoSor").innerHTML = felsoSor
    };
    if(muvelet==="*")
    {
    eredmeny = elsoSzam*masodikSzam;
    eredmeny = eredmeny.toString();
    felsoSor=felsoSor+alsoSor+"=";
    document.getElementById("felsoSor").innerHTML = felsoSor
    };
    if(muvelet==="/")
    {
    eredmeny = elsoSzam/masodikSzam;
    eredmeny = eredmeny.toString();
    felsoSor=felsoSor+alsoSor+"=";
    document.getElementById("felsoSor").innerHTML =felsoSor
    };
    document.getElementById("alsoSor").innerHTML = eredmeny;
    folytatas=false;
    };
    };

    You might also like