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 1 year ago

Next > < Previous

Related Solutions

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...

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 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...

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...

JAVA Programming ECLIPSE IDE 1. Create an abstract class called Book. The class should declare the...

C#. Build a class that will be called “MyDate”. The class should have 3 properties: month,...

C#. Build a class that will be called “MyDate”. The class should have 3 properties: month, day and year. Make month, day and year integers. Write the get and set functions, a display function, and constructors, probably two constructors. (No Database access here.)

In C++ Define a base class called Person. The class should have two data members to...

In C++ Define a base class called Person. The class should have two data members to hold the first name and last name of a person, both of type string. The Person class will have a default constructor to initialize both data members to empty strings, a constructor to accept two string parameters and use them to initialize the first and last name, and a copy constructor. Also include appropriate accessor and mutator member functions. Overload the operators == and...

Subjects