JSFiddle - React, Tailwind, and code Playground

by raajdand

HTML

<section>
  <h3>
    Reward Balance
  </h3>
 
   <div class="two-column">
     <div class="item">
       <a href=""> Points 1</a>
       <div>
       1234
       </div>
     </div>
     <div class="item">
       <a href=""> Points 2</a>
       <div>
       5678
       </div>
     </div>
   </div>
</section>

CSS

.two-column {
  display: flex;
}

.item {
  flex-grow: 1;
}

JavaScript

function sumOfArrayItems(arr) {
	return arr.map((item) => {
		const [key, value] = item.split(':');
    
    if(key == value) {
    	return 1;
    } else if(key > value) {
    	return 2;
    } else {
    	return 3;
    }
  }).reduce((a, i) => a + i);
}

const res = sumOfArrayItems(['1:0','2:0','3:0','4:4','2:2','3:3','1:4','2:3']);

console.log(res);

class Product {
	constructor(name, price) {
   this.name = name;
   this.price = price;
  }
}

class Books extends Product {
  constructor(name, price, author) {
  	super(name, price);
  	this.author = author;
  }
}

class Cart {
	constructor(books) {
  	this.cart = [];
  	this.books = books;
  }
  
  addProduct(product) {
  	this.cart.push(product);
  }
  
  removeProduct(product) {
  	const productIndex = this.cart.findIndex(item => item.id === product.id);
    
  	this.cart.splice(productIndex, 1);
  }
}