Scribd
Upload
50 views

Simple Calculator

The document describes an HTML/CSS resume that is displayed in the web browser. It includes sections for contact information, highlights, and professional experience. The resume is styled with an external CSS stylesheet to control formatting and layout. Scripting is not used, as this is simply displaying static resume content in the browser.

Uploaded by

A2 Motivation
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views

Simple Calculator

The document describes an HTML/CSS resume that is displayed in the web browser. It includes sections for contact information, highlights, and professional experience. The resume is styled with an external CSS stylesheet to control formatting and layout. Scripting is not used, as this is simply displaying static resume content in the browser.

Uploaded by

A2 Motivation
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 29

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>

<!-- for styling -->

<style>

.title{

margin-bottom: 10px;

text-align:center;

width: 210px;

color:green;

border: solid black 2px;

input[type="button"]
{

background-color:green;

color: black;

border: solid black 2px;

width:100%

input[type="text"]

background-color:white;

border: solid black 2px;

width:100%

</style>

</head>

<!-- create table -->

<body>

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

<table border="1">

<tr>

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

<!-- clr() function will call clr to clear all value -->

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

</tr>

<tr>

<!-- create button and assign value to each button -->

<!-- dis("1") will call function dis to display value -->

<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>

</tr>

<tr>

<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>

</tr>
<tr>

<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>

</tr>

<tr>

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

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

<!-- solve function call function solve to evaluate value -->

<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:[email protected]" target="_blank"><p
id="email">[email protected]</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>&nbsp;</td> </tr>
<tr>
    <td align='center'>Sur Name:</td>
    <td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
    <td align='center'>Date Of Birth:</td>
    <td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
    <td align='center'>Address:</td>
    <td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
    <td align='center'>Phone:</td>
    <td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
    <td align='center'>Email:</td>
    <td><input type='text' name='name'></td>
</tr>
<tr> <td>&nbsp;</td> </tr>
<tr>
    <td align='center'>Zip:</td>
    <td><input type='text' name='zip'></td>
</tr>
<tr> <td>&nbsp;</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 "&#xA0;">
<!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;&nbsp;&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>

<edition>Edition -: 3</edition>

<price>Price -: 400</price>

</book>

<book>

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

<author>Author -: Foruouzan</author>

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

<edition>Edition -: 5</edition>

<price>Price -: 700</price>

</book>

<book>

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

<author>Author -: Navath</author>

<publisher>Publisher -: Oxford</publisher>

<edition>Edition -: 5</edition>

<price>Price -: 600</price>

</book>

<book>

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

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

<publisher>Publisher -: Oxford</publisher>

<edition>Edition -: 8</edition>
<price>Price -: 300</price>

</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>
<!--/.textcontrols-->
</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>
<!--/#description-->
</main>
<!--/#content-->
</div>
<!--/#container-->

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>

You might also like