Javascript for Final Project

thewebkid · #21 (**permalink**) Nov 23rd, 2007, 19:44

No actually I dont. I am still looking for something that would work on the site. Maybe some kind of internal search engine or something.

Stuart · #22 (**permalink**) Nov 23rd, 2007, 20:08

Search Engines don't work well when built with javascript. Do something else, like text animations...

thewebkid · #23 (**permalink**) Nov 23rd, 2007, 20:44

How can I incorporate a countdown timer? Just text only.

Stuart · #24 (**permalink**) Nov 23rd, 2007, 20:51

Where is it? Can you post the link? I need some code to work with...

thewebkid · #25 (**permalink**) Nov 23rd, 2007, 21:06

The countdown? Or the code for my site? In that case my site isn't published on the web yet.

Stuart · #26 (**permalink**) Nov 23rd, 2007, 21:18

If you found a code for the countdown, could you post the link to that code? Or are you askingme for one?

thewebkid · #27 (**permalink**) Nov 23rd, 2007, 21:35

lol No I will post it:

http://www.dynamicdrive.com/dynamici...dhtmlcount.htm

there is an event at the beginning of june of 2008, I think it would be appropraite.

Stuart · #28 (**permalink**) Nov 23rd, 2007, 21:44

OK, good. So, what is your question? What are you having trouble with? It seems pretty straight forwardly explained...

thewebkid · #29 (**permalink**) Nov 23rd, 2007, 21:48

lol, I am not as smart and my brain isn't as fresh as a fourteen year old. I have trouble changing the color of the font. I want to change it to white.

Stuart · #30 (**permalink**) Nov 23rd, 2007, 21:58

Ah, ok. Now, look at Step 1. There, they give you a bit of css. Change "color:yellow;" to "color:white;" (without the quotes!).

thewebkid · #31 (**permalink**) Nov 24th, 2007, 00:07

Ok How to I modify how many days are left?

Blake121 · #32 (**permalink**) Nov 24th, 2007, 00:13

Code: Select all

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")

Change that line to what ever date you want. (Only change the "March 23, 2009 18:25:00" bit though.)

It's a bit of code actually in your HTML by the way. In the BODY section.

Stuart · #33 (**permalink**) Nov 24th, 2007, 00:29

Darn, Blake already got to it before me! Anyways, yes, that line is where you determine the date to which the script should count down to... Make sure to use that exact format, though. One mistake, such as a missing colon, could break the entire script!

thewebkid · #34 (**permalink**) Nov 24th, 2007, 12:44

Yeah I have learned that in the past. I will try it out.

thewebkid · #35 (**permalink**) Nov 24th, 2007, 12:57

I didnt get this part:

"Inside your <BODY>, define a DIV or SPAN tag with a unique ID that will contain the local time, then invoke "cdLocalTime()" to populate it:"

I justcopied what they gave me and it didnt work too well.

Stuart · #36 (**permalink**) Nov 24th, 2007, 15:41

OK. I will put the script together for you since they give you a lot of unnecessary junk. What date do you want to countdown to?

thewebkid · #37 (**permalink**) Nov 24th, 2007, 16:06

June 14 2008 6:00pm, If you can explain how you did it that would be good too. Thanks

Stuart · #38 (**permalink**) Nov 24th, 2007, 16:24

OK. Here is the entire html document:

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">

.lcdstyle { /*Example CSS to create LCD countdown look*/
background-color:black; /*Background color of the countdown */
color:white; /*Font color*/
font: bold 18px MS Sans Serif; /*Other font styling*/
padding: 3px; /*Padding on all sides of the countdown*/
}

.lcdstyle sup { /*Example CSS to create LCD countdown look*/
font-size: 80%
}

</style>

<script type="text/javascript">

/***********************************************
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////

function formatresults(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left."
}
else{ //else if target date/time met
var displaystring="Countdown Finished!" //display final message
}
return displaystring
}

</script>
</head>

<body>
<div id="countdowncontainer"></div>

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "June 14, 2008 18:00:00")
futuredate.displaycountdown("days", formatresults)

</script>
</body>
</html>

Now, the only thing you need to change right now is the message that will be displayed when the countdown is finished: "Countdown Finished!" Change that to whatever you want, but keep the quotes!
When the countdown is finished and you want to count down to a new date, change this line above: "June 14, 2008 18:00:00" Again, be careful about using that exact format.

Cheers and good luck!

thewebkid · #39 (**permalink**) Nov 25th, 2007, 00:14

Ok It worked Thanks. Your good for a fourteen year old. I wasn't blessed with the opportunity that you have.

Stuart · #40 (**permalink**) Nov 25th, 2007, 00:54

Quote:

Originally Posted by thewebkid

Your good for a fourteen year old. I wasn't blessed with the opportunity that you have.

I'm not the only one. Alex and Marc are fourteen, too.

About opportunities, I missed many before, so when I had the opportunity to become a web designer, I took it. I designed my first site one and a half years ago, the summer after my thirteenth birthday. I had HTML and CSS down in a few weeks, then came JavaScript, which took me a few months since there's a bit more to learn. That was it for that year... The year after that (2007), I began PHP, which I am now quite good at. I recently started on MySQL, and have already mastered the basics...

I learn new things all the time, mostly from experience. I still get stuck sometimes, and come here to look for advice. Every mistake I make, and every question or issue I have gains me more experience, and the more I use the skills I already have, the better I get, and the more fun it becomes. Web design is something I will never give up, since I love it! I can imagine myself fifty years from now, still designing web sites...

So, my point is, is doesn't matter how old you are, web design is for anyone who is creative, artistic, and loves designing...

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Advice please about final project	lisafelst12	Website Planning	10	Nov 11th, 2007 11:42
Final Project	thewebkid	Website Planning	19	Oct 24th, 2007 20:39
Graphic Designer Required on Project by Project Basis	crucialx	Job Opportunities	0	Dec 22nd, 2005 09:52
Ideas for final year multimedia project	kooben	Classic ASP	7	Apr 30th, 2005 19:14

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Javascript for Final Project