"use strict";

// ===============NUMBERS
const screen = document.querySelector(".screen");
const zero = document.querySelector(".zero");
const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
const four = document.querySelector(".four");
const five = document.querySelector(".five");
const six = document.querySelector(".six");
const seven = document.querySelector(".seven");
const eight = document.querySelector(".eight");
const nine = document.querySelector(".nine");
const buttons = document.querySelectorAll(".buttons");

// ==============OPERATORS
const dot = document.querySelector(".dot");
const equal = document.querySelector(".equal");
const plus = document.querySelector(".plus");
const minus = document.querySelector(".minus");
const multiplication = document.querySelector(".multiplication");
const division = document.querySelector(".division");
const clear = document.querySelector(".clear");
const openParenthesis = document.querySelector(".open-parenthesis");
const closeParenthesis = document.querySelector(".close-parenthesis");

// ACTUAL COMPUTING CALCULATOR
let currentInput = "";
let fullExpression = "";
let result = "";

three.addEventListener("click", function() {
  currentInput += "3";
  screen.textContent = currentInput;
  console.log(currentInput);
});
one.addEventListener("click", function() {
  currentInput += "1";
  screen.textContent = currentInput;
});
two.addEventListener("click", function() {
  currentInput += "2";
  screen.textContent = currentInput;
});
plus.addEventListener("click", function() {
  fullExpression = fullExpression + currentInput + " +";
  currentInput = " ";
  console.log(
    `Current input: ${currentInput}`,
    `Full expression: ${fullExpression}`
  );
  /* screen.textContent = fullExpression; */
});
equal.addEventListener("click", function() {
  console.log('eq')
  fullExpression = fullExpression + currentInput;
  console.log(fullExpression);
  currentInput = eval(fullExpression)
  screen.textContent = currentInput
  /* screen.textContent = fullExpression; */
});
clear.addEventListener("click", function() {
  currentInput = "";
  fullExpression = "";
  screen.textContent = "";
});

// Button click
/* buttons.forEach(function (button) {
  button.addEventListener("click", function () {
    const buttonClicked = true;
    console.log(buttonClicked);
  });
}); */
/* two.addEventListener("click", function () {
  screen.textContent += "2";
});
three.addEventListener("click", function () {
  screen.textContent += "3";
});
four.addEventListener("click", function () {
  screen.textContent += "4";
});
five.addEventListener("click", function () {
  screen.textContent += "5";
});
six.addEventListener("click", function () {
  screen.textContent += "6";
});
seven.addEventListener("click", function () {
  screen.textContent += "7";
});
eight.addEventListener("click", function () {
  screen.textContent += "8";
});
nine.addEventListener("click", function () {
  screen.textContent += "9";
}); */

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap");

/*=========================================
     =================RESETS===================
    =========================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: black;
  font-family: "Nunito Sans", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.container {
  width: 400px;
  /*  background-color: red; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 150px;
  grid-auto-rows: 80px;
  gap: 5px;
  padding: 1em;
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

.buttons:hover {
  transform: scale(0.95);
}

.orange {
  background-color: orange;
}

.soft {
  background-color: rgb(143, 143, 143);
}

.dark {
  background: rgb(66, 66, 66);
}


/* ========BUTTONS====== */

.screen {
  grid-column: 1 / 5;
  display: flex;
  justify-content: end;
  align-items: end;
  padding: 1em 2em;
  font-size: 2rem;
}


/* FIRST ROW */

.open-parenthesis {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.close-parenthesis {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.clear {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.division {
  grid-row: 2 / 3;
  grid-column: 4 / 5;
}


/* SECOND ROW */

.multiplication {
  grid-row: 3 / 4;
  grid-column: 4 / 5;
}


/* THIRD ROW */

.minus {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}


/* FOURTH ROW */

.plus {
  grid-row: 5 / 6;
  grid-column: 4 / 5;
}

.dot {
  grid-row: 6 / 7;
  grid-column: 3 / 4;
}


/* FIFTH ROW */

.zero {
  grid-column: 1 / 3;
}

.equal {
  grid-column: 4 / 5;
  grid-row: 6 / 7;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Calculator</title>
</head>

<body>
  <div class="container">
    <div class="screen dark"></div>
    <div class="buttons one dark">1</div>
    <div class="buttons two dark">2</div>
    <div class="buttons three dark">3</div>
    <div class="buttons four dark">4</div>
    <div class="buttons five dark">5</div>
    <div class="buttons six dark">6</div>
    <div class="buttons plus orange">+</div>
    <div class="buttons minus orange">-</div>
    <div class="buttons multiplication orange">x</div>
    <div class="buttons division orange">÷</div>
    <div class="buttons equal orange">=</div>
    <div class="buttons dot dark">.</div>
    <div class="buttons clear soft">C</div>
    <div class="buttons seven dark">7</div>
    <div class="buttons eight dark">8</div>
    <div class="buttons nine dark">9</div>
    <div class="buttons zero dark">0</div>
    <div class="buttons open-parenthesis soft">(</div>
    <div class="buttons close-parenthesis soft">)</div>
  </div>
  <script src="script.js"></script>
</body>

</html>