Programming Support: 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)

}
Pages

Display Mobiles by Applying Filter

mobileprice.html

mobileprice.ts

mobilefilter.html

mobilefilter.ts

No comments:

Post a Comment

Total Pageviews
