My coding journey: To do this week = build a To Do List!

Share on facebook
Share on google
Share on twitter
Share on linkedin
NB: substitute ‘coffee’ for 2 . TEA! ? | Image: Pexels

Beginning on 26th November, my task was to build a TODO list web application using Sinatra. Having only used Sinatra once two years ago, I tried to look back at old code, but didn’t remember much of the functionality.

Here’s a few key things I learned each day as I got reacquainted with Sinatra:

Monday

Thanks to a link found by fellow apprentice Derek, we paired on an online tutorial to understand Sinatra. The tutorial took us through the steps to build a number guesser game. Using the rand(number..number) operator to generate a random secret number between 1 and 100, the player is asked to guess what the secret number is. The game then needed to give the user certain messages based on how close their guess was to the correct answer.

By the end of the morning, we’d successfully built an application which a user could play online, hosted locally from our machines. This was a major step onward from all our previous projects where we’d focused on the command line and printing to the console (i.e. the terminal window). .erb files in Sinatra allow you to set-up a template (essentially a frame) which combines plain text with Ruby code, using HTML & CSS to determine how to display this on the webpage.

Having understood these basic principles, that afternoon we moved to working on our individual todo lists.

My first step was to add a ‘todo’. Using the knowledge gained from previous projects, I decided that initially the best way to store the todos was to pass them in a variable as an array. However, there are a few things about using embedded ruby (.erb) that are different from a standard .rb file…

Displaying variables

Previously, when wanting to print out the contents of a variable to the console (e.g. my_variable), it could simply be inserted into my string using interpolation “here is what I want to say including the contents of this #{my_variable}”. However, in order to display this on the webpage, I had to use

Here is what I want to say including <%= my_variable %>

instead. (

stands for a paragraph block in HTML)

Getting the user’s input from an HTML form

My webpage uses an HTML form to get information from the user. However, using gets.chomp to collect the user’s input doesn’t work for a form. (I like to think of ‘chomp’ as a little hamster which eats the words entered by your user, and holds them in it’s cheeks so that you can see what was said). The HTML form doesn’t have a little gets.chomp hamster! Instead it looks at the input given within the parameters offered on the form, i.e. params[“get_input”].

The gets.chomp hamster ? | Image: Unsplash

Commenting out code

Where I could previously comment out code that I wanted for reference but didn’t necessarily want printed using a #, .erb uses <!— everything within these arrows is just for reference, don’t print this />.

Tuesday

The next task was to mark a todo as complete. Realising that each todo needed a state which could be changed to complete, I moved from storing them in an array to a hash. Each hash had two keys, one for the action and a status key with the value ‘active’ when first added. I then wanted to access a particular hash and change the status value from active to complete, but couldn’t get it to work.

I’d somehow gotten away with not testing up until this point, but was reminded by my mentors that testing is essential. They shared this great tutorial for learning to test with Sinatra. I also found a secondary tutorial and tried my hand at running a Rake::Test.

With prompting from these tests, I realised that my if statement wasn’t pointing to the right thing and as such my mark as complete method wasn’t working. My method needed to check whether the data submitted to params[“name”] matched an existing todo. I had been pointing to params[“value”]. Once I made this change, I was able to mark an action as complete.

Wednesday

The last step of the core goals was to make the page look good. I went back to I4 of the number guesser tutorial to work through how to program different CSS outcomes. The idea was to render the page red if the guess was way off, another colour if it were close, and green if the guess was correct. It seemed that the easiest way to do this would be to redirect to different pages depending on how close the guess was, and to set up styling for each page. What a day that followed this bright idea! ⬇️

I got stuck at this point as I couldn’t work out why my code – which made sense – just wouldn’t work!

I paired with Himalee for the best part of the morning, testing how far into the code the program was running. I discovered that when redirecting, the new page no longer had access to the ruby methods being run on the previous page (this is to do with scope). As such whilst the colour had changed, it wasn’t printing the matching statement to give the player information about how close their guess was. I also hadn’t given the user a way to continue guessing.

After trying a few options, I made the decision to have only three pages – an index page, one to play the game, and one for if the guess was correct. It’s possible to change the css background colour using an instance variable, so I simply wrapped the outcomes of the user’s guess in an if statement. Whilst the guess was still incorrect, different colours and messages would appear and the user could continue to make another guess.

Hoorah! ?

Now that I’d updated the CSS for number guesser, it was time to apply that learning to my todo list!

Thursday

I made various changes to my todo list, including adding colour, bullet points, bold text and using placeholders in my forms. Once I was happy with these initial changes, I moved to one of the stretch goals, storing todos in postgres.

I used my code from contact manager as a guide for connecting my ruby files to my database, so that I could use SQL to store the todo list. Some resources which were/seem helpful which I’ll probably refer back to a lot included:

  1. how to run and interact with my database from ruby
  2. understanding ‘pg’
  3. readme for ‘sequel’
  4. PostgreSQL Ruby tutorial
  5. postgres documentation on querying a table

Once I’d gotten my database connected using link 1., I changed my methods to work with the database. I ran into problems with “saving” the instructions. What was really helpful at this point was to think of the similar case in JSON when parsing and writing data in Contact Manager. I needed a way to execute the instruction to my SQL file. As such I set up a save_to_database method:

Friday

Having connected my web application to postgres, I demoed my application in our weekly retrospective. I was able to talk about what changes I wanted to make next as well as get valuable feedback for the areas that I’d been struggling with.

My last action of the week was to work on displaying lists for the user, which weren’t printing. Through pairing with one of our mentors Andrew, I learned the valuable lesson that I couldn’t return on my controller as it was stopping the program at the return. This meant the contents of my list wasn’t connecting across to my .erb file, and was it wasn’t displaying on the webpage.

Highlights this week:

  • demoing my todo list in our weekly cohort retrospective and getting really helpful feedback
  • hearing about the Rock Paper Scissors game that one of my colleagues had built
  • seeing the amazing project that one of our mentors has been building during his WAZA time using Elm. Really excited to see how I can use my design skills to build programs as I get more experienced in coding!

Things I’ve learned:

  • the importance of TDD
  • more about postgreSQL — how to use this with Ruby to add, edit and delete data
  • how to use Sinatra

Things I’ve struggled with:

  • remembering to test
  • getting my filtered lists to display
  • getting my lists to display in a way that is visually useful for the user

Things I’m curious about:

  • how to get my lists to display in a way that is visually useful for the user
  • how I can use a loop in HTML to print each row of my database on a new line when rendered on the webpage
  • how to get postgres to create an id column — a suggestion from mentors

What I’d like to focus on:

  • continuing with postgreSQL
  • adding more styling, and getting this to work by linking to a separate CSS file