Create WebCalculator with HTML,CSS&JAVASCRIPT

on
WebCalculator <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8549980599921274" crossorigin="anonymous"></script> </head> <body> <h1 style="text-align: left;"><b>CODE FOR  <span style="color: red;">WEBCALCULATOR: </span></b></h1><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; line-height: 19px; white-space: pre;"><div style="font-size: 14px;"><span style="color: grey;"><</span><span style="color: #569cd6;">html</span> <span style="color: #9cdcfe;">lang</span>=<span style="color: #ce9178;">"en"</span><span style="color: grey;">></span></div><div style="font-size: 14px;">  <span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div style="font-size: 14px;">    <span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>WebCalculator<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div style="font-size: 14px;">    <span style="color: grey;"><</span><span style="color: #569cd6;">style</span><span style="color: grey;">></span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;"><</span><span style="color: #d7ba7d;">script</span><span style="color: #d4d4d4;"> async src="https://pagead2</span><span style="color: #d7ba7d;">.googlesyndication</span><span style="color: #d4d4d4;">.com/pagead/js/adsbygoogle.js?client=</span><span style="color: #569cd6;">ca-pub-8549980599921274</span><span style="color: #d4d4d4;">"</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">     crossorigin="anonymous"></</span><span style="color: #d7ba7d;">script</span><span style="color: #d4d4d4;">></span></div><div style="font-size: 14px;"><span style="color: #569cd6;">*</span><span style="color: #d4d4d4;">{</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">box-sizing</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">border-box</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">font-family</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">'Poppins'</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">sans-serif</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">}</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d7ba7d;">body</span><span style="color: #d4d4d4;">{</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100%</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">100vh</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">flex</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">justify-content</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">center</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">align-items</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">center</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">background</span><span style="color: #d4d4d4;">: </span><span style="color: #dcdcaa;">linear-gradient</span><span style="color: #d4d4d4;">(</span><span style="color: #b5cea8;">45deg</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">#0a0a0a</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">#3a4452</span><span style="color: #d4d4d4;">);</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">}</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d7ba7d;">.calculator</span><span style="color: #d4d4d4;">{</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">border</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">1px</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">solid</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">#717377</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">20px</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">border-radius</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">16px</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">background</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">transparent</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">box-shadow</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">3px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">rgba</span><span style="color: #d4d4d4;">(</span><span style="color: #b5cea8;">113</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">115</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">119</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">0.5</span><span style="color: #d4d4d4;">);</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d4d4d4;">}</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d7ba7d;">input</span><span style="color: #d4d4d4;">{</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">320px</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">border</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">none</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">24px</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">background</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">transparent</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">box-shadow</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">0px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">3px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;"> rgbs(</span><span style="color: #b5cea8;">84</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">84</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">84</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">0.1</span><span style="color: #d4d4d4;">);</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">40px</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">text-align</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">right</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">cursor</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">pointer</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;"> </span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">}</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d7ba7d;">input::placeholder</span><span style="color: #d4d4d4;">{</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#ffffff</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">}</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d7ba7d;">.button</span><span style="color: #d4d4d4;">{</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">   </span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">60px</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">60px</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">margin</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10px</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">border-radius</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">50%</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">background</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">transparent</span><span style="color: #d4d4d4;">;</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">20px</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">box-shadow</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">-8px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">-8px</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">15px</span><span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">rgba</span><span style="color: #d4d4d4;">(</span><span style="color: #b5cea8;">255</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">255</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">255</span><span style="color: #d4d4d4;">, </span><span style="color: #b5cea8;">0.1</span><span style="color: #d4d4d4;">);</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">cursor</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">pointer</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">}</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d7ba7d;">.equalBtn</span><span style="color: #d4d4d4;">{</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">background-color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#fb7c14</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">}</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d7ba7d;">.operator</span><span style="color: #d4d4d4;">{</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#6dee0a</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">}</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: grey;"></</span><span style="color: #569cd6;">style</span><span style="color: grey;">></span></div><div style="font-size: 14px;">  <span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div style="font-size: 14px;">  <span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div style="font-size: 14px;">    <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div><div style="font-size: 14px;">      <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"calculator"</span><span style="color: grey;">></span></div><div style="font-size: 14px;">        <span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"inputBox"</span> <span style="color: #9cdcfe;">placeholder</span>=<span style="color: #ce9178;">"0"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"text"</span> <span style="color: grey;">/></span></div><div style="font-size: 14px;">        <span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button operator"</span><span style="color: grey;">></span>AC<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button operator"</span><span style="color: grey;">></span>DEL<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button operator"</span><span style="color: grey;">></span>%<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button operator"</span><span style="color: grey;">></span>/<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">        <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="font-size: 14px;">        <span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>7<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>8<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>9<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button operator"</span><span style="color: grey;">></span>*<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">        <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="font-size: 14px;">        <span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>4<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>5<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>6<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button operator"</span><span style="color: grey;">></span>-<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">        <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="font-size: 14px;">        <span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>1<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>2<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>3<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button operator"</span><span style="color: grey;">></span>+<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">        <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;">        <span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>00<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>0<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button"</span><span style="color: grey;">></span>.<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">          <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"button equalBtn"</span><span style="color: grey;">></span>=<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div style="font-size: 14px;">        <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="font-size: 14px;">      <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div style="font-size: 14px;">    <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;">    <span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span><span style="color: #569cd6;">let</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">input</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getElementById</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">'inputBox'</span><span style="color: #d4d4d4;">);</span></div><div style="font-size: 14px;"><span style="color: #569cd6;">let</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">buttons</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">querySelectorAll</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">'button'</span><span style="color: #d4d4d4;">);</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #569cd6;">let</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;"> = </span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #569cd6;">let</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">arr</span><span style="color: #d4d4d4;"> = </span><span style="color: #4ec9b0;">Array</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">from</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">buttons</span><span style="color: #d4d4d4;">);</span></div><div style="font-size: 14px;"><span style="color: #9cdcfe;">arr</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">forEach</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">button</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">=></span><span style="color: #d4d4d4;"> {</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    </span><span style="color: #9cdcfe;">button</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">addEventListener</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">'click'</span><span style="color: #d4d4d4;">, (</span><span style="color: #9cdcfe;">e</span><span style="color: #d4d4d4;">) </span><span style="color: #569cd6;">=></span><span style="color: #d4d4d4;">{</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">        </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">e</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> == </span><span style="color: #ce9178;">'='</span><span style="color: #d4d4d4;">){</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">            </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;"> = </span><span style="color: #dcdcaa;">eval</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;">);</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">            </span><span style="color: #9cdcfe;">input</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">        }</span></div><span style="font-size: 14px;"><br /></span><div style="font-size: 14px;"><span style="color: #d4d4d4;">        </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">e</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> == </span><span style="color: #ce9178;">'AC'</span><span style="color: #d4d4d4;">){</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">            </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;"> = </span><span style="color: #ce9178;">""</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">            </span><span style="color: #9cdcfe;">input</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">        }</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">        </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">if</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">e</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;"> == </span><span style="color: #ce9178;">'DEL'</span><span style="color: #d4d4d4;">){</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">            </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">substring</span><span style="color: #d4d4d4;">(</span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">length</span><span style="color: #d4d4d4;">-</span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">);</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">            </span><span style="color: #9cdcfe;">input</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">        }</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">        </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;">{</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">            </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;"> += </span><span style="color: #9cdcfe;">e</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">target</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">innerHTML</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">            </span><span style="color: #9cdcfe;">input</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">string</span><span style="color: #d4d4d4;">;</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">        }</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">        </span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">    })</span></div><div style="font-size: 14px;"><span style="color: #d4d4d4;">})</span></div><div style="font-size: 14px;"><span style="color: grey;"></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><div style="font-size: 14px;">  <span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div style="font-size: 14px;"><span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div><span style="font-size: x-large;"><br /></span></div> <blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;"><h1 style="text-align: left;"><b><span style="font-family: courier; font-size: x-large;">OUTPUT:</span></b></h1></blockquote><html lang="en"> <head> <title>WebCalculator

Comments

Post a Comment