Part 3: Building a Simple Calculator App (Continued)

Welcome back to the third and final part of our tutorial on building a simple calculator application! In this installment, we'll wrap up the development of our calculator by adding the final features and enhancements. If you missed the previous parts, you can catch up on Part 1 and Part 2.

Task 11: Handling Keyboard Shortcuts

Let's provide users with keyboard shortcuts for common calculator functions:

document.addEventListener('keydown', event => {
  const key = event.key;
  const allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '-', '*', '/', '.', '=', 'Enter', 'Backspace', 'Escape'];

  if (allowedKeys.includes(key)) {
    event.preventDefault();
    const button = document.querySelector(`.button:contains('${key}')`);
    if (button) button.click();
  }
});

Task 12: Limiting Decimal Places

Prevent results from displaying excessive decimal places

// Inside the button event listener for equals button
} else if (button.classList.contains('equals')) {
  try {
    currentInput = eval(currentInput).toFixed(2).toString();
    display.textContent = currentInput;
  } catch (error) {
    display.textContent = 'Error';
  }
}

Task 13: Styling Improvements

Make the calculator look more visually appealing by updating the CSS

/* Add styling to the buttons */
.button {
  width: 50px;
  height: 50px;
  font-size: 18px;
  border: none;
  background-color: #e0e0e0;
  margin: 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.button:hover {
  background-color: #d0d0d0;
}

/* Style the display area */
.display {
  width: 100%;
  height: 60px;
  font-size: 24px;
  text-align: right;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}

Task 14: Responsiveness

Make the calculator responsive by adjusting its layout for different screen sizes

/* Adjust layout for smaller screens */
.calculator {
  max-width: 300px;
  margin: 0 auto;
}

Task 15: Final Touches

Congratulations, you've completed your simple calculator app! You've learned how to manipulate the DOM, handle user inputs, and create basic arithmetic operations. You can further enhance this project by adding scientific functions, unit conversions, or even a history feature.

Conclusion

Building this calculator app was a fantastic way to learn about HTML, CSS, and JavaScript. You've gained valuable experience in working with the DOM, event handling, and basic scripting. As you continue your journey in web development, don't hesitate to take on more complex projects and explore new technologies. Keep practicing, and you'll become a proficient web developer in no time!

Thank you for following along with our tutorial on building a simple calculator app. I hope you enjoyed the journey and gained insights into web development concepts. If you have any questions or would like to share your experience, feel free to leave a comment below. Stay tuned for more tutorials and resources to help you on your coding adventure!

Did you miss the previous parts? Catch up on Part 1 and Part 2.