Extract zipcode from onClick event in Ember/Glimmerjs application?

I am new to Ember.js and Glimmer.js world, and am trying to do a simple task idiomatically correct. My task is upon hitting the submit button, I take the zip code entered and ideally update my component where ZIP_CODE is located.

I know upon submit I can do something along the following document.querySelector(#zip).value but Im not sure how to extract it from my template and inject it into my component file properly.

Any help appreciated!

This is my template.hbs file:

<div class="Weather">

    <h2>Current weather</h2>

    <address>
    , 
    </address>

    <div>
        <img src="http://ift.tt/2uD8PUT" alt="weather_icon"/>   
    </div>


    <div>
        <strong>
             &deg;F
        </strong>
    </div>

    <br/>

    <input type="text" placeholder="Zip Code" id="zip"/> 
    <button>Submit</button>
</div>

This is my component.ts file:

import Component, { tracked } from "@glimmer/component";

export default class TrackWeather extends Component {
    @tracked weather;
    @tracked area;

    constructor(options) {
        super(options);
        this.loadWeather();
    }

    async loadWeather() {
        // let zip = this.args.zip || 97239;
        let response1 = await fetch(`http://ift.tt/2u3PEa2`);
        this.area = await response1.json();

        let city = this.area.location.city;
        let state = this.area.location.state;

        let response2 = await fetch(`http://ift.tt/2uCuL2x`);
        this.weather = await response2.json();
        console.log(this.weather.current_observation.temp_f);
        setTimeout( () => { this.loadWeather(); }, 10000);
    }
};