Struggling With Mystery Word Game

The instructors weren’t kidding when they said that this is a big weekly project (The Mystery Word Game) that we have to be very careful with our programming. The purpose this weekly project was to implement the game Mystery Word as a web application where the user will be playing against the computer. For this project, I have already NPM install express, mustache-express, express-session, and body-parser to be used throughout the programming.

The idea of the Mystery Word Game:

  • A new user arrives (who hasn’t signed up) arrives at the root page, the app will select a random word from the list of words that YOUR computer has in store.
    • How are we supposed to access this list of words? We must be able to receive it with Node.
  • Store the chosen word during a session
    • We must use express-session
  • Note that the word chosen will not be shown. The user must guess a letter for that word. Basically, it is like a hangman game (which it really is anyway).
    • A form must be used where it can validate only one letter is being sent.
    • If more than one letter is entered–it must show that the input is invalid and tell the user to try again
  • Whatever letter is guessed that is not the correct letter for a chosen word–it must be shown somewhere on the page so that the user knows what letter they already used.
    • This is where express-session come in play
  • Whatever letter that is guessed and is correct will be shown on the display of a chosen word–but it will be partially shown until all the necessary words are added
    • Will need to somehow show those “underscores” where the missing letters are shown.
  • A user is allowed eight guesses where they will be reminded how many guesses they have left after each round of letter guessing.
    • Again, express-session plays a role here

This may sound easy to do–but I don’t think so, especially if this is not planned out accordingly before actually program the steps. Already, I find myself having issues with using the for loop inside the web app that is not displaying the words that I needed. I have already done the simple for loop outside of the web app to ensure that I am programming it correctly…and still, it is not working. Perhaps my brain is a bit tired that I am overlooking a very simple solution to this.

I am currently hard coding the first steps which are to use the for loop to go through an array and for some reason, it is not working when I am asking for the correct element and push it to a new array to single out the word.

Below is the code I’ve been working on and it is the first step to programming the game which for some reason is not displaying the word on the root page. Before I did the for loop, it does display the example words when I used the mustache tag (used the node library called express-mustache). Now, I brought in the for loop to get it to show up only one word instead of the whole array…it decides to not display any of the words. So, it is a struggle for me but I know it has to be a simple solution and/or I am practically overlooking something.


const example = ['cat', 'dog', 'horse', 'flea', 'mite', 'shark', 'fish', 'seahorse', 'graywolf'];

const game = [ ];

app.get('/', function(request, respond){

for (let i = 0; i > example.length; i++){
if (example[i] === "flea"){
game.pop(example[i]);
}};

respond.render('index', {
DropWord: game,}
);
});

Note: This is only partial programming I am showing as I have a lot more codes in the app.js file currently. I am doing the programming in baby steps to ensure that one block of code works before working on the next block of code.

Coding in Javascript Rants

This is going to be of a rant.

Learning a programming language is going to be hard. It is not that I can’t learn it. When I studied the materials on the fundamentals of Javascript such as functions, conditional flow, objects and arrays–I understood how it works. What threw me off is learning how to write it from scratch that points to logical steps by steps. Basically, I needed to learn how to think like a developer, telling the “dumb” computer what it is I wanted it to do by providing the rigid instructions.

That was the wall I hit.

And that is the wall I needed to knock it down.

And I will knock it down.

When I coded in javascript for the first time yesterday–I kept knocking down that wall little by little and my brain slowly made the connection, dot by dot, on learning how to think like a developer. That is pretty much how I felt–but I knew it would take time to truly understand the language to where I can manipulate the codes freely without being a bit scared of whether it works or not–or if I’m writing the code correctly.

HTML and CSS are my comfort zone and it is time for me to step out of it and move on with javascript. So, I better fail quick and learn quick (as my instructors told us).

Work that Flexbox!

The last few days we’ve been working with CSS coding and learned the art of FlexBoxing the webpage. I will have to get this off my chest:

Flexbox is not my to go to coding for web design.

Perhaps I will use it strictly for navigation bar or perhaps an image gallery (although I think that can get complex really, really fast). As far as I understand–this new method of creating a layout of the webpage is new and will have some glitches here and there. Perhaps in time, the developers who designed Flexbox will improve its usability or it may be done away.

However, I am extremely happy with the outcome of my  first weekly project that definitely contained the use of Flexbox. I had to create a webpage base on the mockup that the instructors provided for us. While in the middle a fight with flexbox layout, I somehow stumbled and realized I had the images accurately ratio-sized and at the height I was attempting for to replicate the way the mockup was designed. I had to go back and re-read what I just did until I understood what I did. It was a thrilling moment to have when I had the “ah-ah” moment after some serious coding (especially when I did a complete redo of the weekly project!).

I do admit that Flexbox was a fun challenge and it was also great to learn a new way to style a webpage. While I haven’t learned the Grid layout–I think I just may prefer that over the Flexbox

Messy Style in HTML & CSS

It looks like we’ll be spending some time on learning the rope of HTML and CSS styling. I do admit that I have some prior knowledge of it–but it is a messy one. The best way to put it is that I never learned the etiquette of how to write/code web pages. What’s even worse is that I never really knew that there are some HTML and CSS codes that are phased out or simply do not work in some browsers (whether they are new or old). What are some of the things I used to do? I used to:

  • leave a lot of whitespaces in the code file
  • multiple class, id and types that are identical to each other (meaning they overlap one another)
  • never left comments inside any HTML and CSS files for clear explanation of what I was attempting to do
  • never truly understood the concept behind selectors, box models, etc

What I struggled with the most in today’s learning is the CSS Precedence and their general rules. While I knew that CSS reads from top and bottom–but it really means that the most recent code in CSS format generally sets the priority in how the text, images, etc will be displayed on the web browser. Plus, if a selector is more specific than the other similar selector, it will also set precedence. Any CSS applied directly into the HTML file will take precedence over the external CSS file.

Come to think of it–there was another concept that I also struggled with.

Tables.

I admit. Tables are not my favorite coding, especially when it come to coding them in CSS. It seems that they have their own rules to follow that generally does not applied to the content of the web browser. I hope I made sense as I write this out–this is my brain processing, trying to figure out how this works.

Perhaps reading a few chapters from HTML and CSS: Design and Build Websites written by Jon Duckett clear things up a bit. I highly recommend reading this book. Let’s admit it, every HTML books we read are usually dull and very manual-like. This book is nothing like that. It is full of visuals and clear, concise explanation that actually makes it fun to read through the pages.