Intro

Planning is perhaps one of the hardest areas for me to figure out in my journey to becoming a developer. My natural inclination is to jump in and start writing code. What does planning look like to you? I'm writing this article out of a desire to put to words what I expect from my own planning. What has worked to date and what hasn't, as well as researching what I SHOULD be doing!

For me, I'm more of a visual kind of person, unless of course the project is purely console driven code, then I'm out of luck there. If my project utilizes a GUI or is a website, then I like to draw it out. I have GIMP on my computer, but that seems a bit overkill for what I need and someone turned me on to this website called Excalidraw.com where I can draw up my web page designs, or design the interface of my latest GUI-based app.

The first time I used it, I was struggling with parent-child relationships for a tricky flexbox design I was building for the Landing Page project. The following pic is an Excalidraw rendition of what a portion of the website was to look like so I could see what <div>'s were containers (parents), and then what elements were the children to the containers.

As you can see, the rendering is clear enough to get a good idea of what the elements on the page should roughly look like, and where they should be located. This helps identify what needs to be grouped together, and where to put some flex to the design. Unfortunately, every project won't necessitate the need for extra tools like Excalidraw. My current project is a good case in point.

Current Project- Rock Paper Scissors with GUI

I wrestled with myself on the planning for this because:

1. I already had a working console version of the code and I haven't ever refactored code before.
2. I'm not a designer, so I won't put any fancy designs to it right off the bat (I will, but the goal is to get user interactivity and displayed results functional first.)
3. Where to start first. This step is helped by the instructions which allude to removing the logic to play five rounds from the console version of RPS from the game() function.

Come to find out, I was really overthinking things (as usual for me). I need three <button>'s and a <div>, possibly another button for added functionality but that isn't required so I'll worry about additional details later.

In thinking things through a little bit more, if I have three buttons, then I'll need event listeners for each button click. Then I'll need to have the text that normally is logged to the console be displayed inside some sort of HTML tag, and that is what the <div> is for. From there, it is a matter of making sure the game only plays five rounds, the running scores are displayed, and add some styling.

There are always details that are missed and that's where refining the plan as you need to comes into play. Turns out, in this case the only thing I needed for planning was a text editor. Because I'm blogging this, this was all the planning I needed and my thought process played out right here. Now I'm going to go figure out what DOM methods I'll be using to make all of the above happen. Until the next one...be good!

Photo by Pixabay: https://www.pexels.com/photo/black-and-white-browsing-business-coffee-265152/