Question

In: Computer Science

Create a file called grocery.ts. It should have a definition of a class with the obvious...

Create a file called grocery.ts. It should have a definition of a class with the obvious name Grocery. The class should have some basic attributes such as name, quantity, etc. Feel free to add any other attributes you think will be necessary. Add few grocery items to an array of groceries, such as milk, bread, and eggs, along with some quantities (i.e. 3, 6, 11). Display these grocery items as HTML output. The output of this assignment will be grocery.ts and groceries.html displaying the output.

Solutions

Expert Solution

Typescript can be mentioned as typed Javascript because it is a strongly typed fully object oriented language which compiles to plain javascript. Typescript cannot be run on a browser directly. It has to be compiled to javascript. Files written in typesript have .ts file extension

One of the ways to compile a typescript file is using the typescript npm package. The following command installs typescript in the machine

npm i -g typescript

After writing a typescript file, we need to compile it so that the corresponding javascript file (with .js extension) can be generated and used in our html file. The following command compile .ts file to corresponding .js file

tsc filename.ts

In our given problem we will be writing a grocery.ts file and do the following command in the terminal

tsc grocery.ts

SOLUTION

In our given problem we have been asked to create a class, few objects of the class and display it the html page. Which can be done as follows

grocery.ts

// create a class
class Grocery {
    // declare properties and corresponding data type
    name: string;
    quantity: number;
    price: number;

    // add a constructor
    constructor(n: string, q: number, p: number){
        this.name = n;
        this.quantity = q;
        this.price = p;
    }
}

// create a list of grocery items
// new keyword is used to inititalise objects
let list_of_items = [
    new Grocery("milk", 3, 10),
    new Grocery("bread", 6, 25),
    new Grocery("egg", 11, 10)
]

// access the html element with id app
const ele = document.getElementById("app");

// create a <p> element for each item in the grocery list and
// append it to the html page
list_of_items.forEach(e => {
    const p = document.createElement("p");
    p.textContent = `${e.name} ${e.quantity} -> $${e.price}`;
    ele.appendChild(p);
});

It is important to compile the above file into a .js file before it can be used in our html page. It can be done with the command given above i.e., tsc grocery.ts

groceries.html

<!DOCTYPE html>
<html lang="en">
  <head><title>Groceries list</title></head>
  <body>
    <h3>List of groceries purchased</h3>
    <!-- element where the list will be appended -->
    <div id="app"></div>
    <!-- we refer to the compiled js file here -->
    <script src="grocery.js"></script>
  </body>
</html>

*****OUTPUT*****

venereology answered 3 years ago
Next > < Previous

Related Solutions

You are to create a class called Person. You should create the definition of the class...
You are to create a class called Person. You should create the definition of the class Person in a file person.h and the functions for Person in person.cpp. You will also create a main program to be housed in personmain.cpp. A Person will have attributes of Height (in inches) Weight (in pounds to 2 decimal places) Name (string) Gender (‘m’ or ‘f’) Ethnicity/Race (could be more than one word) Occupation (also more than a single word) A Person will have...
The Tokenizer.java file should contain: A class called: Tokenizer Tokenizer should have a private variable that...
The Tokenizer.java file should contain: A class called: Tokenizer Tokenizer should have a private variable that is an ArrayList of Token objects. Tokenizer should have a private variable that is an int, and keeps track of the number of keywords encountered when parsing through a files content. In this case there will only be one keyword: public. Tokenizer should have a default constructor that initializes the ArrayList of Token objects Tokenizer should have a public method called: tokenizeFile tokenizeFile should...
1. Create a1. Create a new java file named Name.java that should have Name class based...
1. Create a1. Create a new java file named Name.java that should have Name class based on new java file named Name.java that should have Name class based on the following UML Name - first: String - last: String + Name () + Name (String firstName, String lastName) + getName () : String + setName (String firstName, String lastName) : void + getFirst () : String + setFirst (String firstName) : void + getLast () : String + setLast (String...
Create a class called Car (Car.java). It should have the following private data members: • String...
Create a class called Car (Car.java). It should have the following private data members: • String make • String model • int year Provide the following methods: • default constructor (set make and model to an empty string, and set year to 0) • non-default constructor Car(String make, String model, int year) • getters and setters for the three data members • method print() prints the Car object’s information, formatted as follows: Make: Toyota Model: 4Runner Year: 2010 public class...
Create a class called Car (Car.java). It should have the following private data members: • String...
Create a class called Car (Car.java). It should have the following private data members: • String make • String model • int year Provide the following methods: • default constructor (set make and model to an empty string, and set year to 0) • non-default constructor Car(String make, String model, int year) • getters and setters for the three data members • method print() prints the Car object’s information, formatted as follows: Make: Toyota Model: 4Runner Year: 2010 public class...
Start NetBeans. Create a new project called Lab7. Create a Java main class file using the...
Start NetBeans. Create a new project called Lab7. Create a Java main class file using the class name YourlastnameLab7 with your actual last name. Create a Java class file for a Polygon class. Implement the Polygon class. Add a private instance variable representing the number of sides in the polygon. Add a constructor that takes a single argument and uses it to initialize the number of sides. If the value of the argument is less than three, display an error...
This is python #Create a class called Rectangle. Rectangle should #have two attributes (instance variables): length...
This is python #Create a class called Rectangle. Rectangle should #have two attributes (instance variables): length and #width. Make sure the variable names match those words. #Both will be floats. # #Rectangle should have a constructor with two required #parameters, one for each of those attributes (length and #width, in that order). # #Rectangle should also have a method called #find_perimeter. find_perimeter should calculate the #perimeter of the rectangle based on the current values for #length and width. # #perimeter...
In C++ Create an abstract class called Shape Shape should have the following pure virtual functions:...
In C++ Create an abstract class called Shape Shape should have the following pure virtual functions: getArea() setArea() printArea() Create classes to inherit from the base class Circle Square Rectangle Both implement the functions derived from the abstract base class AND must have private variables and functions unique to them like double Radius double length calculateArea() Use the spreadsheet info.txt read in information about the circle, rectangle, or square text file: circle   3.5   square   3   rectangle   38   36 circle   23  ...
Create a file named StudentArrayList.java,within the file create a class named StudentArrayList. This class is meant...
Create a file named StudentArrayList.java,within the file create a class named StudentArrayList. This class is meant to mimic the ArrayList data structure. It will hold an ordered list of items. This list should have a variable size, meaning an arbitrary number of items may be added to the list. Most importantly this class should implement the interface SimpleArrayList provided. Feel free to add as many other functions and methods as needed to your class to accomplish this task. In other...
You are to create a class called ManageDB. The ManageDB class will have a 2 input...
You are to create a class called ManageDB. The ManageDB class will have a 2 input constructor that has the following definition: ManageDB(int number, String fileName) The constructor will create an array of EmployeeDB objects of length "number". The constructor will read the file located at "fileName" and extract the information from that file to populate a database of EmployeeDB objects. The file contains information on the EmployeeDB objects. This information is contained in records. The format of each record...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT