Display Mobiles by Applying Filter

AIM: On the page, display the price of the mobile-based in three different colors. Instead of using the number in our code, represent them by string values like GoldPlatinum, PinkGold, SilverTitanium.

Create two files: mobileprice.html and mobileprice.ts

mobileprice.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mobile Price</title>
  <script src="mobileprice.js"></script>
  <style>
    .btn{
      border-style: none;
      background-color: tomato;
      font-family: 'Courier New';
      font-size: 16px;
      font-weight: bold;
      color: white;
      padding: 0px 50px;
    }
  </style>
</head>
<body>
  <div style="text-align: center;"><h1>MOBILE STORE</h1></div>
  <div style="background-color: tomato;height: 25px;text-align: center;">
    <button class="btn" onclick="DisplayMobiles('Gold')">GoldPlatinum</button>
    <button class="btn" onclick="DisplayMobiles('Pink')">PinkGold</button>
    <button class="btn" onclick="DisplayMobiles('Silver')">SilverTitanium</button>
  </div>
  <div id="root"></div>
</body>
</html>

mobileprice.ts
var mobileinfo = [
  {model: 'Motorola Edge 30 Fusion',imageurl: 'images/GoldMoto.jpg',color: 'Gold',price: 'Rs. 39,999'},
  {model: 'Vivo T2x',imageurl: 'images/GoldVivo.jpg',color: 'Gold',price: '13,899'},
  {model: 'Realme 11',imageurl: 'images/GoldRealMe.jpg',color: 'Gold',price: '17,399'},
  {model: 'Redmi 6A',imageurl: 'images/PinkRedmi.jpg',color: 'Pink',price: '5,300'},
  {model: 'Nokia 4.2',imageurl: 'images/PinkNokia.jpg',color: 'Pink',price: '13,699'},
  {model: 'Motorola G32',imageurl: 'images/SilverMoto.jpg',color: 'Silver',price: '10,780'},
  {model: 'Samsung Galaxy F54',imageurl: 'images/SilverSamsung.jpg',color: 'Silver',price: '24,895'},
  {model: 'Redmi 10T',imageurl: 'images/SilverRedmi.jpg',color: 'Silver',price: '21,999'}
]

function DisplayMobiles(colorname){
  var root = document.getElementById('root') as HTMLDivElement
  root.innerHTML = ""

  var displaymobiles = document.createElement('div')

  mobileinfo.forEach((mobile)=>{
    if(colorname==mobile.color){
      var m = document.createElement('div')
      var mobileimg = document.createElement('img')
      mobileimg.setAttribute('src',mobile.imageurl)
      mobileimg.setAttribute('width','250px')
      mobileimg.setAttribute('height','300px')
      m.appendChild(mobileimg)
      var mobiledesc = document.createElement('p')
      mobiledesc.innerHTML = mobile.model
      m.appendChild(mobiledesc)
      var mobileprice = document.createElement('p')
      mobileprice.innerHTML = mobile.price
      m.appendChild(mobileprice)
      displaymobiles.appendChild(m)
    }
  })

  root.appendChild(displaymobiles)
}

AIM: Define a function inside the event handler to filter the product array with the selected product object using the productId received by the function.

Create two files: mobilefilter.html and mobilefilter.ts

mobilefilter.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mobile Filter</title>
  <script src="mobilefilter.js"></script>
</head>
<body>
  <form name="filterin">
    <input type="text" name="prodid" placeholder="Product ID" />   
    <button type="button" onclick="DisplayMobiles(document.filterin.prodid.value)">Filter</button>
  </form><br>
  <div id="MobileInfo"></div>
  <script>
    DisplayMobiles("")
  </script>
</body>
</html>

mobilefilter.ts
var mobiles = [
  {prodID:'M101',model:'Motorola Edge 30 Fusion',price:'Rs. 39,999 /-'},
  {prodID:'M102',model:'Motorola G42',price:'Rs. 10,299 /-'},
  {prodID:'M103',model:'Motorola e32s',price:'Rs. 12,299 /-'}
]

function DisplayMobiles(searchText){
  var mi = document.getElementById("MobileInfo") as HTMLInputElement
  mi.innerHTML = ""
  var table = document.createElement('table')
  table.setAttribute('border','1')
  var tr = document.createElement('tr')
  var th1 = document.createElement('th')
  th1.innerHTML = "Product ID"
  tr.appendChild(th1)
  var th2 = document.createElement('th')
  th2.innerHTML = "Model"
  tr.appendChild(th2)
  var th3 = document.createElement('th')
  th3.innerHTML = "Price"
  tr.appendChild(th3)
  table.appendChild(tr)
  mobiles.forEach(m => {
    if(searchText==m.prodID || searchText==""){
      var nexttr = document.createElement('tr')
      var td1 = document.createElement('td')
      td1.innerHTML = m.prodID
      nexttr.appendChild(td1)
      var td2 = document.createElement('td')
      td2.innerHTML = m.model
      nexttr.appendChild(td2)
      var td3 = document.createElement('td')
      td3.innerHTML = m.price
      nexttr.appendChild(td3)
      table.appendChild(nexttr)
    }
  });
  mi.appendChild(table)
}
Posted by