Skip to content

Commit

Permalink
added files
Browse files Browse the repository at this point in the history
  • Loading branch information
@aigle-levant
aigle-levant committed Oct 18, 2024
1 parent 4d65065 commit 091fd6a
Show file tree
Hide file tree
Showing 3 changed files with 329 additions and 0 deletions.
57 changes: 57 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main">
<div class="calculator-body">
<!--screen goes here-->
<div class="screen">
<span class="screen-text text">42069</span>
</div>
<!--buttons go here-->
<div class="buttons">
<!--use this website for keys : https://www.toptal.com/developers/keycode-->
<!--num is number button and funct is function button-->
<button class="button reset-full" data-key="27">C</button> <!--esc-->
<button class="button funct" data-key="54">^</button> <!--^-->
<button class="button reset-once" data-key="8">BACK</button> <!--backspace-->
<button class="button funct" data-key="53">%</button> <!--%-->

<button class="button num" data-key="49">1</button>
<button class="button num" data-key="50">2</button>
<button class="button num" data-key="51">3</button>
<button class="button funct" data-key="191">÷</button> <!--/-->

<button class="button num" data-key="52">4</button>
<button class="button num" data-key="53">5</button>
<button class="button num" data-key="54">6</button>
<button class="button funct" data-key="88">x</button> <!--x-->

<button class="button num" data-key="55">7</button>
<button class="button num" data-key="56">8</button>
<button class="button num" data-key="57">9</button>
<button class="button funct" data-key="173">-</button> <!-- - -->


<button class="button num" data-key="48">0</button>
<button class="button decimal" data-key="190">.</button> <!--.-->
<button class="button funct" data-key="107">+</button> <!--+-->
<button class="button equals" data-key="61">=</button> <!--=-->

</div>
</div>
</div>
</div>
<section class="attribute">
<p class="text">Made by Aigle | Check out my <a href="https://github.com/aigle-levant">Github</a></span>
</section>
<script src="script.js" defer></script>
</body>
</html>
153 changes: 153 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@

//number in screen
let currentScreenNumber = document.querySelector('.screen-text');


//required variables
let firstNum = "";
let secondNum = "";
let operator = null;
let shouldReset = false;


//numbers
let numButton = document.querySelectorAll('.num');
//wrote ya twice by mistake, now rectified
numButton.forEach(element =>
{
element.addEventListener('click', () =>
appendNumberToScreen(element.textContent))
});
function appendNumberToScreen(number)
{
if (shouldReset)
{
currentScreenNumber.textContent = "";
shouldReset = false;
}
currentScreenNumber.textContent += number;
}


//operations
let operatorButton = document.querySelectorAll('.funct');
operatorButton.forEach(element =>
{
element.addEventListener('click', () =>
appendOperatorToScreen(element.textContent))
});
function appendOperatorToScreen(currentlyUsedOperator)
{
//for percentage
if (currentlyUsedOperator==='%')
{
if (currentScreenNumber.textContent==="") return;

currentScreenNumber.textContent =
(parseFloat(currentScreenNumber.textContent)/100)
.toString();
firstNum = currentScreenNumber.textContent;
operator = null;
return;
}

//to prevent divide by zero
if (currentlyUsedOperator==='÷' &&
(currentScreenNumber.textContent==='0' || currentScreenNumber.textContent==='0.0'))
{
currentScreenNumber.textContent = "Cannot divide by zero";
shouldReset = true;
return;
}

if (firstNum==="")
{
firstNum = currentScreenNumber.textContent;
}
else if (operator!==null)
{
secondNum = currentScreenNumber.textContent;
firstNum = parseFloat(firstNum);
secondNum = parseFloat(secondNum);
currentScreenNumber.textContent = getResult(firstNum, operator, secondNum)
.toString();
}

operator = currentlyUsedOperator;
currentScreenNumber.textContent += ` ${operator} `;
shouldReset = true;
}
function getResult(a, op, b)
{
switch (op)
{
case '+':
return a+b;
case '-':
return a-b;
case 'x' :
return a*b;
case '÷' :
return a/b;
case '^' :
return Math.pow(a,b);
default :
return 0;
}
}


//clear
let resetFull = document.querySelector('.reset-full');
//was figuring out why the button won't work, got the classes corrected
resetFull.addEventListener('click', resetScreen);
function resetScreen()
{
currentScreenNumber.textContent = "";
firstNum = "";
secondNum = "";
operator = null;
shouldReset = false;
}


//backspace
let backspace = document.querySelector('.reset-once');
backspace.addEventListener('click', deleteOneChar);
//forgot to invoke toString as function
//fixed it now
function deleteOneChar()
{
currentScreenNumber.textContent = currentScreenNumber
.textContent.toString().slice(0,-1);
}


//decimal
let decimalButton = document.querySelector('.decimal');
decimalButton.addEventListener('click', addDecimalPoint);
function addDecimalPoint()
{
if (!(currentScreenNumber.textContent.includes('.')))
{
currentScreenNumber.textContent += '.';
}
}


//equals
let equalButton = document.querySelector('.equals');
equalButton.addEventListener('click', displayResult)
function displayResult()
{
if (firstNum==="" || operator===null) return;

secondNum = currentScreenNumber.textContent;

let result = getResult(parseFloat(firstNum), operator, parseFloat(secondNum));
currentScreenNumber.textContent = `${firstNum} ${operator} ${secondNum} = ${result}`;
firstNum = result.toString();
secondNum = "";
operator = null;
shouldReset = true;
}
119 changes: 119 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
@import url('https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&display=swap');

:root
{
--silver: #BDC2BF;
--bship-grey: #989C94;
--black-olive: #25291C;
--beige: #E3E7D3;
--vanilla: #E6E49F;
}
body
{
font-family: 'Agdasima', monospace;
font-size: 20px;
background-color: var(--black-olive);
}

/* enables a transition to go up */

.begin
{
transition: all 0.5s ease;
margin-top: 40%;
}
.finis
{
transition: all 0.5s ease;
margin-top: 6%;
}

.main
{
margin: 2rem;
display: flex;
justify-content: center;
align-items: center;
}

.calculator-body
{
background-color: var(--silver);
padding-top: 2rem;
}

.screen
{
padding: 1rem;
background-color: var(--black-olive);
position: relative;
left: 10vh;
width: 70vh;
height: 4vh;
}
span
{
color: var(--vanilla);
font-size: 2rem;
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
}

.buttons
{
display: grid;
grid-template-columns: repeat(4, 20vh);
row-gap: 0.5rem;
column-gap: 0.5rem;
position: relative;
padding: 2rem;
}

.button
{
font-size: 1.2rem;
padding: 1rem;
}

.num
{
background-color: var(--beige);
color: var(--black-olive);
}

.num, .attribute
{
font-weight: 600;
}

.funct, .decimal, .reset-full, .reset-once
{
background-color: var(--black-olive);
color: var(--beige);
font-weight: 500;
}

.equals
{
background-color: var(--vanilla);
color: var(--black-olive);
}

.button:active
{
background-color: var(--bship-grey);
color: var(--beige);
font-weight: 600;
}

.attribute
{
background-color: var(--silver);
font-size: 1.7rem;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
padding: 0.5rem;
}

0 comments on commit 091fd6a

Please sign in to comment.