Lab 18 Reflection

     Lab 18 required us to use our skills from lab 17 to create a simple online calculator. Our calculator could be broken down to 3 main parts: a part to input 2 values, a part to choose the arithmetic done to the values, and a part to view the result of the transformation. I decided to make the input area first by setting up <form></form> tags. Within this form I opened 2 <input></input> tags with class attribute textbox, one for each number. Since I would need to retrieve the numbers input into them later on when working on JS for the site I gave appropriate ids to each, one being num1 and the other num2. After completing the input area I moved onto the button area. I needed to make a total of 5 buttons, each for one of the 4 arithmetic function and modulo. To do this I opened up 5 <button></button> tags, setting the value attribute (which sets the text of the button), id attribute, and name attribute to the name of the arithmetic function it performs. I set up an onClick attribute but left it blank for the moment since I had not created and JS function for it to call on yet. Then I started work on the area to display the result. I decided, as a design choice, to put it next to the input area so I created a div for it within the form. I put <span></span> tags around the exact text I wanted to display the result and gave it an id so the JS could refer to it later on.
     Once the HTML was set up I opened up the <script></script> tags and worked on the JS. I started out by declaring 3 global variables that would be used by the functions I would create later on: var x, which I would use to store the first number; var y, which I would use to store the second number; and var result, which I would use to store the result of the transformation done using the 2 numbers. I then started work on function add(), the function that would be called by the add button. I defined the variables but had not given them any value yet. When the button gets clicked I want the values put into the input boxes to be retrieved and stored into its respective variable. For this I used DOM.  Inside the function I wrote the name of the variable gets document.getElementById(id_of_corresponding_textbox).value. So when I did this for my x variable it looked something like x = document.getElementById("num1").value. Once x and y got their corresponding variable I needed to perform the arithmetic function related to the button on the two values and store them in the result variable. For my add() function this was done by writing result = +x + +y. Finally, I needed to display the result in the webpage by changing the text between the <span> tags I set up earlier. This was done again using DOM with the line document.getElementById("result") = result. This concluded my add() function but I needed to make functions for all the other arithmetic functions. I used the same structure as my add() function for those but all I changed was the arithmetic function between x and y, so instead of addition it would be multiplication for the multiply() function. Once all my functions were defined I went back to the HTML and for the onClicks of each button I typed in the name of the corresponding function.
     These skills are important for a web designer because they are essential in making a website interactive by changing elements of a webpage based on user interaction. A site can have buttons to click and areas to input text but having certain text change or images pop out when the user interacts adds to the experience. If you're running a site that sells goods, having the text change when the user makes a transaction adds to the user experience by giving confirmation to the user what they intended to do has happened. The DOM skills practiced in this lab help us replicate this effect by retrieving certain information in the webpage and programming that information to change based on what the user does.