-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (101 loc) · 3.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<title>Fullstack Developer for Coursera test</title>
<meta name="author" content="Daniele Irsuti">
<meta name="description" content="The assignment test for Coursera">
<link type="text/css" rel="stylesheet" href="assets/css/bootstrap.min.css">
<script>
function init() {
var bootStrapJs = document.createElement("script");
bootStrapJs.src = "assets/js/bootstrap.min.js";
bootStrapJs.async = "true";
document.getElementsByTagName("head")[0].appendChild(bootStrapJs);
}
var list = [
{
url: "htmlecss/index.html",
title: "HTML and CSS"
},
{
url: "javascript/index.html",
title: "Javascript"
},
{
url: "jsfinaltest/index.html",
title: "Final Test"
},
{
url: "conFusion/index.html",
title: "Ristorante conFusion"
}
];
function renderList() {
var appendList;
for (i=0; i < list.length; i++ ) {
$(".theList").append("<li class=\"preview\"><a rel=\"nofollow\" target=\"_self\" href=\"#\" data-href=\"" + list[i].url + "\">" + list[i].title + "</a></li>");
}
$(".preview a").click(function(){
var href = $(this).attr("data-href");
console.log(href);
$("#preview").html("<iframe onload=\"resizeIframe(this)\" src=\"" + href + "\">");
});
}
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<script src="https://code.jquery.com/jquery-2.2.1.min.js" onload="init()"></script>
<style>
.full {
background: lightblue;
color: aliceblue;
text-align: center;
}
.full h1 {
padding-top: 20px;
padding-bottom: 20px;
font-weight: bolder
}
.full small {
color: aliceblue;
font-weight: thin;
}
.theList {
color: lightgray;
list-style: none;
text-align: center;
margin: 0px;
padding: 0px;
margin-top: 20px;
}
.theList li:before {
content: "#";
display: inline;
margin-right: 5px;
font-size: 2em;
vertical-align: middle;
}
.theList a {
color: lightblue;
font-size: 1.3em;
}
iframe {
border: 0px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<header class="full container-fluid">
<h1>Fullstack developer course <small>Coursera tests</small></h1>
</header>
<div class="container">
<ul class="theList">
</ul>
</div>
<div class="container" id="preview"></div>
<script>renderList()</script>
</body>
</html>