{"id":144,"date":"2026-05-01T13:56:15","date_gmt":"2026-05-01T13:56:15","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/l_rankins\/?p=144"},"modified":"2026-05-01T13:56:15","modified_gmt":"2026-05-01T13:56:15","slug":"26-calcmaddness","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/l_rankins\/2026\/05\/01\/26-calcmaddness\/","title":{"rendered":"26: CALCMADDNESS"},"content":{"rendered":"\n

i made a calculator<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <link rel=\"stylesheet\" href=\"style.css\" \/>\n    <title>Calculator - By Code Traversal<\/title>\n  <\/head>\n  <body>\n    <div class=\"container\">\n      <div class=\"calculator\">\n        <input type=\"text\" id=\"inputBox\" placeholder=\"0\" \/>\n        <div>\n          <button class=\"button operator\">AC<\/button>\n          <button class=\"button operator\">DEL<\/button>\n          <button class=\"button operator\">%<\/button>\n          <button class=\"button operator\">\/<\/button>\n        <\/div>\n        <div>\n          <button class=\"button\">7<\/button>\n          <button class=\"button\">8<\/button>\n          <button class=\"button\">9<\/button>\n          <button class=\"button operator\">*<\/button>\n        <\/div>\n        <div>\n          <button class=\"button\">4<\/button>\n          <button class=\"button\">5<\/button>\n          <button class=\"button\">6<\/button>\n          <button class=\"button operator\">-<\/button>\n        <\/div>\n        <div>\n          <button class=\"button\">1<\/button>\n          <button class=\"button\">2<\/button>\n          <button class=\"button\">3<\/button>\n          <button class=\"button operator\">+<\/button>\n        <\/div>\n\n        <div>\n          <button class=\"button\">00<\/button>\n          <button class=\"button\">0<\/button>\n          <button class=\"button\">.<\/button>\n          <button class=\"button equalBtn\">=<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <script src=\"script.js\"><\/script>\n  <\/body><\/code><\/pre>\n\n\n\n
This is the index<\/strong><\/p>\n\n\n\n
let input = document.getElementById('inputBox');\nlet buttons = document.querySelectorAll('button');\n\nlet string = \"\";\nlet arr = Array.from(buttons);\narr.forEach(button => {\n    button.addEventListener('click', (e) =>{\n        if(e.target.innerHTML == '='){\n            string = eval(string);\n            input.value = string;\n        }\n\n        else if(e.target.innerHTML == 'AC'){\n            string = \"\";\n            input.value = string;\n        }\n        else if(e.target.innerHTML == 'DEL'){\n            string = string.substring(0, string.length-1);\n            input.value = string;\n        }\n        else{\n            string += e.target.innerHTML;\n            input.value = string;\n        }\n        \n    })\n})<\/code><\/pre>\n\n\n\n
This is the code that makes the calculator work<\/strong><\/p>\n\n\n\n
@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@500&display=swap');\n\n*{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Poppins', sans-serif;\n}\n\nbody{\n    width: 100%;\n    height: 100vh;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: linear-gradient(45deg, #0a0a0a, #3a4452);\n}\n\n.calculator{\n    border: 1px solid #717377;\n    padding: 20px;\n    border-radius: 16px;\n    background: transparent;\n    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);\n\n}\n\ninput{\n    width: 320px;\n    border: none;\n    padding: 24px;\n    margin: 10px;\n    background: transparent;\n    box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);\n    font-size: 40px;\n    text-align: right;\n    cursor: pointer;\n    color: #ffffff;\n}\n\ninput::placeholder{\n    color: #ffffff;\n}\n\nbutton{\n    border: none;\n    width: 60px;\n    height: 60px;\n    margin: 10px;\n    border-radius: 50%;\n    background: transparent;\n    color: #ffffff;\n    font-size: 20px;\n    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);\n    cursor: pointer;\n}\n\n.equalBtn{\n    background-color: #fb7c14;\n}\n\n.operator{\n    color: #6dee0a;\n}<\/code><\/pre>\n\n\n\n
This is the style<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
i made a calculator This is the index This is the code that makes the calculator work This is the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-144","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/144\/revisions"}],"predecessor-version":[{"id":145,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/144\/revisions\/145"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/media?parent=144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/categories?post=144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/tags?post=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}