-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathReflection.html
More file actions
155 lines (154 loc) · 14.1 KB
/
Reflection.html
File metadata and controls
155 lines (154 loc) · 14.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<!--This is so that I could link to the other folders easily-->
<html lang="en">
<!--This shows that the html is set to english language-->
<head>
<title>Reflection</title>
<!--Title of the Webpage-->
<link href="css/reflection.css" type="text/css" rel="stylesheet">
<!--Links to the stylesheet-->
<link href="pic/1612527352.ico" rel="icon">
<!--Links to the favicon-->
<meta charset="utf-8">
<!--This code makes sure that the code I type could be read by a machine-->
</head>
<body>
<div id="title">
<b>Summative Assignment - Thomas</b>
<!--The title of the webpage-->
</div>
<div id="BODY">
<div id="hyperlinks">
<pre><a id="hype" href="Index Page.html">Home Page</a> <b>|</b> <a id="hype" href="Project 1.html">Project 1 - Guess a Number!</a> <b>|</b> <a id="hype" href="Project 2.html">Project 2 - Flip a Coin!</a> <b>|</b> <a id="hype" href="Project 3.html">Project 3 - Tic Tac Toe!</a> <b>|</b> <a id="hype" href="Reflection.html">Reflection</a></pre>
<!--Hyperlinks for my other webpage-->
</div>
<h1>References and Tools</h1>
<div id="One">
<ul>
<li><a id="hype" href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a></li>
<li><a id="hype" href="https://mycolor.space/gradient3?ori=to+right+top&hex=%23D16BA5&hex2=%2386A8E7&hex3=%235CF4EB&submit=submit "> CSS Background Gradient Generator</a></li>
<li><a id="hype" href="https://www.favicongenerator.com/">Favicon Generator</a></li>
<li><a id="hype" href="https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/ ">Reference on How to Open Hyperlink in New Tab</a></li>
<li><a id="hype" href="https://www.w3schools.com/">W3School</a></li>
</ul>
<!--Unordered list of the references I used to do my assignment.-->
<p> I used <b><a id="hype" href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a></b> to create my own favicon, images for games such as the "X", "O", "head" and "tail" image for the games, other than that I also used this program
to create my flow charts which are placed on the main page. After creating the favicons using Photoshop, I used that image and converted it into a favicon
using <b><a id="hype" href="https://www.favicongenerator.com/">Favicon Generator</a></b>. Then I used the <b><a id="hype" href="https://mycolor.space/gradient3?ori=to+right+top&hex=%23D16BA5&hex2=%2386A8E7&hex3=%235CF4EB&submit=submit "> CSS Background Gradient Generator</a></b>
to create the gradient of the background which is on every page of my html. I also looked up some references, and revised on what we learned
through websites that teaches me <b><a id="hype" href="https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/ ">how to open hyperlink in new tab</a></b> as well as
any webpage that <b><a id="hype" href="https://www.w3schools.com/">W3School</a></b> may contain that would be benefits for me (for the most part I only looked up things we've already
learned in class from W3School).
<!--A paragraph on where I used these references-->
</p>
</div>
<h1>Daily Log</h1>
<div id="One">
<!--Below are the daily logs-->
<!--The divs are there for css theme editing-->
<h2>Day 1 (February 2nd, 2021)</h2>
<div id="Day">
<p>
I spent 8 hours today and finished my tic tac toe program (which is my project number 3), I find it easier to program and then do the flow chart after because there’s a lot of things that
might go wrong in the program and it’s easier to change the program rather than the flowchart because using photoshop to change is a lot more work compared to just changing the codes
from the program. Tomorrow I’m going to finish the flowchart for the tic tac toe program.<br><br>
For the favicon, I went up and searched online for a “Creative Common Rights” image with the help of Google to find an image that I can use for my site, because it’s Creative Common, it could be used for educational purposes.<br><br>
For the image of “O” and “X”, I used photoshop and created them.
</p>
</div>
_______________________________________________________________________________________________________________
<h2>Day 2 (February 3rd, 2021)</h2>
<div id="Day">
<p>
I completed my flowchart for the tic tac toe program.
</p>
</div>
_______________________________________________________________________________________________________________
<h2>Day 3 (February 5th,2021) (3AM)</h2>
<div id="Day">
<p>
I finished project 2 (Flip a coin)which took me about 3 hours, it was easier this time compared to the tic tac toe game because I had an idea on what I wanted to do
inside the html file and javascript as well as using experience I’ve learnt from the tic tac toe game. Unlike the tic tac toe game, there’s less conditions and loops.
I didn’t jump in blind like I did with the tic tac toe as I knew how to make the game work, whereas in the tic tac toe game, I
was kind of hesitating whether or not using buttons as the game field would work properly.<br><br>
I created the images of the coin sides with photoshops.
</p>
</div>
_______________________________________________________________________________________________________________
<h2>Day 3 (February 5th,2021) (4PM)</h2>
<div id="Day">
<p>
Made my favicon, project 2 flowchart using Adobe Photoshop, I created project 1 (Guess the Number), it took me about 3~4 hours because I want to make many difficulties
(To demonstrate my radio button/checkbox skills) for the game and it took awhile to make functions for each difficulty. After that, I finished the flow chart for project
1. I plan to start writing the index page.
</p>
</div>
_______________________________________________________________________________________________________________
<h2>Day 4 (February 6th,2020)</h2>
<div id="Day">
<p>
Updated the tic tac toe program which made it block you whenever you are about to win. (didn’t take too long since I already have the concept on how to do it but I was too lazy to add it.
<br><br>
Sleeping now, after I wake up I will update the flowchart and perhaps start working on the index page. (Cross that), knowing me… I can’t leave my work alone or else I’ll go anxious so I’m going to update the flowchart before I sleep…
</p>
</div>
_______________________________________________________________________________________________________________
<h2>Day 5 (February 7th 2020)</h2>
<div id="Day">
<p>
Started working on the index page, made a lot of tweaks with the css because I want it to make it look good. Other than that I made sure that my paragraphs were easy to understand
and the reader can get why I decided to make my flowchart that way. After the flowchart I also finished the index page on the same page and then I proceeded to submitting my work.
</p>
</div>
</div>
<!--Below are the difficulties and solutions I faced and used during my work in the project-->
<!--The divs are there for css theme editing-->
<h1>Difficulties and Solutions</h1>
<div id="One">
<p>Some difficulties I've faced during my time programming the websites</p>
<h2>Problem #1:</h2>
First I had some problems letting the computer detect whether or not the box its ticking has already been ticked or not by the player and the bot (which causes it to replace the tick that the player inputted)<br><br>
<h2>Solution:</h2>
I used a loop to solve the problem where the value of the box that’s not ticked is the same and the box that is ticked are different. <br>(<b>For example:</b> Box that are not played = 0 and Box that are played = 1)
_______________________________________________________________________________________________________________
<h2>Problem #2:</h2>
Then I had trouble making a tie happen because the computer will get into an infinite loop on the last click from the player because the program is set that the computer will always go after the player and because
the computer cannot find the tile to mark its own tile after the last tile is taken, it goes into a infinite loop.
<h2>Solution:</h2>
I solved it by changing the order in which the function activates in as well as its conditions, for example the computer will only go if the previous function is true for one of the conditions and that is if the player
didn't take the last tile.
_______________________________________________________________________________________________________________
<h2>Problem #3:</h2>
Giving Divs value is not always working for project 3 because I'm too dependent on it due to the effectiveness of it when I was working with it.
<h2>Solution:</h2>
I made a global variable for things I want to record on the div in the javascript instead.
_______________________________________________________________________________________________________________
<h2>Problem #4:</h2>
Spelling Errors in programming gave me problems because I thought there’s a problem with how I worded my programs, and because my program is really long so reading it line by line is really stressful.
<h2>Solution:</h2>
I used console logs to look at what was wrong with my program such as checking the different values and how it changes as I play the program or just simply checking the errors that it brings up when I interact with the program.
_______________________________________________________________________________________________________________
<h2>What I Learned From These Projects:</h2>
Sometimes wording things differently could make your code much simpler, and you can take shortcuts easily by making variables and values using javascript.<br><br>
</div>
<h1>Other Reflections</h1>
<div id="One">
<!--since the theme inside the body are almost always the same I just used the same id name for most of the divs-->
<h2>Improvements:</h2>
I don't really know what to improve on, maybe if I could I will improve on the appearance of my website because it still doesn't look quite good in my opinion, other than that I want to try and add sound effects to my game when the player wins
or when the player flips a coin (However I don't really want to because I'm scared of copyrights for my school work).
<h2>The Easy Part</h2>
In my opinion, the easy part of the project is the everything, and for javascript, because I am able to get through problems easily and I can say I have a rapidly thinking mind which I trained through gaming and I can say that it is really beneficial
because I can think of solutions really quickly, this is also why I don't want to create a flowchart as I like think of solutions on the spot rather than following a fixed plan. So in general, I think that making a functional program is easy for me
and I faced only a few problems during my times of programming and even if I do I am able to find the solutions quickly as it's usually a careless mistake.
<h2>Importance of Programming and It's Use For Me in the Future:</h2>
Programming is really important because in my opinion, it's the foundation for almost all future technology, this is because many jobs in the future will be replaced by artificial intelligence so it would be beneficial for people to learn some programming
just in case if they ever lose their jobs. Furthermore, as I am aiming for a computer science program in university I think it's really important for me to learn programming early so I don't fall behind in the future when I study in a university course.
</div>
<div id="hyperlinks">
<pre><a id="hype" href="Index Page.html">Home Page</a> <b>|</b> <a id="hype" href="Project 1.html">Project 1 - Guess a Number!</a> <b>|</b> <a id="hype" href="Project 2.html">Project 2 - Flip a Coin!</a> <b>|</b> <a id="hype" href="Project 3.html">Project 3 - Tic Tac Toe!</a> <b>|</b> <a id="hype" href="Reflection.html">Reflection</a></pre>
<!--Hyperlinks for my other webpage-->
</div>
</div>
</body>
</html>