Random Quote Generator Script Help (For Uni Project)

VeryBasic · 07-19-2011, 02:38 PM

I have to create a website as a project for my university course. Said course has nothing at all to do with computers really so it's really throwing us into the deep end as the majority of us have/had no interest in this particular field.

Regardless, I am creating a website that uses the Random Quote Generator Javascript that I copied from the Hotscripts website. The code details are below and my question is: is there any way I could change the formatting for each quote? For example, change quote 1 to be, say, yellow or bold and change quote 3 to be aligned right and blue? I mainly want to change the colour for each quote but having any other info on how to format it would be really helpful.

Code:

var quotes=new Array();
quotes[0] = "This is quote 1.";
quotes[1] = "This is quote 2.";
quotes[2] = "This is quote 3.";

var q = quotes.length;
var whichquote=Math.round(Math.random()*(q-1));
function showquote(){document.write(quotes[whichquote]);}
showquote();

Also if you could put it into total idiot-speak for me I'd be oh so grateful.

jmrker · 07-19-2011, 03:41 PM

Try this ...

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>

<style type="text/css">
/* use whatever CSS control combinations you desire for display */
em { color:hotpink; }
.quot0 { text-align:left; background-Color:cyan; color:black; }
.quot1 { text-align:right; background-Color:yellow; color:blue; }
.quot2 { text-align:center; background-Color:orange; color:black; }
.quot3 { text-align:left; background-Color:black; color:white; }
.quot4 { text-align:right; background-Color:red; color:white; }
.quot5 { text-align:center; background-Color:lime; color:black; }
.quot6 { text-align:left; background-Color:white; color:black; }
</style>

<script type="text/javascript">
var quotes = [
    "This is <em>quote 1.</em>",
    "This is <em>quote 2.</em>",
    "This is <em>quote 3.</em>",
    "This is <em>quote 4.</em>",
    "This is <em>quote 5.</em>",
    "This is <em>quote 6.</em>",
    "This is <em>quote 7.</em>"  // No comma after last entry
];
var qarray = ['quot0','quot1','quot2','quot3','quot4','quot5','quot6'];

function rndQuote() {
  var whichQuote=Math.floor(Math.random()*(quotes.length));
  document.getElementById('Quote').innerHTML = quotes[whichQuote]; 
  document.getElementById('Quote').className = qarray[whichQuote];
/*  for testing purposes only
  alert(document.getElementById('Quote').className+'\nColor: '+
        document.getElementById('Quote').style.color+'\nBGcolor: '+
        document.getElementById('Quote').style.backgroundColor
  );
*/
}

window.onload = function() { rndQuote(); }
</script>

</head>
<body>
<div id="Quote" class="quot0"></div>

<!-- next line is optional for testing -->
<p><button onclick="rndQuote()">Test Quote</button>
</body>
</html>

Add to or subtract from the CSS class styles to fit your quote needs.

VeryBasic · 07-19-2011, 04:23 PM

That appears to work perfectly. Thank you so much for your help, I was getting majorly stressed out over it. You've made my day, man.

jmrker · 07-19-2011, 08:36 PM

Quote:

Originally Posted by VeryBasic

That appears to work perfectly. Thank you so much for your help, I was getting majorly stressed out over it. You've made my day, man.

You are most welcome.
Happy to help.

Note: there are a number of display conditions you can control with the CSS statements.

Good Luck!