Rob
1.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<button onclick="alert('Hi Rob!')">Click Me!</button>
</body>
</html>
2.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<button onclick="alert('Hi Rob!')">Click Me!</button>
<script type="text/javascript">
alert("Page Is Loaded!");
</script>
</body>
</html>
3.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p id="text">Hello World!</p>
<script type="text/javascript">
// This is a one line comment
/*
This is a multi-
line comment!
*/
document.getElementById("text").innerHTML = "Hello Rob!";
</script>
</body>
</html>
4.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p id="text">Hello World!</p>
<button id="myButton">Change text</button>
<script type="text/javascript">
document.getElementById("myButton").onclick = function() {
document.getElementById("text").innerHTML = "Hello Rob!";
}
</script>
</body>
</html>
5.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p id="text">Hello World!</p>
<button id="myButton">Change text</button>
<p id="secondParagraph">Javascript is ... </p>
<button id="secondButton">Append text</button>
<p id="emptyParagraph"></p>
<button id="createParagraph">Create text</button>
<script type="text/javascript">
document.getElementById("myButton").onclick = function() {
document.getElementById("text").innerHTML = "Hello Rob!";
}
document.getElementById("secondButton").onclick = function() {
document.getElementById("secondParagraph").innerHTML = "I think " + document.getElementById("secondParagraph").innerHTML + "awesome!";
}
document.getElementById("createParagraph").onclick = function() {
document.getElementById("emptyParagraph").innerHTML = "<h1>Hi there!</h1>";
}
</script>
</body>
</html>
6.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p id="text">Hello World!</p>
<button id="myButton">Change text</button>
<p id="secondParagraph">Javascript is ... </p>
<button id="secondButton">Append text</button>
<p id="emptyParagraph"></p>
<button id="createParagraph">Create text</button>
<p id="moreText">This is some text</p>
<button id="styleText">Style Text</button>
<script type="text/javascript">
document.getElementById("myButton").onclick = function() {
document.getElementById("text").innerHTML = "Hello Rob!";
}
document.getElementById("secondButton").onclick = function() {
document.getElementById("secondParagraph").innerHTML = "I think " + document.getElementById("secondParagraph").innerHTML + "awesome!";
}
document.getElementById("createParagraph").onclick = function() {
document.getElementById("emptyParagraph").innerHTML = "<h1>Hi there!</h1>";
}
document.getElementById("styleText").onclick = function() {
document.getElementById("moreText").style.display = "none";
}
</script>
</body>
</html>
7.
<html>
<head>
<title>Javascript</title>
<style type="text/css">
.circle {
width:130px;
height:130px;
border-radius: 50%;
float:left;
margin-right:50px;
}
#red-circle {
background-color: red;
}
#blue-circle {
background-color: blue;
}
#yellow-circle {
background-color: yellow;
}
</style>
</head>
<body>
<div class="circle" id="red-circle"></div>
<div class="circle" id="blue-circle"></div>
<div class="circle" id="yellow-circle"></div>
<script type="text/javascript">
document.getElementById("red-circle").onclick = function() {
document.getElementById("red-circle").style.display = "none";
}
document.getElementById("yellow-circle").onclick = function() {
document.getElementById("yellow-circle").style.display = "none";
}
document.getElementById("blue-circle").onclick = function() {
document.getElementById("blue-circle").style.display = "none";
}
</script>
</body>
</html>
8.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<input type="text" id="textInput">
<button id="textChanger">Change the text!</button>
<p id="text">This is some text</p>
<script type="text/javascript">
document.getElementById("textChanger").onclick = function() {
var textEntered = "";
textEntered = document.getElementById("textInput").value;
document.getElementById("text").innerHTML = textEntered;
}
</script>
</body>
</html>
9.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<script type="text/javascript">
var myArray = new Array();
myArray[0] = "pizza";
myArray[1] = "chocolate";
var tweets = ["Morning everybody!", "I love coffee!"];
tweets.push("Back to work!");
tweets.splice(1, 1, "Cornflakes for breakfast!", "Num num");
console.log(tweets);
</script>
</body>
</html>
10.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p>What is the magic word?</p>
<p><input type="text" id="magicWord"></p>
<p><button id="checkMagicWord">Enter</button></p>
<script type="text/javascript">
document.getElementById("checkMagicWord").onclick = function() {
var magicWordEntered = document.getElementById("magicWord").value;
var magicWord = "abracadabra";
if (magicWordEntered == magicWord) {
alert("You got it!");
} else {
alert("Nope, try again!");
}
}
</script>
</body>
</html>
11.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p>How many fingers am I holding up?</p>
<p><input type="text" id="guess"> <button id="checkGuess">Guess!</button></p>
<script type="text/javascript">
document.getElementById("checkGuess").onclick = function() {
var randomNumber = Math.random();
randomNumber = randomNumber * 6;
randomNumber = Math.floor(randomNumber);
if (document.getElementById("guess").value == randomNumber) {
alert("Well done! You got it!");
} else {
alert("Nope! The number was " + randomNumber);
}
}
</script>
</body>
</html>
12.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<div id="tweetDiv"></div>
<script type="text/javascript">
var tweetString = "";
var tweets = ["Hi everyone!", "I love cornflakes!", "Night night :)", "Sweet dreams!"];
for (var i = 0; i < tweets.length; i++) {
tweetString = tweetString + "<p>" + tweets[i] + "</p>";
}
document.getElementById("tweetDiv").innerHTML = tweetString;
</script>
</body>
</html>
13.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p>How many fingers are you holding up?</p>
<p>
<select id="myNumber">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button id="guess">Guess!</button>
</p>
<script type="text/javascript">
document.getElementById("guess").onclick = function() {
var myNumber = document.getElementById("myNumber").value;
var gotIt = false;
var numberOfGuesses = 1;
while (gotIt == false) {
var guess = Math.random();
guess = guess * 6;
guess = Math.floor(guess);
if (guess == myNumber) {
gotIt = true;
alert ("Got it! It was a " + guess + ". It took me " + numberOfGuesses + " guesses.");
} else {
numberOfGuesses++;
}
}
}
</script>
</body>
</html>
14.
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p>How many fingers are you holding up?</p>
<p>
<select id="myNumber">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button id="guess">Guess!</button>
</p>
<script type="text/javascript">
function doAGuess(correctAnswer) {
var guess = Math.random();
guess = guess * 6;
guess = Math.floor(guess);
if (guess == correctAnswer) {
return (true);
} else {
return(false);
}
}
document.getElementById("guess").onclick = function() {
var myNumber = document.getElementById("myNumber").value;
var gotIt = false;
var numberOfGuesses = 1;
while (gotIt == false) {
if (doAGuess(myNumber) == true) {
gotIt = true;
alert ("Got it! It was a " + myNumber + ". It took me " + numberOfGuesses + " guesses.");
} else {
numberOfGuesses++;
}
}
}
</script>
</body>
</html>
15.
<html>
<head>
<title>Reaction Timer</title>
<style type="text/css">
body {
font-family: sans-serif;
}
#shape {
width: 200px;
height: 200px;
background-color: red;
display: none;
position: relative;
}
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the boxes and circles as quickly as you can!</p>
<p class="bold">Your time: <span id="timeTaken"></span></p>
<div id="shape"></div>
<script type="text/javascript">
var start = new Date().getTime();
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function makeShapeAppear() {
var top = Math.random() * 400;
var left = Math.random() * 400;
var width = (Math.random() * 200) + 100;
if (Math.random() > 0.5) {
document.getElementById("shape").style.borderRadius = "50%";
} else {
document.getElementById("shape").style.borderRadius = "0";
}
document.getElementById("shape").style.backgroundColor = getRandomColor();
document.getElementById("shape").style.width = width + "px";
document.getElementById("shape").style.height = width + "px";
document.getElementById("shape").style.top = top + "px";
document.getElementById("shape").style.left = left + "px";
document.getElementById("shape").style.display = "block";
start = new Date().getTime();
}
function appearAfterDelay() {
setTimeout(makeShapeAppear, Math.random() * 2000);
}
appearAfterDelay();
document.getElementById("shape").onclick = function() {
document.getElementById("shape").style.display = "none";
var end = new Date().getTime();
var timeTaken = (end - start) / 1000;
document.getElementById("timeTaken").innerHTML = timeTaken + "s";
appearAfterDelay();
}
</script>
</body>
</html>
16.
<html>
<head>
<title>Reaction Timer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the boxes and circles as quickly as you can!</p>
<p class="bold">Your time: <span id="timeTaken"></span></p>
<div id="shape"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
17.
<html>
<head>
<title>Reaction Timer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the boxes and circles as quickly as you can!</p>
<p class="bold">Your time: <span id="timeTaken"></span></p>
<div id="shape"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
18.
script.js
var start = new Date().getTime();
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function makeShapeAppear() {
var top = Math.random() * 400;
var left = Math.random() * 400;
var width = (Math.random() * 200) + 100;
if (Math.random() > 0.5) {
document.getElementById("shape").style.borderRadius = "50%";
} else {
document.getElementById("shape").style.borderRadius = "0";
}
document.getElementById("shape").style.backgroundColor = getRandomColor();
document.getElementById("shape").style.width = width + "px";
document.getElementById("shape").style.height = width + "px";
document.getElementById("shape").style.top = top + "px";
document.getElementById("shape").style.left = left + "px";
document.getElementById("shape").style.display = "block";
start = new Date().getTime();
}
function appearAfterDelay() {
setTimeout(makeShapeAppear, Math.random() * 2000);
}
appearAfterDelay();
document.getElementById("shape").onclick = function() {
document.getElementById("shape").style.display = "none";
var end = new Date().getTime();
var timeTaken = (end - start) / 1000;
document.getElementById("timeTaken").innerHTML = timeTaken + "s";
appearAfterDelay();
}
19. style.css
body {
font-family: sans-serif;
}
#shape {
width: 200px;
height: 200px;
background-color: red;
display: none;
position: relative;
}
.bold {
font-weight: bold;
}
Subscribe to:
Posts (Atom)
No comments:
Post a Comment