-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdesign-to-solution-blog.html
More file actions
260 lines (212 loc) · 10.6 KB
/
design-to-solution-blog.html
File metadata and controls
260 lines (212 loc) · 10.6 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE HTML>
<!--
Editorial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Projects - Hailey's Portfolio</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"> New Thinking. New Code. </a>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.linkedin.com/in/hailey-martin-7a06132a0/" class="icon brands fa-instagram"><span class="label">Linkedin</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
</ul>
</header>
<!-- Content -->
<section>
<header class="main">
<h1>From Design to Solution: Turning a Programming Plan into Code</h1>
</header>
<span class="image main"><img src="./images/Design-to-solution.png" alt="image-title-text" /></span>
<p>Before writing a single line of code, there’s a crucial step every programmer learns
to appreciate, designing the solution. It’s easy to jump straight into typing, but
taking time to think through what the program needs to do, how it will respond to user
input, and what could go wrong can save hours of frustration later. In this
reflection, I’ll walk through how I approached a recent design assignment and how
the planning process guided me from concept to working solution.
</p>
<hr class="major" />
<h2>Thinking Systematically: Designing Test Cases</h2>
<p>The first step was designing my test cases. I approached this systematically by asking
a few simple questions: - What exactly is the program supposed to do? - What
conditions will fulfill the requirements of the task? - What kinds of inputs might
cause errors?
</p>
<span class="image left"><img src="./images/input-output.png" alt=""></span>
<p>By thinking through these scenarios, I wasn’t just testing my code, I was testing my
understanding of the problem itself. Writing clear test cases helped me anticipate
how the program should behave before I even began coding. It also helped me identify
edge cases, like what would happen if the user entered something unexpected. This
step reminded me that planning tests early isn’t extra work, it’s what keeps
debugging from becoming overwhelming later on.
</p>
<hr class="major" />
<h2>Using Loops to Handle Repetitions</h2>
<p>As I worked through the logic of the assignment, I realized that certain tasks
required repetition. For example, the user might need to input two characters, and
if those inputs weren’t valid, the program would have to ask again. That’s a perfect
job for a loop — specifically, a do-while loop.
</p>
<span class="image left"><img src="./images/do-while.png" alt=""></span>
<p>The beauty of a do-while loop is that it ensures the code runs at least once before
checking the condition. In this case, the program could prompt the user, check whether
the input was valid, and if not, automatically prompt again. Using a loop this way keeps
the code efficient, reduces redundancy, and creates a smoother user experience.
</p>
<hr class="major" />
<h2>Choosing When to Use Switch Statements</h2>
<p>
Another design decision involved whether to use an *if statement* or a *switch
statement*. Both handle decision-making, but switch statements are on several specific
values. Instead of writing multiple `if-else` blocks, a switch checks each case neatly
and executes the matching one. For my program, I could use a switch statement to handle
valid user inputs — for instance, different cases could produce different credit card
numbers or responses. Each case would be clearly defined, and adding new ones later would
be simple. The key is to remember the `break` statement, which prevents the program from
accidentally running into the next case.
</p>
<span class="image left"><img src=".//images/thought-bubble.png" alt=""></span>
<hr class="major" />
<h2>Building an Algorithm: Generating a Random Capital Letter</h2>
<p>
One of the most fun parts of this project was creating an algorithm to generate a random
capital letter. I approached it by thinking logically — the English alphabet has 26
letters, so I needed a way to randomly pick one. A loop could handle cycling through the
alphabet, and a random function could select a letter’s index. This step taught me how
to combine what I already knew (loops and letter ranges) with something new
(randomization). It also reminded me that it’s okay not to know every piece right away.
Researching how to use a random function or test my output was part of the
problem-solving process.
</p>
<span class="image left"><img src="./images/plans.png" alt=""></span>
<hr class="major" />
<h2>Reflecting on Problem-Solving SkillsReflecting on Problem-Solving Skills</h2>
<p>
Overall, I’ve found that my problem-solving skills are strong when it comes to planning
algorithms step by step. The hardest part is making sure each planned step is specific
enough to translate directly into code. My strength is identifying areas I’m unsure
about, marking them as “to research later” keeps me moving forward instead of getting
stuck.
Programming is as much about *thinking* as it is about *typing*. Each challenge is an
opportunity to slow down, break the problem apart, and find a path to the answer.
</p>
<hr class="major" />
<h2>Conclusion: Turning Plans into Practice</h2>
<p>
Going from design to solution is more than just checking off coding tasks, it’s about
learning to think like a programmer. Every test case, loop, and algorithm builds on the
same foundation: systematic problem-solving. By taking the time to plan before coding,
I’ve learned how to write cleaner, more efficient programs and how to approach challenges
with curiosity instead of frustration.
</p>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Search -->
<section id="search" class="alt">
<form method="post" action="#">
<input type="text" name="query" id="query" placeholder="Search" />
</form>
</section>
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="work.html">My Work</a></li>
<li><a href="elements.html">Elements</a></li>
<!--<li>
<span class="opener">Submenu</span>
<ul>
<li><a href="#">Lorem Dolor</a></li>
<li><a href="#">Ipsum Adipiscing</a></li>
<li><a href="#">Tempus Magna</a></li>
<li><a href="#">Feugiat Veroeros</a></li>
</ul>
</li>-->
<li><a href="#">Etiam Dolore</a></li>
<li><a href="#">Adipiscing</a></li>
<!--<li>
<span class="opener">Another Submenu</span>
<ul>
<li><a href="#">Lorem Dolor</a></li>
<li><a href="#">Ipsum Adipiscing</a></li>
<li><a href="#">Tempus Magna</a></li>
<li><a href="#">Feugiat Veroeros</a></li>
</ul>
</li>-->
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.linkedin.com/in/hailey-martin-7a06132a0/" class="icon brands fa-instagram"><span class="label">Linkedin</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
</ul>
</nav>
<!-- Section -->
<!--<section>
<header class="major">
<h2>Ante interdum</h2>
</header>
<div class="mini-posts">
<article>
<a href="#" class="image"><img src="images/pic07.jpg" alt="" /></a>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>
</article>
<article>
<a href="#" class="image"><img src="images/pic08.jpg" alt="" /></a>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>
</article>
<article>
<a href="#" class="image"><img src="images/pic09.jpg" alt="" /></a>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>
</article>
</div>
<ul class="actions">
<li><a href="#" class="button">More</a></li>
</ul>
</section>-->
<!-- Section -->
<section>
<header class="major">
<h2>Get in touch</h2>
</header>
<p>Let's work on your dream! </p>
<ul class="contact">
<li class="icon solid fa-envelope"><a href="hailo7ts@gmail.com">hailo7ts@gmail.com</a></li>
<li class="icon solid fa-phone">(719) 281-9919</li>
<li class="icon solid fa-home">Colorado Springs, CO</li>
</ul>
</section>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© HaileysLaunch. All rights reserved. <!--Demo Images: <a href="https://unsplash.com">Unsplash</a>. Design: <a href="https://html5up.net">HTML5 UP</a>-->.</p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>