I am learning JavaScript, and I am attempting to create a calculator. This readme will serve as a description of what I am creating, why I am creating it, as well as any notes regarding functions I write, or elements I use along the way. The original code came from another, I am recreating it and tweaking it as I see fit, this is merely a learning exercise.
In the header... used to set the metadata of the html file, always will be inside of the tag. - Set the charset to "UTF-8" which is the character encoding of the file itself - HTTP-Equiv provides an HTTP header for the html document - Name attribute specifies the name for the metadata - Description: A description of the page - Viewport: user's visible area of the webpage
defines the relationship between the current page and an external source - Href: specifies the location of the linked documentIn the body...
defines a division or a section of an HTML file, divides a section that can be styled by CSS files - Class attribute is used to show which row is being created, that will house the various buttons of the calculator - Header is the calculator header - First row class - The first input attribute is a text box, that will place the results of the calculations - There is also a box that will hold 'C' and will clear the results to allow for a new calculation - Second row class - 4 input buttons, values are 1, 2, 3, and + - Each one will also call the liveScreen() function when clicked on - liveScreen() function is found in script at bottom of body - Third, fourth, and fifth row class - Same as the other rows, however, the 5th row is slightly different - Fifth row includes = which will evaluate what is in the text box - also includes the dot . to allow for decimal valuesCalculator Script File clearScreen() function called when the clear button 'C' is pressed by the user 1. Document object is the root object of the html document 2. getElementById() returns the element that has the ID attribute with the specified value liveScreen() function will print value of button pressed by user to the text box 1. Get the result input by the button being clicked, save it to res 2. If the value is undefined, then print nothing 3. Otherwise, add the value to the results on the screen changeTheme() function will change the theme of the document (color schemes) 1. When html document first loads, will start off in light theme, then there is a button on the bottom 2. When button is pressed, changeTheme is called, and will switch to the other theme (color scheme)
light.css Stylesheet First bracket (star bracket) - Star selector selects all elements, it will apply to all elements on the document - Implements the margins, box sizing, and the font type and weight - Box sizing allows inclusion of padding and border in an elements total width and height
dark.css Stylesheet First bracket (star bracket) - Applies to all elements, every element in the document - Implements sizes, margins, font type, etc. - Inclusion of padding and borders.
Works cited All credit for source code up to commit 21 goes to Github user zxcodes (Mohammed Farmaan), who provided the template for this design Any changes added in the future will build upon his original design.