Personal Project - Calculator

Hello there,

I’m really excited to have completed my first project. It’s a basic maths calculator using HTML, CSS and JavaScript. You can copy and paste the codes below in your editor so you can see. Please comment and tell me how you feel about it.
HTML

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Calculator</title>

<link href = 'index.css' type = 'text/css' rel = 'stylesheet' >
<div class = "calculator">

    <div class = 'responseField' id="responseField">

       <p>0</p>

    </div> 

    <div class = 'row1'>

        <button class = 'button1 number9 num' value = "9">9</button>

        <button class = 'button1 number8 num' value = "8" >8</button>

        <button class = 'button1 number7 num' value = "7" >7</button>

        <button class = 'button1 number* operator' value = "*">*</button>

    </div>

    <div class = 'row2' >

        <button class = 'button1 number6 num' value = "6">6</button>

        <button class = 'button1 number5 num' value = "5" >5</button>

        <button class = 'button1 number4 num' value = "4">4</button>

        <button class = 'button1 number/ operator' value = "/" >/</button>

    </div> 

    <div class = 'row3' >

        <button class = 'button1 number3 num' value = "3">3</button>

        <button class = 'button1 number2 num' value = "2">2</button>

        <button class = 'button1 number1 num' value = "1">1</button>

        <button class = 'button1 number- operator' value = "-">-</button>

    </div>

    <div class = 'row4' >           

        <button class = 'button1 numberAC' id = "AC">AC</button>

        <button class = 'button1 number0 num' value = "0">0</button>

        <button class = 'button1 number+ operator' value = "+">+</button>

        <button class = 'button1 number=' id = 'buttonequals' value = "44">=</button></div>

</div>

CSS
body {

background-color: black;

color: black;

}

.calculator {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

width: 30%;

height: 400px;

display: grid;

grid-template-rows: repeat(11, 1fr);

grid-template-columns: repeat(12, 1fr);

text-align: center;

}

.responseField {

font-size: 30px;

text-align: right;

font-weight: bold;

grid-row: 1/span 3;

grid-column: 1/span12;

background-color: white;

display: flex;

justify-content: flex-end;

align-items: center;

flex-wrap: wrap;

}

p{

text-align: right;

}

.row1 {

display: flex;

grid-row: 4 / span 2;

grid-column: 1 / span 12;       

}

.button1 {

width: 65%;

background-color: black;

color: white;

border-radius: 15.5px;

}

.row2 {

grid-row: 6 / span 2;

grid-column: 1 / span 12;

display: flex;

}

.row3 {

grid-row: 8 / span 2;

grid-column: 1 / span 12;

display: flex;

}

.row4 {

grid-row: 10 / span 2;

grid-column: 1 / span 12;

display: flex;

}

#buttonequals {

background-color:orange;

}

.button1:hover {

background-color: orange;

}

@media only screen and (max-width : 1024px) {

.calculator {

    width: 100%;

    height: 100%;

    background-color: black;

}

}

Javascript
const numberButtons = document.getElementsByClassName(“num”); //Select all buttons that apprea on screen

const operatorButtons = document.getElementsByClassName(“operator”);// Select all operators

const res = document.getElementById(“responseField”); //Select the response field

const equal = document.getElementById(“buttonequals”); //select the equal button

const reset = document.getElementById(“AC”); //A button to reset;

let responseString = “”; //text on screen

let answer = “”; //an string to receive screen inputs and solve

//Add event listeners to all numbers

for(i=0; i<numberButtons.length; i++) {

let result = numberButtons[i];

result.addEventListener("click", () => {

    res.innerHTML = responseString += result.value;

    answer += result.value;

    console.log(answer);

})

}

//Add event listeners for all maths operators

for(i=0; i<operatorButtons.length; i++) {

let result2 = operatorButtons[i];

result2.addEventListener("click", () => {

    if(!responseString.length) {res.innerHTML = "0"}

    else {

        res.innerHTML = responseString += result2.value;

        answer += result2.value;

    }

})

}

//Add event listener to the equal to button and solve with eval()

equal.addEventListener(“click”, () => {

if(!responseString.length) {

    res.innerHTML = "0"

} else {

    res.innerHTML = eval(responseString);

    responseString = "";

    answer = "";

} 

})

//Event handler to reset answer and response Fields

reset.addEventListener(“click”, () => {

responseString = "";

answer = "";

res.innerHTML = 0;

})