JavaScript Objects Create an object literal called animal with the properties sp
ID: 3701588 • Letter: J
Question
JavaScript
Objects
Create an object literal called animal with the properties species (string), name(string), legs (number) and fly (bool).
Use dot notation to add the properties called isPrey (bool), andisPredator(bool).
Use bracket notation to add a property called enemies(string).
Use dot notation to change all of the values you have created to a different animal.
Create an object literal called transportation. It should have 3 properties called car, plane, and train. The car property should be an object with properties make (string), model (string), year (number). The plane property should be an object with properties model (string), airline(string). The train property should be an object with propertiesstation (string), wagons(number).
Console log the model of the plane. Console log the number of wagons of the train. Console log the year of the car.
Update the make of the car to be 'BMW'. Update the airline of the plane to 'AA'. Update the station of the train to be 'LA'.
Functions
Create an object called calculateTax. This object should have the following properties:
A property called state which is a function that takes a parameter. The function should multiply the parameter by 0.09 and return the value.
A property called federal which is a function that takes a parameter. If the parameter is greater than 10,000 the function should multiply the parameter by 0.2 and return the value. If the parameter is less than 10,000 the function should multiply the parameter by .1 and return the value.
A property called exempt which is a bool. Set this to true.
Console log the result of invoking the state tax of the value of 15000 and 55000.
Console log the result of invoking the federal tax of the value of 18000 and 65000.
Employee Page
Create a new page and form using Bootstrap to create a profile. Should have the following information with placeholders:
Name
Last Name
Age
Gender (M/F/Other) use a radio button.
Salary
A checkbox for Manager.
Textarea for Comments
Button to submit profile
Button to Calculate Tax
Create a function called readForm that returns the values of the inputs of the form you created as an object with property names that replicate the form.
Invoke readForm function when the submit button is clicked.
Use the readForm you created to store the information of the form. Use this object to create a function that writes the information of the current profile in the DOM. After this you should :
Use the Calculate Tax button and the calculateTax function from the previous exercise so when you click on the button you calculate the state and federal tax for the salary. Write this information in the DOM.
Use the checkbox so that when it is checked the tax will be excempt and write this to the DOM. (Managers get tax breaks!!)
Use Bootstrap to make the UI look nice.
Explanation / Answer
As mentioned in question, I have followed each any every step. I have create single html file with javascript code is included in that. A single file for whole required functionality for javascript, Functions and employee form. To make UI looks good I have used Bootstrap.
Below is the code for it.
To run below code, Just create index.html file and paste below code into it. Then open this file in any web browser like chrome, firefox etc.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
//Javascript
var animal = {
species: "species",
name: "AnimalName",
legs: 4,
fly: false
}
animal.isPrey = true;
animal.andisPredator = true;
animal['enemies'] = "enemies";
var transportation = {
car: {
make: "Auton Martin",
model: "A1",
year: 1991
},
plane: {
model: "P1",
airline: "ABC Airlines"
},
train: {
station: "",
propertiesstation: "",
wagons: 12
}
};
console.log(transportation.plane.model);
console.log(transportation.train.wagons);
console.log(transportation.car.year);
transportation.car.make = "BMW";
transportation.plane.airline = "AA";
transportation.train.station = "LA";
// Function to calculate tax
var calculateTax = {
state: function (param) {
return param * 0.09;
},
federal: function (param) {
if (param > 10000) {
return param * 0.2
} else {
return param * 0.1
}
},
exempt: true
}
console.log(calculateTax.state(15000))
console.log(calculateTax.state(55000))
console.log(calculateTax.federal(18000))
console.log(calculateTax.federal(65000))
// this function will be called after submit of form
function readForm(e) {
var firstname = $('#firstname').val();
var lastname = $('#lastname').val();
var age = $('#age').val();
var salary = $('#salary').val();
var comment = $('#comment').val();
var gender = $('input[name=gender]:checked').val();
$('.firstname').text(firstname)
$('.lastname').text(lastname)
$('.age').text(age)
$('.salary').text(salary)
$('.comment').text(comment)
$('.gender').text(gender)
return false;
}
// this function calculates tax on salary
function calTax() {
if ($('#taxBreak')[0].checked) {
$('.federalTax').text(0)
$('.stateTax').text(0)
} else {
var federalTax = calculateTax.federal($('#salary').val() || 0);
var stateTax = calculateTax.state($('#salary').val() || 0);
$('.federalTax').text(federalTax)
$('.stateTax').text(stateTax)
}
}
</script>
</head>
<body>
<div class="container col-md-12">
<div class="col-md-6 well">
<h2>Employee form</h2>
<form>
<div class="form-group">
<label for="firstname">Firstname:</label>
<input type="firstname" class="form-control" id="firstname" placeholder="Enter Firstname" name="firstname">
</div>
<div class="form-group">
<label for="lastname">Lastname:</label>
<input type="lastname" class="form-control" id="lastname" placeholder="Enter Lastname" name="lastname">
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="age" class="form-control" id="age" placeholder="Enter Age" name="age">
</div>
<div class="form-group">
<label for="age">Gender:</label>
<div class="radio">
<label><input type="radio" value="Male" name="gender">Male</label>
</div>
<div class="radio">
<label><input type="radio" value="Female" name="gender">Female</label>
</div>
</div>
<div class="form-group">
<label for="pwd">Salary:</label>
<input type="text" class="form-control" id="salary" placeholder="Enter Salary" name="salary">
</div>
<div class="checkbox">
<label><input type="checkbox" name="manager"> Manager</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="taxBreak" name="taxBreak"> Managers get tax breaks!!</label>
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<button type="button" class="btn btn-default">Submit</button>
<button type="button" class="calculateTax btn btn-default">Calculate Tax</button>
</form>
</div>
<div class="col-md-6 well">
<h2>Employee form</h2>
<div class="col-md-12">
<label>Firstname: </label>
<span class="firstname"></span>
</div>
<div class="col-md-12">
<label>Lastname: </label>
<span class="lastname"></span>
</div>
<div class="col-md-12">
<label>Salary: </label>
<span class="salary"></span>
</div>
<div class="col-md-12">
<label>Age: </label>
<span class="age"></span>
</div>
<div class="col-md-12">
<label>Comment: </label>
<span class="comment"></span>
</div>
<div class="col-md-12">
<label>Gender: </label>
<span class="gender"></span>
</div>
<div class="col-md-12">
<label>State Tax: </label>
<span class="stateTax"></span>
</div>
<div class="col-md-12">
<label>Federal Tax: </label>
<span class="federalTax"></span>
</div>
</div>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.