djava387 / calculator

hey there, nice to meet you

👩‍💻 About Me :

• 🔭 I bring cutting-edge tech skills to the table, honed through training and personal projects

• 🌱 Exploring, researching and technical writing.

• ⚡ In my free time, I'm always on the lookout for the latest advancements in technology and love experimenting with new programming languages

• 👀 So, come take a peek at my GitHub profile and see for yourself how I can bring my passion for technology to your team! Whether it's working on cutting-edge projects, experimenting with new technologies, or sharing my knowledge with others, I'm always up for a good challenge. Let's work together and build something amazing! 💥

• 📫How to reach me: [](your-linkedin-url

---

🛠️ FullStack :

               

---

🛠️ DevOps :

                 

---

🛠️ Test :

   

---

🛠️ Version Control :

---

calculator's Issues

Feedback

Feedback

Requirements

• Deployed website : DONE
• GitHub Repo:
  • README.md: DONE have a read of this README File – Everything you Need to Know
    • You don't need to add all of the topics it suggests but an Intro, Brief, Outcome and Todo-list are solid parts to add to it.
  • 15 commits: DONE
• Be responsive and built mobile-first, it should work on different screen widths: DONE but built desktop first
• Accept a minimum of 2 inputs, perform an operation and return the output. : DONE
• DO NOT USE eval(): DONE
• Code is highly readable (good naming and indented correctly): Needs work

Lets Build

• A working Calculator : DONE
• Practice using Git and GitHub flow : DONE
• Apply what you are learning? : DONE
  • SCSS : DONE
  • BEM: Not used

Score

MARKING-SCHEME

Category	Score
Version Control	10 / 10
Site Output	25 / 45
Readability	10 / 20
Responsiveness	10 / 10
Code Knowledge & Use	20 / 25
Total Score	75 / 110

Feedback

The UI

Positive

• I like that you are keeping the ball rolling with the topics we covered in the first week. Keep on using SCSS, media queries, grid and flex!
• In terms of the look the UI is clean and looks good, and the gradient is a nice touch.

Constructive

• It is a good idea to break up your SCSS into modules/files, you are not using them at the moment though. All your styles are in _components.scss.

  • Base is normally for resets like html { box-sizing: border-box ; }
  • Variables are for colours and could also be for your media query break points.

// _variables.scss

$background-gradient: linear-gradient(to right, #000000, #434343);
$shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.6);
$breakpoint-mobile: 600px;

• You are not using BEM, This is a good project to practice it on as it is quite small in terms of styling.
  • It may seem strange to have a convention for naming styles but on big projects keeping things consistent is key.
  • When you have time recap it BEM
  • It does take practice but will make it easier in the long run. There is an example below, let's compare.

<div class="calculator">
  <!-- This section will display the calculator -->
  <div class="dis-calc">
    <h1>0</h1>
  </div>
  <!-- creating buttons for the calculator inside a container -->
  <div class="button-container">
    <button class="operator" value="+">+</button>
    <button class="operator" value="-">-</button>
    <button class="operator" value="*">x</button>
    <button class="operator" value="/">÷</button>
    <button class="operator" value="%">%</button>
    <button class="operator" value="±">±</button>
    <button class="operator" value="AC">AC</button>
    <button value="7">7</button>
    <button value="8">8</button>
    <button value="9">9</button>
    <button value="4">4</button>
    <button value="5">5</button>
    <button value="6">6</button>
    <button value="1">1</button>
    <button value="2">2</button>
    <button value="3">3</button>
    <button class="decimal" value=".">.</button>
    <button value="0">0</button>
    <button class="clear" id="clear-btn">C</button>
    <button class="equal operator" value="=">=</button>
  </div>
</div>

<!-- WOULD BE -->

<div class="calculator">
  <div class="calculator__display">
    <h1 class="calculator__result">0</h1>
  </div>
  <div class="calculator__buttons">
    <button class="calculator__button calculator__button--operator" value="+">+</button>
    <button class="calculator__button calculator__button--operator" value="-">-</button>
    <button class="calculator__button calculator__button--operator" value="*">x</button>
    <button class="calculator__button calculator__button--operator" value="/">÷</button>
    <button class="calculator__button calculator__button--operator" value="%">%</button>
    <button class="calculator__button calculator__button--operator" value="±">±</button>
    <button class="calculator__button calculator__button--operator" value="AC">AC</button>
    <button value="calculator__button 7">7</button>
    <button value="calculator__button 8">8</button>
    <button value="calculator__button 9">9</button>
    <button value="calculator__button 4">4</button>
    <button value="calculator__button 5">5</button>
    <button value="calculator__button 6">6</button>
    <button value="calculator__button 1">1</button>
    <button value="calculator__button 2">2</button>
    <button value="calculator__button 3">3</button>
    <button class="calculator__button calculator__button--decimal" value=".">.</button>
    <button value="calculator__button 0">0</button>
    <button class="calculator__button calculator__button--clear" id="clear-btn">C</button>
    <button class="calculator__button calculator__button--operator calculator__button--equal " value="=">=</button>
  </div>
</div>

Your Nesting with SCSS is a bit hit and miss, below is an example of the styles if they were nested and were using the BEM class names from above. Let's compare.

.calculator {
  background: black;
  width: 800px;
  border-radius: 12px;
  box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.6);
}
.dis-calc {
  background: black;
  color: white;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 10px 10px 0 0;
}
h1 {
  margin: 0;
  padding: 25px;
  font-size: 45px;
  font-family: "Lucida Console";
  font-weight: 100;
  overflow-x: auto;
}

// DELETE THIS COMMENTED OUT STYLES PLEASE

// &::-webkit-scrollbar{
//     width: 10px;
//   }
// &::-webkit-scrollbar-track {
//     background: #f1f1f1;
//   }
// &::-webkit-scrollbar-thumb {
//     background: #888;
//     }
//     &:hover{
//         background: rgb(175, 24, 94);
//     }

.button-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px;
}
button {
  min-height: 50px;
  color: white;
  font-size: 20px;
  font-weight: 100;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: rgb(39, 38, 38);
  &:hover {
    filter: brightness(180%);
  }
  &:active {
    transform: translateY(3px);
  }
  &:focus {
    outline: none;
  }
}
.operator {
  background: rgb(97, 96, 91);
  font-size: 30px;
}
.equal {
  grid-column: -2;
  grid-row: 2 / span 5;
  background: rgb(230, 148, 25);
}
.clear {
  color: rgb(216, 19, 19);
}

//  WOULD BE

.calculator {
  background: black;
  width: 800px;
  border-radius: 12px;
  box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.6);

  &__display {
    background: black;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 10px 10px 0 0;
  }

  &__result {
    margin: 0;
    padding: 25px;
    font-size: 45px;
    font-family: "Lucida Console";
    font-weight: 100;
    overflow-x: auto;
  }

  &__buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
  }

  &__button {
    min-height: 50px;
    color: white;
    font-size: 20px;
    font-weight: 100;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: rgb(39, 38, 38);

    &:hover {
      filter: brightness(180%);
    }

    &:active {
      transform: translateY(3px);
    }

    &:focus {
      outline: none;
    }

    &--operator {
      background: rgb(97, 96, 91);
      font-size: 30px;
    }

    &--equal {
      grid-column: -2;
      grid-row: 2 / span 5;
      background: rgb(230, 148, 25);
    }

    &--clear {
      color: rgb(216, 19, 19);
    }
  }
}

The Code

Positive

• You have a functioning calculator! This is Awesome!
• I can see a good application of some of the concepts we have covered so far.
  • You are using array iteration to set up your event listeners
  • You are interacting with the DOM. Displaying and updating values, acting on different events & using logic to get your calculations on the page. :)
• You have the core functionality down and have started looking into the edge cases which is a good place to be.
• I like what you have with the calculate object, It is a good idea to group these related functions together in an object. It is advanced and shows a good understanding of what we have covered. If you are showing the code be ready for people to ask questions about it :).

const calculate = {
  "/": (firstNumber, secondNumber) => firstNumber / secondNumber,
  "*": (firstNumber, secondNumber) => firstNumber * secondNumber,
  "+": (firstNumber, secondNumber) => firstNumber + secondNumber,
  "-": (firstNumber, secondNumber) => firstNumber - secondNumber,
  "=": (firstNumber, secondNumber) => secondNumber,
};

Constructive

• I will be honest there isn't much you can improve on the JS you have written so far.

• There are some points here to tidy up the project which you should do asap:

  • I would give funcOperator a more descriptive name, all your other functions describe what they are doing. This should do the same. inputOperator, handleOperator, updateOperator?
  • Remove all of the commented out console.logs()
    • logs are only good for development you don't need them otherwise.
    • e.g. // console.log(calculate);
  • nextValue is a boolean so is either true or false this means you don't have to do comparisons to see if it is true
    • e.g. if (nextValue === true) { } can just be if(nextValue) { }

• The next steps would be to add the extra functionality that you have on the HTML, the %, ± and AC.

  ---