CASIO

WST-007

Html

<div id="calculator">
   <div id="screen">
      <span class="cursor">|</span>
   </div>
   <div id="buttons">
      <div id="branding">
         <h1>CASIO</h1>
         <div id="model">
            <small>WST-007</small>
         </div>
      </div>
      <button class="btn" id="backspace-btn" data-value="Backspace">&#8678;</button>
      <button class="btn" data-value="MC">MC</button>
      <button class="btn" data-value="%">%</button>
      <button class="btn" data-value="/">&divide;</button>
      <button class="btn" data-value="*">&times;</button>
      <button class="btn btn-grey" data-value="7" accesskey="7">7</button>
      <button class="btn btn-grey" data-value="8" accesskey="8">8</button>
      <button class="btn btn-grey" data-value="9" accesskey="9">9</button>
      <button class="btn btn-grey" data-value="-" accesskey="-">-</button>
      <button class="btn btn-grey" data-value="4" accesskey="4">4</button>
      <button class="btn btn-grey" data-value="5" accesskey="5">5</button>
      <button class="btn btn-grey" data-value="6" accesskey="6">6</button>
      <button class="btn btn-grey" data-value="+" accesskey="+">+</button>
      <button class="btn btn-grey" data-value="1" accesskey="1">1</button>
      <button class="btn btn-grey" data-value="2" accesskey="2">2</button>
      <button class="btn btn-grey" data-value="3" accesskey="3">3</button>
      <button class="btn" id="equals-btn" data-value="=" accesskey="=">=</button>
      <button class="btn btn-grey" id="zero-btn" data-value="0" accesskey="0">0</button>
      <button class="btn btn-grey" data-value="." accesskey=".">.</button>
   </div>
</div>

Css

body {
   margin: 0;
   background: #f4757e;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align:center;
   min-height: 100vh;
   font-family: "Montserrat", sans-serif;
   user-select: none;
}

#calculator {
   background: #232526;
   background: -webkit-linear-gradient(to right, #414345, #232526);
   background: linear-gradient(to right, #414345, #232526);
   width: 420px;
   height: 600px;
   border-radius: 20px;
   box-shadow: 5px 5px 10px #232526;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

#calculator #screen {
   background: #a2af77;
   height: 20%;
   width: 85%;
   margin: auto;
   margin-bottom: 0;
   border-radius: 10px;
   -webkit-box-shadow: inset 0px 0px 16px -2px rgba(35, 37, 38, 0.75);
   -moz-box-shadow: inset 0px 0px 16px -2px rgba(35, 37, 38, 0.75);
   box-shadow: inset 0px 0px 16px -2px rgba(35, 37, 38, 0.75);
   box-sizing: border-box;
   padding: 15px;
   font-size: 45px;
   text-align: right;
   vertical-align: middle;
   line-height: 200%;
   font-family: "Montserrat", sans-serif;
   overflow: hidden;
   overflow-x: auto;
   white-space: nowrap;
}

#calculator #branding {
   grid-column: 1/3;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   justify-content: center;
}

#calculator #branding h1,
#calculator #branding small {
   margin: 0;
   padding: 0;
   color: #fff;
   font-family: Montserrat, sans-serif;
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 1);
}

#calculator #buttons {
   /*    background: #000; */
   overflow: visible;
   width: 85%;
   margin: auto;
   display: grid;
   grid-template-columns: repeat(4, 75px);
   grid-gap: 15px;
   justify-content: center;
}

button {
   cursor: pointer;
   border: none;
   color: #fff;
   text-align: center;
   font-size: 30px;
   padding: 5px;
   background: #000;
   border-radius: 5px;
   min-height: 50px;
   box-sizing: border-box;
   box-shadow: 2px 2px 3px 1px #232526;
   position: relative;
   left: 0;
   top: 0;
   transition: all 150ms;
   text-align: center;
   font-family: "Montserrat", sans-serif;
   display: flex;
   text-align: center;
   justify-content: center;
   align-items: center;
}

button:hover {
   left: 2px;
   top: 2px;
   box-shadow: 0px 0px 0px 0px #232526;
}

button:focus {
   outline: none;
}

button.btn-hover {
   left: 2px;
   top: 2px;
   box-shadow: 0px 0px 0px 0px #232526;
}

button.btn-grey {
   background: #5d5d5f;
}

button#backspace-btn {
   grid-column: 4/5;
   background: #f65532;
   background: #000;
   border-radius: 50%;
}

button#zero-btn {
   grid-column: 1/3;
}

button#equals-btn {
   grid-column: 4/5;
   grid-row: 5/7;
   background: #f65532;
}

#screen::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #f5f5f5;
}

#screen::-webkit-scrollbar {
   height: 5px;
   background-color: #f5f5f5;
}

#screen::-webkit-scrollbar-thumb {
   background-color: #000;
   background-image: -webkit-gradient(
      linear,
      0 0,
      0 100%,
      color-stop(0.5, rgba(255, 255, 255, 0.2)),
      color-stop(0.5, transparent),
      to(transparent)
   );
}

.cursor {
   animation-name: blink;
   animation-duration: 1s;
   animation-iteration-count: infinite;
}

@keyframes blink {
   0% {
      opacity: 1;
   }

50% {
      opacity: 0;
   }

100% {
      opacity: 1;
   }
}

Javascript

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css
  
  var buttons = document.querySelectorAll(".btn");
var screen = document.querySelector("#screen");
var keystroke = document.querySelector("audio");
var expression = "";
var operatorCheck = [];
var decimalPointCheck = [];
var mathError = false;
var cursor = '<span class="cursor">|</span>';

// Attach Click and transitionend event listeners to each calculator button
buttons.forEach(function(button) {
   button.addEventListener("click", enterValue);
   button.addEventListener("mousedown", playKeystroke);
   button.addEventListener("transitionend", removeTransitionEffect);
});

// Add Button Hover Transiition And Play Keystroke Sound To Allow For Keyboard Feedback.
document.body.addEventListener("keydown", e => {
   var button = document.querySelector(`button[data-value="${e.key}"]`);
   if (button) {
      playKeystroke();
      button.classList.add("btn-hover");
   } else if (e.key == "Enter") {
      playKeystroke();
      var button = document.querySelector('button[data-value="="]');
      button.classList.add("btn-hover");
   } else if (e.key == "Delete") {
      playKeystroke();
      var button = document.querySelector('button[data-value="MC"]');
      button.classList.add("btn-hover");
   }
});

// Remove Hover Transition effect when key is back up to it's original position
document.body.addEventListener("keyup", e => {
   // console.log(e.key);
   var button = document.querySelector(`button[data-value="${e.key}"]`);
   if (button) {
      button.click();
      button.classList.remove("btn-hover");
   } else if (e.key == "Enter") {
      var button = document.querySelector('button[data-value="="]');
      button.click();
      button.classList.remove("btn-hover");
   } else if (e.key == "Delete") {
      var button = document.querySelector('button[data-value="MC"]');
      button.click();
      button.classList.remove("btn-hover");
   }
});

// Remove Hover Transition Effect When Transition Ends
function removeTransitionEffect(e) {
   if (e.propertyName === "box-shadow" && e.elapsedTime === 0.15) {
      this.classList.remove("btn-hover");
   }
}

// Handle Inputs From Calculator
function enterValue(e) {
   // Get Pressed Key's Value
   var value = this.dataset.value;
   this.blur();
   if (screen.innerHTML == cursor || mathError === true) {
      screen.innerHTML = "";
      mathError = false;
   }
   // Handle the inputs based on their types
   if (!isNaN(value) || value == ".") {
      // If the value is a number or a decimal point
      if (value === "." && decimalPointCheck.length === 0) {
         decimalPointCheck.push(".");
         screen.innerHTML = screen.innerHTML.replace(cursor, "");
         screen.innerHTML += value;
         screen.innerHTML += cursor;
         expression += value;
         operatorCheck = [];
         // Always keeping the scroll position to the end of the screen
         screen.scrollLeft = screen.scrollWidth;
      } else if (value !== ".") {
         if (
            isNaN(expression.split("")[expression.length - 1]) &&
            expression.split("")[expression.length - 1] !== "."
         ) {
            decimalPointCheck = [];
         }
         screen.innerHTML = screen.innerHTML.replace(cursor, "");
         screen.innerHTML += value;
         screen.innerHTML += cursor;
         expression += value;
         operatorCheck = [];
      }
      // Always keeping the scroll position to the end of the screen
      screen.scrollLeft = screen.scrollWidth;
   } else if (isNaN(value) && value != ".") {
      //If value is not a decimal point or a number
      if (value == "MC") {
         // If the press key was the 'Memory Clear' Key
         screen.innerHTML = cursor;
         expression = "";
         value = "";
         operatorCheck = [];
         decimalPointCheck = [];
      } else if (value == "=") {
         // If the pressed key was the 'Equals To' key
         if (
            operatorCheck[operatorCheck.length - 1] &&
            expression.split("").length > 0
         ) {
            newExpression = expression.split("");
            newExpression[newExpression.length - 1] = "";
            expression = newExpression.join("");
            operatorCheck = [];
            decimalPointCheck = [];
         }
         var result = eval(expression);
         if (!isFinite(result) || isNaN(result)) {
            mathError = true;
            screen.innerHTML = "MATH ERROR";
            screen.scrollLeft = screen.scrollWidth;
            expression = "";
            return;
         }
         screen.innerHTML = result;
         expression = screen.innerHTML;
      } else if (value == "Backspace") {
         newExpression = expression.split("");
         var valueToRemove = newExpression[newExpression.length - 1];
         if (valueToRemove == ".") {
            decimalPointCheck = [];
         } else if (isNaN(valueToRemove)) {
            if (operatorCheck.length == 2) {
               operatorCheck.splice(1, 1);
            } else if (operatorCheck.length == 1) {
               operatorCheck.pop();
            }
         }
         newExpression[newExpression.length - 1] = "";
         expression = newExpression.join("");
         expression = expression;
         screen.innerHTML = expression;
         screen.innerHTML += cursor;
         // Always keeping the scroll position to the end of the screen
         screen.scrollLeft = screen.scrollWidth;
         if (screen.innerHTML == "") {
            screen.innerHTML = cursor;
         }
      } else {
         // If the pressed key was an Arithmetic Operation Key
         if (expression.length > 0) {
            if (operatorCheck.length === 0) {
               operatorCheck.push(value);
               expression += value;
               screen.innerHTML = screen.innerHTML.replace(cursor, "");
               screen.innerHTML += value;
               screen.innerHTML += cursor;
               // Always keeping the scroll position to the end of the screen
               screen.scrollLeft = screen.scrollWidth;
            } else {
               if (operatorCheck[0]) {
                  if (
                     (operatorCheck[operatorCheck.length - 1] == "*" ||
                        operatorCheck[operatorCheck.length - 1] == "/") &&
                     value == "-"
                  ) {
                     operatorCheck.push(value);
                     expression += value;
                     screen.innerHTML = screen.innerHTML.replace(cursor, "");
                     screen.innerHTML += value;
                     screen.innerHTML += cursor;
                     // Always keeping the scroll position to the end of the screen
                     screen.scrollLeft = screen.scrollWidth;
                  } else if (operatorCheck.length === 1) {
                     newExpression = expression.split("");
                     newExpression[newExpression.length - 1] = value;
                     expression = newExpression.join("");
                     operatorCheck = [];
                     operatorCheck.push(value);
                     expression = expression;
                     screen.innerHTML = screen.innerHTML.replace(cursor, "");
                     screen.innerHTML = expression;
                     screen.innerHTML += cursor;
                     // Always keeping the scroll position to the end of the screen
                     screen.scrollLeft = screen.scrollWidth;
                  }
               }
            }
         }
      }
   }
}

// Play the keystroke sound
function playKeystroke() {
   keystroke.currentTime = 0.2;
   keystroke.play();
}

Script Kalkulator Casio

CASIO

Post a Comment

Social Plugin

Popular Posts

Script Template MediumUi

Calculate Pixels To Viewport Height

Factorial Calculator

Unix Timestamp Converter

Labels

Knowledge

Comments

𝐌ąɖɛ ῳıɬɧ Ɩơ۷ɛ ɮʏ

Learning Services

Best Tools Service

Footer Copyright

#buttons=(Accept !) #days=(20)

Contact form

Script Kalkulator Casio

CASIO

You may like these posts

Post a Comment

Footer Copyright

#buttons=(Accept !) #days=(20)

Contact form