IT Girls Challenge [Help Tutorial]: Random Quote Web Site

Thursday, August 04, 2016

This is little help for this week IT Girls Bosnia Challenge. In this blog post I will cover up the main parts of our little web site called Random Quote. In this short blog post I will try to explain some parts of HTML, CSS and JavaScript that you need to implement in order to solve this challenge.

We need to make web site like this:

So let's start with creating our new web site.

HTML part:

As always we will start our HTML with < html > tag. in our < head > tag section we will add < title > tag in order to make title for our web site when user is using our site in browser tab there will be the context of the title tag.

Our main elements are in body tag of course. In my last blog post where this challenge was introduced I wrote that we have our two divs and copyright area. So from top to bottom: first div is our header div with some id in my case id is header. In our header div we have one < h1 > tag which will represent the title of our web site body.

At "main" div I have two elements, one for the quotes and other for or button. For quote text I use < h2 > tag and for first quote I put some quote just to be as placeholder. This tag will be tag which will show random quotes when we come to that part. We need to set id to it... in my case id is citatText.

After text for quote we will use < input > tag as button to trigger some JavaScript event to change our quote text to some another quote. Attributes in this tag are type which represents which input element we want to use in this case we need simple button, for button I used class just to show different css selection with classes and ids so to identify this button I used class and set class name to be just button. Attribute onClick represents an JavaScript event/method that we will trigger when user click on this button, and last one is attribute value and we use it to show text on our button so in this attribute we use text that will be at our button in my case GET RANDOM QUOTE.

Last HTML tag that we need is < h2 > tag for attribution text. As you can see I have some text in my < h2 > tag and < a > tag which wrap my name, and make hyperlink to another site, so when user click on my name browser will navigate to url that we write inside of href attribute at < a > tag.

After all this work our web site looks like this:

Obviously it need some CSS to make it more nice and user friendly, so now we can go with CSS part of this tutorial.

CSS part:

In order to use CSS with HTML we can do that by three ways.

  • External style sheet
  • Internal style sheet
  • Inline style
External and Internal are good ways but inline is one that you want to ignore. In this tutorial we will use external style... if you want to learn other two ways you can check them here.

Create new file named: style.css
When we want to use it by external way we need to link our new css file in our HTML and that link we need to put at < head > section in our HTML file.

Like this:

We use < link > tag and for first attribute named rel we use "stylesheet" because as you know CSS stands for Cascading Style Sheets.. as href we can put the path to our css file, my style.css is at same folder as html so I just put name of file and its extension.

After that we can go to our style.css and start typing CSS elements to stylize HTML elements.

Our CSS will look like this:

There are multiple ways to select HTML tags in order to style them in this tutorial we will cover up few of them.

In first selector in CSS we use body, this selector have name of our body tag from HTML so all our declaration in this selector will apply to our whole body tag area. We have two properties background: which represents the color of background of our body tag, I used some gray color with this hex code, second property is text-align: which will align text in whole body area to center, because value for text-align in my case is center.

Second < h1 >, third < h2 >, fourth < h6 > CSS selectors are same by their structure in all of them we use two properties one for font color and one for font type of our tags. For color of our text we use property: color and for font type/family we use font-family: property. In this part you can use same colors and fonts as me in this example.

Fifth CSS selector is for our header div, this selector with this hash sign we use when we are selecting html tag by ID. So in order to select our first div with id = header ... in CSS we do it like this: "#header { ... other properties....}".

All of properties which we use in header div are self explanatory but I will cover them quickly:

  • background: -> Color for background for that div
  • width: -> Width of our div in pixels.
  • padding: -> extra space which this tag will use around it.
  • margin: 0 auto -> is old trick to center div in the middle of the page.
  • border-radius: this property helps us to make round corners of our div.
  • margin-bottom: it will "push" all elements bellow this div by 10px in our example.

Sixth CSS selector is more-less the same as previous one with one more property... height: with this property we defined height of our div in pixels.

The seventh CSS selector is for our button, As I wrote earlier when we want to select HTML element by ID we use hash sign # ... and when we want to select HTML element by class in CSS we use dot before the class name. So in order to select our button with class "button" we will do it like this: " .button{ .... properties ....}"

With this selector I want to stylize our button. With these properties:

  • background-color: #ff4444;
  • border: none; -> This will delete border around our button.
  • color: white; -> Color for value of text for button.
  • padding: 15px 32px; -> Padding is explained previously
  • font-size: 16px; -> This will apply size for our text are of button
  • margin: 10px; -> Margin is explained previously
  • font-weight: bold; -> This property will make our button text look bold.
And last CSS selector that we have is selector to make our button more interactive, so when user hover their mouse over button, our button will background-color to black. So with this kind of selector you can make you elements interactive with different kind of events on them.

After this CSS our web site looks like this:

Everything is ok but when I click on the button nothing happened. If we want to make our web site to show random quotes when we clik on our button we need to implement some JavaScript code for that. Small note for all of you this part can be difficult for some of you, if you are not familiar with programming in JavaScript but no worries I will try to explain all the code lines in our javascript part.

JavaScript part:

If we want to insert our javascript code in HTML we can do it with more than one way, you can insert < script > tag to head or body tags and write your code there but in this tutorial I will insert it by external way. I will make new fajl script.js and to link our HTML and JS I will add this line to head tag in HTML, like this:

And after this we can write all our methods for HTML elements. My script.js file looks like this:

First line of code as we can see we will make new array of strings, we use arrays to store multiple values in a single variable in our case it is called quotesArray. To get more familiar with JavaScript arrays you can see it here.

Note: Some of code part are in english and some are in bosnian language, I write it like that just to be more clear what key parts are important to understand.

Next thing that we need to make is a method, the best and the simplest explanation is that methods are the actions that can be performed on objects.

You can take a look at your HTML code and you will see that at our button we have onClick event and in that filed we wrote "funkcijaZaRandomCitat();" so when user click on the button it will trigger that function on our javascript part of web site.

In order to make new function you can do it with keyword function after that you set name for that function, all functions have round open-close brackets. In our case we don't have any parameters so we will leave our brackets empty.

After that we have body of our function, body is in the curly brackets "{ ... BODY ...  }". Whole functionality of this function is in this body part so let start explaining particular lines of code.

As I mentioned early this is advanced topic if you are completely beginner in JavaScript. To get random number we can use Math class in JavaScript.

One of the functions from Math class is function random() which will give (return) to us random number between 0 and 1. For example: 0.279848  and after that as you can see we multiply that random number with length of our array in our case it will be 8, because we have 8 strings in our quote array. More about random() function in JavaScript you can find here.

Calculation: (0.279848 * 8) ... if you run your calculator you will get this number: 2.238784
In our JavaScript function when we for example got this number than we use another function to round this number to the integer number. After we use that function called floor() from our number  2.238784 we will get integer value of two: (2) because we have rounded our number with floor() function. More about floor() function in JavaScript you can find here.

After all this calculation we assign that number from right side to the variable called randomPosition. So our variable randomPosition (in this imaginary example) have value of 2.

Next what we will do is to make another one variable to store random quote from our quote array with randomPosition variable. At left side we create new variable called quote and we assign the value which is at the randomPosition postion in our quotesArray. (In this case second quote). To get more familiar with JavaScript arrays you can see it here.

After that at the third line of code things are self explanatory. With document we take whole our HTML document and filter it with function getElementById this function tell us all about it with her name. This function will search and get element which have Id = "citatText". In our case our < h2 > tag have that id and with innerHTML property we will set its value to the quote variable which have our quote text.

In this case I was write one example with some random number 0.279848 after you click another and another time you will get some other values and every time another quote to the < h2 > element.

I tried the best I could to simplify these lines of code to explain you this very simple web site. I recommend you to take a look at URL that I mentioned in this text. You can make this web site by following this example and I encourage you to improve design of this web site in order to have best web site for this challenge.

Small note: If JavaScript part is too difficult for you, try first to make HTML and CSS implementations and improve it (you still got chance to win) and after that try JavaScript part.

Following this blog post tutorial you will have fully functional web site, so

With this challenge you can earn total of 10 points with these components done:

  • HTML = 2 points
  • CSS = 4 points
  • JavaScript = 4 points
  • Bonus for your creativity (custom fonts, similar colors...)

You can find my implementation for this web site at this url:

Good luck everyone... and remember in process of development google (research) is your friend, just ask the right questions.

Best regards! Almir Vuk | AV Development

You Might Also Like