Untitled

 avatar
unknown
plain_text
12 days ago
9.7 kB
2
Indexable
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>সুপার ক্যালকুলেটর</title>
<style>
  body {
        display: flex;
            justify-content: center;
                align-items: center;
                    height: 100vh;
                        background: #1a1a2e;
                            font-family: 'Segoe UI', sans-serif;
                                margin: 0;
  }
    .calc {
            background: #16213e;
                padding: 20px;
                    border-radius: 20px;
                        box-shadow: 0 8px 30px rgba(0,0,0,0.4);
                            width: 320px;
    }
      #display {
            width: 100%;
                height: 70px;
                    background: #0f172a;
                        color: #fff;
                            font-size: 32px;
                                text-align: right;
                                    border: none;
                                        border-radius: 12px;
                                            padding: 10px;
                                                box-sizing: border-box;
                                                    margin-bottom: 15px;
      }
        .buttons {
                display: grid;
                    grid-template-columns: repeat(4, 1fr);
                        gap: 12px;
        }
          button {
                height: 65px;
                    font-size: 22px;
                        border: none;
                            border-radius: 15px;
                                cursor: pointer;
                                    background: #334155;
                                        color: white;
                                            transition: 0.2s;
          }
            button:hover {
                    background: #475569;
            }
              .op {
                    background: #f97316;
              }
                .op:hover {
                        background: #fb923c;
                }
                  .eq {
                        background: #22c55e;
                            grid-column: span 2;
                  }
                    .eq:hover {
                            background: #4ade80;
                    }
                      .clr {
                            background: #ef4444;
                      }
                      </style>
                      </head>
                      <body>
                      <div class="calc">
                        <input type="text" id="display" readonly>
                          <div class="buttons">
                              <button class="clr" onclick="clearDisplay()">C</button>
                                  <button onclick="del()">⌫</button>
                                      <button onclick="append('%')">%</button>
                                          <button class="op" onclick="append('/')">÷</button>
                                              
                                                  <button onclick="append('7')">7</button>
                                                      <button onclick="append('8')">8</button>
                                                          <button onclick="append('9')">9</button>
                                                              <button class="op" onclick="append('*')">×</button>
                                                                  
                                                                      <button onclick="append('4')">4</button>
                                                                          <button onclick="append('5')">5</button>
                                                                              <button onclick="append('6')">6</button>
                                                                                  <button class="op" onclick="append('-')">-</button>
                                                                                      
                                                                                          <button onclick="append('1')">1</button>
                                                                                              <button onclick="append('2')">2</button>
                                                                                                  <button onclick="append('3')">3</button>
                                                                                                      <button class="op" onclick="append('+')">+</button>
                                                                                                          
                                                                                                              <button onclick="append('0')">0</button>
                                                                                                                  <button onclick="append('.')">.</button>
                                                                                                                      <button class="eq" onclick="calculate()">=</button>
                                                                                                                        </div>
                                                                                                                        </div>

                                                                                                                        <script>
                                                                                                                          let display = document.getElementById('display');

                                                                                                                            function append(val) {
                                                                                                                                    display.value += val;
                                                                                                                            }

                                                                                                                              function clearDisplay() {
                                                                                                                                    display.value = '';
                                                                                                                              }

                                                                                                                                function del() {
                                                                                                                                        display.value = display.value.slice(0, -1);
                                                                                                                                }

                                                                                                                                  function calculate() {
                                                                                                                                        try {
                                                                                                                                                  display.value = eval(display.value);
                                                                                                                                        } catch {
                                                                                                                                                  display.value = 'Error';
                                                                                                                                        }
                                                                                                                                  }
                                                                                                                                  </script>
                                                                                                                                  </body>
                                                                                                                                  </html>

                                                                                                                                  
                                                                                                                                        }
                                                                                                                                        }
                                                                                                                                  }
                                                                                                                                }
                                                                                                                              }
                                                                                                                            }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
Editor is loading...
Leave a Comment