Bhavesh

<p>Overall, the code can be improved by optimizing for performance, adding more descriptive class names, removing unused CSS properties, and using a consistent commenting style. Additionally, it may be beneficial to consider using a CSS preprocessor for better organization and maintainability.</p>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(90deg, #00aafe, #00fe6d);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
}

.container {
    background-color: #ffffff;
    min-height: 400px;
    /* width: 276px; */
    width: 256px;
    /* border-radius: 4px; */
    /* padding: 4px; */
    display: flex;
    flex-direction: column;
    /* gap: 4px; */
}

.output {
    background-color: #003331;
    color: #fff;
    /* border-radius: 4px; */
    flex-grow: 1;
    font-size: 24px;
    font-weight: 600;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-right: 15px;
}

.previous-operand {
    font-size: 14px;
    letter-spacing: 1.5px;
}

.keypad {
    display: flex;
    flex-direction: column;
    /* gap: 4px; */
}

.keys-row {
    display: flex;
    /* gap: 4px; */
}

.key {
    background-color: #bff4ed;
    border: 1px solid white;
    height: 64px;
    width: 64px;
    font-size: 18px;
    font-weight: 600;
    /* to center the key texts */
    display: flex;
    justify-content: center;
    align-items: center;
}

.key:hover {
    background-color: #99dfd6;
    transition: 300ms;
    cursor: pointer;
}

.key-wide {
    flex-grow: 1;
}

<p>Overall, the code can be improved by using more descriptive class names, adding comments to explain complex code, using consistent indentation throughout the code, avoiding inline styles and using external CSS instead, and adding error handling for division by zero. Additionally, the HTML structure can be improved by using semantic tags instead of divs.</p>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="calculator app">
    <meta name="author" content="ayush saha">
    <title>Calculator App</title>
    <link rel="stylesheet" href="./base.css">
</head>

<body>
    <div class="container">
        <div class="output">
            <div class="previous-operand"></div>
            <div class="current-operand">0</div>
        </div>
        <div class="keypad">
            <div class="keys-row">
                <div class="key key-wide key-all-clear">AC</div>
                <div class="key key-delete">DEL</div>
                <div class="key  key-operations">/</div>
            </div>
            <div class="keys-row">
                <div class="key key-numbers">1</div>
                <div class="key key-numbers">2</div>
                <div class="key key-numbers">3</div>
                <div class="key key-operations">x</div>
            </div>
            <div class="keys-row">
                <div class="key key-numbers">4</div>
                <div class="key key-numbers">5</div>
                <div class="key key-numbers">6</div>
                <div class="key key-operations">+</div>
            </div>
            <div class="keys-row">
                <div class="key key-numbers">7</div>
                <div class="key key-numbers">8</div>
                <div class="key key-numbers">9</div>
                <div class="key key-operations">-</div>
            </div>
            <div class="keys-row">
                <div class="key key-numbers">.</div>
                <div class=" key key-numbers">0</div>
                <div class="key key-wide key-equals-to">=</div>
            </div>
        </div>
    </div>

    
    <script src="./script.js"></script>
</body>

</html>

<p>The code can be improved by implementing best practices such as using semicolons, consistent naming conventions, and removing unnecessary comments. Error handling should also be implemented for edge cases. The chooseOperation method can be refactored to improve readability and remove redundancy. Additionally, a CSS framework can be used to simplify styling.</p>

class Calulator {
    constructor(previousOperandOutput, currentOperandOutput) {
        this.previousOperandOutput = previousOperandOutput
        this.currentOperandOutput = currentOperandOutput
        this.clearAll()
    }

    clearAll() {
        // new vairables
        this.currentOperand = ''
        this.previousOperand = ''
        this.operation = undefined
    }

    appendNumber(number) {
        if (number === '.' && this.currentOperand.includes('.')) return
        if (number === '.' && this.currentOperand === '') {
            this.currentOperand = 0
        }
        this.currentOperand = this.currentOperand.toString() + number.toString()
    }

    chooseOperation(operation) {
        if (this.currentOperand === '') return
        if (this.previousOperand != '') {
            this.calculateResult()
        }
        this.operation = operation
        this.previousOperand = this.currentOperand
        this.previousOperand = this.previousOperand.toString() + operation.toString()  // appending the operation icon
        this.currentOperand = ''
    }

    calculateResult() {
        let result
        let previousNumber = parseFloat(this.previousOperand)
        let currentNumber = parseFloat(this.currentOperand)
        if (isNaN(previousNumber) || isNaN(currentNumber)) return
        switch (this.operation) {
            case '+':
                result = previousNumber + currentNumber
                break;
            case '-':
                result = previousNumber - currentNumber
                break;
            case 'x':
                result = previousNumber * currentNumber
                break;
            case '/':
                result = previousNumber / currentNumber
                break;
            default:
                return
        }
        this.currentOperand = result.toFixed(2)
        this.operation = undefined
        this.previousOperand = ''
    }

    delete() {
        this.currentOperand = this.currentOperand.toString().slice(0, -1)
    }

    updateDisplay() {
        this.currentOperandOutput.innerText = this.currentOperand
        this.previousOperandOutput.innerText = this.previousOperand

    }
}

const numberKeys = document.querySelectorAll('.key-numbers')
const operationKeys = document.querySelectorAll('.key-operations')
const allClearKey = document.querySelector('.key-all-clear')
const deleteKey = document.querySelector('.key-delete')
const equalsToKey = document.querySelector('.key-equals-to')

// selecting output elements
const previousOperandOutput = document.querySelector('.previous-operand')
const currentOperandOutput = document.querySelector('.current-operand')

const calculator = new Calulator(previousOperandOutput, currentOperandOutput)

numberKeys.forEach(key => {
    key.addEventListener('click', () => {
        calculator.appendNumber(key.innerText)
        calculator.updateDisplay()
    })
})

operationKeys.forEach(key => {
    key.addEventListener('click', () => {
        calculator.chooseOperation(key.innerText)
        calculator.updateDisplay()
    })
})

equalsToKey.addEventListener('click', () => {
    calculator.calculateResult()
    calculator.updateDisplay()
})

allClearKey.addEventListener('click', () => {
    calculator.clearAll()
    calculator.updateDisplay()
})

deleteKey.addEventListener('click', () => {
    calculator.delete()
    calculator.updateDisplay()
})

<p>Overall, the code can be improved by following better coding practices such as consistent indentation, semantic HTML, proper use of CSS styles, and more descriptive naming conventions. Additionally, using tools like a CSS preprocessor or framework can improve code organization and maintainability. Proper accessibility measures such as adding alt attributes to images should also be implemented.</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet">
	<title>codedamn Project Style Guide</title>
    
    <style>
        #header {
            margin: 0 auto;
            background-color: white;
        }

        #logo {
            padding-right: 10px;
			margin-top: 2px;
			height: 24px;
        }

		#header-logo {
		    height: 95px;
			position: relative;
		}
		
		#logo-text {
			position: absolute;
			top: 50%; left: 50%;
		    transform: translate(-50%,-50%);
			width: 305px;
		}

        h1 {
            font-family: Manrope;
			font-size: 24px;
			font-style: normal;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0em;
			text-align: left;
			margin: 0px;
			
        }

        h2 {
            font-family: 'Inter', sans-serif;
            font-size:17px;
            color:#263646;
            margin-top:33px;
            margin-bottom:0px;
        }
		
		h2 span {
			font-family: 'Inter', sans-serif;
            font-size:10px;
            color:#777777;
            margin-top:33px;
            margin-bottom:0px;
		
		}

        h3 {
            color:#777777;
            margin-top:8px;
            margin-bottom:30px;
        }

        

        h4 {
            font-family:'Inter';
            font-weight:700;
            color:#777777;
            font-size:14px;
            margin-top: 24px;
            margin-bottom: 0px;

        }
		
		h4 span {
			font-size:12px;
		}
		
		h5 {
			color: white;
			margin: 0px auto;
			padding-top: 7px;
			padding-bottom: 7px;
			
		}
		
		body {
			margin:0px !important;
		}

        span {
            font-family: 'Inter', sans-serif;
            color:#777777;
            margin-top:7px;
            margin-bottom:0px;
            font-size:14px;
        }

        p {
            font-family: 'Inter', sans-serif;
			color: black;
            text-align:center;
            margin-top: 13px;
            margin-bottom: 13px;
        }



        img {
            float:left;
        }

        #main-holder {
            clear:both;
			background-color:#f4f4f5;
        }

        #backgrondcolors {
            
        }
		
		.color-section {
			font-family: Inter;
			font-size: 30px;
			font-style: normal;
			font-weight: 400;
			letter-spacing: 0.01em;
			text-align: left;
			padding: 30px 0 20px 48px;
		}

        #textcolors {
            
        }

        .color-wrapper {
            display:inline-block;
            margin-top: 32px;
			box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			background-color: white;
			margin-left: 49px;
			font-size: 16px;
			font-weight: 500;
        }
        .color-holder {
            width: 184px;
            height: 130px;
            background: #ACACAC;
            margin: auto;
			border-radius: 4px 4px 0px 0px;
        }
		
		.not-set {
			opacity:0.4;
		}

        .typography-header {
            padding-left: 48px;
            padding-top: 24px;
            padding-bottom: 16px;
        }

        #typography {
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            letter-spacing: 0em;
            text-align: left;
            color: black;
        }

        #typography span {
            color: #919499;
            text-transform: uppercase;
            line-height: 19px;
        }

        .typography-row {
            padding-left: 48px;
            padding-bottom: 16px;
        }

        .typography-col-1{
            display: inline-block;
        }

        .typography-col-2{
            display: inline-block;
            position: absolute;
            left: 256px;
        }

        dt {
            border-bottom: 1px solid #DBDEE6;
            padding-bottom: 16px;
        }
    </style>
</head>

<div id="main-holder" class="container_16">
    <div id="backgrondcolors">
		<div class="color-section">Background colors</div>
        
    </div>

    <div id="textcolors">
		<div class="color-section">Text colors</div>
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-1" style="background-color:#000000">
            </div>
            <p>#000000</p>
        </div>
        
        
        
        <div class="color-wrapper">
            <div class="color-holder" id="color-2" style="background-color:#ffffff">
            </div>
            <p>#ffffff</p>
        </div>
        
        
    </div>
    <div id="typography">
        <div class="typeclass">
            
            
            <dt id="result-header-h1-dt" class="not-set first">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 1</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h2-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 2</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h3-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 3</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h4-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 4</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h5-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 5</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            
            
            <dt id="result-header-h6-dt" class="not-set ">
            <div class="typography-header">
                <div style="font-family:N/A; font-style:N/A; font-size:N/A; line-height:; color:; background-color:transparent;margin-left: 0px;">Header 6</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>N/A</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>N/A</div><div class="typography-col-2"><span>Font Style</span><br>N/A</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>N/A</div><div class="typography-col-2"><span>Color</span><br>N/A</div></div>      
            </div>
            </dt>
            

            
            <dt id="result-header-h7-dt" class=" ">
            <div class="typography-header">
                <div style="font-family:&#34;Gotham Rounded&#34;, sans-serif; font-style:normal; font-size:16px; line-height:; color:; background-color:transparent;margin-left: 0px;">Body</div>
            </div>
            <div>
                <div class="typography-row"><span>Font Family</span><br>&#34;Gotham Rounded&#34;, sans-serif</div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Size</span><br>16px</div><div class="typography-col-2"><span>Font Style</span><br>normal</div></div>
                <div class="typography-row"><div class="typography-col-1"><span>Font Height</span><br>normal</div><div class="typography-col-2"><span>Color</span><br>#000000</div></div>      
            </div>
            </dt>
        </div>
    </div>
</div>

Build Calculator clone using the assets we provide and test your HTML, CSS and JavaScript skills.

Code Analysis

Submission details

No comments so far

Code Analysis

Analysis data

Submission details

No comments so far