Stand der Dinge am Ende der Sitzung: Vorbereitung des Ratespiels

Das vorbereitete Zahlenratespiel findet sich im folgenden Zip-Archiv: 2015-11-30_awb_ratespiel.

app.js

/* Funktionalität unserer Webanwendung */

// Objekt: document
// Funktion: write
// document.write("Hallo Welt!");
// Funktionen: Funktionsname(Argument/e|Parameter);
// alert("Ich bin ein wunderschönes Popup!");

// Wähle mit der JavaScript-Bibliothek jQuery
// das document-Objekt aus und stelle sicher,
// dass unsere Seite vollständig geladen wurde.
$(document).ready(function() { 

	// Hier notieren wir unsere JavaScript-Anweisungen
	// alert("Es funktioniert!");
	
	// $(), alternativ: jQuery()
	// Was möchten wir ansteuern?
	
	// Verstecke den blauen Block
	// CSS: display: none;
	$("#block3").hide();
});

style.css

/* Unsere Stildefinitionen */

body {
	font-family: Arial;
	font-size: 12px;
}

#block1 {
	position: absolute;
	left: 15px;
	top: 15px;
	width: 250px;
	height: 75px;
	background-color: red;
}

#block2 {
	position: absolute;
	left: 280px;
	top: 15px;
	width: 250px;
	height: 75px;
	background-color: green;
}

#block3 {
	position: absolute;
	left: 545px;
	top: 15px;
	width: 250px;
	height: 75px;
	background-color: blue;
}

#steuern_rot, #steuern_gruen, #steuern_blau {
	position: absolute;
	top: 115px;
	left: 15px;
	padding: 25px;
	width: 75px;
	height: 50px;
	background-color: #ccc;
	cursor: pointer;
}

#steuern_rot:hover {
	background-color: red;
}

#steuern_gruen {
	left: 280px;
}

#steuern_gruen:hover {
	background-color: green;
}

#steuern_blau {
	left: 545px;
}

#steuern_blau:hover {
	background-color: blue;
}

#ratespiel {
	position: absolute;
	top: 300px;
	left: 15px;
	height: 75px;
	width: 610px;
	padding: 25px;
	background-color: #cec;
}

#absenden {
	background-color: #ccc;
	border: 1px solid #333;
	width: 55px;
	padding: 3px;
	display: inline;
	cursor: pointer;
}

index.htm

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Ein Zahlenratespiel mit JavaScript und jQuery</title>
		<link type="text/css" rel="stylesheet" media="screen" href="css/style.css" />
	</head>
	
	<body>
		<div id="block1"></div>
		<div id="block2"></div>
		<div id="block3"></div>
		
		<div id="steuern_rot">Roten Block verstecken</div>
		<div id="steuern_gruen">Grünen Block langsam ausblenden</div>
		<div id="steuern_blau">Blauen Block anzeigen</div>
	
		<div id="ratespiel">
		
			Raten Sie eine Zahl zwischen 1 und 100: <input id="eingegebeneZahl" type="number" name="ratezahl">
			<div id="absenden">Absenden</div>
			
			<div id="ausgabe"></div>
		
		</div>

		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="js/underscore-min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
	</body>
</html>

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.