What did you add to your website that the user will see? Today I made a side navbar, that can be pulled out from the side. A classmate sent me a link to a video that explained how to do it with the code attached, so I used that and adjusted it to fit my theme. I also decided on and made a consistent color scheme of dark slate grey and 2 different shades of lavender. The decision was the hardest part. I also put my pictures in the boxes, like I had planned, and centered these boxes, which is what I was having trouble with yesterday. Finally, I also put my name at the top and put it on the right side, so it can be seen (it couldn’t before because of the navbar tab). What code did you add to your pages? Break it down into explainable chunks and include the explanations of what it does and how. I used a line break (br) to make space between my boxes, and put the pictures further down so that the text was all together. I used a divider (div) around each of my tables, I think to put the pictures into the boxes, and to be able to center the boxes. I also made the pop out menu bar, but it has a really, really long code.

What did you add to your website that the user will see? Today I didn't add anything to my website, but I worked on and finished the hardware plan. To do this, I had to research and take notes about different parts of a computer, including the Motherboard, CPU, RAM, and Hard Drive. What code did you add to your pages? Break it down into explainable chunks and include the explanations of what it does and how. Because I didn't add any code, this question isn't relevant, but you can look at the Hardware Page to see what I learned.

What did you add to your website that the user will see? Text, images, positions, borders, colors, etc. Be specific. I made everything for my hardware page, including boxes that each subject goes in. What code did you add to your pages? Break it down into explainable chunks and include the explanations of what it does and how. First, I made a new file for the hardware page by choosing "HTML file" in the "New from Template" part of "File". I renamed this "hardware.html" so I knew what page I was using. I also had to link this page in the navbar of the About Me page. Next, I copied and pasted the style and navbar parts of my about me page file into the new hardware.html file. I also copied the format I had used for the About Me page, which was using tables, which seemed to work, but I later learned that these don't work well as a format, which is when you are supposed to use "divs" instead. However, there didn't seem to be any problems, so I used tables anyway, also because I still didn't know about divs. When I put pictures in, I used (width="60%”) to make them smaller, and I experimented with the width and height to see how they'd best fit. I used (style="margin-right:5px") to add space between the words and the border, which took a long time to figure out, but it makes the overall page look less cramped and just better. A problem I faced was that I used tables to make this page, which was confusing because the teacher didn’t know how to navigate using tables as well as with using divs, so now I have to learn how divs work.

What did you add to your website that the user will see? Today I made a side navbar, that can be pulled out from the side. A classmate sent me a link to a video that explained how to do it with the code attached, so I used that and adjusted it to fit my theme. I also decided on and made a consistent color scheme of dark slate grey and 2 different shades of lavender. The decision was the one of the hardest parts. I also put my pictures in the boxes, like I had planned, and centered these boxes, which is what I was having trouble with yesterday. Finally, I also put my name at the top and put it on the right side, so it can be seen (it couldn’t before because of the navbar tab). What code did you add to your pages? Break it down into explainable chunks and include the explanations of what it does and how. I used a line break (br) to make space between my boxes, and put the pictures further down so that the text was all together. I used a divider (div) around each of my tables, I think to put the pictures into the boxes, and to be able to center the boxes. I also made the pop out menu bar, but it has a really, really long code.

The HTML section of the calculator page is where I made the boxes, operations dropdown, answer button, and where the answers are shown. The boxes are where the numbers are put in, the operations dropdown is where the operation options are shown. These include addition, subtraction, multiplication, division, to the power of, and module, which means the remainder. This page is also linked to the Calculator Javascript page.
First, the code above is for the first text box. The first line is of comments, which explains what the actual line of code does. The second line is the real code, which is kind of split into different sections. The first is type="text", which makes the input a text box that users can type into. Next, the id is so that it is recognized later by the javascript page. The br tag at the end means line break, which spaces out the first text box from the operations dropdown.
Second, the code above is for the operations dropdown. Again, the first line is the comment, which shows what the section of code does. Next, there is a select tag, which makes it a dropdown. The id of operations is for the javascript section. The class of center is supposed to move the dropdown to the center of the page, but it doesn't. The next 6 lines are all of the dropdown options, which include addition, subtraction, multiplication, division, to the power of, and module. The value = "operation" section is what determines the operation, and the program already knows what it means, so it listens to it. The part after the first greater than sign is what shows up in the dropdown. Finally, the select tag is the end of the dropdown code. The br tag is again a line break.
Third, this is the code for the second text box. As you can see, it's basically the same thing as the first text box.
Fourth, this is the code for the equals button. When it's clicked, it the answer is available in the div below. As usual, the first line is a comment. The second uses the tag button to make a clickable button. Within the first tag, there is the type="button", which says that it is a button, the id, which links it to the javascript page, and the class, which again should put it in the center of the page, but doesn't. Once that tag is closed with a greater than sign, it says "equals", which is what shows up on the button itself. Finally, there's a closing tag and line break tag.
Fifth, and lastly of what shows up on the page, is the div code, which is where the answer is shown. It has, of course, the comment explaining that that's what it is, and in the second line, a div tag. The div tag makes the part that is written "answer: ", and when the equals button is clicked, the actual answer. The style element of this makes what's written in the box the color of the color scheme, dark slate grey. It also includes the id, called answer, which is for the javascript page. After the first tag is closed with a greater than symbol it says "answer: " which is what shows up before the button is clicked, telling the user that that's where the answer will be. Finally, there's a closing tag.
Lastly, this is the code that connects this HTML page to the Javascript page.

The Javascript section of the calculator page is what makes the calculator actully work, because right now, on the actual page it looks like there's a working calculator, but it wouldn't actually work.
This is the section that creates a variable for each item (each of the sections above, such as the text boxes and dropdown) and links each one with each of the IDs that were listed in HTML code for each section.
This button listens for when each of the dropdown functions is clicked. It is called mathCalculator because that's how it will be referred to for the function.
This makes the computer know that I'm setting the function to the mathCalculator dropdown. It also makes the inputs from the text boxes variables called num1 and num2. Finally, it makes the box where the answer shows up a variable, too.
This is where I actually tell the computer to add the 2 inputs (the 2 numbers from the text boxes). I used an if statement to tell the computer that if the + button of the dropdown is clicked, the two inputs should be added. ParseInt is the function that actually makes it work.
This is very similar to the addition code, except it uses an else if statement, which means that it's another option.
Again, this is for the rest of the operations, which include mulitplication, division, to the power of, and mod, which means remainder of.

This code is 20 nearly identical images that include a common class, "card", common source, which is the image of the back of the card titled "blueCard.png", a common width of 100 pixels, an onclick, which we don't use, but is there because we were deciding on how to make the game from a number of different ways, and it was from a discarded way, and the not identical id, which starts at 0 and are each numbered. They are organized into 4 divs with each div containing 5 of the elements so that they are in 4 rows with 5 columns.

First, this code is a variable called cardsOpen with the number 0 in it. This is so that later we can count how many cards have been opened (showing the front) so that they can get turned back over if they're wrong. We need to know how many cards are opened because otherwise it won't know when to close the cards. The inside number will be replaced with one and two, when the first card is opened then the second is.

Next, there's an array titled "card1" that holds the element of the card, the lines from the HTML that are similar. Within the element, we're using the image and the id, which is why they're in the array. The image is now set as "blueCard" because the source of the image in the element is now "blueCard.png", but it will eventually be changed to the image name of the other front images when the cards show the front. The id is which card was clicked, or, the location of the clicked card. It is undefined because it depends which card you click on. They are all labeled different numbers from 0-19, being labeled with the top left card as 0 increasing by 1 as there are more cards to the right, then the second line starts with 5 and so on.

Additionally, there is a third variable called "card2" that has all the same things as the "card1" variable. This is for the second card that is clicked, because it will have different information than the first and also needs to be stored.

In this section of code, it has the variable cardsOpen, and it has ++, which means that when a card is clicked, the number in the variable increases by one. The reason it needs to increase by one is that in the next section it needs to see if the variable holds a number equal to or greater than 2 (cards open) so that it runs.

Next, there's an if statement that checks if the cardsOpen variable is greater than 2, like I said, because that means that two cards are open, which is important because otherwise it would be unable to compare the two cards to make sure that they're different. If the condition is true (two or more cards are open) it runs the three lines of code inside the if statement.

The first line sets the event target as the card2.element. The event target was gotten from a line of code a little bit before, that looks like this:

evt.target.src = animals[parseInt(evt.target.id)];

It takes the evt.target.id, which is where the card is placed in the array of all of them, and places a source (front image) to it. Back into the first line of this section, it places that image into the element. This second line assigns the id, which is basically the placement number of the card, from what it got from the card2 variable to the card itself, the "card2.id". The third line sets the element source of card2 (the picture on the front,) as card2.image, which changes the image of the card from the back image, the blue card, to the front with the animal.

Finally, in this third section, there is another if else statement, which is inside the if statement from the last section. Its condition is that if the element ids of cards 1 and 2 are different, then it should run ANOTHER if statement inside that. The ids have to be different so that the cards can't just be clicked twice and technically have the same image, which would mean that it's right, because it of course has the same image as itself, but it's of the same card. Thus, it makes it so that two different cards have to be clicked in order to check if they're right.

Next, in the if statement that runs if this is true, it says that if the image of card2 is different than the image of card1, it should wait 1 second, then go back to the blue card image, because it's wrong. It does this with a setTimeout, which allows you to put what should happen after the time, which is the 1000 milliseconds outside of the brackets.

Then, it sets cardsOpen back to zero, otherwise it wouldn't be able to run all that code that depends on if the variable is greater than or equal to two.

Finally, there's the else statement, which is saying that if the original if statement in this section is not true, or the id of card1 and card2 are the same (it's the same card clicked twice) it does nothing. Then, the VERY original if statement (the one from the last section) is closed.