Tartalomjegyzék

< JavaScript

JavaScript Feladatok

Általános feladatok

Feladat 0001

Készítsen weblapot, amelynek tetején minidig a napszaknak megfelelő üdvözlet szerepel.

Például 10:00-ig „Jó reggelt”, Utána 18:00-ig „Jó napot”. Utána „Jó estét”.

Űrlapos feladatok

Feladat 0051

Készítsen egy űrlapot, ahol bekér egy e-mail címet. Az űrlapba beírt e-mail címet ellenőrizze, hogy valóban e-mail cím-e a beírt szöveg.

Feladat 0052

Készítsen webalkalmazást, amely kiszámítja egy háromszög területét az alapból és a magasságból.

Hibára épülő feladatok

Feladat 0101

Az alábbiakban egy duplázó webes alkalmazást láthatunk JavaScript és CSS megoldással. A feladatban azonban nem működik a duplázás. Három hibát is rejt a feladat. Keresse meg a hibákat.

index.html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sablon</title>
	<link rel="stylesheet" href="style.css">
 
</head>
<body>
	<div id="container">
		<h1>Duplázó</h1>
		<p>
		Készítsen weblapot, amely 
		tartalmazza a feladat leírását.
		A weblapon legyen egy beviteli mező,
		amely számokat vár.
		Legyen egy nyomógomb, amelyre kattintva,
		a beviteli mező tartalma megduplázódik.
		A duplázott érték egy div elemben jelenjen meg
		</p>
		<div>
			<label>Szám:</label>
			<input type="text" id="szam1"><br>
			<button if="duplaGomb">Dupla</button>
			<button id="rejtGomb">Rejt</button>
			<div id="eredmeny"></div>
 
		</div>
 
 
	</div>
	<script src="script.js"></script>
</body>
</html>
script.js
var szam1Div = document.getElementById("szam1");
var duplaGomb = document.getElementById("duplaGomb");
var eredmenyDiv = document.getElementById("eredmeny");
var rejtGomb = document.getElementById("rejtGomb");
 
rejtGomb.onclick = function() {
	eredmenyDiv.style.display = "none";
};
 
duplaGomb.onclick = function() {
 
	eredmenyDiv.style.display = "block";
 
	var szam1Str = szam1Div;
	if(szam1Str.match("[^0-9]")) {
		alert("Nem várt karakter!");
	}else {
		var eredmeny = 2 * szam1Div.Value;
		eredmenyDiv.innerHTML = eredmeny;
	}
};
style.css
#eredmeny {
	background-color: navy;
	color: white;
	padding: 48px;
	border-radius: 10px;
	position: fixed;
	top: 50px;
	left: 40%;
	display: none;
	border-width: 2px;
	border-style: solid;
 
}
 
#container {
	background-color: navy;
	color: white;
	padding: 48px;
	border-radius: 10px;
	margin: 2% 10%;	
}
 
#container h1 {
	font-family: sans;
}