My conditional always returns the ELSE option in JavaScript

My conditional statement always returns the ELSE option. What do you see in the following code that I don't? This is a partial code of the famous ETCH-A-SKETCH exercise you'd see in any frontend development course. Here is the Github repository, in case you need to check a long version of what I present below. https://github.com/bdarab/ETCH-A-SKETCH As you can see, I am trying to target the className in my input elements. I have tried both 'the dot' and 'the bracket' methods without success.

// choosing grid sizes
const input = document.querySelector('input');
const choice01 = document.querySelector('.choice01');
const choice02 = document.querySelector('.choice02');
const sizeBtn = document
  .querySelector('.btn')
  .addEventListener('click', function() {
    const el = document.createElement('div');
    if (input.class === choice01) {
      el.classList.add('choice01');
    } else if (input.class === choice02) {
      el.classList.add('choice01');
    } else {
      alert('Please select a size.');
    }
  });

<div class="input-container">
  <h3>Change your grid size</h3>
  <label for="grid-size">8 x 50px</label>
  <input type="radio" class="choice01" name="grid-size" value="grid-size" />
  <label for="grid-size">32 x 12px</label>
  <input type="radio" class="choice02" name="grid-size" value="grid-size" checked />

  <button class="btn">submit your choice</button>
</div>