{"id":240,"date":"2025-05-25T14:22:31","date_gmt":"2025-05-25T14:22:31","guid":{"rendered":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/?page_id=240"},"modified":"2025-06-11T16:38:45","modified_gmt":"2025-06-11T16:38:45","slug":"etch-a-sketch","status":"publish","type":"page","link":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/?page_id=240","title":{"rendered":"Coding-Projekte"},"content":{"rendered":"\n<p class=\"has-heading-3-font-size\" style=\"margin-top:80px;padding-bottom:0;padding-left:3%\">Etch a Sketch<\/p>\n\n\n\n<div id=\"container\">\n<button id=\"adjustButton\">Adjust the Grid<\/button>\n    <div id=\"base\"><\/div>\n<\/div>\n\n<style>\n#container {\nwidth: 100vw;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    gap: 10vh;\n}\n\n#base {\n    height: 60vh;\n    width: 60vh;\n    display: grid;\n}\n#adjustButton{\n    background-color: #bababa;\n    border-radius: 12px;\n    font-size: 120%;\n    font-family: monospace;\n    border: none;\npadding-top: 10px;\npadding-bottom: 10px;\n    width: 15vw;\n    transition: 0.3s;\n    color: white;\n}\n#adjustButton:hover {\n    background-color: #a8a8a8;\n}\n\n.squares {\n    background-color: #D3D3D3;\n}\n<\/style>\n\n<script>\n\n\/\/Create the grid\ndocument.getElementById(\"adjustButton\").addEventListener('click', createGrid);\n\nfunction createGrid() {\n    \/\/Delete all divs from previous run\n    let oldDivs = document.querySelectorAll(\".squares\");\n    oldDivs.forEach(element => {\n        element.remove();\n    })\n\n    \/\/Get the input from the user\n    let divsPerSide = prompt(\"Enter a number between 1 and 100 to determine the number of squares per side\");\n    if (divsPerSide > 100||divsPerSide < 1) {\n        alert(\"Please enter a valid number\");\n        return;\n    }\n    let numberOfDivs = divsPerSide * divsPerSide;\n\n    \n    \/\/Create all the divs\n    for (let i = 0; i < numberOfDivs; i++) {\n        let base = document.getElementById(\"base\");\n\n        let square = document.createElement('div');\n        square.classList.add('squares');\n        square.setAttribute('id', 'square'+i);\n        \n        base.appendChild(square);\n    }\n\n    \/\/Align the divs in the grid\n    document.getElementById(\"base\").style.gridTemplateColumns = \"repeat(\" + divsPerSide + \", 1fr)\";\n    document.getElementById(\"base\").style.gridTemplateRows = \"repeat(\" + divsPerSide + \", 1fr)\";\n\n    \/\/Adding eventlisteners to every div\n    let squares = document.querySelectorAll('.squares');\n\n    Array.prototype.forEach.call(squares, (item) => {\n        item.addEventListener('mouseenter', changeColor);\n    })\n}\n\nfunction changeColor() {\n    this.style.background = randomColor();\n}\n\nfunction randomColor() {\n    let r = Math.floor(Math.random()* 256);\n    let g = Math.floor(Math.random()* 256);\n    let b = Math.floor(Math.random()* 256);\n    let color = \"rgb(\"+r+\",\"+g+\",\"+b+\")\";\n    return color;\n}\n<\/script>\n\n\n\n<p class=\"has-heading-3-font-size\" style=\"margin-top:80px;padding-bottom:0;padding-left:3%\">Calculator<\/p>\n\n\n\n<div id=\"display\"><\/div>\n    <div id=\"buttons\">\n        <div id=\"specialButtons\">\n            <button id=\"clear\" class=\"buttons\">clear<\/button>\n            <button id=\"equal\" class=\"buttons\">=<\/button>\n            <button id=\"back\" class=\"buttons\"><--<\/button>\n        <\/div>\n        <button id=\"seven\" class=\"buttons\">7<\/button>\n        <button id=\"eight\" class=\"buttons\">8<\/button>\n        <button id=\"nine\" class=\"buttons\">9<\/button>\n        <button id=\"addition\" class=\"buttons\">+<\/button>\n\n        <button id=\"four\" class=\"buttons\">4<\/button>\n        <button id=\"five\" class=\"buttons\">5<\/button>\n        <button id=\"six\" class=\"buttons\">6<\/button>\n        <button id=\"subtraction\" class=\"buttons\">&#8211;<\/button>\n\n\n        <button id=\"one\" class=\"buttons\">1<\/button>\n        <button id=\"two\" class=\"buttons\">2<\/button>\n        <button id=\"three\" class=\"buttons\">3<\/button>\n        <button id=\"multiplication\" class=\"buttons\">*<\/button>\n        \n        <button id=\"zero\" class=\"buttons\">0<\/button>\n        <button id=\"division\" class=\"buttons\">\/<\/button>\n    <\/div>\n\n\n\n<style>\n#display {\n    height: 20vh;\n    width: 96vw;\n    text-align: right;\n    font-size: 17vh;\n    padding-right: 2vw;\njustify-content: center;\n}\n\n#buttons {\n    display: grid;\n    grid-template-columns: 24vw 24vw 24vw 24vw;\n    grid-template-rows: 14vh 12vh 12vh 12vh 12vh;\n}\n\n#specialButtons {\n    grid-column: 1 \/ 5;\n    display: grid;\n    grid-template-columns: 32vw 32vw 32vw;\n}\n\n#zero {\n    grid-column: 1 \/ 4;\n}\n\n.buttons {\n    font-size: 7vh;\n}\n<\/style>\n\n\n\n<script>\nfunction addition(number1, number2) {\n    return +(Math.round(number1 + number2 + \"e+2\")  + \"e-2\");\n}\n\nfunction subtraction(number1, number2) {\n    return +(Math.round(number1 - number2 + \"e+2\")  + \"e-2\");\n}\n\nfunction multiplication(number1, number2) {\n    return +(Math.round(number1 * number2 + \"e+2\")  + \"e-2\");\n}\n\nfunction division(number1, number2) {\n    \/\/error if divsion by 0\n    if (number2 == 0) {\n        alert(\"You can't divide by 0\");\n        clear();\n        return;\n    }\n    return +(Math.round(number1 \/ number2 + \"e+2\")  + \"e-2\");\n}\n\n\/\/executes the math functions\nfunction operate(operator, number1, number2) {\n    if (operator == \"addition\") {\n        return addition(number1, number2);\n    }\n    else if(operator == \"subtraction\") {\n        return subtraction(number1, number2);\n    }\n    else if(operator == \"multiplication\") {\n        return multiplication(number1, number2);\n    }\n    else if(operator == \"division\") {\n        return division(number1, number2);\n    }\n}\n\n\n\n\/\/Eventlisteners to make the values of the buttons appear on the display\nlet displayValue = \"\";\n\ndocument.getElementById(\"zero\").addEventListener('click', () => {\n    displayValue = displayValue + \"0\";\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\ndocument.getElementById(\"one\").addEventListener('click', () => {\n    displayValue = displayValue + \"1\";\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\ndocument.getElementById(\"two\").addEventListener('click', () => {\n    displayValue = displayValue + \"2\";\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\ndocument.getElementById(\"three\").addEventListener('click', () => {\n    displayValue = displayValue + \"3\";\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\ndocument.getElementById(\"four\").addEventListener('click', () => {\n    displayValue = displayValue + \"4\";\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\ndocument.getElementById(\"five\").addEventListener('click', () => {\n    displayValue = displayValue + \"5\";\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\ndocument.getElementById(\"six\").addEventListener('click', () => {\n    displayValue = displayValue + \"6\";\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\ndocument.getElementById(\"seven\").addEventListener('click', () => {\n    displayValue = displayValue + \"7\";\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\ndocument.getElementById(\"eight\").addEventListener('click', () => {\n    displayValue = displayValue + \"8\";\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\ndocument.getElementById(\"nine\").addEventListener('click', () => {\n    displayValue = displayValue + \"9\";\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\n\/\/Back Button, that removes the last characters\ndocument.getElementById(\"back\").addEventListener('click', () => {\n    displayValue = displayValue.slice(0, -1);\n    document.getElementById(\"display\").textContent = displayValue;\n})\n\n\/\/clear button, that resets the calculator\ndocument.getElementById(\"clear\").addEventListener('click', () => clear())\n\nfunction clear() {\n    displayValue = \"\";\n    document.getElementById(\"display\").textContent = displayValue;\n    value1 = \"\";\n    value2 = \"\";\n    operator = \"\";\n    document.getElementById(\"subtraction\").style.backgroundColor = \"\";\n    document.getElementById(\"multiplication\").style.backgroundColor = \"\";\n    document.getElementById(\"division\").style.backgroundColor = \"\";\n    document.getElementById(\"addition\").style.backgroundColor = \"\";\n    number1 = \"\";\n    number2= \"\";\n}\n\n\/\/variable declaration\nlet value1 = \"\";\nlet value2 = \"\";\nlet operator = \"\";\n\ndocument.getElementById(\"addition\").addEventListener('click', () => {\n    \/\/highlight button\n    document.getElementById(\"addition\").style.backgroundColor = \"darkgrey\";\n\n    \/\/reset other buttons to default\n    document.getElementById(\"subtraction\").style.backgroundColor = \"\";\n    document.getElementById(\"multiplication\").style.backgroundColor = \"\";\n    document.getElementById(\"division\").style.backgroundColor = \"\";\n\n    \/\/store the value\n    if (value1 == \"\") {\n        value1 = parseInt(displayValue);\n        displayValue = \"\";\n    }\n\n    else if (value1 != \"\") {\n        if (displayValue == \"\") {\n            operator = \"addition\";\n            return;\n        }\n        value2 = parseInt(displayValue);\n        displayValue = \"\";\n    }\n\n    \/\/call operate function\n    if (operator == \"\") {\n        operator = \"addition\";\n    }\n\n    else if (operator != \"\") {\n        displayValue = operate(operator, value1, value2);\n        document.getElementById(\"display\").textContent = displayValue;\n        if (displayValue != undefined) {\n        value1 = parseInt(displayValue);\n        }\n        value2 = \"\";\n        displayValue = \"\";\n        operator = \"addition\";\n    }\n})\n\ndocument.getElementById(\"subtraction\").addEventListener('click', () => {\n    \/\/highlight button\n    document.getElementById(\"subtraction\").style.backgroundColor = \"darkgrey\";\n\n    \/\/reset other buttons to default\n    document.getElementById(\"addition\").style.backgroundColor = \"\";\n    document.getElementById(\"multiplication\").style.backgroundColor = \"\";\n    document.getElementById(\"division\").style.backgroundColor = \"\";\n\n    \/\/store the value\n    if (value1 == \"\") {\n        value1 = parseInt(displayValue);\n        displayValue = \"\";\n    }\n\n    else if (value1 != \"\") {\n        if (displayValue == \"\") {\n            operator = \"subtraction\";\n            return;\n        }\n        value2 = parseInt(displayValue);\n        displayValue = \"\";\n    }\n\n    \/\/call operate function\n    if (operator == \"\") {\n        operator = \"subtraction\";\n    }\n\n    else if (operator != \"\") {\n        displayValue = operate(operator, value1, value2);\n        document.getElementById(\"display\").textContent = displayValue;\n        if (displayValue != undefined) {\n            value1 = parseInt(displayValue);\n            }\n        value2 = \"\";\n        displayValue = \"\";\n        operator = \"subtraction\";\n    }\n})\n\ndocument.getElementById(\"multiplication\").addEventListener('click', () => {\n    \/\/highlight button\n    document.getElementById(\"multiplication\").style.backgroundColor = \"darkgrey\";\n\n    \/\/reset other buttons to default\n    document.getElementById(\"addition\").style.backgroundColor = \"\";\n    document.getElementById(\"subtraction\").style.backgroundColor = \"\";\n    document.getElementById(\"division\").style.backgroundColor = \"\";\n\n    \/\/store the value\n    if (value1 == \"\") {\n        value1 = parseInt(displayValue);\n        displayValue = \"\";\n    }\n\n    else if (value1 != \"\") {\n        if (displayValue == \"\") {\n            operator = \"multiplication\";\n            return;\n        }\n        value2 = parseInt(displayValue);\n        displayValue = \"\";\n    }\n\n    \/\/call operate function\n    if (operator == \"\") {\n        operator = \"multiplication\";\n    }\n\n    else if (operator != \"\") {\n        displayValue = operate(operator, value1, value2);\n        document.getElementById(\"display\").textContent = displayValue;\n        if (displayValue != undefined) {\n            value1 = parseInt(displayValue);\n            }\n        value2 = \"\";\n        displayValue = \"\";\n        operator = \"multiplication\";\n    }\n})\n\ndocument.getElementById(\"division\").addEventListener('click', () => {\n    \/\/highlight button\n    document.getElementById(\"division\").style.backgroundColor = \"darkgrey\";\n\n    \/\/reset other buttons to default\n    document.getElementById(\"addition\").style.backgroundColor = \"\";\n    document.getElementById(\"multiplication\").style.backgroundColor = \"\";\n    document.getElementById(\"subtraction\").style.backgroundColor = \"\";\n\n    \/\/store the value\n    if (value1 == \"\") {\n        value1 = parseInt(displayValue);\n        displayValue = \"\";\n    }\n\n    else if (value1 != \"\") {\n        if (displayValue == \"\") {\n            operator = \"division\";\n            return;\n        }\n        value2 = parseInt(displayValue);\n        displayValue = \"\";\n    }\n\n    \/\/call operate function\n    if (operator == \"\") {\n        operator = \"division\";\n    }\n\n    else if (operator != \"\") {\n        displayValue = operate(operator, value1, value2);\n        document.getElementById(\"display\").textContent = displayValue;\n        if (displayValue != undefined) {\n            value1 = parseInt(displayValue);\n            }\n        value2 = \"\";\n        displayValue = \"\";\n        operator = \"division\";\n    }\n})\n\n\/\/equal button\ndocument.getElementById(\"equal\").addEventListener('click', () => {\n    if(value1 == \"\") {\n        alert(\"You have to type in something\");\n        return;\n    }\n    \n    if(operator == \"\") {\n        alert(\"You have to type in something\");\n        return;\n    }\n\n    value2 = parseInt(displayValue);\n    if (isNaN(value2)) {\n        alert(\"You have to type in something\");\n        return;\n    }\n\n    displayValue = operate(operator, value1, value2);\n    if (displayValue == undefined) {\n        displayValue = \"\";\n    }\n    document.getElementById(\"display\").textContent = displayValue;\n    value1 = displayValue;\n    value2 = \"\";\n    operator = \"\";\n    document.getElementById(\"subtraction\").style.backgroundColor = \"\";\n    document.getElementById(\"multiplication\").style.backgroundColor = \"\";\n    document.getElementById(\"division\").style.backgroundColor = \"\";\n    document.getElementById(\"addition\").style.backgroundColor = \"\";\n})\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Etch a Sketch Adjust the Grid Calculator clear =<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-temp1","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-240","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Etch a Sketch Adjust the Grid Calculator clear =","_links":{"self":[{"href":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/index.php?rest_route=\/wp\/v2\/pages\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=240"}],"version-history":[{"count":36,"href":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/index.php?rest_route=\/wp\/v2\/pages\/240\/revisions"}],"predecessor-version":[{"id":383,"href":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/index.php?rest_route=\/wp\/v2\/pages\/240\/revisions\/383"}],"wp:attachment":[{"href":"https:\/\/spachinger-noah.web.kslinz.at\/spachingern\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}