Directing a button to another page and activating filter html/JS

See also questions close to this topic

• How to devise this solution to Non-Constructible Change challenge from Algoexpert.io

  I'm working through algoexpert.io coding challenges and I'm having trouble undersatnding the suggested solution to one of the questions titled Non-Constructible Change

  Here's the challenge question:

  Given an array of positive integers representing the values of coins in your possession, write a function that returns the minimum amount of change (the minimum sum of money) that you cannot create. The given coins can have any positive integer value and aren't necessarily unique (i.e., you can have multiple coins of the same value).

  For example, if you're given coins = [1, 2, 5], the minimum amount of change that you can't create is 4. If you're given no coins, the minimum amount of change that you can't create is 1.

  // O(nlogn) time, O(n) size.
  function nonConstructibleChange(coins) {
    coins = coins.sort((a, b) => a - b); // O(nlogn) time operation
    let change = 0;
  
    for (coin of coins) {
      if (coin > change + 1) return change + 1;
      change += coin;
    }
  
    return change + 1;
  }
  

  My problem

  I am not completely sure how did the author of the solution come up with the intuition that

  if the current coin is greater than `change + 1`, the smallest impossible change is equal to `change + 1`.
  

  I can see how it tracks, and indeed the algorithm passes all tests, but I'd like to know more about a process I could use to devise this rule.

  Thank you for taking the time to read the question!
• My document is not defined because of lost context

  Working with vanilla.js and my code looks like this:

  class Restaurant {
    constructor() {
      this.menu = [];
      this.categories = ['all'];
    }
    handleSearch(event) {
      const searchInput = document.querySelector('.search-input');
      const minPriceInput = document.querySelector('.min-price');
      const maxPriceInput = document.querySelector('.max-price');
      if (event.target.matches('.search-btn')) {
        event.preventDefault();
        const keyword = searchInput.value.toLowerCase();
        const minPrice = minPriceInput.value || 0;
        const maxPrice = maxPriceInput || Infinity;
        let category = docuemnt.querySelector(".filter-active").dataset.id;
        let filteredMenu = [];
        if (category === this.categories[0]) { // categories[0] is "all";
          filteredMenu = menu.filter(item => {
            return item.title.includes(keyword) && item.price >= minPrice && item.price <= maxPrice;
          })
          this.renderMenu(filteredMenu);
        } else {
          filteredMenu = menu.filter(item => {
            return item.category === selectedCategory && item.title.includes(keyword) && item.price >= minPrice && item.price <= maxPrice;
          })
          this.renderMenu(filteredMenu);
        }
      }
    }
    render() {
      const buttonsContainer = document.querySelector('.btn-container');
      const searchButton = document.querySelector('.search-btn');
      buttonsContainer.addEventListener('click', this.handleFilter.bind(this));
      searchButton.addEventListener('click', this.handleSearch.bind(this));
      this.setCategories();
      this.renderButtons();
      this.renderMenu(this.menu);
    }
  }
  

  my document object is undefined inside the handleSearch method. Is it possible to solve this problem without placing all element variables outside the method? Even if I do so I have another variable "categories" which is using document object.
• React-dnd multiple elements

  I can make react-dnd drag easily having a single element to drag over however I have array of 4 fields I'd like to make draggable. In my example code down below it creates four boxes from mapping the array and each box has a className of 'element'. Which should make them all draggable however they won't move.

  Here is my drag code:

   const ELEMENT = 'element';
      const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
        type: ELEMENT,
        collect: (monitor) => ({
          isDragging: monitor.isDragging()
        })
      }))
  

  Here is my draggable element:

   {FieldDetail.map((e,i) =>  
     <div key={i} ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
          <div className='element' ref={drag}></div>            
      </div>          
    )} 
  

  Any ideas? Do I need to do something more within the type or className?
• How to access type checkbox in css
  In general what is the quality of your health?

  Outstanding

              <label for="q1">Good</label>
              <input type="checkbox" id="q1" name="Question 1" value="...">
  
           
              <label for="q1">Bad</label>
              <input type="checkbox" id="q1" name="Question 1" value="...">
  
           
              <label for="q1">Worse</label>
              <input type="checkbox" id="q1" name="Question 1" value="...">
       
  
              <p class="q">How would you rate our concern for your privacy?</p>
  
              <label for="q2">Outstanding</label>
              <input type="checkbox" id="q2" name="Question 2" value="...">
  
              <label for="q2">Good</label>
              <input type="checkbox" id="q2" name="Question 2" value="...">
           
              <label for="q2">Adequate</label>
              <input type="checkbox" id="q2" name="Question 2" value="...">
           
              <label for="q2">Need improvement</label>
              <input type="checkbox" id="q2" name="Question 2" value="...">
           
              <label for="q2">Poor</label>
              <input type="checkbox" id="q2" name="Question 2" value="...">
           
              <label for="q2">N/A</label>
              <input type="checkbox" id="q2" name="Question 2" value="...">
  
             <p class="q">How often have you visited Medical center in past year?</p>
  
              <label for="q3">First Visit</label>
              <input type="checkbox" id="q1" name ="Question 3" value="...">
  
              <label for="q3">2-5 Visits</label>
              <input type="checkbox" id="q1" name ="Question 3" value="...">
  
              <label for="q3">More then 5 Visit</label>
              <input type="checkbox" id="q1" name ="Question 3" value="...">
  
      </div>          
  

  I have read few posts regarding this topic here, but none worked for me. I want to access the checkbox type for each question(q class) to style them in css to space out the options(checkboxes) across the width of the fieldset evenly, atm they are floating to the left.

  TIA
• How do you hover on one element and change the color of other elements with just CSS?

  I am trying to make a div highlight red and then when I hover over the next box both become blue, then when I hover over the last one all become green. Here is my code:

  HTML:

  </head>
  <body>
      <div class="box-red"></div>
      <div class="box-blue"></div>
      <div class="box-green"></div>
  
  </body>
  

  CSS:

  <style>
      .box-red{
          height: 30px;
          width: 30px;
          background-color: grey;
          margin-top: 30px;
      }
      .box-red:hover{
          background-color: red;
     }
      .box-blue{
          height: 30px;
          width: 30px;
          background-color: grey;
          margin-top: 30px;
      }
      .box-blue:hover{
          background-color: blue;
      }
      .box-green{
          height: 30px;
          width: 30px;
          background-color: grey;
          margin-top: 30px;
      }
  
      .box-green:hover{
          background-color: green;
      }
  </style>
  

  If someone could help me it would be great!
• Mudar o contraste do site clicando em um botão

  Boa noite galera, estou criando um site que seja acessível para deficientes visuais e gostaria de incluir três botões que quando pressionados mudam o contraste do site, um para deixar com contraste branco, outro preto e o outro para default, mas não estou conseguindo de jeito nenhum... Já tentei vendo algumas explicações até aqui, mas ainda não consegui. Acredito que seja feito com JavaScript. Será que poderiam me dar uma força? Abaixo as classes circles são círculos que usarei como os botões.

  <nav id="opcoes-acessibilidade">
      <ul id="acess">
          <li id="contraste" class="acess">Contraste</li>
          <div id="default" class="circles"></div>
          <div id="branco" class="circles"></div>
          <div id="preto" class="circles"></div>
      </ul>
  </nav>