Scribd
Upload
4 views3 pages

Web Cat 2

Web development

Uploaded by

carterwes92
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
4 views3 pages

Web Cat 2

Web development

Uploaded by

carterwes92
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/ 3

WESLEY ONSONGO SCT 213-C002-0118/2022

1.

a)Document object:

getElementById(id): It enables one to access and manipulate an HTML element on the web page by its
unique ID: e.g- var newId = document.getElementById("firstid");

createElement(tagName): It allows one to dynamically create HTML elements and add them to the
document: e.g- var newDiv = document.createElement("div");

Window object:

open(url, name, specs, replace): This method of the Window object opens a new browser window.
window.open("https://www.facebook.com");

alert(message): This method of the Window object displays a dialog box with a message.
window.alert("Hello, world!");

b) Handling of data: -Underscore.js: It includes functions for iterating over arrays and objects,
manipulating collections

Animations: -GreenSock Animation Platform (GSAP): GSAP is a powerful animation library that allows
you to create complex animations with ease.

Manipulation of forms: -Formik: Formik is a popular form management library for React applications. It
simplifies the process of building and managing complex forms by handling form state, validation, and
submission.

c) Object literal notation:

var person = {

name: "Raj",

age: 30,

city: "Bombay"

};

console.log(person);

Constructor function:

function Person(name, age, city) {

this.name = name;

this.age = age;

this.city = city;

}
var person1 = new Person("Raj", 30, "Bombay");

console.log(person1);

d) 2-Tiered Architecture: Typically, it consists of two tiers: the Presentation tier (Client) and the Data
Storage tier (Database) while 3-Tiered Architecture: consists of three tiers: the Presentation tier (Client),
the Application tier (Server), and the Data Storage tier (Database).In a 2-tiered architecture the three
layers of an application run on the two tiers while in 3 tier architecture the three layers of the application
run separately on the three tiers.

2.

<html>

<head>

<title>Water Bill Calculator</title>

</head>

<body>

<h2>Water Bill Calculator</h2>

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

Name of customer: <input type="text" name="name"><br>

Address: <input type="text" name="address"><br>

Telephone Number: <input type="text" name="telephone"><br>

Meter Number: <input type="text" name="meter"><br>

Previous meter reading: <input type="number" name="prev_reading"><br>

Current meter reading: <input type="number" name="curr_reading"><br>

<input type="submit" name="submit" value="Submit">

</form>

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$name = $_POST['name'];

$address = $_POST['address'];

$telephone = $_POST['telephone'];

$meter = $_POST['meter'];

$prev_reading = $_POST['prev_reading'];
$curr_reading = $_POST['curr_reading'];

$consumption = $curr_reading - $prev_reading;

if ($consumption <= 100) {

$bill = $consumption * 2.50;

} elseif ($consumption <= 200) {

$bill = $consumption * 2.25;

} elseif ($consumption <= 350) {

$bill = $consumption * 1.90;

} else {

$bill = $consumption * 1.65;

echo "<h3>Bill Details:</h3>";

echo "Name: $name<br>";

echo "Address: $address<br>";

echo "Telephone Number: $telephone<br>";

echo "Meter Number: $meter<br>";

echo "Previous Meter Reading: $prev_reading<br>";

echo "Current Meter Reading: $curr_reading<br>";

echo "Consumption: $consumption units<br>";

echo "Bill to pay: Kshs $bill<br>";

?>

</body>

</html>

You might also like