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 2 years ago
Next > < Previous

Related Solutions

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...
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...
Create a Java class file for a Car class. In the File menu select New File......
Create a Java class file for a Car class. In the File menu select New File... Under Categories: make sure that Java is selected. Under File Types: make sure that Java Class is selected. Click Next. For Class Name: type Car. For Package: select csci2011.lab7. Click Finish. A text editor window should pop up with the following source code (except with your actual name): csci1011.lab7; /** * * @author Your Name */ public class Car { } Implement the Car...
#Create a class called FrapOrder. FrapOrder should #have two attributes (instance variables): size and #extra_shots. Make...
#Create a class called FrapOrder. FrapOrder should #have two attributes (instance variables): size and #extra_shots. Make sure the variable names match those #words. size will be a character, either "S", "M", or "L". #extra_shots will be an integer. # #FrapOrder should have a constructor with two required #parameters, one for each of those attributes (size and #extra_shots, in that order). # #FrapOrder should also have a method called get_total. #get_total should calculate the total cost of the order. #If size...
JAVA A simple Class in a file called Account.java is given below. Create two Derived Classes...
JAVA A simple Class in a file called Account.java is given below. Create two Derived Classes Savings and Checking within their respective .java files. (modify display() as needed ) 1. Add New private String name (customer name) for both, add a New int taxID for Savings only. 2. Add equals() METHOD TO CHECK any 2 accounts Demonstrate with AccountDemo.java in which you do the following: 3. Create 1 Savings Account and 3 Checking Accounts, where 2 checkings are the same....
android studio -Starting with a basic activity, create a new Java class (use File->New->Java class) called...
android studio -Starting with a basic activity, create a new Java class (use File->New->Java class) called DataBaseManager as in Lecture 5 and create a database table in SQLite, called StudentInfo. The fields for the StudentInfo table include StudentID, FirstName, LastName, YearOfBirth and Gender. Include functions for adding a row to the table and for retrieving all rows, similar to that shown in lecture 5. No user interface is required for this question, t -Continuing from , follow the example in...
JAVA Programming ECLIPSE IDE 1. Create an abstract class called Book. The class should declare the...
JAVA Programming ECLIPSE IDE 1. Create an abstract class called Book. The class should declare the following variables: an instance variable that describes the title - String an instance variable that describes the ISBN - String an instance variable that describes the publisher - String an instance variable that describes the price - double an instance variable that describes the year – integer Provide a toString() method that returns the information stored in the above variables. Create the getter and...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT