Show sourcecode
The following files exists in this folder. Click to view.
public_html/gamla-kurser/webbutv1/ovningar/
baskod.html
bentogrid.html
bilder/
css/
gimp_logga.html
index.html
js/
meny1/
meny2/
ovning-flexbox.html
ovning0.html
ovning00.html
ovning1.html
ovning10.html
ovning11.html
ovning12.html
ovning2.html
ovning3.html
ovning4.html
ovning5.html
ovning6.html
ovning6b.html
ovning7.html
ovning8a.html
ovning8b.html
ovning9a.html
ovning9b.html
ovning9c.html
ovning9d.html
sida2.html
ovning11.html
114 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Övning 11 - Javascript</title>
<link rel="stylesheet" href="./css/css_ovning11.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<script src="./js/js_ovning11.js"></script>
<script>
$(document).ready(function () {
$("#show2").click(function () {
$("#text2").show();
});
$("#hide2").click(function () {
$("#text2").hide();
});
$("#title").hide();
$("#magi").click(function () {
if ($("#title").is(":hidden")) {
$("#title").fadeIn();
} else {
$("#title").fadeOut();
}
});
$("#redbutton").click(function () {
if ($(".red").is(":hidden")) {
$(".red").fadeIn();
$("#redbutton").text("Göm");
} else {
$(".red").fadeOut();
$("#redbutton").text("Visa");
}
});
$("#bluebutton").click(function () {
if ($(".blue").is(":hidden")) {
$(".blue").fadeIn();
$("#bluebutton").text("Göm");
} else {
$(".blue").fadeOut();
$("#bluebutton").text("Visa");
}
});
$("#greenbutton").click(function () {
if ($(".green").is(":hidden")) {
$(".green").fadeIn();
$("#greenbutton").text("Göm");
} else {
$(".green").fadeOut();
$("#greenbutton").text("Visa");
}
});
});
</script>
<h1 id="title">Webbutveckling är knepigt men kul!</h1>
<button id="magi">Click me</button> <br><br>
<div id="textbox">
<h3>Visa/Göm - JS</h3>
<button id="show1" onclick="show()">Visa</button>
<button id="hide1" onclick="hide()">Göm</button>
<p id="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div> <br><br>
<div id="textbox">
<h3>Visa/Göm - JQuery</h3>
<button id="show2">Visa</button>
<button id="hide2">Göm</button>
<p id="text2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div> <br><br>
<div id="copybox">
<input type="text" name="textinput" id="textinput" placeholder="Skriv text här">
<button id="copybutton" onclick="copyText()">Kopiera</button>
<br><br>
<div id="copied"></div>
</div>
<h1 id="name">Love Blomberg</h1>
<div class="container">
<div class="blue"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
</div>
<br><br>
<button id="redbutton">Göm</button>
<button id="bluebutton">Göm</button>
<button id="greenbutton">Göm</button>
</body>
</html>