-
Notifications
You must be signed in to change notification settings - Fork 0
/
code-main-container.html
118 lines (79 loc) · 7.08 KB
/
code-main-container.html
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
<div class="homeLinkContainer">
<img class="homeLink" src="Arrow.png"/>
</div>
<div class="sectionTitle">
introduction
</div>
<div class="horizontalGapSmall"></div>
<div class="sectionContent1">
This project all started with an assignment in my introductory programming class that had us program a simple Sudoku solver. The program took a text file as an input, read in the Sudoku from the text file, solved the Sudoku if it could, and printed the result to the console. The algorithm that the program used was also very simple and only able to solve a small subset of Sudokus. Over the summer, in an effort to learn some web development, I decided to take this program, improve the algorithm, and create an interactive Sudoku-solving web app. In the next few sections, I’ve descried the different pieces of code behind the web app.
</div>
<div class="horizontalGapLarge"></div>
<div class="sectionTitle">
the HTML
</div>
<div class="horizontalGapSmall"></div>
<div class="sectionContent2">
The HTML contains all of the raw content displayed in the web app—the text, the buttons, the images, the forms. Elaborating on the form, unlike the program that I wrote for my class, which read in the Sudoku from a text file, the web app reads in the Sudoku from an HTML form. All of the input boxes on the solver page are part of this form. The HTML also contains links to the external CSS and JavaScript files.
</div>
<div class="horizontalGapSmall"></div>
<div id="HTMLContainer">
<img id="HTML" src="HTML.jpg"/>
</div>
<div class="horizontalGapLarge"></div>
<div class="sectionTitle">
the CSS
</div>
<div class="horizontalGapSmall"></div>
<div class="sectionContent1">
Long story short, the CSS makes things look pretty. The HTML document contains elements, several of which have IDs and classes. The CSS contains the formatting instructions for each ID and class. In addition, the CSS and HTML together define the positioning of elements and thus the layout of the page. The CSS is also responsible for certain simple animations, namely buttons changing color when hovered over.
</div>
<div class="horizontalGapSmall"></div>
<div id="CSSContainer">
<img id="CSS" src="CSS.jpg"/>
</div>
<div class="horizontalGapLarge"></div>
<div class="sectionTitle">
the JavaScript
</div>
<div class="horizontalGapSmall"></div>
<div class="sectionContent3">
The JavaScript does a lot. It’s responsible for the major animations, including the fade-in fade-out transition every time a link is clicked and the animation of the Sudoku when it’s submitted. It also facilitates the process of sending the HTML form to the server for solving. (Note that the JavaScript itself doesn’t do the solving. The solving is performed by a Java servlet, which I’ll discuss later.)
</div>
<div class="horizontalGapSmall"></div>
<div class="sectionContent1">
Something important to mention regarding the JavaScript that I’ve written is that all of the web app’s content is loaded dynamically via AJAX (asynchronous JavaScript and XML). You might’ve noticed that the web address never changes, even after clicking links to different parts of the app. That’s because the entire app resides on a single page. Normally, when a link is clicked on a website, the current page is made inactive, information is sent and received, and the entire page is refreshed with new content. (Try it out on a random website and notice the page flash.) To make the web app feel more like a desktop application and less like a website, I decided against this default action. By dynamically loading the content, only the parts of the page that need to be changed are changed. For example, the title and background aren’t reloaded every time a link is clicked. This allows for the fade-in-fade-out transitions. I also used AJAX to submit the Sudoku for solving. Because AJAX submissions take place as background activities, the current page remains active. This allows for the submit animation.
</div>
<div class="horizontalGapSmall"></div>
<div class="sectionContent2">
A final use of JavaScript that I should mention is form validation. Try entering an invalid character into the Sudoku on the solver page (a number greater than 9 or a hash tag for example). When you attempt to submit the Sudoku, the program will highlight the invalid characters and refuse to submit until only valid characters are entered. To accomplish this, I made use of the jQuery form validation plugin. (jQuery is a library that facilitates coding in JavaScript. It’s particularly useful for ensuring cross-browser compatibility.)
</div>
<div class="horizontalGapSmall"></div>
<div id="JavaScriptContainer">
<img id="JavaScript" src="JavaScript.jpg"/>
</div>
<div class="horizontalGapLarge"></div>
<div class="sectionTitle">
the Java
</div>
<div class="horizontalGapSmall"></div>
<div class="sectionContent1">
Last but not least, there’s the Java. (A side note, Java is completely unrelated to JavaScript. Deceiving isn’t it?) The Java performs the actual solving. It takes the inputs from the HTML form, stores them in a two-dimensional array, carries out the exhaustive search algorithm, and generates an HTML response. This HTML response is sent back to the client and processed by the JavaScript. Unlike the JavaScript, which runs on the client’s computer, the Java runs on a server, namely one of Google’s servers since I’ve used the Google App Engine to host the web app. In other words, the solving is performed by a Java servlet.
</div>
<div class="horizontalGapSmall"></div>
<div id="JavaContainer">
<img id="Java" src="Java.jpg"/>
</div>
<div class="horizontalGapLarge"></div>
<div class="sectionTitle">
conclusion
</div>
<div class="horizontalGapSmall"></div>
<div class="sectionContent3">
Of course, I’ve just skimmed the surface of web development, and there’s much that I’ve yet to learn. Nonetheless, I’ve reached an important conclusion regarding web development—projects are the best way to learn it. Think of what you want to do, visualize it in your head, and figure out how to make it happen. For me, this last step involved lots of googling and leafing through manuals in bookstores. But don’t just stop there. Every time you accomplish a task, think of a new task. As a brief example, I didn’t originally plan on including animation in my web app. Let your project escalate naturally. These various notions about learning web development are easily the most valuable things that I’ve learned by pursuing this project. Huzzah for meta conclusions! (Was that meta?)
</div>
<div class="horizontalGapLarge"></div>
<div class="homeLinkContainer">
<img class="homeLink" src="Arrow.png"/>
</div>
<div class="horizontalGapLarge"></div>