Digital Assignment 2: Saumitra Pathak 19bce2411 Labda2 L23+L24 20-10-2021

Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
DIGITAL ASSIGNMENT 2
NAME : SAUMITRA PATHAK
REGISTER NUMBER : 19BCE2411
SUBJECT : INTERNET AND WEB PROGRAMMING
SLOT : L23 + L24
FACULTY NAME : Prof. JAYAKUMAR S

Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
TOOLS USED:
Languages: HTML, CSS, Javascript
Code Editor: Brackets
Favicon: https://www.favicon.cc/
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Calculator</title>
</head>
<body>
<button class="mode" onclick="theme()">Click for Surprise!</button>
<div class="info">
<h1>Internet and Web Programming</h1>
<h2>Lab DA 2</h2>
<h3>SIMPLE CALCULATOR</h3>
</div>
<div class="box">
<div class="cal">
<input type="text" placeholder="0" id="output" />

Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
<button class="btn ops" onclick="Clear()">CL</button>
<button class="btn ops" onclick="del()">DEL</button>
<button class="btn ops" onclick="display('%')">%</button>
<button class="btn ops" onclick="display('/')">/</button>
<button class="btn" onclick="display('7')">7</button>
<button class="btn ops" onclick="display('*')">*</button>
<button class="btn ops" onclick="display('-')">-</button>
<button class="btn ops" onclick="display('+')">+</button>
<button class="btn ops" onclick="display('.')">.</button>
<button class="btn equal ops" onclick="calculate()">=</button>
</div>
</div>
<div class="detail">
<h1>SAUMITRA PATHAK</h1>
<h2>19BCE2411</h2>
</div>
<script src="script.js"></script>
</body>
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
</html>
CSS CODE
@import
url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500
;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=s
wap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
outline: none;
transition: 0.6s;
body {
background-color: #2d2926ff;
.info {
text-align: center;
color: #e94b3cff;
text-transform: uppercase;
margin-bottom: 20px;
font-size: 22px;
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
}
.mode {
margin: 0;
text-align: left;
position: relative;
cursor: pointer;
font-size: 15px;
height: 60px;
width: 80px;
color: #e94b3cff;
border: none;
margin-left: 30px;
margin-top: 30px;
font-size: 12px;
font-weight: 700;
.mode:hover {
transform: scale(1.5);
.box {
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
.cal {
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
background-color: #e94b3cff;
padding: 15px;
border-radius: 30px;
display: grid;
grid-template-columns: repeat(4, 75px);
input {
grid-column: span 4;
height: 90px;
width: 290px;
background-color: #2da8d8ff;
color: #2d2926ff;
border: none;
font-size: 50px;
text-align: end;
margin: auto;
margin-bottom: 20px;
padding: 20px;
.btn {
height: 60px;
width: 60px;
color: #e94b3cff;
border: none;
border-radius: 50%;
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
margin: 8px;
font-size: 22px;
font-weight: 700;
.btn:hover {
transform: scale(1.2);
.ops {
color: #2d2926ff;
.equal {
width: 120px;
.detail {
text-align: center;
color: #e94b3cff;
margin-top: 30px;
.light-mode {
background-color: white;
color: black;
.light-mode-cal {
}
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
.light-mode-input {
color: #2da8d8ff;
.light-mode-btn {
color: #2d2926ff;
.light-mode-ops {
color: #2d2926ff;
.light-mode-text {
color: #2d2926ff;
}
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
JAVASCRIPT CODE
let outputScreen = document.getElementById("output");
var element = document.body;
var button = document.querySelector(".mode");
var cal = document.querySelector(".cal");
var input = document.querySelector("input");
var btn = document.querySelectorAll(".btn");
var ops = document.querySelectorAll(".ops");
var detail = document.querySelector(".detail");
var info = document.querySelector(".info");
function display(num) {
outputScreen.value += num;
function calculate() {
try {
outputScreen.value = eval(outputScreen.value);
} catch (err) {
alert("Input Error");
function Clear() {
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
outputScreen.value = "";
function del() {
outputScreen.value = outputScreen.value.slice(0, -1);
function theme() {
element.classList.toggle("light-mode");
button.classList.toggle("light-mode");
cal.classList.toggle("light-mode-cal");
input.classList.toggle("light-mode-input");
btn.forEach((el) => {
el.classList.toggle("light-mode-btn");
});
ops.forEach((el) => {
el.classList.toggle("light-mode-ops");
});
detail.classList.toggle("light-mode-text");
info.classList.toggle("light-mode-text");
}
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
SCREENSHOTS OF PROOF
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
DARK MODE
Saumitra Pathak
19BCE2411
Lab DA 2
L23+L24
20-10-2021
LIGHT MODE
USE CLICK FOR SURPRISE ON TOP-LEFT TO SWITCH

BETWEEN DARK AND LIGHT MODE
LINK OF CALCULATOR: https://saumitra11.github.io/CalcDA2/

Digital Assignment 2: Saumitra Pathak 19bce2411 Labda2 L23+L24 20-10-2021

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Digital Assignment 2: Saumitra Pathak 19bce2411 Labda2 L23+L24 20-10-2021

Uploaded by

Copyright:

Available Formats

Saumitra Pathak

REGISTER NUMBER : 19BCE2411

SUBJECT : INTERNET AND WEB PROGRAMMING

SLOT : L23 + L24

FACULTY NAME : Prof. JAYAKUMAR S

Languages: HTML, CSS, Javascript

Code Editor: Brackets

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" type="text/css" href="styles.css" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<button class="mode" onclick="theme()">Click for Surprise!</button>

<h1>Internet and Web Programming</h1>

<input type="text" placeholder="0" id="output" />

<button class="btn ops" onclick="del()">DEL</button>

<button class="btn ops" onclick="display('%')">%</button>

<button class="btn ops" onclick="display('/')">/</button>

<button class="btn" onclick="display('7')">7</button>

<button class="btn" onclick="display('8')">8</button>

<button class="btn" onclick="display('9')">9</button>

<button class="btn ops" onclick="display('*')">*</button>

<button class="btn" onclick="display('4')">4</button>

<button class="btn" onclick="display('5')">5</button>

<button class="btn" onclick="display('6')">6</button>

<button class="btn ops" onclick="display('-')">-</button>

<button class="btn" onclick="display('1')">1</button>

<button class="btn" onclick="display('2')">2</button>

<button class="btn" onclick="display('3')">3</button>

<button class="btn ops" onclick="display('+')">+</button>

<button class="btn ops" onclick="display('.')">.</button>

<button class="btn" onclick="display('0')">0</button>

<button class="btn equal ops" onclick="calculate()">=</button>

font-family: "Poppins", sans-serif;

grid-template-columns: repeat(4, 75px);

var element = document.body;

var button = document.querySelector(".mode");

var cal = document.querySelector(".cal");

var input = document.querySelector("input");

var btn = document.querySelectorAll(".btn");

var ops = document.querySelectorAll(".ops");

var detail = document.querySelector(".detail");

var info = document.querySelector(".info");

outputScreen.value = outputScreen.value.slice(0, -1);

USE CLICK FOR SURPRISE ON TOP-LEFT TO SWITCH

You might also like

<button class="btn ops" onclick="display('')"></button>