Simple Calculator

SIMPLE CALCULATOR:
input
<html>
<head>
<script>
//function that display value
function dis(val)
document.getElementById("result").value+=val
//function that evaluates the digit and return result
function solve()
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
//function that clear the display
function clr()
document.getElementById("result").value = ""
</script>

<style>
.title{
margin-bottom: 10px;
text-align:center;
width: 210px;
color:green;
border: solid black 2px;
input[type="button"]
{
background-color:green;
color: black;
width:100%
input[type="text"]
background-color:white;
width:100%
</style>
</head>

<body>
<div class = title >GeeksforGeeks Calculator</div>
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result"/></td>

<td><input type="button" value="c" onclick="clr()"/> </td>
</tr>
<tr>


<td><input type="button" value="1" onclick="dis('1')"/> </td>
<td><input type="button" value="/" onclick="dis('/')"/> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="dis('-')"/> </td>
</tr>
<tr>
<td><input type="button" value="+" onclick="dis('+')"/> </td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/> </td>

<td><input type="button" value="=" onclick="solve()"/> </td>
<td><input type="button" value="*" onclick="dis('*')"/> </td>
</tr>
</table>
</body>
</html>
OUTPUT
AT FIRST-
AFTER ENTERING SOME DATA -
And finally result be like –
GREETING PROGRAM:
.
Input output
Digital Clock:
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0" />
<title>Digital Clock</title>
<style>
#clock {
font-size: 175px;
width: 900px;
margin: 200px;
text-align: center;
border: 2px solid black;
border-radius: 20px;
</style>
</head>
<body>
<div id="clock">8:10:45</div>
<script>
setInterval(showTime, 1000);
function showTime() {
let time = new Date();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
am_pm = "AM";
if (hour > 12) {
hour -= 12;
am_pm = "PM";
if (hour == 0) {
hr = 12;
am_pm = "AM";
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let currentTime = hour + ":"
+ min + ":" + sec + am_pm;

document.getElementById("clock")
.innerHTML = currentTime;
showTime();
</script>
</body>
</html>
OUTPUT
Create a program for blinking text:

Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Blinking Text</title>
<style>
body {
margin: 0;
padding: 0;
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
h2 {
font-size: 5em;
font-family: serif;
color: #008000;
text-align: center;
animation: animate
1.5s linear infinite;
@keyframes animate {
0% {
opacity: 0;
50% {
opacity: 0.7;
100% {
opacity: 0;
</style>
</head>
<body>
<div>
<h2>Blink</h2>
</div>
</body>
</html>
Output:
Create a program to change background at every
second.
<!DOCTYPE html>
<html>
<head>
<title>Change bg color every 1 seconds</title>
</head>
<body>
<h1>Background Color is being changed every 1 seconds</h1>
<script>
setInterval(
function () {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
document.body.style.backgroundColor = "#"+randomColor;
},1000);
</script>
</body>
</html>
xml
Write HTML/Java scripts to display your CV in Web
Browser:
INPUT
<html>
<head>
<link type="text/css" rel="stylesheet"
href="https://www.dropbox.com/s/trsldt0me90jzs8/resume.css"/>
<title></title>
</head>
<body>
<div id="header">
<p id="name">Mayank Rai</p>
<a href="mailto:mayaish0910@gmail.com" target="_blank"><p
id="email">mayankrai0310@gmail.com</p></a>
</div>
<div class="left">
</div>
<div class="right">
<h3>CV Highlights</h3>
<p>
<ul>
<li>Currently going through CS253 – Web Application Engineering and CS61A –
Structure & Interpretation of Computer Programs</li>
<li>Learnt basic Python, JavaScript, HTML, CSS on Codecademy.com.</li>
<li>An independent, dedicated, efficient person. These attributes are proved
through the series of courses I have taken or I am taking as of now independently through online
platforms.</li>
<li>Good Communication Skills, Presentation Skills, attitude towards leadership,
authorisation and delegation, conflict resolution and negotiation and a very good team
worker.</li></ul>
</p>
<h3>Professional Experience</h3>
<h4 id="company-name">Wingify Software Pvt Ltd</h4>
<p id="job-title"><strong>Support Engineer (Technical Support)</strong></p>
<p id="job-responsibilities">Job Responsbilities</p>
<p>
<ul>
<li>Answer customer queries over email / ticketing system</li>
<li>Interact with our engineering team to get software issues and bugs
resolved</li>
<li>Occasionally interact with customers over Skype or telephone</li>
<li>Contribute ideas to the team on how customers can be delighted</li></ul>
</p>
<h3>Educational Qualifications</h3>
<table>
<tr id="heading">
<td>Qualification</td>
<td>Board</td>
<td>Percentage / Grades</td>
<td>Year</td>
</tr>
<tr>
<td>S.S.C</td>
<td>G.S.E.B India</td>
<td>75.57%</td>
<td>2004</td>
</tr>
<tr>
<td>H.S.C (Science Stream)</td>
<td>G.S.E.B India</td>
<td>72.40%</td>
<td>2006</td>
</tr>
<tr>
<td>GDCA (Grad. Dipl in Computer Applications)</td>
<td>NIE (National Institute Of Engineering), Mumbai, India</td>
<td>A Grade</td>
<td>2008</td>
</tr>
<tr>
<td>B.Sc. (Hons) - Applied Accounting</td>
<td>Oxford Brookes University</td>
<td>2:1 – Upper Second Class Honours</td>
<td>2012</td>
</tr>
<tr>
<td>Chartered Accounting - ACCA</td>
<td>ACCA Glasgow, UK</td>
<td>Passed (1st Attempt)</td>
<td>2013</td>
</tr>
</table>
<h3>Independent Courses</h3>
<p>
<ul>
<li>
<span id="course-name">HTML & CSS for Beginners – Web Fundamentals</span> –
Codecademy.com</li>
<li>
<span id="course-name">Python – Fundamentals and Dynamic Programming </span> -
Codecademy.com</li>
<li>
<span id="course-name">JavaScript – Programming Basics, JS Apps and Build Games
</span> - Codecademy.com</li>
<li>
<span id="course-name">CS101: Introduction to Computer Science - Building a Web
Crawler</span> - Udacity.com</li>
<li>
<span id="course-name">CS50x – Introduction to Computer Science I</span> –
edX.org & Harvard University</li>
<li>
<span id="course-name">Calculus One</span> - Ohio State University &
Coursera.org</li>
<li>
<span id="course-name">Introduction to Finance</span> - Coursera.org &
University of Michigan</li>
</ul>
<h3>Technical Skills</h3>
<p>
<ul>
<li>
<span id="course-name">Operating Systems:</span> DOS, Windows 98, Windows 2000,
Windows XP, Windows NT, Windows Server 2003, Windows Vista, Windows 7, Macintosh Computers (OS
X), Linux (Ubuntu, Fedora)</li>
<li>
<span id="course-name">Application Software:</span> Office 97-2003; Office XP,
Office 2007, Office for Mac 2011, iWork ’09, Sage Accounting Software, Sage 50 (Accounting
Software), Excel 2003/2007 for Financial Modelling spreadsheets.</li>
<li>
<span id="course-name">Programming Skills:</span>HTML, CSS, Python, JavaScript,
learning C and C++</li></ul>
</p>
<h3>Certifications / Awards:</h3>
<p>
<ul>
<li>Scored highest in ACCA P1 – Governance, Risk & Ethics exam – June 2012
session amongst full time international students at Kaplan Financial, London.</li>
<li>Interviewed by ACCA for “international ACCA student in UK”, interview
published in January 2012 edition of ACCA Student Accountant Magazine.</li>
<li>Interviewed by ACCA for “international ACCA student in UK”, interview
published in January 2012 edition of ACCA Student Accountant Magazine.</li></ul>
</p>
<h3>Personal Information:</h3>
<p>
<ul>
<li>
A young, determined hard and smart working person. I believe in task based roles
and complete ownership of work.
<li>
<span id="course-name">Languages Known:</span>English, Hindi, Gujarati and
Sindhi</li>
<li>
<span id="course-name">Hobbies:</span>I love reading Finance and IT related
books / magazines, playing Chess, swimming, listening music, surfing Internet, self-learning
through e-courses.</li> </ul>
</p>
<h3>Other Information</h3>
<p>
<ul>
<li>
<span id="course-name">Expected Salary:</span>As per company standards</li>
<li>
<span id="course-name">Area of Interest:</span>Software Development,
Programming, Start-ups, Coding, App Development, Technical Support, Support Engineer, Customer
Happiness, Client service, Investment Banking, Corporate Finance, Hedge Funds, Mergers &
Acquisitions, Analyst, Equity Research, Business Analysis</li>
<li>
<span id="course-name">Joining Date:</span>Immediate</li></ul>
</p>
<h3>Declaration</h3>
<p>
I hereby declare that the details furnished above are true and correct to the best
of my knowledge and belief.</p>
</div>
<div id="footer"></div>
</body>
</html>
output
Creation and annotation of static web pages using any
HTML editor
input
html>
<head>
<title>WebNots - Static Page Example</title>
</head>
<body bgcolor="#f1f1f1" text="Red">
<h1>Create Your Static Website</h1>
Here is the content of your site.
</body>
Output
12. Create a Registration Form with Table
Input
<!DOCTYPE html>
<html>
<head></head>
<body bgcolor="gold" font-color="red">

<table border='0' width='480px' cellpadding='0' cellspacing='0' align='center'>
<center><tr>
<td><h1>Registration Form For Sports</h1></td>
</tr><center>

<table border='0' width='480px' cellpadding='0' cellspacing='0' align='center'>
<tr>
<td align='center'>Name:</td>
<td><input type='text' name='name'></td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center'>Sur Name:</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center'>Date Of Birth:</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center'>Address:</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center'>Phone:</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center'>Email:</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center'>Zip:</td>
<td><input type='text' name='zip'></td>
</tr>
<tr> <td> </td> </tr>
<table border='0' cellpadding='0' cellspacing='0' width='480px' align='center'>
<tr>
<td align='center'><input type='submit' name='REGISTER'
value="register"></td>
</tr>
</table>
</table>

</table>
</body>
Output
Write a program in XML for creation of DTD which
specifies a particular set of rules.
Input
<!DOCTYPE note [
<!ENTITY nbsp " ">
<!ENTITY writer "Writer: Donald Duck.">
<!ENTITY copyright "Copyright: W3Schools.">
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
<footer>&writer; &copyright;</footer>
Output
Create a Stylesheet in CSS/XSL and display the document in Web Browser :

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Rule.css"?>
<books>
<heading>Welcome To GeeksforGeeks </heading>
<book>
<title>Title -: Web Programming</title>
<author>Author -: Chrisbates</author>
<publisher>Publisher -: Wiley</publisher>
<edition>Edition -: 3</edition>
<price> Price -: 300</price>
</book>
<book>
<title>Title -: Internet world-wide-web</title>
<author>Author -: Ditel</author>
<publisher>Publisher -: Pearson</publisher>
<price>Price -: 400</price>
</book>
<book>
<title>Title -: Computer Networks</title>
<author>Author -: Foruouzan</author>
<publisher>Publisher -: Mc Graw Hill</publisher>
</book>
<book>
<title>Title -: DBMS Concepts</title>
<author>Author -: Navath</author>
<publisher>Publisher -: Oxford</publisher>
</book>
<book>
<title>Title -: Linux Programming</title>
<author>Author -: Subhitab Das</author>
<publisher>Publisher -: Oxford</publisher>
</book>
</books>
Create a program to change text size using button.
<div id="container">
<header>
<h1 id="title">
Allow Users to Change Font Size
</h1>
<p>Click the buttons to see it in action</p>
<div class="textcontrols">
<button role="button" id="decreasetext" <span>smaller</span>
</button>
<button role="button" id="resettext">
<span>normal</span>
</button>
<button role="button" id="increasetext">
<span>bigger</span>
</button>
</div>

</header>
<main id="content" role="main">
<div id="description">
<h2>Allow users to resize text on the page via button controls.</h2>
<p>In this instance, users can decrease text, increase text, or reset it back to
normal.</p>
<h2>Set default text size with CSS</h2>
<p>The default text size must be set using an internal stylesheet in the header of your
page. In this case: <code>font-size: 1.125em</code> (aka, 18px).</p>
<h2>Set the controls with JavaScript</h2>
<p>Then we set the resize controls with JavaScript. In this example, we're resizing
all text within the div with an id of "content".</p>
<p>The controls check the current text size, and then changes it (or not)
accordingly.</p>
</div>

</main>

</div>

XML • Create any catalogue • Display the

catalogue created using CSS or XS
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Geeks.css"?>
<Geeks_for_Geeks>
<title>Hello Everyone! Welcome to GeeksforGeeks</title>
<geeks_section>
<name>Algo</name>
<topic1>Greedy Algo</topic1>
<topic2>Randomised Algo</topic2>
<topic3>Searching Algo</topic3>
<topic4>Sorting Algo</topic4>
</geeks_section>
<geeks_section>
<name>Data Structures</name>
<topic1>Array</topic1>
<topic2>Stack</topic2>
<topic3>Queue</topic3>
<topic4>Linked List</topic4>
</geeks_section>
<geeks_section>
<name>Web Technology</name>
<topic1>HTML</topic1>
<topic2>CSS</topic2>
<topic3>Java Script</topic3>
<topic4>Php</topic4>
</geeks_section>
<geeks_section>
<name>Languages</name>
<topic1>C/C++</topic1>
<topic2>Java</topic2>
<topic3>Python</topic3>
<topic4>Ruby</topic4>
</geeks_section>
<geeks_section>
<name>DBMS</name>
<topic1>Basics</topic1>
<topic2>ER Diagram</topic2>
<topic3>Normalization</topic3>
<topic4>Transaction Concepts</topic4>
</geeks_section>
</Geeks_for_Geeks>
Geeks_for_Geeks
font-size:80%;
margin:0.5em;
font-family: Verdana;
display:block;
geeks_section {
display:block;
border: 1px solid silver;
margin:0.5em;
padding:0.5em;
background-color:whitesmoke;
title {
display:block;
font-weight:bolder;
text-align:center;
font-size:30px;
background-color: green;
color: white;
name, topic1, topic2, topic3, topic4 {
display:block;
text-align:center;
name {
color:green;
text-decoration: underline ;
font-weight:bolder;
font-size:20px;
topic1 {
color:green
topic2 {
color:brown
topic3 {
color:blue
topic4 {
color:orange
External Style
Internal Style
Inline Style
Create a program to change image every second.
<!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">
<title>Document</title>
<script type="text/javascript">
var activeImageId = 1;
var nextImageId = 1;
setInterval(function(){
nextImageId = nextImageId + 1;
if(nextImageId < 3){

document.getElementById("img" +activeImageId).classList.replace("visible","hidden");
document.getElementById("img" +nextImageId).classList.replace("hidden","visible");
activeImageId = nextImageId;
} else {
document.getElementById("img" +activeImageId).classList.replace("visible","hidden");
document.getElementById("img" +nextImageId).classList.replace("hidden","visible");
activeImageId = 3;
nextImageId = 0;
}
},1000)
</script>
<style type="text/css">
body{
background: #dcdcdc;
}
.slide-c{
width: 600px;
height: 400px;
position: relative;
left: 350px;
top: 100px;
}
.visible{
display: block;
}
.hidden{
display: none;
}
img{
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h1>Change image ever second.</h1
<div class="slide-c">
<img src="download (3).jpeg" id="img1" class="visible" alt="">
<img src="download.jpeg" id="img2" class="hidden" alt="">
<img src="WhatsApp Image 2021-12-16 at 10.26.39.jpeg" id="img3" class="hidden" alt="">
</div>
</body>
</html>

Simple Calculator

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

Simple Calculator

Uploaded by

Copyright:

Available Formats

SIMPLE CALCULATOR:

//function that display value

//function that evaluates the digit and return result

//function that clear the display

border: solid black 2px;

border: solid black 2px;

border: solid black 2px;

<div class = title >GeeksforGeeks Calculator</div>

<td colspan="3"><input type="text" id="result"/></td>

<td><input type="button" value="c" onclick="clr()"/> </td>

<td><input type="button" value="1" onclick="dis('1')"/> </td>

<td><input type="button" value="2" onclick="dis('2')"/> </td>

<td><input type="button" value="3" onclick="dis('3')"/> </td>

<td><input type="button" value="/" onclick="dis('/')"/> </td>

<td><input type="button" value="4" onclick="dis('4')"/> </td>

<td><input type="button" value="5" onclick="dis('5')"/> </td>

<td><input type="button" value="6" onclick="dis('6')"/> </td>

<td><input type="button" value="-" onclick="dis('-')"/> </td>

<td><input type="button" value="7" onclick="dis('7')"/> </td>

<td><input type="button" value="8" onclick="dis('8')"/> </td>

<td><input type="button" value="9" onclick="dis('9')"/> </td>

<td><input type="button" value="+" onclick="dis('+')"/> </td>

<td><input type="button" value="." onclick="dis('.')"/> </td>

<td><input type="button" value="0" onclick="dis('0')"/> </td>

<td><input type="button" value="=" onclick="solve()"/> </td>

<td><input type="button" value="*" onclick="dis('*')"/> </td>

And finally result be like –

<meta charset="UTF-8" />

<meta name="viewport" content=

border: 2px solid black;

let time = new Date();

let hour = time.getHours();

let min = time.getMinutes();

let sec = time.getSeconds();

if (hour > 12) {

hour = hour < 10 ? "0" + hour : hour;

min = min < 10 ? "0" + min : min;

sec = sec < 10 ? "0" + sec : sec;

let currentTime = hour + ":"

+ min + ":" + sec + am_pm;

Create a program for blinking text:

<meta name="viewport" content=

transform: translate(-50%, -50%);

1.5s linear infinite;

Create a Stylesheet in CSS/XSL and display the document in Web Browser :

<?xml-stylesheet type="text/css" href="Rule.css"?>

<title>Title -: Web Programming</title>

<price> Price -: 300</price>

<title>Title -: Internet world-wide-web</title>

<title>Title -: Computer Networks</title>

<publisher>Publisher -: Mc Graw Hill</publisher>

<title>Title -: DBMS Concepts</title>

<title>Title -: Linux Programming</title>

<author>Author -: Subhitab Das</author>

Create a program to change text size using button.

XML • Create any catalogue • Display the

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="Geeks.css"?>

<td><input type="button" value="" onclick="dis('')"/> </td>