11.Scientific Calculator

PHOTO

Thu Oct 31 2024 16:24:17 GMT+0000 (Coordinated Universal Time)

Saved by @varuntej #html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Scientific Calculator</title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            background-color: #f4f4f9; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            margin: 0; 
        } 
        .calculator { 
            width: 300px; 
            background: #fff; 
            padding: 20px; 
            border-radius: 10px; 
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
        } 
        .display { 
            width: 100%; 
            height: 50px; 
            margin-bottom: 10px; 
            font-size: 1.5rem; 
            text-align: right; 
            border: 1px solid #ddd; 
            border-radius: 5px; 
            padding: 5px; 
        } 
        .buttons { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 10px; 
        } 
        .button { 
            height: 50px; 
            background: #2196f3; 
            color: white; 
            font-size: 1.2rem; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            transition: background 0.3s; 
        } 
        .button:hover { 
            background: #1976d2; 
        } 
        .button.clear { 
            background: #f44336; 
        } 
        .button.clear:hover { 
            background: #d32f2f; 
        } 
    </style> 
</head> 
<body> 
    <div class="calculator"> 
        <input type="text" id="display" class="display" disabled> 
        <div class="buttons"> 
            <button class="button" onclick="append('7')">7</button> 
            <button class="button" onclick="append('8')">8</button> 
            <button class="button" onclick="append('9')">9</button> 
            <button class="button" onclick="append('/')">/</button> 
             
            <button class="button" onclick="append('4')">4</button> 
            <button class="button" onclick="append('5')">5</button> 
            <button class="button" onclick="append('6')">6</button> 
            <button class="button" onclick="append('*')">*</button> 
             
            <button class="button" onclick="append('1')">1</button> 
            <button class="button" onclick="append('2')">2</button> 
            <button class="button" onclick="append('3')">3</button> 
            <button class="button" onclick="append('-')">-</button> 
             
            <button class="button" onclick="append('0')">0</button> 
            <button class="button" onclick="append('.')">.</button> 
            <button class="button" onclick="calculate()">=</button> 
            <button class="button" onclick="append('+')">+</button> 
             
            <button class="button clear" onclick="clearDisplay()">C</button> 
             
            <button class="button" onclick="append('%')">%</button> 
        </div> 
    </div> 
    <script> 
        const display = document.getElementById('display'); 
         
        function append(value) { 
            display.value += value; 
        } 
         
        function calculate() { 
            try { 
                display.value = eval(display.value); 
            } catch (error) { 
                display.value = "Error"; 
            } 
        } 
         
        function clearDisplay() { 
            display.value = ''; 
        } 
    </script> 
</body> 
</html>

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

WT-LAB

@varuntej

1. Create a web page using the advanced features of CSS Grid. Apply transitions and animations to the contents of the web page. 2. Create a web page using the advanced features of CSS Flexbox. Apply transitions and animations to the contents of the web page. 3. Demonstrate pop-up box alerts, confirm, and prompt using JavaScript. 4. Demonstrate Responsive Web Design using Media Queries to create a webpage. 5. Write a JavaScript program to demonstrate the working of callbacks, promises, and async/await. 6. Write an XML file that displays book information with the following fields: Title of the book, Author Name, ISBN number, Publisher name, Edition, and Price. Define a Document Type Definition (DTD) to validate the XML document created above. 7. Write an XML file that displays book information with the following fields: Title of the book, Author Name, ISBN number, Publisher name, Edition, and Price. Define an XML schema to validate the XML document created above. 8. Write a Java application to validate the XML document using the DOM parser. 14. Write a java program to establish connection to a database and execute simple SQL queries. 10. Write a Java program to access the metadata of an SQL database. 15. Write a java program to demonstrate the usage of JDBC in performing various DML statements. Use Prepared statements Demonstrate Servlet Lifecyle by implementing Servlet Interface. Demonstrate Creation of Servlet program using Http Servlet class. 11.Scientific Calculator 9. Write a Java application to validate the XML document using the SAX parser. 16. Write a java based application to demonstrate the Scrollable Result sets. 12. Demonstrate Servlet Lifecyle by implementing Servlet Interface. 13. Demonstrate Creation of Servlet program using Http Servlet class. 17. Write a program to accept request parameters from a form and generate the response.

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#html #jquery #css #navbar

Underline active navbar link

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link

#html #javascript

Stop YouTube Embedded Video from Playing with Javascript

<main>
	<iframe src="https://www.youtube.com/embed/KQetemT1sWc"></iframe>   
    <a href="#!" onclick="stopThis()">Stop Playing</a>
</main>

<script>
  function stopThis(){
      var iframe = container.getElementsByTagName("iframe")[0];
      var url = iframe.getAttribute('src');
      iframe.setAttribute('src', '');
      iframe.setAttribute('src', url);
  }
</script>

C:/Users/intel/Desktop/dig%20fest/Mohd%20Midhlaj%20A%20A%206E%20Website%20Building/index.html

Bootstrap Starter Template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Background Image That Doesn't Scroll on Webpage

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

How to Create a Table in HTML

<table>
  <tr>
    <th>Name</th>
    <th>Phone</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Khan</td>
    <td>12345</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Jamal</td>
    <td>54321</td>
    <td>45</td>
  </tr>
</table>

HTML : Responsive Navbar

<!DOCTYPE html>
<!-- Created By TopArchives - www.toparchives.us -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Navbar | TopArchives</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <nav>
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">TopArchives</label>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </nav>
    <section></section>
  </body>
</html>
<!-- DON'T REMOVE CREDITS -->

Bootstrap Fixed Floating Buttons

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-lg red">
    <i class="fas fa-pencil-alt"></i>
  </a>

  <ul class="list-unstyled">
    <li><a class="btn-floating red"><i class="fas fa-star"></i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="fas fa-user"></i></a></li>
    <li><a class="btn-floating green"><i class="fas fa-envelope"></i></a></li>
    <li><a class="btn-floating blue"><i class="fas fa-shopping-cart"></i></a></li>
  </ul>
</div>

#javascript #eventos #mouse #css #html

mover un elemento junto al mouse, dentro de un div (eventos de mouse)

let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>

Component library css link

<link rel="stylesheet" href="https://grapheneui.netlify.app/Components/components.css" />

#html #alpinejs

Set boolean to true after scrolling on page using Alpine.js

<div
    class="justify-between py-6 md:flex"
    x-data="{
        open: false,
        hasScrolled: false,
        reactOnScroll() {
            if (this.$el.getBoundingClientRect().top < 120 && window.scrollY > 120) {
                this.hasScrolled = true;
            } else {
                this.hasScrolled = false;
            }
        } 
    }"
    x-init="reactOnScroll()"
    @scroll.window="reactOnScroll()"
>

#html #basics #htmltags #seo

HTML Heading Tags <h1> to <h6>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

#html #javascript #jsfunctions #dom #dommanipulation

How to change any attribute of a HTML element

<html>	
   
   <input id="contact" name="address">
 
 <script>

    document.getElementById("contact").attribute = "phone";
	
    //ALTERNATIVE METHOD TO CHANGE
    document.getElementById("contact").setAttribute('name', 'phone');	

  </script>

</html>

Browse more snippets >>