FSR170823 :- OOP + Higher order array functions | Modern Javascript

JavaScript Conversations
#1

Hello Students :innocent:
Kindly perform following tasks with Classes & Objects & Higher order array functions.

Findout:

1.total available items name
2.available items amount
3.items which are out of stock
4.all items (including out of stock)
5.item rate greater then 100 rupees
6.item rate lesser then 100 rupees
7.Coming soon items

var grocery_store=[
    {
        title: "Fresh Ginger",
        price: 110,
        status: "available",
        soldquantity: 50,
        commingsoon: "no",
        category: "vegetables",
        description: "Good source of Vitamin B6, C, Potassium, Manganese and Dietary Fiber"
    },
    {
        title: "Fresh Chilli",
        price: 8,
        status: "unavailable",
        soldquantity: 20,
        commingsoon: "no",
        category: "vegetables",
        description: "Good source of Vitamin B6, C, Iron and Potassium."
    },
    {
        title: "Fresh Banana",
        price: 20,
        status: "available",
        soldquantity: 90,
        commingsoon: "no",
        category: "fruits",
        description: "Rich in potassium, vitamin C, B6 and Dietary Fiber."
    },
    {
        title: "Fresh apple",
        price: 100,
        status: "unavailable",
        soldquantity: 0,
        commingsoon: "yes",
        category: "fruits",
        description: "Good source of Vitamin C, Dietary Fiber, Flavonoids and antioxidants."
    },
    {
        title: "Fresh Cabbage",
        price: 10,
        status: "available",
        soldquantity: 59,
        commingsoon: "no",
        category: "vegatbles",
        description: "It is a good source of Vitamin K, Dietary Fiber, Calicum, Potassium and Phosphorus."
    },
    {
        title: "Fresh Capsicum",
        price: 90,
        status: "available",
        soldquantity: 79,
        commingsoon: "no",
        category: "vegatbles",
        description: "Good source of Vitamin A,C,E, Folate and Dietary Fiber."
    },
    {
        title: "Fresh Watermelon",
        price: 200,
        status: "unavailable",
        soldquantity: 0,
        commingsoon: "yes",
        category: "fruits",
        description: "Watermelons have excellent hydrating properties with 90% water content"
    },
    {
        title: "Fresh Brinjal",
        price: 90,
        status: "available",
        soldquantity: 40,
        commingsoon: "no",
        category: "vegetables",
        description: "Good Source of Thiamin and B6 and contains little measures of Vitamin E, Vitamin C, and Vitamin K."
    },
    {
        title: "Fresh Orange",
        price: 110,
        status: "available",
        soldquantity: 90,
        commingsoon: "no",
        category: "fruits",
        description: "Valencia Rich in taste 100% Natural"
    },
    {
        title: "Fresh Potato",
        price: 120,
        status: "unavailable",
        soldquantity: 0,
        commingsoon: "yes",
        category: "vegetables",
        description: "Good source of Vitamin B6, C, Potassium, and Magnesium."
    },
]
#2

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Community Post 2</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #mainSection{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .boxStyle {
            margin: 5px;
            padding: 10px;
            border: 2px solid #009688;
            border-radius: 5px;
        }
        h3{
            margin: 0;
            margin-bottom: 5px;
        }
        .boxStyle div{
            margin: 2px;
        }
    </style>
</head>

<body>
    <div id="mainSection">

    </div>

    <script src="3.js" type="text/javascript"></script>
</body>

</html>

Java Script

var groceryStore = [
    {
        title: "Fresh Ginger",
        price: 110,
        status: "available",
        soldquantity: 50,
        commingsoon: "no",
        category: "vegetables",
        description: "Good source of Vitamin B6, C, Potassium, Manganese and Dietary Fiber"
    },
    {
        title: "Fresh Chilli",
        price: 8,
        status: "unavailable",
        soldquantity: 20,
        commingsoon: "no",
        category: "vegetables",
        description: "Good source of Vitamin B6, C, Iron and Potassium."
    },
    {
        title: "Fresh Banana",
        price: 20,
        status: "available",
        soldquantity: 90,
        commingsoon: "no",
        category: "fruits",
        description: "Rich in potassium, vitamin C, B6 and Dietary Fiber."
    },
    {
        title: "Fresh apple",
        price: 100,
        status: "unavailable",
        soldquantity: 0,
        commingsoon: "yes",
        category: "fruits",
        description: "Good source of Vitamin C, Dietary Fiber, Flavonoids and antioxidants."
    },
    {
        title: "Fresh Cabbage",
        price: 10,
        status: "available",
        soldquantity: 59,
        commingsoon: "no",
        category: "vegatbles",
        description: "It is a good source of Vitamin K, Dietary Fiber, Calicum, Potassium and Phosphorus."
    },
    {
        title: "Fresh Capsicum",
        price: 90,
        status: "available",
        soldquantity: 79,
        commingsoon: "no",
        category: "vegatbles",
        description: "Good source of Vitamin A,C,E, Folate and Dietary Fiber."
    },
    {
        title: "Fresh Watermelon",
        price: 200,
        status: "unavailable",
        soldquantity: 0,
        commingsoon: "yes",
        category: "fruits",
        description: "Watermelons have excellent hydrating properties with 90% water content"
    },
    {
        title: "Fresh Brinjal",
        price: 90,
        status: "available",
        soldquantity: 40,
        commingsoon: "no",
        category: "vegetables",
        description: "Good Source of Thiamin and B6 and contains little measures of Vitamin E, Vitamin C, and Vitamin K."
    },
    {
        title: "Fresh Orange",
        price: 110,
        status: "available",
        soldquantity: 90,
        commingsoon: "no",
        category: "fruits",
        description: "Valencia Rich in taste 100% Natural"
    },
    {
        title: "Fresh Potato",
        price: 120,
        status: "unavailable",
        soldquantity: 0,
        commingsoon: "yes",
        category: "vegetables",
        description: "Good source of Vitamin B6, C, Potassium, and Magnesium."
    },
]

// 1.total available items name
// 2.available items amount
// 3.items which are out of stock
// 4.all items (including out of stock)
// 5.item rate greater then 100 rupees
// 6.item rate lesser then 100 rupees
// 7.Coming soon items

var mainDiv = document.getElementById('mainSection');
class grocery {
    constructor(data) {
        this.value = data;
    }
    title(abc) {
        var name = this.value.filter((x) => {
            return x.status == abc;
        });
        // console.log(name);
        var itemNames = document.createElement('div');
        itemNames.className = 'boxStyle';
        var heading1 = document.createElement('h3');
        heading1.innerHTML = 'Total Items availabe in Store'
        itemNames.appendChild(heading1);
        name.map((e) => {
            var names = document.createElement('div');
            names.innerHTML = e.title;
            itemNames.appendChild(names);
        });
        mainDiv.appendChild(itemNames);
    }

    amount(xyz) {
        var namePrice = this.value.filter((y) => {
            return y.status == xyz;
        });
        // console.log(namePrice);
        var itemPrice = document.createElement('div');
        itemPrice.className = 'boxStyle';
        var heading2 = document.createElement('h3');
        heading2.innerHTML = 'Available Items and their price';
        itemPrice.appendChild(heading2);
        namePrice.map((f) => {
            var names = document.createElement('div');
            names.innerHTML = f.title+" : "+f.price;
            itemPrice.appendChild(names);
        });
        mainDiv.appendChild(itemPrice);
    }

    Stock(avai) {
        console.log(this.value);
        var availableItems = document.createElement('div');
        availableItems.className = 'boxStyle';
        var heading3 = document.createElement('h3');
        heading3.innerHTML = 'Currently Out of Stock Items';
        availableItems.appendChild(heading3);
        var noStock = this.value.filter((z) => {
            return z.status == avai;
        });
        console.log(noStock);
        noStock.map((g) => {
            var noStockItems = document.createElement('div');
            noStockItems.innerHTML = g.title;
            availableItems.appendChild(noStockItems);
        });
        mainDiv.appendChild(availableItems);
    }

    everyItems() {
        var shopItems = document.createElement('div');
        shopItems.className = 'boxStyle';
        var heading4 = document.createElement('h3');
        heading4.innerHTML = 'Availabe Items in Shop';
        shopItems.appendChild(heading4);
        var items = this.value.map((a) => {
            return a;
        });
        // console.log(items);
        items.map((h) => {
            var apple = document.createElement('div');
            apple.innerHTML = h.title;
            shopItems.appendChild(apple);
        });
        mainDiv.appendChild(shopItems);
    }

    greaterItems(value) {
        var higherValue = document.createElement('div');
        higherValue.className = 'boxStyle';
        var heading5 = document.createElement('h3');
        heading5.innerHTML = 'Items price above 100';
        higherValue.appendChild(heading5);
        var greater = this.value.filter((b) => {
            return b.price > value;
        });
        // console.log(greater);
        greater.map((i) => {
            var high = document.createElement('div');
            high.innerHTML = i.title;
            higherValue.appendChild(high);
        });
        mainDiv.appendChild(higherValue);
    }

    lesserItems(value) {
        var lowerValue = document.createElement('div');
        lowerValue.className = 'boxStyle';
        var heading6 = document.createElement('h3');
        heading6.innerHTML = 'Items price below 100';
        lowerValue.appendChild(heading6);
        var lesser = this.value.filter((c) => {
            return c.price < value;
        });
        // console.log(lesser);
        lesser.map((j) => {
            var low = document.createElement('div');
            low.innerHTML = j.title;
            lowerValue.appendChild(low);
        });
        mainDiv.appendChild(lowerValue);
    }
    commingSoon(status) {
        var laterAvailabe = document.createElement('div');
        laterAvailabe.className = 'boxStyle';
        var heading7 = document.createElement('h3');
        heading7.innerHTML = 'Upcoming Items';
        laterAvailabe.appendChild(heading7);
        var update = this.value.filter((d) => {
            return d.commingsoon == status;
        });
        // console.log(update);
        update.map((k) => {
            var newItems = document.createElement('div');
            newItems.innerHTML = k.title;
            laterAvailabe.appendChild(newItems);
        });
        mainDiv.appendChild(laterAvailabe);
    }

}

var groceryShop = new grocery(groceryStore);
groceryShop.title('available');
groceryShop.amount('available');
groceryShop.Stock('unavailable');
groceryShop.everyItems();
groceryShop.greaterItems(100);
groceryShop.lesserItems(100);
groceryShop.commingSoon('yes');

Output
Output1920×527 54.5 KB

1 Like
#3

Good work as always :slight_smile:

1 Like
#4 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Js Activity 1</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #mainSection{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .boxStyle {
        margin: 5px;
        padding: 10px;
        border: 2px solid #009688;
        border-radius: 5px;
    }
    h3{
        margin: 0;
        margin-bottom: 5px;
    }
    .boxStyle div{
        margin: 2px;
    }
</style>

</head>
<body>
    

    <script src="ACTIVITY1.js"></script>
</body>
</html>
type or paste code here
#5 
// 1.total available items name
// 2.available items amount
// 3.items which are out of stock
// 4.all items (including out of stock)
// 5.item rate greater then 100 rupees
// 6.item rate lesser then 100 rupees
// 7.Coming soon items

var mainDiv = document.getElementById('mainSection');
class store{
    constructor(data){
        this.val=(data);
    }
    grocery_title(name){
        var res1=this.val.map((item)=>{
            return item.title
        })
      console.log(res1);
     document.write(res1+"<br>");
    }
    low_rate(price){
        var res2=this.val.filter((item)=>{
            return item.price<100;
        })
        console.log(res2);
        document.write(res2+"<br>");
    }
    high_rate(price){
        var res3=this.val.filter((item)=>{
            return item.price>100;
        })
        console.log(res3);
        document.write(res3+"<br>");
    }
    stock_status(sta){
        var res4=this.val.filter((item)=>{
            return item.status==sta;
        })
      console.log(res4);
      document.write(res4);
    }
    stock_status(com_s){
        var res5=this.val.filter((item)=>{
            return item.commingsoon==item;
        })
      console.log(res5);
      document.write(res5);
    }
}
// var z=document.getElementById("main_div");
// for(var i=0;i<res1.length;i++){
//     var name_gro=document.createElement('div')

//  z.appendChild(name_gro);
//  var y=res1[i];
//  name_gro.innerHTML=y;
//  console.log(y)

  
var x=new store(grocery_store);
x.grocery_title();
x.low_rate();
x.high_rate();
x.stock_status("unavailable");
x.stock_status("yes")type or paste code here
#6

Output
Output1920×527 54.5 KB

#8 
var groceryStore=[
    {
        title: "Fresh Ginger",
        price: 110,
        status: "available",
        soldquantity: 50,
        commingsoon: "no",
        category: "vegetables",
        description: "Good source of Vitamin B6, C, Potassium, Manganese and Dietary Fiber"
    },
    {
        title: "Fresh Chilli",
        price: 8,
        status: "unavailable",
        soldquantity: 20,
        commingsoon: "no",
        category: "vegetables",
        description: "Good source of Vitamin B6, C, Iron and Potassium."
    },
    {
        title: "Fresh Banana",
        price: 20,
        status: "available",
        soldquantity: 90,
        commingsoon: "no",
        category: "fruits",
        description: "Rich in potassium, vitamin C, B6 and Dietary Fiber."
    },
    {
        title: "Fresh apple",
        price: 100,
        status: "unavailable",
        soldquantity: 0,
        commingsoon: "yes",
        category: "fruits",
        description: "Good source of Vitamin C, Dietary Fiber, Flavonoids and antioxidants."
    },
    {
        title: "Fresh Cabbage",
        price: 10,
        status: "available",
        soldquantity: 59,
        commingsoon: "no",
        category: "vegatbles",
        description: "It is a good source of Vitamin K, Dietary Fiber, Calicum, Potassium and Phosphorus."
    },
    {
        title: "Fresh Capsicum",
        price: 90,
        status: "available",
        soldquantity: 79,
        commingsoon: "no",
        category: "vegatbles",
        description: "Good source of Vitamin A,C,E, Folate and Dietary Fiber."
    },
    {
        title: "Fresh Watermelon",
        price: 200,
        status: "unavailable",
        soldquantity: 0,
        commingsoon: "yes",
        category: "fruits",
        description: "Watermelons have excellent hydrating properties with 90% water content"
    },
    {
        title: "Fresh Brinjal",
        price: 90,
        status: "available",
        soldquantity: 40,
        commingsoon: "no",
        category: "vegetables",
        description: "Good Source of Thiamin and B6 and contains little measures of Vitamin E, Vitamin C, and Vitamin K."
    },
    {
        title: "Fresh Orange",
        price: 110,
        status: "available",
        soldquantity: 90,
        commingsoon: "no",
        category: "fruits",
        description: "Valencia Rich in taste 100% Natural"
    },
    {
        title: "Fresh Potato",
        price: 120,
        status: "unavailable",
        soldquantity: 0,
        commingsoon: "yes",
        category: "vegetables",
        description: "Good source of Vitamin B6, C, Potassium, and Magnesium."
    },
]


// Findout:

// 1.total available items name
// 2.available items amount
// 3.items which are out of stock or unavaiable items
// 4.all items (including out of stock)
// 5.item rate greater then 100 rupees
// 6.item rate lesser then 100 rupees
// 7.Coming soon items
var mainDiv = document.getElementById('mainSection');
class groceryshop{
    constructor(data){
        //console.log(data);
        this.val = data
    }
    items_avaiable(stat){
        var res1 = this.val.filter((element)=>{
            return element.status == stat
        });
        //console.log(res1);
        var items_avaiableNames = document.createElement('div')
        items_avaiableNames.className = "box_styling";
        var heading_div = document.createElement('div');
        heading_div.innerHTML = "Available Items Names"
        heading_div.className = "heading_style"
        items_avaiableNames.appendChild(heading_div);
          res1.map((a)=>{
            //console.log(a.title);
            var aN = document.createElement('div');
            aN.innerHTML = a.title;
            //console.log(aN);
            items_avaiableNames.appendChild(aN);
            //console.log(items_avaiableNames);
          });
        mainDiv.appendChild(items_avaiableNames);
    }

    available_via_price(mah){
        var res1 = this.val.filter((element)=>{
           return element.status == mah
        });
        //console.log(res1);
        var available_items_price = document.createElement('div');
        available_items_price.className = "box_styling"
        var heading_div = document.createElement('div');
        heading_div.innerHTML = "Unavailable Items List"
        heading_div.className = "heading_style"
        available_items_price.appendChild(heading_div);
        res1.map((b)=>{
            //console.log(b.title+" :- "+b.price)
            var avp = document.createElement('div');
            avp.innerHTML = b.title+" :- "+b.price;
            //console.log(avp);
            available_items_price.appendChild(avp);
            //console.log(available_items_price);
        });
        mainDiv.appendChild(available_items_price);
    }        


    out_of_stock(stat){
        var res3 = this.val.filter((element)=>{
            return element.status == stat
        });
        //console.log(res3);
        var unavaiable_items = document.createElement('div');
        unavaiable_items.className = "box_styling";
        var heading_div = document.createElement('div');
        heading_div.innerHTML = "Unavailable Items List"
        heading_div.className = "heading_style"
        unavaiable_items.appendChild(heading_div);
        res3.map((c)=>{
            //console.log(c.title);
            var out_of_stock = document.createElement('div');
            out_of_stock.innerHTML = c.title;
            //console.log(out_of_stock);
            unavaiable_items.appendChild(out_of_stock);
        });
        mainDiv.appendChild(unavaiable_items);
    }

    total_items(){
        var res4 = this.val.map((element)=>{
            return element
        });
        //console.log(res4);
        var total_items = document.createElement('div');
        total_items.className = "box_styling";
        var heading_div = document.createElement('div');
        heading_div.innerHTML = "Total Items List in Store"
        heading_div.className = "heading_style"
        total_items.appendChild(heading_div);
        res4.map((d)=>{
            //console.log(d.title);
            var totalItems = document.createElement('div');
            totalItems.innerHTML = d.title;
            
            total_items.appendChild(totalItems);
        });
        mainDiv.appendChild(total_items);

    }
    items_greaterthan100(){
        var res5 = this.val.filter((element)=>{
            return element.price > 100
        });
        //console.log(res5);
        var greaterthan100_items = document.createElement('div');
        greaterthan100_items.className = "box_styling";
        var heading_div = document.createElement('div');
        heading_div.innerHTML = "Items Greater than Rs.100"
        heading_div.className = "heading_style"
        greaterthan100_items.appendChild(heading_div);
        res5.map((e)=>{
            //console.log(e.title);
        var higherthan100 = document.createElement('div');
        higherthan100.innerHTML = e.title;
        //console.log(higherthan100);
        greaterthan100_items.appendChild(higherthan100);
        //console.log(greaterthan100_items);
        });
        mainDiv.appendChild(greaterthan100_items);
    }

    items_lesserthan100(){
        var res6 = this.val.filter((element)=>{
            return element.price < 100
        });
        //console.log(res6);
        var lesserthan100_items = document.createElement('div');
        lesserthan100_items.className = "box_styling";
        var heading_div = document.createElement('div');
        heading_div.innerHTML = "Items Less than Rs.100"
        heading_div.className = "heading_style"
        lesserthan100_items.appendChild(heading_div);
        res6.map((f)=>{
            //console.log(f.title);
            var lessthan100 = document.createElement('div');
            lessthan100.innerHTML = f.title;
            //console.log(lessthan100);
            lesserthan100_items.appendChild(lessthan100);
            //console.log(lesserthan100_items);
        });
        mainDiv.appendChild(lesserthan100_items);
    }
    comingSoon_items(){
        var res7 = this.val.filter((element)=>{
            return element.commingsoon == "yes"
        });
        //console.log(res7);
        var comingSoon_items = document.createElement('div')
        comingSoon_items.className = "box_styling"
        var heading_div = document.createElement('div');
        heading_div.innerHTML = "Coming Soon Items"
        heading_div.className = "heading_style"
        comingSoon_items.appendChild(heading_div);
        res7.map((g)=>{
            //console.log(g.title);
            var CS_names = document.createElement('div');
            CS_names.innerHTML = g.title
            //console.log(CS_names);
            comingSoon_items.appendChild(CS_names);
            //console.log(comingSoon_items);
        });
        mainDiv.appendChild(comingSoon_items);
    }



}
var items = new groceryshop(groceryStore);
items.items_avaiable("available");
items.available_via_price("available"); 
items.out_of_stock("unavailable");
items.total_items();
items.items_greaterthan100();
items.items_lesserthan100();
items.comingSoon_items();

practice -task
practice -task1366×390 14.6 KB

#9

Html

<!DOCTYPE html>
<html>
    <head>
        <title>Session practice session</title>
        <style>
            body{
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
            }
            #mainSection{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }
            .box_styling{
                border: 4px solid green;
                margin: 5px;
                padding: 5px;
            }
            .heading_style{
                color: red;
                font-size: 20px;
                font-weight: 200;
                font-style: italic;
                margin-bottom: 5px;
                text-align: center;
            }
        </style>
    </head>

    <body>
    
        <div id="mainSection">

        </div>



        <script src="session20.js" type="text/javascript"></script>
    </body>
</html>