Skip to content

Commit 858e7b8

Browse files
ButenkoTButenkoT
committed
level3
1 parent c382ece commit 858e7b8

File tree

5 files changed

+198
-24
lines changed

5 files changed

+198
-24
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ An introductory JavaScript workshop for beginners.
1212
It contains 2 files:
1313
- _level1.js_ - basics with explanations(comments, variables, functions, if/else statements).
1414
- _level2.js_ - more complex javaScript with explanations(arrays, loops).
15-
- _level3.js_ - html, css and how manipulate them with javaScript (events, selectors)
15+
- _level3.js_ - html, css and how manipulate them with javaScript (selectors)
1616

1717
- _index.html_ - a file that responsible for structure of our project.
1818

‎css/main.css

+5
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,8 @@ h1{
4848
footer > ul {
4949
list-style: none;
5050
}
51+
52+
#surprise {
53+
color: red;
54+
font-size: 35px;
55+
}

‎img/kittens.jpeg

83.9 KB
Loading

‎index.html

+24-19
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,32 @@
66
<link rel="stylesheet" href="css/main.css">
77
</head>
88
<body>
9-
<header>
10-
<div id="logo">
11-
<img src="img/logo.png" alt="node-girls-logo">
12-
</div>
13-
</header>
149

15-
<section>
16-
<h1 >Hello everyone. Let's do some interactive coding today! </h1>
17-
<div class="settings">
18-
<p>To open browser console do double click on the screen and console will appear on the bottom or on the right side of the screen. It will work for Chrome and Firefox. For Safari, go to 'Safari > Preferences > Advanced > and tick the box Show Develop menu in menu bar', restart Safari, now you can do double click on the page and see console.</p>
19-
</div>
20-
</section>
10+
<header>
11+
<div id="logo">
12+
<img src="img/logo.png" alt="node-girls-logo">
13+
</div>
14+
</header>
2115

22-
<footer>
23-
<ul>
24-
<li>Twitter: @NodeGirlsSydney</li>
25-
<li>Facebook: NodeGirlsSydney</li>
26-
<li>e-mail: [email protected]</li>
27-
</ul>
28-
</footer>
16+
<section>
17+
<h1>Hello everyone. Let's do some interactive coding today! </h1>
18+
<div class="settings">
19+
<p>To open browser console do double click on the screen and console will appear on the bottom or on the right side
20+
of the screen. It will work for Chrome and Firefox. For Safari, go to 'Safari > Preferences > Advanced > and tick
21+
the box Show Develop menu in menu bar', restart Safari, now you can do double click on the page and see
22+
console.</p>
23+
</div>
24+
</section>
25+
26+
<footer>
27+
<ul>
28+
<li class="twitter">Twitter: @NodeGirlsSydney</li>
29+
<li class="facebook">Facebook: NodeGirlsSydney</li>
30+
<li class="email">e-mail: [email protected]</li>
31+
</ul>
32+
</footer>
33+
34+
<script src="js/level1.js"></script>
2935

30-
<script src="js/level1.js"></script>
3136
</body>
3237
</html>

‎js/level3.js

+168-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
/*
44
WooHoo, you got so far on your first day! Great! But we still have more things for you.
55
First of all, go to index.html file and replace our script from level2.js to current
6-
file - level3.js
6+
file - level3.js.
7+
PS: if you want few js files to be used simply add more scripts with those files.
78
*/
89

910
/*
@@ -19,13 +20,13 @@
1920
meta information, title and link to css files. <Body> contains our actual content.
2021
Tags has a set of names which you can find here http://htmldog.com/references/html/tags/
2122
22-
Any tag also can have different properties (<div class="settings"></div> - tag div
23-
has a property class, that has name = 'settings').
23+
Any tag also can have different attributes (<div class="settings"></div> - tag div
24+
has a attribute class, that has name = 'settings').
2425
2526
CSS:
2627
Stands for Cascading Style Sheets. CSS describes how HTML elements are to be
2728
displayed on screen. As you can see in css file when we need to target any element
28-
we can simply refer to the tag itself (footer{color: white;}), or to any property (class
29+
we can simply refer to the tag itself (footer{color: white;}), or to any attribute (class
2930
via '.settings', id via '#logo' etc). The list of css properties is huge, you can check
3031
on it here https://www.w3.org/TR/CSS21/propidx.html but don't worry, you don't need to
3132
remember it all.
@@ -41,9 +42,172 @@
4142

4243

4344
/*
45+
Accessing page objects.
46+
DOM - Stands for Document Object Model. It defines the logical structure of documents
47+
and the way a document is accessed and manipulated. So let's get things from the page
48+
and play around.
49+
To find and get nods(page elements) we can use querySelector one of the functions of
50+
JavaScript (in old browsers it might not work, in this case getElementById,
51+
getElementsByTagsName etc should be used).
52+
Let's get our twitter from the page.
53+
Example:
54+
var ourTwitter = document.querySelector('.twitter');
55+
//we can store it in variable so we can use it after
56+
*/
57+
58+
//TODO: Now it's your turn - get the h1 tag from the page and store it into variable named
59+
//ourTitle. console.log it and see what you will get.
60+
61+
62+
63+
64+
65+
66+
67+
68+
69+
70+
/*
71+
Getting a set of elements
72+
We also can get all elements with the same tag. So in the footer we have <ul>(unordered list)
73+
with 3 <li>(lists) inside. Let's get all of them
74+
Example:
75+
var mediaLinks = document.querySelectorAll('li'); //will get all <li> from the page
76+
*/
77+
78+
79+
//TODO: get all <li> elements from the page in variable named mediaLinks
80+
81+
82+
83+
84+
//TODO: now console.log mediaLinks.length
85+
86+
87+
88+
89+
//TODO: do you still remember arrays that we had in previous sections? Using this knowladge
90+
//itirate through whole meadiaLinks items and print them out.
91+
92+
93+
94+
95+
96+
97+
98+
99+
100+
/*
101+
Ok, so far so good. But what if we need only content of our 'h1' tag? We have
102+
another property for it - .innerHTML
103+
Example:
104+
ourTwitter.innerHTML;
105+
//we will get text '@NodeGirlsSydney'
106+
*/
107+
108+
109+
//TODO: get the content of 'h1' element and console.log it
110+
111+
112+
113+
114+
115+
116+
117+
118+
119+
120+
/*
121+
Change content
122+
Using same property .innerHTML we can change content of the tags.
123+
Example:
124+
ourTwitter.innerHTML = '@ButenkoMe';
125+
console.log(ourTwitter.innerHTML);
126+
//guess what we will see on the page and in console?
127+
*/
128+
129+
130+
//TODO: change content of the 'h1' on anything you like
131+
132+
133+
134+
135+
136+
/*
137+
Changing properties.
138+
We also can change and set attributes to our elements.
139+
Example:
140+
var ourTwitter = document.querySelector('.twitter');
141+
ourTwitter.id = "surprise";
142+
*/
143+
44144

145+
//TODO: replace 'src' attribute for our img tag on "img/kittens.jpeg"
146+
147+
148+
149+
150+
151+
/*
152+
Accessing and changing styles
153+
So, let's do some css changes. We can do it with help of '.style' property and then
154+
giving the css property as we use them in css file, the only change is - if is css
155+
property name has '-' in the name (like font-size etc) then dash will be deleted and
156+
next word starts with capital (fontSize) - this way of naming calls CamelCase :)
157+
Example:
158+
var ourTwitter = document.querySelector('.twitter');
159+
ourTwitter.style.backgroundColor = 'white';
45160
*/
46161

47162

163+
//TODO: get any element on the page and change some styles for it
164+
165+
166+
167+
168+
169+
170+
171+
/*
172+
Creating new nodes (elements)
173+
The document object also provides ways to create nodes from scratch:
174+
document.createElement(tagName);
175+
document.createTextNode(text);
176+
document.appendChild();
177+
Example:
178+
var pageNode = document.querySelector('body')[0];
179+
var newParagraph = document.createElement('p');
180+
var paragraphText = document.createTextNode('Squee!');
181+
newParagraph.appendChild(paragraphText);
182+
pageNode.appendChild(newParagraph);
183+
*/
184+
185+
186+
//TODO: Well, do you still have kittens on your screen? I like both logo and kittens.
187+
//Let's create a new image with source logo and put it into header.
188+
//PS: you also can give styles to the new node that you create.
189+
190+
191+
192+
193+
194+
195+
196+
197+
198+
199+
200+
201+
202+
203+
204+
205+
206+
207+
////////////////////////////////////////////////////////////////////////
208+
//Congratulations! You have finished Part 1 of JavaScript Basics! //
209+
// Stand up, stretch your legs, celebrate your achievement. //
210+
// I believe you deserve on some sweets today! //
211+
////////////////////////////////////////////////////////////////////////
48212

49213

0 commit comments

Comments
 (0)