Помогите с заданием по rxjs

Здраствуйте. Прохожу видео уроки по Расширенным возможностям JS, тема о библиотеке RxJS и вот там задали вот такое задание:

Создайте приложение, в котором на странице будет 3 блока с рекламой. Создайте потоки, которые каждую секунду генерируют вывод 2 случайных чисел. При нажатии на блок – должна происходить подписка, которая, используя данные два числа – меняет расположение элемента рекламы на странице. Для каждого блока – будет своя подписка, которая будет останавливаться, если пользователь кликнет по рекламе повторно. Используйте холодный Observable для блоков.

В итоге что мог то и сделал, все работает но чувствую что реализовать это задание можно куда быстрее и использовать для этого меньше кода (так как здесь смесь RxJS и простого JS) Посмотрите код и подскажите как сделать его с помощью именно библиотеки RxJS а так же хотел спросить насколько важна сейчас эта библиотека?Так как при помощи обычного JS это задание было бы легче выполнить

       <div id="rekl1">Блок с рекламой 1</div>
       <div id="rekl2">Блок с рекламой 2</div>
        <div id="rekl3">Блок с рекламой 3</div> 
    </div>
   <script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script> 
   <script>
       const {map,tap}=rxjs.operators
       const{Observable,concat}=rxjs;
       let flag=false;
       let black=false;
       let mlack=false;
       let reklamaOne=document.querySelector("#rekl1");
     let reklamaTwo=document.querySelector("#rekl2");
       let reklamaThree=document.querySelector("#rekl3");
    
  
  let cold$=Observable.create((observer)=>{
   observer.next(Math.random()*1000)
  })
 

 let one= rxjs.fromEvent(reklamaOne,"click").pipe(tap(e=>
{
   if(flag){
     one.unsubscribe()
   } 
       flag=!flag

}

 )).subscribe(x=>{
   cold$.pipe(tap(x=>reklamaOne.style.left=x+"px")).subscribe(name=>{
   cold$.pipe(tap(x=>reklamaOne.style.top=x+"px")).subscribe(x=>{
       console.log(x)
   })})})


   let two= rxjs.fromEvent(reklamaTwo,"click").pipe(tap(e=>
{
   if(black){
     two.unsubscribe()
   } 
       black=!black
}
 )).subscribe(x=>{
   cold$.pipe(tap(x=>reklamaTwo.style.left=x+"px")).subscribe(name=>{
   
   cold$.pipe(tap(x=>reklamaTwo.style.top=x+"px")).subscribe(x=>{
       console.log(x)
   })})})

   let three= rxjs.fromEvent(reklamaThree,"click").pipe(tap(e=>
{
   if(mlack){
     three.unsubscribe()
   } 
       mlack=!mlack
}
 )).subscribe(x=>{
   cold$.pipe(tap(x=>reklamaThree.style.left=x+"px")).subscribe(name=>{
   
   cold$.pipe(tap(x=>reklamaThree.style.top=x+"px")).subscribe(x=>{
       console.log(x)
   })})})
   ```
     


Ответы (0 шт):