fairyaksh / calculator Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 30 KB

My first JS Calculator.

Home Page: https://fairyaksh.github.io/Calculator/

HTML 22.34% JavaScript 55.87% CSS 21.79%

calculator's Introduction

Hi, I'm Akshaya 👋🏼 👩🏽‍💻

calculator's People

Contributors

Stargazers

Watchers

calculator's Issues

Documentation

It's fantastic to see that you have a README which details the project overview as well as giving a link to the deployed site 🚀

Your README could be expanded to give more detail to anyone who wants to know more about the project. You might like to include:

Who was involved in the project
What technology you used
Any known bugs
Any improvements you plan in the future

This guide is a great introduction to writing a beautiful README.

I'll be code reviewing your calculator today. What this means is that I'll leave issues noting enhancements ⬆️ , bugs 🐛 , and compliments 💅 on your code. Code review gives me the chance to expand my learning by becoming familiar with someone else's code as well as giving you the insight of a fresh perspective on your code!

You can read more about code review here 📜

Document doesn't have <title> element

The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search.

textContent

I think it's great that you're using textContent to update what is displayed on your calculator. For example, here:

Calculator/calc.js

Lines 27 to 35 in 82133a6

    
           // key inputs 
        
           if (!action) { 
        
               if (displayedNum === '0' || previousKeyType === 'operator' || previousKeyType === 'calculate'){ 
        
                   display.textContent = keyContent; 
        
               } else { 
        
                   display.textContent = displayedNum + keyContent; 
        
               } 
        
               calculator.dataset.previousKeyType = 'number' 
        
           }

Do you know why textContent may be advantageous to using innerHTML?

Styling

I love the way your calculator looks. It is sleek and the layout is clean and intuitive. I also love how clear your CSS file is and it's clear you have an understanding of hierarchy. ✨ 🥇

Here are a few suggestions to improve your styling:

When deciding on a font-weight, it is generally better to import the specific weight you want rather than defining it in your CSS.

This line:

Calculator/grid.css

Line 28 in 82133a6

font-weight: 300;

Could be avoided by important the Poppins font from Google Fonts at the specific weight of 300.

In some places you use relative measurements:

Calculator/grid.css

Lines 40 to 41 in 82133a6

    
           margin-top: 5em; 
        
           max-width: 10em;

This is brilliant and makes your display responsive to screen size. There are some areas where you use pixels instead, these could be made relative also.

For example, here:

Calculator/grid.css

Lines 49 to 51 in 82133a6

    
           #display { 
        
               padding: 10px; 
        
           }

Functionality

I tried pretty hard but I wasn't able to break the calculator! 😈

Congratulations on maintaining strong functionality in the app. 💪

<html> element does not have a [lang] attribute

If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly.

fairyaksh / calculator Goto Github PK

calculator's Introduction

Hi, I'm Akshaya 👋🏼 👩🏽‍💻

calculator's People

Contributors

Stargazers

Watchers

calculator's Issues

Documentation

Code Review

Document doesn't have <title> element

textContent

Styling

Functionality

<html> element does not have a [lang] attribute

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	// key inputs
	if (!action) {
	if (displayedNum === '0' \|\| previousKeyType === 'operator' \|\| previousKeyType === 'calculate'){
	display.textContent = keyContent;
	} else {
	display.textContent = displayedNum + keyContent;
	}
	calculator.dataset.previousKeyType = 'number'
	}