WDI Fundamentals Unit 8
Now that we've covered variables and Booleans, we can write code that simulates the cards in our memory game and compare them for a match.
In your terminal, from your home directory, navigate to the
fundamentals directory. Then, go into the memory game project repo — this repo should be named
wdi-fundamentals-memorygame. Finally, open this project in your text editor, and bring up the
style.css files in the
This is where you'll be writing your code for the remainder of the unit assignments.
But, here's the catch! You have already written the required HTML and CSS in previous units; you'll want to use that code moving forward, so make sure you replace the HTML and CSS found within the
style.css files with the code you've written previously!
You'll also want to link your
index.html file to the
main.js file. Remember when you linked your CSS file to your HTML file? Yes, that's right, it's as simple as that! Look at the syntax below — copy the line with the
script tags to your HTML file and modify the source destination so it links to your
Where To Add Script Tags: Unlike using a
linktag for linking CSS files, you should add your
scripttags right before the closing HTML
</body>). This ensures that all of the elements and styles on your page have been loaded and are available to the browser before the
scripttags are read.
In this section, you'll be working to create the cards that will make up your memory game. Each card will have a value of "queen" or "king," and there should be a total of four cards. Giving the cards a value means we can use comparison operators to check for equality. You'll also push your code up to your repository! Let's get started.
1) Navigate to the
main.js file in Sublime.
2) Create four variables that simulate the cards in your game.
"queen", and the other two should have a value of
Here's an example of one card:
var cardOne = "queen";
3) Make sure you've linked your
main.js file to your
4) Now that you have four cards, you'll want to compare their variables to check for equality.
main.js, which is connected to your
index.htmlfile, you can open the
index.htmlin the browser and run this code directly in the console to see the results of your executed JS.
5) Go ahead and open your
index.html file, and then open the file in the browser. After the web page loads in Chrome, you can go to
Developer Tools and click on the console panel.
6) To compare the two
cardOne == cardTwo
7) Now, try to compare a
"king" variable with a
"queen" variable. For example, if
cardOne is a queen and
cardFour is a king, what does this expression evaluate to?
cardOne == cardFour
Once you've finished (and have tested your code), commit the changes you've made to the project's repository. Make sure you've commented your code!
In order to back up your code and track your work, you'll want to commit the changes you've made to the project's repository. You'll have to open up the terminal and
cd into the correct folder that holds the cloned repository for this assignment. Once you're there, complete these three steps:
1) Stage your code.
git add -A
2) Create a version of your staged code.
git commit -m 'created game logic'
3) Push your code to the GitHub repository.
git push origin master
Remember, when you're programming, you need to figure out the solution to the problem at hand before you ever start writing code. Below, you'll find a helpful general procedure you can follow:
1) Understand the problem. In particular, try to determine (a) what you will be given and (b) what you hope to get out of the program. If you can't explain the problem in those terms, you won't be able to move further.
2) Come up with test cases (and eventually, tests). Once you've figured out how your code is supposed to behave generally, pick out a couple of specific cases that you can use to confirm whether or not it is working. For this assignment, this would include comparing the values of cards.
3) Solve the problem in English. Or any human language, really. The point is, it's a good idea to pause and avoid touching your keyboard until you can start to explain, clearly and precisely, both what it is you're trying to do and how you're trying to do it. If it helps, you can try sketching out the concept or outlining your procedure on paper.
4) Write code, even if it's not the prettiest. At this stage, don't worry if your code is elegant, readable, or robust. Just make it work to satisfy all of your test cases.
5) "Refactor" your code. Now that your code is functional, take some time to make your code clean/efficient/robust. Just make sure that whatever changes you make don't break your code — you can keep an eye on this by testing your code and ensuring it still gives you the correct results.