JavaScript Random Quote Generator

Posted by on Jan 18, 2016 in Honor Code, JavaScript, Tutorials

JavaScript Random Quote Generator banner image

JavaScript Random Quote Generator – Introduction

A few days ago, I wrote a blog post on creating a PHP Random Quote Generator. In this tutorial, I’ll show you how you can create a JavaScript random quote generator. The principals are very much the same.

Full Code

I’m going to show you the code before explaining it to you:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<title>
JavaScript Random Quote Generator
</title>
</head>
<body>
<code>
<script language="JavaScript">
var quoteGroups=7;
var quoteNum;
var theQuote=new Array();

    theQuote[0]='Some people call me the space cowboy';
    theQuote[1]='Some call me the Gangster of Love';
    theQuote[2]='I speak on the pompetance of love';
    theQuote[3]='Some people call me Maurice';
    theQuote[4]='You\'re the cutest thing that I ever did see.';
    theQuote[5]='I really love your peaches wanna shake your tree';
    theQuote[6]='Lovey dovey lovey dovey lovey dovey all the time';
    theQuote[7]='Oh baby I\'ll sure show you a good time';

var quoteNum = Math.round(Math.random() * quoteGroups);
document.write(theQuote[quoteNum]);
</script>
</body>
</html>

JavaScript Variables

Before we go any further, let’s talk about variables. Variables are used to store data. A list of names, a shopping list, your favorite songs or maybe even some quotes! Variable names (known as identifiers) can contain letters, digits, undserscores and dollar signs. Every JavaScript variable must be identified with a unique name. There are some general rules for variable names. Variable names can contain letters, digits, underscores and dollar signs. A variable can only begin with a letter or a dollar sign ($). There are some reserved keywords words in JavaScript that can’t be used. If you’re interested, you can see a list of JavaScript keywords over at W3Schools.com. Let’s move on and discuss what each of our variables is for.

JavaScript Random Quote Generator Variables

1
2
3
var quoteGroups=7;
var quoteNum;
var theQuote=new Array();

We use var quoteGroup=7; to tell JavaScript that we’re creating a variable with an array ranging from zero to 7. An array is a list of data stored within a variable. In this case, we’re storing a list of 8 quotes. quoteNum is used a little bit later. I’ll go back to that one when we’ve come to it. theQuote is to going to store each quote. Notice that each variable has a semi colon(;) after it? That tells JavaScript that the line of code has ended. They’re very important, so don’t forget them!

The Quotes

1
2
3
4
5
6
7
8
theQuote[0]='Some people call me the space cowboy';
theQuote[1]='Some call me the Gangster of Love';
theQuote[2]='I speak on the pompetance of love';
theQuote[3]='Some people call me Maurice';
theQuote[4]='You\'re the cutest thing that I ever did see.';
theQuote[5]='I really love your peaches wanna shake your tree';
theQuote[6]='Lovey dovey lovey dovey lovey dovey all the time';
theQuote[7]='Oh baby I\'ll sure show you a good time';

As mentioned, each quote has an array number attached to it. We store each of our quotes in quotations. To let JavaScript know that the line of code is done, we end it with a semicolon. I’m mentioning the semi colon again because they’re extremely important. Without them, JavaScript doesn’t know about the end our our array and will return an error message that reads “undefined”.

Escaping Characters

We’ve got some quotes that use an apostrophe. Because the apostrophe is being used for our quotations, we need to do something to let JavaScript know that our quote hasn’t ended yet. Here’s an example of one of those quotes:

1
theQuote[4]='You\'re the cutest thing that I ever did see.';

Notice that “\”? That’s an escape symbol. The escape symbol tells JavaScript that the apostrophe is part of the quote. We can also escape the escape symbol. For example, for “Plans / Events”, we would type it as “Plans //events”.

The Number Generator

We’ve come to the part where we tell JavaScript to pick a random number.

1
2
var quoteNum = Math.round(Math.random() * quoteGroups);
document.write(Quote[quoteNum]);

Remember that quoteNum variable that we didn’t discuss earlier? Let’s do so now.
We’re using it with a function: var quoteNum = Math.round(Math.random() * quoteGroups);.
A function is just a fancy word for a bit of code that’s designed to make something happen. This particular function is going to return a random number between zero and 7.

We can’t just stop there though. We don’t want our code to just pick a random quote and not tell us what it is. That’s just mean. That’s why we use the document.write  function. Using document.write(theQuote[quoteNum]) tells JavaScript to write down the quote and tell us what it is. That’s it! The script is done. Save your file with an extension ending with html (quotes.html) and open it with your favorite web browser. Did it work for you? Let me know! I hope you enjoyed this tutorial. If you have any questions, or if you encounter a problem with the script, leave a comment. Comments are always welcome since I’ve just restarted this blog and don’t have to many of them yet. It’s kinda lonely…

Read More »

PHP Random Quote Generator

Posted by on Jan 15, 2016 in Honor Code, PHP, Tutorials

Php Random quote generator

PHP Random Quote Generator – Introduction

Today we’re going to create a PHP random quote generator. The generator will display a new bit of text each time the page is loaded or refreshed. For this tutorial I’m assuming that you already know that you have to use a server to run php. This can be done on a web hosting platform or with software that runs on your computer like xampp. (Update: If you’re interested in creating a random quote generator that runs client side – directly in the browser as opposed to server side I’ve written a JavaScript Random Quote Generator tutorial as well

How it Works

Let’s say you have a few famous quotes or testimonials from clients that you’d like to put on your website. One way you could display them is to put them on an entire page. Another way is to have a new quote displayed each time you refresh the page. We’re going to do this using two separate pages. We’ll start by typing out (or copying and pasting if that’s you’re thing) all of the different quotes that we want to display on the page. I’ll take you through each step and tell you exactly what each piece of code is doing. Next, we will create the page that the random quotes are going to appear on. Again, I’ll tell you what that code is doing. After all, what’s the point of the tutorial if you don’t understand how the PHP random quote generator works? I’m not going to bother making them look pretty. I’ll leave that for another tutorial.

The quotations page

Here’s the whole thing for those of you who are looking for a quick copy and paste solution. I would suggest sticking around and reading the explanation, however. That way you’ll have less chance of something going wrong with the execution. That and we still have anther page of code to work with. Using your text editor, create a new page and call it “quotes.php”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
 
 $num = Rand (0,2) ;
 
 switch ($num)
 {
 case 0:
 echo '<p>Hello darkness my old friend...</p>';

 break;
 
echo '<p>This line of text was inserted by a pho random quote generator!</p>';

case 1:
 echo 'If you ever get annoyed look at me I'm self employed - I love to work at nothing all day!';

break;

 case 2:
 echo 'Every inch of you is perfect from the bottom to the top';
 break;
 }
 ?>

What’s all that mean anyway?

I’m glad you asked Mr. Heading. Sorry. I only have the bad jokes. Let’s take it from the top.

1
2
3
<?php

$num = random (0,2)

Starting the code

We start by letting the computer know that we are now going to be using PHP. We do that by using the opening PHP tag.

Variables

Next, we declare a variable. You can think of a variable as a place to store things. Kind of like a closet or a locker. A variable has to start with a letter or the underscore character “_”. Variables are case-sensitive so if we were to use $Num, $nUm, $nuM or $NUM later on it wouldn’t mean the same thing. It would also get very confusing. Especially if you decided to use all four of those at the same time Yikes! Save yourself a headache. Don’t do it. a variable also starts with the “$” sign. The dollar sign tells PHP that you’re creating a variable so it’s kind of important. Really important actually.Also important is that semi colon. The semi colon tells PHP that you’re done that particular statement. Otherwise it would keep going on and on and on like an energizer bunny. I just dated myself, didn’t I? With $num, we’re creating a place to store random numbers between 0 and 2. “$num = random (0, 2) ;. Confused about the numbering? I’ll explain.

The PHP Numbering system.

In PHP, the numbering system starts with 0. “$num = random (0,2)” is just telling PHP that we want it to pick a number between 0 and 2 (0 or 1 or 2). That gives us place numbers for 3 different quotes. You can add more if you want, you just need to make the 2 into a 3 or a 4 or a 5 or a 6…really the number of quotes you want to use depends on how long you want to sit at your computer typing them all out. I have a short attention span. 3 is good for me.

The Switch Statements

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
switch ($num)
 {
 case 0:
 echo '<p>Hello darkness my old friend...</p>';

 break;

case 1:
 echo 'If you ever get annoyed look at me I'm self employed - I love to work at nothing all day!';

break;

 case 2:
 echo 'Every inch of you is perfect from the bottom to the top';
 break;
}
?>

This is how it works: First we have a single expression “$num = random (0-4). The value of the expression is then compared with the values (or numbers / quotes) for each case in the structure. If there is a match, the bit of code associated with that case is executed. We Use “break” so that the the code doesn’t just keep going onto the next case. You can think of it as either a person rolling a 3 sided dice or a person flicking a random light switch. See what I did there? Depending on which number (or switch) is picked, our php random quote generator will spit that particular one out. We use the curly bracket to let PHP know that the switches are the group that it can choose from. Finally we close our program with the closing PHP tag.

The Second Page – Easier than the first!

In order for our code to work, we need a page for the quotes to show up on. In your text editor, go ahead and create a page called “quotePage.php”. Type the following code into the page:

1
<?php include 'quotes.php'; ?>

If you want to, you can open this in your browser. You’ll see that one of the quotes appears on your page. Refresh the page. Another random quote should appear. If you get the same one, keep refreshing until it changes. There are only 3 after all. Unless you created more.

Questions or Comments?

Didn’t quite understand this tutorial? Have a comment on how the code could be made better? Have you used this code on your website? Let me know. I’d love to see how you’ve used it. Talk to me here or over on Twitter. I’m always around doing all things webby.

Read More »

Hire A Website Developer

Posted by on Dec 29, 2015 in Honor Code

hire a website developer designer article banner

Note: After posting a link to 449 Design, I was pleasantly surprised and excited to be asked by a friend, “Isn’t website design basically dead with all of the do it yourself websites basically monopolizing the market?”

I felt that this question fit very well with this article and decided to use it as part of the introduction. Looks like I’ve done just that – Thanks Adam!


While do-it-yourself subscription based website building sites seem to be a good idea (at first), for the non website developer or designer, there may be more hurdles to be overcome than anticipated. It’s no wonder so many people and businesses have decide to hire a website developer / designer in the end.

Issues With Website Building Sites

Redundancy

Website Building tools usually start with a template. The user starts by choosing which layout and design they like best and then applies it to their own site. The problem with this approach is that there are only so many templates to choose from. You’ll invariably end up with a website that looks like several others, the major differences being that you’ll have different content on yours.

Limited Options

A few years ago when beginning to work with a client who wanted to edit her website I came across a difficulty when attempting to do some minor tweaks on her site. The tasks she wanted completed were basic: change a font color, add some images etc. When I went to make these changes, I realized that the website builder wouldn’t allow me to do so unless my client paid extra for those “extra features”. The template wasn’t at all editable and when a shop was requested, more frustrations arose. In the end, I had to inform the client that she would have to start from scratch.

The issues that the above client above encountered wouldn’t have occurred had a website developer been hired as opposed to the use of a seemingly low cost solution. A website developer has free reign. They can add as many pictures as you want while coming up with a suitable color scheme and design for your site. Everything is included in the project cost.

Site Migration

Web building tools will often host your website on their server. It all sounds phenomenal until you decide you’d like to move your website to a more reliable host. Unfortunately, most website building sites are created using the builder’s inherent tools which rely on their own programming. Hosting a replica of the current website on a different server isn’t possible in most cases. If you’re wanting to move your site, that will most likely mean a complete rebuild – something that will cost you time and money.

While I’m aware that there are website building sites out there that will let you (and perhaps even help you) migrate your website from their host to another web server, many of the features that you rely on such as your photo gallery, shopping cart and message boards are run on the website builder’s system, it can be quite shocking to find out that where there was once a photo gallery there is now simply an empty page with a little bit of text on it – if any part of those features remain at all.

Once you hire a web designer or developer they can provide you with any frills you need. They can also set you up with your own hosting account, eliminating your need to worry about transferring your website. Web Developers are quite knowledgeable about which servers run the best for your particular needs which ensures that everything will run smoothly.

Websites Need Change

As your website traffic grows, so will the needs of your audience. Your website developer can adjust your website to adapt to those changes. What changes those are will depend on the purpose of your website and what your audience is asking for.

Website Building Tools Cost More

Through the course of a year, adding up each monthly payment, the average website building platform with all amenities, domain name and hosting may cost somewhere $80 to $150 per year. While it seems inexpensive at first, the average subscriber often ends up paying more, especially when other costs like third party features are factored in.

As mentioned earlier, When you hire a website developer, you only pay for development, hosting and domain name. It’s completely up to you if you decide to commission more work to be done. While it may seem like a large cost at first, once you calculate what that web based subscription solution amounts to over time, you’ll find that the price quickly becomes much less.

Hire A Website Developer – The Right Business Decision

“Some places only want the cheapest form of online pamphlet as their business presence,” says Dryden, Ontario website developer and radio copy writer Chris Pollard, “but any business worth its existence will hire someone to create a proper site. Especially if they need that site to actually preform a function…often those internet DIYers will realize that and hire someone to fix their blunder.<\p>

If one is truly interested in increasing their client or customer base, the choice seems to be obvious. Hire a website developer and ensure that your website gives you the result that it’s supposed to. Shamless self promotion: 449 Design is a great place to start!

Read More »

Five Best WordPress Plugins for Developers

Posted by on Feb 4, 2015 in Honor Code, WordPress

five best WordPress Plugins

This post on the Five Best WordPress Plugins for Developers is my second attempt at a blog on 449 Design. I figured I’d hit restart by discussing some the 5 best WordPress plugins for WordPress developers. These are WordPress plugins that I’ve found to be very useful on both client sites and on my own personal site. Some of them may be moore developer oriented, but maybe I’m wrong about that and those of you with a little less website development and design experience will find these useful as well. With these plugins listed in no particular order, except for the last one which is my favorite, let’s get started!

5 Best WordPress Plugins

WordPress Theme Downloader

 

Theme Downloader best WordPress plugin




The first of our Five Best WordPress plugins for Developers is the Theme Downloader by George Stephanis is a plugin that I’ve found to be useful when making some changes to a client’s existing site. As the plugin title would suggest, by activating the plugin you’re able to download any theme that is in the themes directory. This makes things a little bit simpler since you don’t have to worry about signing into ftp to make any changes. If you have a theme that you’d like to use on another site but don’t have it saved on your computer, this plugin will save you from having to look for that theme again.
Visit Plugin Page

Reveal IDs

Reveal IDs

There are many times when it’s necessary to be able to view the id of a page, post or category. WordPress used to do this natively, but since version 2.5, that capability has been removed. Enter the Reveal IDs plugin made by Alphawolf. This plugin adds an id column in the admin area that displays the id of each of the previously mentioned elements as well as ids for Following IDs can be revealed: posts, pages, categories, links and more.

Visit Plugin Page

WP-Polls

wp-polls best wordpress plugins
One thing that I like adding to a website is interactivity. WP-Polls may be the best WordPress plugin to give you the ability to put a poll any where on your site and get your site visitor’s opinion on anything from a favorite ice cream to who they’re hoping will win the big game. You’re able to set up the topic, the answers, the date you want the poll to start running and add an expiry date to the poll. Once an answer is chosen, the poll displays the results with a bar graph and the number of people who answered per topic.

Visit Plugin Page

Yoast SEO

wordpress seo best wordpress plugin
Yoast is arguably the best WordPress SEO plugin available. If you’re interested in getting higher in search engine rankings, with a little bit of SEO knowledge of your own, this plugin will help do a lot of heavy lifting for you. SEO Yoast helps with site maps, meta tags, search page descriptions, checks for images with missing alt tags along with a great number of other things.

Visit Plugin Page

What are your picks for the best WordPress plugins?

Well that’s it for my first (not really first) blog post. I hope you enjoyed these picks for the five best WordPress plugins. I’d love to know what you feel the best WordPress plugins are. I know there are a lot of them out there so yours are sure to be different from mine. In fact, this was originally supposed to be titled, 10 Best WordPress Plugins, but I ran out of time. Time. There’s never enough of it. Maybe these WordPress plugins will help with that.

Read More »