Skip to content

level3 and readme changes #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ButenkoT merged 1 commit into from
Sep 24, 2016
Merged

level3 and readme changes #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ _______________



If you familiar with git you can clone repositore to your machine and simply start working
through files starting from README.md file, after jump to js/level1.js file.
If you familiar with git you can clone this repository to your machine and simply start working
through files starting from README.md file, after that jump to js/level1.js file.


If you don't know what is git, relax, you can download the folder on your machine - go to
If you don't know what is git, relax, you can download the folder on your machine - go to
'releases' tab over the yellow line on the page and download folder 'Source code (zip)'.
Unzip it and start from README.md file, after jump to js/level1.js file.

Expand All @@ -43,7 +43,7 @@ ____________________
- _level2.js_ - more complex javaScript with explanations(arrays, loops).
- _level3.js_ - html, css and how manipulate them with javaScript (selectors)

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

- _Readme.md_ - a file with explanations and any information about the project, how to run it, what it is for etc.

Expand Down
24 changes: 12 additions & 12 deletions js/level3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<header></header>, <p></p> etc - it is tags, each element on the page has opening
and closing tag (NOTE: some tags are self-closing like <img>). Whole html file is wrapped
in tag <html>, which contains of <head> and <body> tags. In <head> we keep different
meta information, title and link to css files. <Body> contains our actual content.
meta information, title and link to css files. <body> contains our actual content.
Tags has a set of names which you can find here http://htmldog.com/references/html/tags/

Any tag also can have different attributes (<div class="settings"></div> - tag div
Expand Down Expand Up @@ -86,8 +86,8 @@



//TODO: do you still remember arrays that we had in previous sections? Using this knowladge
//itirate through whole meadiaLinks items and print them out.
//TODO: do you still remember arrays that we had in previous sections? Using this knowledge
//iterate through whole meadiaLinks items and print them out.



Expand Down Expand Up @@ -119,15 +119,15 @@

/*
Change content
Using same property .innerHTML we can change content of the tags.
we can change the content of the tags using the same .innerHTML property
Example:
ourTwitter.innerHTML = '@ButenkoMe';
console.log(ourTwitter.innerHTML);
//guess what we will see on the page and in console?
*/


//TODO: change content of the 'h1' on anything you like
//TODO: change content of the 'h1' with anything you like



Expand All @@ -142,18 +142,18 @@
*/


//TODO: replace 'src' attribute for our img tag on "img/kittens.jpeg"
//TODO: replace the value of 'src' attribute for our img tag with "img/kittens.jpeg"





/*
Accessing and changing styles
So, let's do some css changes. We can do it with help of '.style' property and then
giving the css property as we use them in css file, the only change is - if is css
So, let's do some css changes. We can do it with help of '.style' property and
giving the css property just like we do in css file, the only change here is is - if is css
property name has '-' in the name (like font-size etc) then dash will be deleted and
next word starts with capital (fontSize) - this way of naming calls CamelCase :)
next word starts with capital (fontSize) - this way of naming is called the CamelCase :)
Example:
var ourTwitter = document.querySelector('.twitter');
ourTwitter.style.backgroundColor = 'white';
Expand All @@ -171,9 +171,9 @@
/*
Creating new nodes (elements)
The document object also provides ways to create nodes from scratch:
document.createElement(tagName);
document.createTextNode(text);
document.appendChild();
document.createElement(tagName); --> create the element
document.createTextNode(text); --> what text it should contain
document.appendChild(); --> append it to the document
Example:
var pageNode = document.querySelector('body')[0];
var newParagraph = document.createElement('p');
Expand Down