Thursday, April 18, 2024

Css Class 1

Live HTML & CSS Editor
HTML & CSS Editor
Output
First CSS Class

Welcome to My First CSS Class

This paragraph is styled using the .first-class CSS class.

- No comments:
Labels:

Friday, November 10, 2023

Mobile

Calendar
November 2023
Sun Mon Tue Wed Thu Fri Sat
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
- No comments:

Source Code of the Calculator

Scientific Calculator Source Code

Scientific Calculator Source Code

        

<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Scientific Calculator</title>
    <style>
        .calculator {
            background: #444; /* Darker background color */
            border: 2px solid #555; /* Dark border */
            border-radius: 10px;
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
            max-width: 300px;
            margin: auto;
            padding: 20px;
        }
        input, button {
            width: 50px;
            height: 50px;
            font-size: 20px;
            margin: 5px;
            border-radius: 5px;
            border: 1px solid #666; /* Darker border */
        }
        input {
            width: calc(100% - 20px);
            padding: 10px;
            font-size: 24px;
            border: none;
            border-radius: 5px;
            text-align: right;
            margin-bottom: 10px;
            background-color: #555; /* Darker input background color */
            color: #fff; /* Light text color */
        }
        button.C {
            background-color: #FF5733;
            color: white;
        }
        button.C:hover {
            background-color: #E74C3C;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #666; /* Darker hover color */
            color: #a52a2a; /* Brown text color */
            cursor: pointer;
        }
       
    </style>
</head>
<body id="a">
    <div class="calculator">
        <input id="display" readonly="" type="text" />
        <br />
        <button onclick="appendFunction('Math.sqrt')">&#8730;</button>
        <button onclick="appendFunction('Math.pow')">x<sup>y</sup></button>
        <button onclick="appendFunction('Math.sin')">sin</button>
        <button onclick="appendFunction('Math.cos')">cos</button>
        <br />
        <button onclick="appendFunction('Math.tan')">tan</button>
        <button onclick="appendFunction('Math.log')">log</button>
        <button onclick="appendFunction('Math.exp')">exp</button>
        <button onclick="appendFunction('Math.PI')">π</button>
        <br />
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="appendOperator('+')">+</button>
        <br />
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="appendOperator('-')">-</button>
        <br />
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="appendOperator('*')">*</button>
        <br />
        <button onclick="appendNumber('0')">0</button>
        <button onclick="appendDecimal()">.</button>
        <button onclick="calculateResult()">=</button>
        <button onclick="appendOperator('/')">/</button>
        <br />
        <button onclick="backspace()">&#9003;</button>
        <button onclick="calculatePercentage()">%</button>
        <button onclick="appendBraces('(')"> ( </button>
        <button onclick="appendBraces(')')"> ) </button>
        <button class="C" onclick="clearDisplay()">C</button>
    </div>
    <script>
        function appendNumber(number) {
            document.getElementById('display').value += number;
        }
        function appendOperator(operator) {
            document.getElementById('display').value += operator;
        }
        function appendDecimal() {
            var displayValue = document.getElementById('display').value;
            if (displayValue.indexOf('.') === -1) {
                document.getElementById('display').value += '.';
            }
        }
        function appendFunction(func) {
            document.getElementById('display').value += func + '(';
        }
        function clearDisplay() {
            document.getElementById('display').value = '';
        }
        function backspace() {
            var displayValue = document.getElementById('display').value;
            document.getElementById('display').value = displayValue.slice(0, -1);
        }
        function calculateResult() {
            try {
                var displayValue = document.getElementById('display').value;
                var result = eval(displayValue);
                document.getElementById('display').value = result;
            } catch (error) {
                document.getElementById('display').value = 'Error';
            }
        }
        function calculatePercentage() {
            var displayValue = document.getElementById('display').value;
            document.getElementById('display').value = eval(displayValue + '/100');
        }
        function appendBraces(braces) {
            document.getElementById('display').value += braces;
        }
    </script>
</body>
</html>
- No comments:

Wednesday, November 8, 2023

Sample Calculater Preview

Scientific Calculator










- No comments:
Labels: , ,

Sunday, July 9, 2023

EX (1.2) P6


- No comments:
Labels: , , ,

EX (1.2) P5


- No comments:
Labels: , , ,

Saturday, July 8, 2023

EX (1.2) P4


- No comments:
Labels: , , ,
Subscribe to: Posts (Atom)

Recent added

Open IDX

Open DOCX Vs Code Click Below to Open Editor Open Editor ...