Lab 19 Reflection

     Lab 19 was very similar in functionality to Lab 18. This lab revolved around reassignment operators, or changing a number to be a different value. We needed to give the user an initial value and a place to input a second value of their choosing. The user would also be given buttons they can use to perform arithmetic functions on the initial value with the second value they input. Any change to the initial value would need to be reflected in area that displayed the result of the transformation as well as the area that displayed the initial value. The first thing I did in creating this lab was copying my code from Lab 18. Since 18 had pretty much all that I needed for 19 all I needed to do was copy it and change a few lines of code. One change I made in the HTML was the first value input. In 18 the user could input 2 values, a first and second value, but in 19 the user must input only 1, a second value that will be used in an arithmetic function to change the initial value. I deleted the first value input and replaced it with an initial value that the user could not change. Then I shifted my focus to the JS of the page. The way 18 worked was that 3 global variables were defined - var x, var y, and var result - and used by each function in the script. In each function, the x variable stored the value of the first number the user input and the y did the same for the second. Based on the arithmetic transformation the function was supposed to execute, x and y were used in an arithmetic expression and the result of that expression was stored in the result variable. Since there was no longer any first value the x variable was storing I got rid of the line of code in each function that assigned x the value of the first number the user inputted. I then went to the section were I first declared the x variable and assigned it the value of the initial number. The final change was adding an additional line of DOM to each function that reflected the change to the initial value on the screen. When the initial value was changed, or reassigned, the result section would show this but the section that displayed the initial value would not change. To resolve this I added a line of DOM, document.getElementById("initVal").innerHTML = result, to each function so the initial value would change as well.
     These skills are important for a web designer because making a website interactive by changing elements of a webpage based on user interaction requires these skills. Having certain text change or images pop out when the user interacts adds to the experience because it makes the user feel what they're doing isn't just turning on a switch that isn't connected to a light bulb. In an online business, having the text change when the user makes a transaction adds to the user experience by providing feedback. The cause and effect sequence gives confirmation to the user that 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.