Creating a simple size conversion script within a Shopify web page

Question

I have been tasked with creating a simple shoe size conversion script/app for mens to women's shoe sizing, and vice versa. Obviously the logic is simple, I would simply subtract 1.5 when converting from men's to women's, and add 1.5 when converting from womens to mens. Can I do this with HTML with a js script? I want it to be in only one place on the site with a front end. Could anyone give me some tips on how to go about this? I'm pretty new to front end development with intermediate experience in python and beginner in js/html

Answer 1

I really hate to answer this since you just tasked us with writing the code for you.

So instead I will answer it with whats going on. So you can do your own work next time since this is the most basic shit ever.

How do you find an element in html? https://www.w3schools.com/js/js_htmldom_elements.asp

What is an event listener https://www.w3schools.com/js/js_htmldom_eventlistener.asp

What is a self invoking function https://www.w3schools.com/js/js_function_definition.asp#:~:text=A%20self%2Dinvoking%20expression%20is,self%2Dinvoke%20a%20function%20declaration.

<script>
(function() {
    var mens = document.getElementById('mens');
    var womens = document.getElementById('womens');

    mens.addEventListener('change', function(event) {
      womens.value = event.target.value - 1.5;
    });
    womens.addEventListener('change', function(event) {
        mens.value = event.target.value + 1.5;
    });
})();
</script>