diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..2df21c5 --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ + + + + + + + + + calculator + + + +
+
+ +
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + +
+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..6c8ace7 --- /dev/null +++ b/script.js @@ -0,0 +1,71 @@ + +const text = document.getElementById('screen'); +const btnOne = document.querySelector('.btnOne'); +const btnTwo = document.querySelector('.btnTwo'); +const btnThree = document.querySelector('.btnThree'); +const btnPlus = document.querySelector('.btnPlus'); +const btnFour = document.querySelector('.btnFour'); +const btnFive = document.querySelector('.btnFive'); +const btnSix = document.querySelector('.btnSix'); +const btnMinus = document.querySelector('.btnMinus'); +const btnSeven = document.querySelector('.btnSeven'); +const btnEight = document.querySelector('.btnEight'); +const btnNine = document.querySelector('.btnNine'); +const btnMul = document.querySelector('.btnMul'); +const btnReset = document.querySelector('.btnReset'); +const btnZero = document.querySelector('.btnZero'); +const btnEquals = document.querySelector('.btnEquals'); +const btnDiv = document.querySelector('.btnDiv'); +const btnModulo = document.querySelector('.btnModulo'); +const btnDot = document.querySelector('.btnDot'); +const btnPower = document.querySelector('.btnPower'); +const btnMode = document.querySelector('.btnMode'); +const btnRemove = document.querySelector('.btnRemove'); +btnOne.addEventListener('click', () => { text.value += '1'; }); +btnTwo.addEventListener('click', () => { text.value += '2'; }); +btnThree.addEventListener('click', () => { text.value += '3'; }); +btnPlus.addEventListener('click', () => { text.value += '+'; }); +btnFour.addEventListener('click', () => { text.value += '4'; }); +btnFive.addEventListener('click', () => { text.value += '5'; }); +btnSix.addEventListener('click', () => { text.value += '6'; }); +btnMinus.addEventListener('click', () => { text.value += '-'; }); +btnSeven.addEventListener('click', () => { text.value += '7'; }); +btnEight.addEventListener('click', () => { text.value += '8'; }); +btnNine.addEventListener('click', () => { text.value += '9'; }); +btnMul.addEventListener('click', () => { text.value += '*'; }); +btnReset.addEventListener('click', () => { text.value = ''; }); +btnZero.addEventListener('click', () => { text.value += '0'; }); +btnEquals.addEventListener('click', resultfun); +btnDiv.addEventListener('click', () => { text.value += '/'; }); +btnModulo.addEventListener('click', () => { text.value += '%'; }); +btnDot.addEventListener('click', () => { text.value += '.'; }); +btnPower.addEventListener('click', () => { text.value += '**'; }); +btnMode.addEventListener('click', changeBg , {once:true}); +btnRemove.addEventListener('click', cutLastChar); + +function resultfun() { + let expression = text.value; + let result = eval(expression); + if(result) { + text.value = result; + } else { + text.value = null; + } +} +function changeBg() { + const container = document.querySelector('.bg'); + const btnContainer = document.querySelectorAll('.btns'); + container.classList.remove('bg'); + container.classList.add('changebg'); + btnContainer.forEach((btn) => btn.classList.add('changebg')); + text.classList.add('changebg'); + text.style.color = 'black'; + text.style.paddingRight = '30px'; +} + +function cutLastChar() { + let str = text.value.slice(0, text.value.length - 1); + text.value = str; +} + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..72152f9 --- /dev/null +++ b/style.css @@ -0,0 +1,76 @@ +body { + box-sizing: border-box; + display: flex; + justify-content: center; +} + +.bg { + background-color: rgba(3, 3, 3, 0.815); +} + +.container { + display: flex; + flex-direction: column; + justify-content: space-around; + width: auto; + height: auto; + border: none; + border-radius: 10px; +} + +.text-container { + display: flex; + justify-content: center; + padding-top: 20px; + margin-bottom: 20px; +} + +#screen { + width: 90%; + height: 50px; + border-radius: 5px; + border: none; + color: #fefefe; + text-align: right; + font-size: large; + font-style: oblique; + padding-right: 20px; + +} + +.button-container { + display: flex; + justify-content: space-around; + margin-bottom: 15px; +} + +.top-btn-container { + margin: 20px 0; +} + +.btns { + color: #fefefe; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: large; + font-style: italic; + width: 40px; + height: 30px; + border: none; + border-radius: 15px; + box-shadow: 3px 3px 10px black; + background-color: rgba(3, 3, 3, 0.1); + cursor: pointer; +} + +.changebg { + background-color: #c9c0c0; + border: none; + color: black; +} + +.btnEquals { + display: flex; + width: 90%; + padding-top: 5px; + justify-content: center; +}