DEV Community

Sid Saythongphet
Sid Saythongphet

Posted on

First Project

A month ago I started on an endeavor, to become a Software Engineer. I had no experience in coding before making this decision, but the idea had always intrigued me. Little did I know, this was going to be quite the knowledge overload! However, after the last four weeks, and still knowing I have a long way to go, I feel like I can get a hang of this!

I began this process by joining the Flatiron Flex Software Engineer Bootcamp in mid December, where we have been mainly focused on JavaScript for this first phase. Looking back, I had no idea what I was getting into. Functions, arrays, objects, and methods had no context to me. The complexity of running an application began to unfold.

For my first project, I created a single-page website for journaling. Now with this journaling application, I wanted to take into consideration the Two Minute Rule, which I became familiarized with after reading "Atomic Habits" by James Clear. With this rule stating a new habit shouldn't take more than 2 minutes to do, this website takes that into account and binds you to journal for only a few short minutes.

What originally started out as an interactive page that would include a timer, text input, and a collection of past entries, became a far more complex puzzle that I thoroughly enjoyed solving.

Screenshot of journal page of project

Screenshot of entries page of project

It amazed me how many different ways the code could be constructed to build a functioning webpage. As I continued to work on it, I found different ways to write a code to eliminate the redundancy. I particularly became fond of the use of functions to reduce repetition. In the beginning, for example, I was doing things such as:

const secOne = document.createElement('section')
secOne.id = 'section-one'
secOne.className = 'col s12'
const secTwo = document.createElement('section')
secTwo.id = 'section-two'
secTwo.className = 'col s12'
const secThree = document.createElement('section')
secThree.id = 'section-three'
secThree.className = 'col s12'
Enter fullscreen mode Exit fullscreen mode

This process became time consuming, but was easily fixed by making a function that took in some arguments!

const createSection = (id, className) => {
    const section = document.createElement('section')
    section.id = id
    section.className = className
    return section
}

const secOne = createSection('section-one', 'col s12')
const secTwo = createSection('section-two', 'col s12')
const secThree = createSection('section-three', 'col s12')
Enter fullscreen mode Exit fullscreen mode

This helped tremendously to clean my code and I know there may be even better ways to refactor the code for simplicity, but it was a really good feeling to know all the learning from the last month was starting to click.

Once I knew I was getting more comfortable working with functions and arguments, the project process continued faster than before. I began to try different ways of writing my existing code. It became even more interesting to refactor the code than it was to write it the first time!

Now that I am at a point that I believe my first project is complete, I am eager to work on my next! The future is looking bright for this new adventure I am on and hope to soak up as much knowledge I can!

Top comments (0)