Sapna2001/calculator.html

## calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
    <!-- JavaScript Coe -->
    <script>
    alert("Let's Calculate");

    let screen=document.getElementById('screen');

    buttons = document.querySelectorAll('button');

    let screenValue='';

    for(item of buttons){
    item.addEventListener('click',(e)=>{
    buttonText = e.target.innerText;
    console.log(buttonText);
    <!-- clear condition -->
    if(buttonText === 'C')
    {
    screenValue = "";
    screen.value = screenValue;
    }
    <!-- equal to condition -->
    else if(buttonText === '=')
    {
      screen.value = eval(screenValue)
    }
    <!-- clear condition -->
    else
    {
      screenValue += buttonText;
      screen.value = screenValue;
    }
    })
    }

    </script>
    <!-- css styling -->
    <style>
    body {
    background-color: black;
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    }

    h1{
    font-family: 'Fredoka One', cursive;
    color: white;
    font-size: 3.6rem;
    }

    .container {
    width: 330px;
    background-color: grey;
    display: flex;
    flex-flow: column;
    color: black;
    border-radius: 4px;
    font-weight: bold;
    margin-top: -30px;
    }

    .container > * {
    margin: 5px;
    border-radius: 4px;
    }

    #screen {
    width: auto;
    background-color: white;
    text-align: right;
    padding: 12px;
    font-size: 32px;
    height: 25px;
    }

    button {
    background-color: #00a1ab;
    padding: 12px;
    margin: 5px;
    border-radius:50%;
    font-size: 32px;
    border-color: black;
    }

    button:hover {
    background-color:  #74d4c0;
    cursor: pointer;
    color: white;
    }

    button:focus{
    outline:none;
    }

    .row {
    display: flex;
    flex-direction: row;
    }

     .row > * {
    flex-grow: 1;
    }
    </style>

</head>
<body>
    <h1>Calculator</h1>
    <div class="container">
      <input type="text" name="screen" id="screen" />
       <div class="row">
         <button>C</button>
         <button>=</button>
         <button>0</button>
         <button>+</button>
       </div>
      <div class="row">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>-</button>
      </div>
      <div class="row">
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>*</button>
      </div>
      <div class="row">
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>/</button>
      </div>
      <div class="row">
        <button>(</button>
        <button>)</button>
        <button>.</button>
        <button>%</button>
      </div>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Calculator</title>
	<!-- google fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
	<!-- JavaScript Coe -->
	<script>
	alert("Let's Calculate");

	let screen=document.getElementById('screen');

	buttons = document.querySelectorAll('button');

	let screenValue='';

	for(item of buttons){
	item.addEventListener('click',(e)=>{
	buttonText = e.target.innerText;
	console.log(buttonText);
	<!-- clear condition -->
	if(buttonText === 'C')
	{
	screenValue = "";
	screen.value = screenValue;
	}
	<!-- equal to condition -->
	else if(buttonText === '=')
	{
	screen.value = eval(screenValue)
	}
	<!-- clear condition -->
	else
	{
	screenValue += buttonText;
	screen.value = screenValue;
	}
	})
	}

	</script>
	<!-- css styling -->
	<style>
	body {
	background-color: black;
	text-align: center;
	display: flex;
	flex-flow: column;
	align-items: center;
	}

	h1{
	font-family: 'Fredoka One', cursive;
	color: white;
	font-size: 3.6rem;
	}

	.container {
	width: 330px;
	background-color: grey;
	display: flex;
	flex-flow: column;
	color: black;
	border-radius: 4px;
	font-weight: bold;
	margin-top: -30px;
	}

	.container > * {
	margin: 5px;
	border-radius: 4px;
	}

	#screen {
	width: auto;
	background-color: white;
	text-align: right;
	padding: 12px;
	font-size: 32px;
	height: 25px;
	}

	button {
	background-color: #00a1ab;
	padding: 12px;
	margin: 5px;
	border-radius:50%;
	font-size: 32px;
	border-color: black;
	}

	button:hover {
	background-color: #74d4c0;
	cursor: pointer;
	color: white;
	}

	button:focus{
	outline:none;
	}

	.row {
	display: flex;
	flex-direction: row;
	}

	.row > * {
	flex-grow: 1;
	}
	</style>

	</head>
	<body>
	<h1>Calculator</h1>
	<div class="container">
	<input type="text" name="screen" id="screen" />
	<div class="row">
	<button>C</button>
	<button>=</button>
	<button>0</button>
	<button>+</button>
	</div>
	<div class="row">
	<button>1</button>
	<button>2</button>
	<button>3</button>
	<button>-</button>
	</div>
	<div class="row">
	<button>4</button>
	<button>5</button>
	<button>6</button>
	<button>*</button>
	</div>
	<div class="row">
	<button>7</button>
	<button>8</button>
	<button>9</button>
	<button>/</button>
	</div>
	<div class="row">
	<button>(</button>
	<button>)</button>
	<button>.</button>
	<button>%</button>
	</div>
	</div>
	</body>
	</html>