Skip to content

Commit f3c4b17

Browse files
kostasxkostasx
committed
Adding slides for lectures. Understanding functions and introduction to variebles: let, const, var.
1 parent 82ea637 commit f3c4b17

21 files changed

+270
-0
lines changed

Diff for: ‎slides/images/let_var_const_01.jpg

108 KB
Loading

Diff for: ‎slides/images/let_var_const_02.jpg

66.7 KB
Loading

Diff for: ‎slides/images/let_var_const_03.jpg

68 KB
Loading

Diff for: ‎slides/images/let_var_const_04.jpg

71.9 KB
Loading

Diff for: ‎slides/images/let_var_const_05.jpg

130 KB
Loading

Diff for: ‎slides/images/let_var_const_06.jpg

186 KB
Loading

Diff for: ‎slides/images/let_var_const_07.jpg

170 KB
Loading

Diff for: ‎slides/images/let_var_const_08.jpg

141 KB
Loading

Diff for: ‎slides/images/let_var_const_09.jpg

90.1 KB
Loading

Diff for: ‎slides/images/let_var_const_10.jpg

203 KB
Loading

Diff for: ‎slides/images/let_var_const_11.jpg

132 KB
Loading

Diff for: ‎slides/images/let_var_const_12.jpg

73.9 KB
Loading

Diff for: ‎slides/images/let_var_const_13.jpg

109 KB
Loading

Diff for: ‎slides/images/understanding_functions_01.jpg

133 KB
Loading

Diff for: ‎slides/images/understanding_functions_02.jpg

151 KB
Loading

Diff for: ‎slides/images/understanding_functions_03.jpg

233 KB
Loading

Diff for: ‎slides/images/understanding_functions_04.jpg

172 KB
Loading

Diff for: ‎slides/images/understanding_functions_05.jpg

182 KB
Loading

Diff for: ‎slides/images/understanding_functions_06.jpg

154 KB
Loading

Diff for: ‎slides/let_var_const.html

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JavaScript | Understanding Variables: let, var and const</title>
6+
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
7+
<style>
8+
body {
9+
font-family: 'Lato', sans-serif;
10+
width: 100vw;
11+
height: 100vh;
12+
text-align: center;
13+
background-color: #9dbd4a;
14+
padding: 0;
15+
margin: 0;
16+
overflow-x: hidden;
17+
}
18+
.arrow.hidden,
19+
.arrow.hidden:hover {
20+
opacity: 0;
21+
cursor: auto;
22+
}
23+
.wrapper {
24+
position: relative;
25+
}
26+
span.slide_num {
27+
transition: opacity 400ms ease;
28+
opacity: 1;
29+
position: absolute;
30+
top: 20px;
31+
right: 20px;
32+
padding: 10px;
33+
background: rgba(255,255,255,0.7);
34+
border-radius: 50%;
35+
width: 30px;
36+
height: 30px;
37+
line-height: 28px;
38+
font-size: 24px;
39+
color: #9dbd4a;
40+
}
41+
.slides {
42+
width: auto;
43+
height: 99vh;
44+
}
45+
.arrow {
46+
position: absolute;
47+
top: 50%;
48+
width: 2rem;
49+
height: 2rem;
50+
background: transparent;
51+
border-top: .4rem solid black;
52+
border-right: .4rem solid black;
53+
box-shadow: 0 0 0 lightgray;
54+
-webkit-transition: all 200ms ease;
55+
transition: all 200ms ease;
56+
opacity: 0.3;
57+
}
58+
.arrow.left {
59+
left: 5%;
60+
-webkit-transform: translate3d(0, -50%, 0) rotate(-135deg);
61+
transform: translate3d(0, -50%, 0) rotate(-135deg);
62+
}
63+
.arrow.right {
64+
right: 5%;
65+
-webkit-transform: translate3d(0, -50%, 0) rotate(45deg);
66+
transform: translate3d(0, -50%, 0) rotate(45deg);
67+
}
68+
.arrow:hover {
69+
opacity: 1;
70+
}
71+
</style>
72+
</head>
73+
<body>
74+
75+
<div class="wrapper">
76+
<span class="slide_num">1</span>
77+
<img class="slides" alt="">
78+
<a href="#" class="arrow left hidden"></a>
79+
<a href="#" class="arrow right"></a>
80+
</div>
81+
82+
<script>
83+
(function(){
84+
85+
var currentSlide = 1;
86+
var numSlides = 13;
87+
var imgUrl = function(num){ num = (""+num).length < 2 ? "0" + num : num; return "images/let_var_const_" + num + ".jpg"; }
88+
var direction;
89+
var $slideNum = document.querySelector('.slide_num');
90+
var $img = document.querySelector(".slides");
91+
$img.src = imgUrl(currentSlide);
92+
var $leftArrow = document.querySelector(".arrow.left");
93+
var $rightArrow = document.querySelector(".arrow.right");
94+
95+
// PRELOAD SLIDES
96+
for ( var i = numSlides; i > 0; i-- ) {
97+
var slideImg = document.createElement("img");
98+
slideImg.setAttribute( "src", imgUrl(i) );
99+
slideImg.style.display = "none";
100+
document.body.appendChild(slideImg);
101+
}
102+
103+
// SLIDER ARROW EVENT HANDLERS
104+
$leftArrow.addEventListener("click", function(e){
105+
106+
if ( currentSlide > 1 ) {
107+
currentSlide--;
108+
if ( currentSlide === 1 ) $leftArrow.classList.add('hidden');
109+
$slideNum.textContent = currentSlide;
110+
$img.src = imgUrl(currentSlide);
111+
}
112+
if ( currentSlide < numSlides ) $rightArrow.classList.remove('hidden');
113+
return false;
114+
115+
});
116+
117+
$rightArrow.addEventListener("click", function(e){
118+
119+
if ( currentSlide < numSlides ) {
120+
currentSlide++;
121+
if ( currentSlide === numSlides ) $rightArrow.classList.add('hidden');
122+
$slideNum.textContent = currentSlide;
123+
$img.src = imgUrl(currentSlide);
124+
125+
}
126+
if ( currentSlide > 1 ) $leftArrow.classList.remove('hidden');
127+
return false;
128+
129+
});
130+
131+
}());
132+
133+
</script>
134+
</body>
135+
</html>

Diff for: ‎slides/understanding_functions.html

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JavaScript | Understanding Functions</title>
6+
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
7+
<style>
8+
body {
9+
font-family: 'Lato', sans-serif;
10+
width: 100vw;
11+
height: 100vh;
12+
text-align: center;
13+
background-color: #9dbd4a;
14+
padding: 0;
15+
margin: 0;
16+
overflow-x: hidden;
17+
}
18+
.arrow.hidden,
19+
.arrow.hidden:hover {
20+
opacity: 0;
21+
cursor: auto;
22+
}
23+
.wrapper {
24+
position: relative;
25+
}
26+
span.slide_num {
27+
transition: opacity 400ms ease;
28+
opacity: 1;
29+
position: absolute;
30+
top: 20px;
31+
right: 20px;
32+
padding: 10px;
33+
background: rgba(255,255,255,0.7);
34+
border-radius: 50%;
35+
width: 30px;
36+
height: 30px;
37+
line-height: 28px;
38+
font-size: 24px;
39+
color: #9dbd4a;
40+
}
41+
.slides {
42+
width: auto;
43+
height: 99vh;
44+
}
45+
.arrow {
46+
position: absolute;
47+
top: 50%;
48+
width: 2rem;
49+
height: 2rem;
50+
background: transparent;
51+
border-top: .4rem solid black;
52+
border-right: .4rem solid black;
53+
box-shadow: 0 0 0 lightgray;
54+
-webkit-transition: all 200ms ease;
55+
transition: all 200ms ease;
56+
opacity: 0.3;
57+
}
58+
.arrow.left {
59+
left: 5%;
60+
-webkit-transform: translate3d(0, -50%, 0) rotate(-135deg);
61+
transform: translate3d(0, -50%, 0) rotate(-135deg);
62+
}
63+
.arrow.right {
64+
right: 5%;
65+
-webkit-transform: translate3d(0, -50%, 0) rotate(45deg);
66+
transform: translate3d(0, -50%, 0) rotate(45deg);
67+
}
68+
.arrow:hover {
69+
opacity: 1;
70+
}
71+
</style>
72+
</head>
73+
<body>
74+
75+
<div class="wrapper">
76+
<span class="slide_num">1</span>
77+
<img class="slides" alt="">
78+
<a href="#" class="arrow left hidden"></a>
79+
<a href="#" class="arrow right"></a>
80+
</div>
81+
82+
<script>
83+
(function(){
84+
85+
var currentSlide = 1;
86+
var numSlides = 6;
87+
var imgUrl = function(num){ num = (""+num).length < 2 ? "0" + num : num; return "images/let_var_const_" + num + ".jpg"; }
88+
var direction;
89+
var $slideNum = document.querySelector('.slide_num');
90+
var $img = document.querySelector(".slides");
91+
$img.src = imgUrl(currentSlide);
92+
var $leftArrow = document.querySelector(".arrow.left");
93+
var $rightArrow = document.querySelector(".arrow.right");
94+
95+
// PRELOAD SLIDES
96+
for ( var i = numSlides; i > 0; i-- ) {
97+
var slideImg = document.createElement("img");
98+
slideImg.setAttribute( "src", imgUrl(i) );
99+
slideImg.style.display = "none";
100+
document.body.appendChild(slideImg);
101+
}
102+
103+
// SLIDER ARROW EVENT HANDLERS
104+
$leftArrow.addEventListener("click", function(e){
105+
106+
if ( currentSlide > 1 ) {
107+
currentSlide--;
108+
if ( currentSlide === 1 ) $leftArrow.classList.add('hidden');
109+
$slideNum.textContent = currentSlide;
110+
$img.src = imgUrl(currentSlide);
111+
}
112+
if ( currentSlide < numSlides ) $rightArrow.classList.remove('hidden');
113+
return false;
114+
115+
});
116+
117+
$rightArrow.addEventListener("click", function(e){
118+
119+
if ( currentSlide < numSlides ) {
120+
currentSlide++;
121+
if ( currentSlide === numSlides ) $rightArrow.classList.add('hidden');
122+
$slideNum.textContent = currentSlide;
123+
$img.src = imgUrl(currentSlide);
124+
125+
}
126+
if ( currentSlide > 1 ) $leftArrow.classList.remove('hidden');
127+
return false;
128+
129+
});
130+
131+
}());
132+
133+
</script>
134+
</body>
135+
</html>

0 commit comments

Comments
 (0)