All solutions

Still improving on using RxJs operators and subjects. :D

Do not forget to disable your ad-blocker (if you have one active). Feedback is welcome!

I kinda gave up on styling the filter by region select dropdown, padding didn't work at all. Any suggestions on how can i solve this issue? General feedback is also welcome, thanks in advance!

I would like to know how could i've added that vertical line on the left side between comments. I've tried using a hr/div and rotate it by 90 deg, but i wouldn't get it's position right even with % values... not to mention the width too

I have some issues with tasks inserted while being marked as complete, specifically with the checkbox (i have to click 2 times after being pushed into the list to uncheck it, unlike the other normally inserted tasks where one click is enough). Any other feedback is welcome!

Initially i had some issues coming up with a non-buggy solution for discount toggle button functionality, eventually i came up with the idea of nesting another event listener (for the discount disable) inside the main toggle event listener. My question is, what could have been a better solution for this? I also have a question regarding the desktop css layout. I've had some issues getting the desired layout while using grid for the last two items (the perks list and trial button). I could not simply align and justify only these items and had to "cheat" and use negative margin-top and some margin-bottom. What could have been the reason for this? Thank you for your time!

checkbox.checked = false; //Set toggle button off by default
//Nested event listeners for on-off toggling functionality
function monthly_yearly_billing(){ //Toggle button on - discount activated!
        checkbox.checked = true; //Activated button
        price_range.removeEventListener('input', mainPrices);//Remove the main prices event
        price_range.addEventListener('input', discountPrices);//Add the discount prices event
        discountPricesBasedOnCounterValue(counter);//Show discount price after toggling - eg(16$ off button - 12$ on button; 36$ off button - 27$ on button)
        this.removeEventListener('click', monthly_yearly_billing); //remove this function from within it's own context (so that it won't always fire itself first and not be able to disable the button after 2nd click)



         checkbox.addEventListener('click', function(){ //Second click event - turn off
                     checkbox.checked = false;
                     price_range.removeEventListener('input', discountPrices); //Remove discount prices event
                     price_range.addEventListener('input', mainPrices); //Add main prices event back
                     mainPricesBasedOnCounterValue(counter);//Show main price again after toggling 
                    this.addEventListener('click', monthly_yearly_billing); //Add the toggle-on function back!
        })
  
}
checkbox.addEventListener('click', monthly_yearly_billing);

Any feedback for improvement is welcome.