drajathasan/simple calculator with javascript

## simple calculator with javascript
<!DOCTYPE html>
<html>
    <head>
        <title>Calculator</title>
        <style>
            #number > button {
                width: 31%;
            }

            .operator > button {
                width: 100%;
            }

            .operator-top > button {
                width: 23.72%;
                display: inline-block;
            }

            button {
                height: 80px;
                display: inline-block;
                margin-left: 1px;
                margin-right: 1px;
                margin-top: 5px;
                margin-bottom: 5px;
                font-size: 20pt;
                font-weight: bold;
            }

            span {
                margin-top: 10px
            }
        </style>
    </head>
    <body>
        <div style="width: 100%; display: block">
            <div style="width: 30%; display: block; margin-left: auto; margin-right: auto">
                <div id="display-area" style="width: 100%; height: 100px; border: 1px solid black; padding-left: 5px; padding-right: 5px"></div>
                <div style="width: 100%; display: block">
                    <div id="number" style="width: 80%; display: inline-block">
                        <button>+</button>
                        <button>-</button>
                        <button>/</button>
                        <button>7</button>
                        <button>8</button>
                        <button>9</button>
                        <button>4</button>
                        <button>5</button>
                        <button>6</button>
                        <button>1</button>
                        <button>2</button>
                        <button>3</button>
                    </div>
                    <div class="operator" style="width: 18.8%; display: inline-block">
                        <button style="position: absolute;top: 112px;width: 5.7%;">*</button>
                        <button style="position: absolute;top: 200px;width: 5.7%; height: 260px">=</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function reset()
            {
                localStorage.removeItem('data')
            }

            reset()

            function isNext(input)
            {
                let basic = ['+','-']

                return basic.includes(input)
            }

            function isOperator(input)
            {
                let operators = ['+','-','*','/']
                return operators.filter(char => char === input)?.length
            }

            function saveCurrent(data, indexToDelete)
            {
                delete data[indexToDelete]
                localStorage.setItem('data', JSON.stringify(data))
                console.log(localStorage.getItem('data'))
                return false;
                compute()
            }

            function compute()
            {
                if (localStorage.getItem('data') === null) return

                let data = JSON.parse(localStorage.getItem('data'))

                let result = eval(data.join(''))

                document.querySelector('#display-area').innerHTML += `
                <span style="padding: 8px; display: inline-block; font-weight: bold">=</span>
                <span style="padding: 8px; display: inline-block; font-weight: bold">${result}</span>
                `

                reset()
            }

            function storeToLocalStorage(character)
            {
                if (character === '=')
                {
                    compute()
                    return
                }
                if (localStorage.getItem('data') === null) localStorage.setItem('data', JSON.stringify([]));

                let data = JSON.parse(localStorage.getItem('data'))

                let lastchar = data.length > 0 ? (data[data.length - 1].match(/[0-9]/i) ? 'int' : 'opr') : null

                if (lastchar === 'int' && character.match(/[0-9]/i)) return
                if (lastchar === 'opr' && !character.match(/[0-9]/i)) return

                data.push(character)

                localStorage.setItem('data', JSON.stringify(data))

                document.querySelector('#display-area').innerHTML += `
                <span style="padding: 8px; display: inline-block; font-weight: bold">${character}</span>
                `
            }

            document.querySelectorAll('button')?.forEach((button) => {
                button.addEventListener('click', function(el){
                    storeToLocalStorage(el.target.innerText)
                })
            })
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Calculator</title>
	<style>
	#number > button {
	width: 31%;
	}

	.operator > button {
	width: 100%;
	}

	.operator-top > button {
	width: 23.72%;
	display: inline-block;
	}

	button {
	height: 80px;
	display: inline-block;
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 20pt;
	font-weight: bold;
	}

	span {
	margin-top: 10px
	}
	</style>
	</head>
	<body>
	<div style="width: 100%; display: block">
	<div style="width: 30%; display: block; margin-left: auto; margin-right: auto">
	<div id="display-area" style="width: 100%; height: 100px; border: 1px solid black; padding-left: 5px; padding-right: 5px"></div>
	<div style="width: 100%; display: block">
	<div id="number" style="width: 80%; display: inline-block">
	<button>+</button>
	<button>-</button>
	<button>/</button>
	<button>7</button>
	<button>8</button>
	<button>9</button>
	<button>4</button>
	<button>5</button>
	<button>6</button>
	<button>1</button>
	<button>2</button>
	<button>3</button>
	</div>
	<div class="operator" style="width: 18.8%; display: inline-block">
	<button style="position: absolute;top: 112px;width: 5.7%;">*</button>
	<button style="position: absolute;top: 200px;width: 5.7%; height: 260px">=</button>
	</div>
	</div>
	</div>
	</div>
	<script>
	function reset()
	{
	localStorage.removeItem('data')
	}

	reset()

	function isNext(input)
	{
	let basic = ['+','-']

	return basic.includes(input)
	}

	function isOperator(input)
	{
	let operators = ['+','-','*','/']
	return operators.filter(char => char === input)?.length
	}

	function saveCurrent(data, indexToDelete)
	{
	delete data[indexToDelete]
	localStorage.setItem('data', JSON.stringify(data))
	console.log(localStorage.getItem('data'))
	return false;
	compute()
	}

	function compute()
	{
	if (localStorage.getItem('data') === null) return

	let data = JSON.parse(localStorage.getItem('data'))

	let result = eval(data.join(''))

	document.querySelector('#display-area').innerHTML += `
	<span style="padding: 8px; display: inline-block; font-weight: bold">=</span>
	<span style="padding: 8px; display: inline-block; font-weight: bold">${result}</span>
	`

	reset()
	}

	function storeToLocalStorage(character)
	{
	if (character === '=')
	{
	compute()
	return
	}
	if (localStorage.getItem('data') === null) localStorage.setItem('data', JSON.stringify([]));

	let data = JSON.parse(localStorage.getItem('data'))

	let lastchar = data.length > 0 ? (data[data.length - 1].match(/[0-9]/i) ? 'int' : 'opr') : null

	if (lastchar === 'int' && character.match(/[0-9]/i)) return
	if (lastchar === 'opr' && !character.match(/[0-9]/i)) return

	data.push(character)

	localStorage.setItem('data', JSON.stringify(data))

	document.querySelector('#display-area').innerHTML += `
	<span style="padding: 8px; display: inline-block; font-weight: bold">${character}</span>
	`
	}

	document.querySelectorAll('button')?.forEach((button) => {
	button.addEventListener('click', function(el){
	storeToLocalStorage(el.target.innerText)
	})
	})
	</script>
	</body>
	</html>