Skip to main content

কিভাবে HTML, CSS এবং JavaScript ব্যবহার করে একটি Calculator তৈরি করবেন

 HTML, CSS এবং JavaScript ব্যবহার করে একটি Calculator তৈরি করতে পারেন। 

Calculator

Html(index.html)

<!DOCTYPE html>

<html>

<head>

  <title>Calculator</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="container">

    <h1>Calculator</h1>

    <div class="calculator">

      <input type="text" id="result">

      <div class="buttons">

        <button onclick="appendToResult('7')">7</button>

        <button onclick="appendToResult('8')">8</button>

        <button onclick="appendToResult('9')">9</button>

        <button class="operator" onclick="appendToResult('+')">+</button>

        <button onclick="appendToResult('4')">4</button>

        <button onclick="appendToResult('5')">5</button>

        <button onclick="appendToResult('6')">6</button>

        <button class="operator" onclick="appendToResult('-')">-</button>

        <button onclick="appendToResult('1')">1</button>

        <button onclick="appendToResult('2')">2</button>

        <button onclick="appendToResult('3')">3</button>

        <button class="operator" onclick="appendToResult('*')">*</button>

        <button onclick="appendToResult('0')">0</button>

        <button class="clear" onclick="clearResult()">C</button>

        <button class="operator" onclick="appendToResult('/')">/</button>

        <button class="equal" onclick="calculateResult()">=</button>

      </div>

    </div>

  </div>

<script src="script.js"></script>

</body>

</html>

CSS(style.css)

 .container {
      max-width: 350px;
      margin: 10%;
    }

    .calculator {
      background-color: #f2f2f2;
      padding: 10px;
      border-radius: 5px;
    }
    h1{
        text-align: center;
    }
    .calculator input[type="text"] {
      width: 92%;
      padding: 10px;
      margin-bottom: 10px;
      font-size: 18px;
    }

    .calculator .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 5px;
    }

    .calculator .buttons button {
      padding: 15px;
      font-size: 18px;
      background-color: #fff;
      border: none;
      cursor: pointer;
    }

    .calculator .buttons .operator {
      background-color: #ff9800;
      color: #fff;
    }

    .calculator .buttons .equal {
      background-color: #4caf50;
      color: #fff;
      grid-column: span 4;
    }
    .calculator .buttons .clear {
      background-color: brown;
      color: #fff;
      grid-column: span 2;
    }

Javascript(script.js)

function appendToResult(value) {
      document.getElementById('result').value += value;
    
    }

    function clearResult() {
      document.getElementById('result').value = '';
    }

    function calculateResult() {
      const result = document.getElementById('result').value;
      const calculatedResult = eval(result);
      document.getElementById('result').value = calculatedResult;
    }
    function factorial(){
            n=Number(document.forms[0].elements[1].value);
            sum=1;
            for(i=1;i<=n;i++){
                sum*=i;
            }
            document.getElementById("div1").innerHTML=sum;
        }
Labels:

Comments

Post a Comment

Popular posts from this blog

How to Create Pie and Doughnut Charts in Excel

Creating charts in Excel can enhance your data presentation and make it easier to understand at a glance. Among the most popular chart types are pie and doughnut charts, which visually represent data portions as slices or rings. In this guide, I'll show you how to create both pie and doughnut charts in Excel, covering everything from setting up your data to customizing the look and feel of your charts. Watch this video Section 1: What Are Pie and Doughnut Charts? Pie Chart: A pie chart is a circular chart divided into slices to illustrate numerical proportions. Each slice represents a percentage of the whole, making pie charts perfect for showing data distributions. Doughnut Chart: A doughnut chart is similar to a pie chart but has a blank center. It’s great for displaying multiple series and comparing different sets of data within one chart. Section 2: Setting Up Your Data for a Pie Chart Before creating any chart, it’s crucial to format your data in a way Excel can interpret: ...
Post a Comment
Read more »

How to Create a Salary Sheet in Excel

Learn how to create a professional salary sheet in Excel with this step-by-step tutorial. Whether you're a beginner or looking to improve your Excel skills, this guide covers everything from setting up basic salary calculations to organizing deductions, allowances, and generating a clean, automated salary structure. Watch this video
Post a Comment
Read more »

Javascript এ একটি সংখ্যা বিজোড় বা জোড় কিনা তা কীভাবে check করবেন ?

  সংখ্যা পদ্ধতিতে যে কোন স্বাভাবিক সংখ্যাকে (2n + 1) আকারে প্রকাশ করা যায় তাকে বিজোড় সংখ্যা বলা হয় এবং সংখ্যাটিকে 2n আকারে প্রকাশ করা গেলে তাকে জোড় সংখ্যা বলে। অন্যভাবে বলা যায়, যে সংখ্যাগুলি 2 দ্বারা সম্পূর্ণরূপে বিভাজ্য (2 দ্বারা ভাগ করলে অবশিষ্ট 0 থাকে ) জোড় সংখ্যা হিসাবে পরিচিত এবং যেগুলি 2 দ্বারা ভাগ করলে একটি ভাগশেষ 1 রেখে যায় তাদের বিজোড় সংখ্যা বলা হয়। Enter a number: Check HTML (index.html): <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Even or Odd Checker</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="container">         <label for="numberInput">Enter a number:</label>         <input type="number" id="numb...
Post a Comment
Read more »