Salary Calculator. Design a page like the following.

Slides:



Advertisements
Similar presentations
MS-Excel XP Lesson 4. Formatting Numbers 1.Select cell or cell range 2.Format menu, cells menu item or right click on range and click format cells menu.
Advertisements

Links.  Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background-color).  Special for links are that they can.
CSS Link Styling. The Anchor Element: Link text between the opening and closing can be styled using CSS. Some of the properties that can be set are: font-family,
CS7026 jQuery Events. What are Events?  jQuery is tailor-made to respond to events in an HTML page.  Events are actions that can be detected by your.
Enter question text... 1.Enter answer text.... Enter question text... 1.Enter answer text...
Chapter 3: Engage! Android User Input, Variables, and Operations
Format a Workbook Lesson 2 – Microsoft Excel 2010.
Data Entry and Cell Formatting S S T : S P R E A D S H E E T S SST 3 Spreadsheet 3 Data Entry Format the cells Name: ______________________ Class: ______________________.
Session #4 Cascading Style Sheets February 23, 2004
Enter question text... 1.Enter answer text.... Enter question text... 1.Enter answer text...
Paragraph Formatting Lesson 4. Skills Matrix SKILL #MATRIX SKILL 2.1.4Format paragraphs 2.1.5Set and clear tabs 4.2.1Create tables and lists.
Microsoft Excel 2003 Illustrated Complete A Worksheet Formatting.
Forms and Screen Design What is a form? A layout on screen which allows users to make choices, enter data or view data. They are found in: PC applications.
Copyright 2003 : Ismail M.Romi, PPU. All Rights Reserved 1 Lab2 Managing Controls.
Creating Quiz in MOODLE. Step 1: Create Question Bank - Create Question Bank - Click Question Bank on Settings.
HTML Tables and Forms Creating Web Pages with HTML CIS 133 Web Programming Concepts 1.
Graphical User Interfaces A Quick Outlook. Interface Many methods to create and “interface” with the user 2 most common interface methods: – Console –
MS-Access XP Lesson 5. Creating a Query with Expression Builder Eg. Consider the following table. Table Name: Overtime Fields & Data types: Emp No (Number),
Lesson 4: Formatting the Worksheet
1 Events Lect 8. 2 Event-driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g.,
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
ACCESS. » Access is a database management system. » This system lets you create and process data. » A database is a collection of data that is organized.
Typography-- Using Text Typography -- Using Text There are two basic types of fonts: Sans Serif Serif.
Homework for October 2011 Nikolay Kostov Telerik Corporation
Excel Lesson 2 Business Forms. Task 1  Goals  Format cell data  Apply and modify cell styles.
 Introduction to MS-Excel Introduction to MS-Excel  Entering data in EXCEL Entering data in EXCEL  Formulas & Functions in EXCEL Formulas & Functions.
Java Programming, 3e Concepts and Techniques Chapter 3 Section 65 – Manipulating Data Using Methods – Java Applet.
Microsoft Office Illustrated Introductory, Premium Edition A Worksheet Formatting.
Microsoft Office XP Illustrated Introductory, Enhanced A Worksheet Formatting.
Website Development with Dreamweaver
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Excel Project 2 FORMULAS, FUNCTIONS, FORMATTING AND WEB QUERIES.
CSS/417 Introduction to Database Management Systems Workshop 2.
1 Lesson 3 Power Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
1 ADVANCED MICROSOFT EXCEL Lesson 9 Applying Advanced Worksheets and Charts Options.
Formatting a Workbook.  Formatting: process of changing a workbook’s appearance by defining fonts, styles, colors, and decorative features.  Theme:
Presented By David Speight.  Easy Student Accessibility  Familiar Navigation  Fits Inside the Box  Works Outside the Box  Allows Creativity without.
Chapter 2 Excel Review.
The introduction of Microsoft Excel. Spreadsheet Basic.
Microsoft Office XP Illustrated Introductory, Enhanced Reports Using.
PHP Form Introduction Getting User Information Text Input.
Button and Textbox. Input  Input objects are used to obtain input from the user viewing the webpage. They allow the user to interact with the Web. 
Using Decimal Types. What are the data types that you can use? Decimal Number: Single -Is used for decimal values that will not exceed six or seven digits.
Intro to Excel - Session 3.11 Tutorial 3 - Session 3.1 Developing a Professional-Looking Worksheet.
1 Creating Windows GUIs with Visual Studio. 2 Creating the Project New Project Visual C++ Projects Windows Forms Application Give the Project a Name and.
McGraw-Hill/Irwin The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. Microsoft Word 2002 Using Character Styles.
Web Technologies Lecture 3 Web forms. HTML5 forms A component of a webpage that has form controls – Text fields – Buttons – Checkboxes – Range controls.
Format a Workbook Lesson 2 – Microsoft Excel 2010.
Body and Heading Tags and their Attributes. Attribute Name DefinitionValues backgroundIndicates the background image of the Web page. Ex. Filename(path.
Jeopardy Money Whatz that…? Work Out Time Guns and Roses Odds and Ends Q $100 Q $200 Q $300 Q $400 Q $500 Q $100 Q $200 Q $300 Q $400 Q $500 Final Jeopardy.
Salary Calculator. Design a page like the following.
Excel 2010 Formatting Cells. Formatting text To change the font:
Font, Font Size, and Text Color. When you have a text box open you have access to the font, font size, and font color from the home screen under the section.
Data types S S T : S P R E A D S H E E T S SST 2 Spreadsheet 2 Data Types Name: ______________________ Class: ______________________.
ACM 262 INTRODUCTION TO WEB DESIGN Week-7 ACM 262 Course Notes.
JavaScript Events Java 4 Understanding Events Events add interactivity between the web page and the user You can think of an event as a trigger that.
JavaScript Events. Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the.
Using this template This template includes multiple Title Pages, one Text Page and one Divider Page. The template is pre-formatted. DO NOT modify the logo,
Hamilton Software Products The Measure of Excellence Customized dialog.
WaveMaker Visual AJAX Studio 4.0 Training Styling your application.
Themes CIS 136 Building Mobile Apps 1. Themes 2  jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button.
How to fix and change around the font of Microsoft Word
Please use speaker notes for additional information!
Lesson 2 – Microsoft Excel 2010
ANALYZING A PAYROLL TIME CARD
Lesson 4: Formatting Cells
Web Design and Development
4.1 Formatting Rows, Columns and Cells
How to Create Tables & Graphs in Excel
Refined14ReportPowerpointTopic templates
Presentation transcript:

Salary Calculator

Design a page like the following

Basics (style) You must have some CSS. The body should have a non-default – Background color – Color – Font family The text inputs should be right justified. The button should not be default gray.

Basics (interaction) You must use jQuery. The user enters the hourly wage in a text input. The user enters the numbers of hours worked in a text input. The user clicks a button and the weekly salary is calculated and displayed.

Calculation If the user worked less than 40 hours, then the salary is the hours times the hourly wage, e.g. 30 hours at $10.00 an hour gives $ If the user worked more than 40 hours, then he/she makes the regular wage for the first 40 hours and 1.5 * wage for each hour exceeding 40. e.g. 50 hours at $10.00 hour gives $ (40* (50-40)*1.5*10.00).

User Interaction If user changes the hourly wage, clear out your answer. Use the key-down event. If the user changes the number of hours worked, clear out your answer. If the user enters a wage which is not a number (isNaN), alert him/her to the problem and do not calculate.

User Interaction (Cont.) If the user enters a number of hours that is larger than 84, alert him/her to the problem and do not calculate. If the user enters a wage which is not a number, alert him/her to the problem and do not calculate. Display the result formatted as currency – with dollar sign and two decimal places (toFixed).