Articles.. Tutorials.. Work.. Life.. Balance..
Tutorial: JavaScript Array (Oblique Strategies)

So, we're sort of underway and I thought I might as well dip my toe in to a bit of a fun tutorial.

First question I should answer though is why a tutorial? Well, I have the idea that I wanted to use this space as an opportunity to show and tell, giving those with an interest and those wanting to understand an opportunity to see how things are done. It also, hopefully, provides a bit of an organic CV.

Some of you may be aware of the Oblique Strategies cards which were created by Brian Eno and Peter Schmidt and first introduced in 1975 and were designed to be an aid to creative thinking (you can find them at the Enoshop). I had a play around a few years ago and knocked up a few ideas on some index cards I found in a drawer and then like many things, they went back in the same drawer for discovery later, later in this case being a couple of weeks ago. Looking at them I thought, why not?

So, here goes...

STRATEGY

Let's start with the basic HTML page structure.

As well as our standard html, head and body tags we are going to add script and style for our JavaScript and CSS respectively.

We'll be working in this format so we can keep the code in a single file. Later you can move the relevant code to its own file and link it within the head using script and link tags.


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script></script>
    <style></style>
  </head>
  <body>
  </body>
</html>

Next we'll add the body content, the stuff you'll see on screen.

We'll create a div tag and give it an id of "strategy" and a class of "card" which will allow us to manipulate and style the content later. We'll' also add some placeholder text inside a paragraph tag which will allow us to see the layout and style as we develop our project.

Below the div tag we will create a button with the type classification of "button" and an onClick action called "getStrategy()" which will be the JavaScript function name used later. Let's not forget to give the button some title text, I have used Get Strategy.


<body>
  <div id="strategy" class="card">
      <p>STRATEGY</p>
  </div>
  <button type="button" onClick="getStrategy()">
      Get Strategy
   </button>
</body>

So far so good, we have a page and some content and a structure for the content. Let's continue with some simple styling to make our card stand out.

There are three elements we are going to give simple styling to; the card, the button and the paragraph. Doing this will help the project stand out but remember, this is simple CSS styling, there's lots more we will visit in later articles.

Within the style tags in the head create the class .card and add a border and set the width and height. We can also add a margin to our element to give it some space and then finally position it. I have centred using left: 50% and then transform: translate(-50%, 0) to shift the element back left, 50% of its width to fully centre. Finally we are telling the page to place the element relative to where it would normally be.

Next create the styling for the button, remember though this is a tag not a class so there's no . before the element name. Again we have added a margin around the element and some padding within and like the card we are centering horizontal to the page with positioning and transform.

Finally we are going to add the CSS for the paragraph element. We are adding to our positioning by adding top: 50% and our transform: translate is now working across both the X and Y axis so it is shifting our element -50% in each direction and for perfect centering we are removing the paragraph margin. As a final finish we are centering the paragraph text.


<style>
.card {
    border: solid #000000 thin;
    width: 300px;
    height: 200px;
    margin: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    position: relative;
}
button {
    margin: 10px;
    padding: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    position: relative;
}
p {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    text-align: center;
    margin: 0;
}
</style>

We now have our page set and positioned. The final stage is the JavaScript code and creating the array and a randomiser to display the array content.

So what is an array? It's simply a method of storing multiple values in a single variable using comma delimitation

Moving to our script tags we first need to define our function using function getStrategy() { } which we referenced earlier when creating our button.

We'll be generating two variables, one for the array and one for the chosen strategy. Starting with the array create the variable within the functions curly braces {} using the var statement and the name strategyArray.

The array sits within brackets and each entry is defined by quotes and seperated by a comma. We have six entries to add, but feel free to get creative and add more, just remember the comma and quotes. Finish the array with a closing bracket and close the variable with a semi-colon.

Next we can create the variable to hold the random strategy string. Again the variable is defined by var and we will name it strategey and it is equal to the string associated to the random number chosen between 1 and the count of array entries calculated by strategyArray.length.

To finish off we output the content of the strategy variable to the div we created in the body HTML that we gave the id of "strategy".


<script>
function getStrategy() {
  var strategyArray = [
    "Burn It!", 
    "Go Pub - End The Day",
    "Change More Than One Thing",
    "Accept Advice",
    "Ctrl-Z",
    "Give It Space"
  ];	

  var strategy = strategyArray[
    Math.floor(Math.random()*strategyArray.length)
  ];

  document.getElementById("strategy").innerHTML = 
    "<p>"+strategy+"</p>";	
}
</script>

Please note that my version at the top of the page has a little bit more formatting to keep it in line with elements aligned to the page and more strategies but the demo file for this project is here and should be identical to your output.

Did you enjoy this tutorial?

Buy me a coffeeBuy me a coffee