Blogger için Çok Şık Hesap Makinesi Oluşturma

 

Bugün sizlere çok Blogger için çok şık Hesap Makinesi oluşturmayı anlatacağım.

Öncelikle aşağıda ki CSS kodlarını temanızda bulunan </b:skin> kodunun üzerine geleek şekilde ekleyin.

      <style>
  /* HTML Calculator by Tech & Fun Zone */
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900');
.calc {
  display: flex;
  flex-direction : column;
  width: 330px;
  height: 600px;
  margin : 50px;
  background-color: #080636;
  background-image: linear-gradient(315deg, #080636 0%, #414141 104%);
  border-radius: 20px;
  box-shadow : 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.calc-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40px;
  align-items: center;
}

.calc-title-span {
  color: #17e82e;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 20px;
}

.calc-title-hr {
  width: 200px;
  height: 10px;
  background-color: #17e82e;
  opacity: 0.8;
}

.calc-display {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100px;
  color: #fff; 
}


.secondary-display{
  font-size:20px;
  opacity : 0.8;
  overflow-x : hidden;
}
/* ScrollBar Style*/
.secondary-display::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.secondary-display::-webkit-scrollbar {
  height : 4px;
	background-color: #bdbdbd;
  opacity: 0.7;
}
.secondary-display::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
	  border: 3px solid #555555;
}

.primary-display::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.primary-display::-webkit-scrollbar {
  height : 4px;
	background-color: #bdbdbd;
  opacity: 0.7;
}
.primary-display::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
	  border: 3px solid #555555;
}

.calc-display-hr {
  width: 250px;
  height: 2px;
  margin-top: 10px;
  align-self: center;
  background-color: #bdbdbd;
  opacity: 0.4;
}

.calc-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 20px;
}
.calc-btn-primary {
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  margin: 10px 5px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 30px;
  width: 60px;
  height: 60px;
  border: 2px solid #616161;
  border-radius: 100%;
  cursor: pointer;
  box-shadow: 2px 4px 11px #141414, -2px -4px 11px #000;
}
.calc-btn-primary:hover {
box-shadow: inset 3px 5px 10px #141414, inset -3px -5px 10px #000;
border: 2px solid rgba(255, 255, 255, 0.2);
font-size: 32px;
}

.btn-bg{
  background-color:#424242 !important;
  opacity : 0.9;
  border : none !important;
}
.btn-bg-equal{
  background-color:#ff7555 !important;
  border : none !important;
}
.calc-btn-primary:focus {
  outline:none
}
.calc-btn-primary:active {
  transform: scale(0.9);
}

.calc-btn-clear {
  margin: 20px 5px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 30px;
  padding: 10px 90px;
  border: 3px solid #17e82e;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 2px 4px 11px #141414, -2px -4px 11px #000;
}
.calc-btn-clear:hover {
box-shadow: inset 3px 5px 10px #17e82e, inset -3px -5px 10px #000;
border: 2px solid rgba(255, 255, 255, 0.2);
font-size: 32px;
}
.calc-btn-clear:active {
  transform: scale(0.9);
  }
  @media screen and (min-width:641px){.calc{max-width:97%}</style>
  

Daha sonra yine aşağıda ki JavaScript kodlarını temanızda bulunan </body> kodunun üzerine gelecek şekilde ekleyin.

      <script>
 console.clear();
const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");
let currentString = '';
let resultString = '';
let evalResult;
let lastOperator = false;
const primaryRender = (value) => {
  primaryDisplay.innerText = value;
}

const secondaryRender = (value) => {
  secondaryDisplay.innerText = value;
}
secondaryRender('0');
primaryRender('0');

const evaluate = (e) => {
  let width = secondaryDisplay.scrollWidth;
  if(width > 310){
    secondaryDisplay.style.overflowX = 'scroll';
    secondaryDisplay.scrollLeft = width;
  }
  else{
    secondaryDisplay.style.overflowX = 'hidden';
  }
  
  let value = e.target.innerText;
  if (value >= '0' && value <= '9') {
    let len = currentString.length;
    let lastOp = isOp(currentString[len - 1]);
    if (lastOperator) {
      currentString = currentString.concat(value);
      resultString = "".concat(value);
      secondaryRender(currentString);
      primaryRender(resultString);
      lastOperator = false;
    } else {
      currentString = currentString.concat(value);
      resultString = resultString.concat(value);
      secondaryRender(currentString);
      primaryRender(resultString);
    }

  } else if (isOp(value)) {
    if (currentString.length == 0 && (value == '/' || value == '*'));
    else {
      resultString = "";
      primaryRender(value);
      lastOperator = true;
      let len = currentString.length;
      let lastOp = isOp(currentString[len - 1]);
      if (lastOp) {
        currentString = currentString.substr(0, len - 1) + value;
        console.log(currentString);
        secondaryRender(currentString);
        decimal = false;
      } else {
        currentString = currentString.concat(value);
        secondaryRender(currentString);
      }
    }

  } else if (value == '.') {
    if (resultString.indexOf('.') < 0) {
      if (resultString.length == 0) {
        currentString = currentString.concat('0.');
        resultString = resultString.concat('0.');
        secondaryRender(currentString);
        primaryRender(resultString);
      } else {
        currentString = currentString.concat(value);
        resultString = resultString.concat(value);
        secondaryRender(currentString);
        primaryRender(resultString);
      }
    }
  } else if (value == '=') {
    secondaryDisplay.style.overflowX = 'hidden';
    
    if (currentString.length == 0);
    else {
      let result = eval(currentString);
      resultString = '';
      currentString = '';
      secondaryRender('0');
      primaryRender(result);
    }
  } else if (value == 'clear') {
    currentString = '';
    resultString = '';
    secondaryRender('0');
    primaryRender('0');
  }
    let width1 = primaryDisplay.scrollWidth;
    if(width1 > 310){
      primaryDisplay.style.overflowX = 'scroll';
    }
    else{
      primaryDisplay.style.overflowX = 'hidden';
    }
}


//Adding Event Listener to all buttons
for (let elem of btns.children) {
  elem.addEventListener('click', evaluate);
}

function isOp(value) {
  return (/\+|\-|\*|\//).test(value);
}
</script>
  

Son olarak aşağıda ki HTML kodlarını Hesap Maknesinin sitenizde nerede görünmesini istiyorsanız oraya ekleyin.

      <div class="calc">
  <div class="calc-title">
    <span class="calc-title-span">
      HTML Calculator
    </span>
    <div class="calc-title-hr"></div>
  </div>
  <div class="calc-display">
    <div class="calc-display-span secondary-display" id="secondary-display">
    </div>
    <div class="calc-display-span primary-display" id="display">
    </div>
  </div>
  <div class="calc-display-hr"></div>
  <div class="calc-btn" id="btn">
    <button class="calc-btn-primary" id="seven">7</button>
    <button class="calc-btn-primary" id="eight">8</button>
    <button class="calc-btn-primary" id="nine">9</button>
    <button class="calc-btn-primary btn-bg" id="divide">/</button>
    <button class="calc-btn-primary" id="four">4</button>
    <button class="calc-btn-primary" id="five">5</button>
    <button class="calc-btn-primary" id="six">6</button>
    <button class="calc-btn-primary btn-bg" id="multiply">*</button>
    <button class="calc-btn-primary" id="one">1</button>
    <button class="calc-btn-primary" id="two">2</button>
    <button class="calc-btn-primary" id="three">3</button>
    <button class="calc-btn-primary btn-bg" id="add">+</button>
    <button class="calc-btn-primary btn-bg" id="decimal">.</button>
    <button class="calc-btn-primary" id="zero">0</button>
    <button class="calc-btn-primary btn-bg-equal" id="equals">=</button>
    <button class="calc-btn-primary btn-bg" id="subtract">-</button>
    <button class="calc-btn-clear" id="clear">clear</button>
  </div>
</div>
  

DEMO SAYFASI