Skip to content

Commit f7bbc1c

Browse files
andresgancandresganc
committed
Structure & Files
1 parent d7cb084 commit f7bbc1c

File tree

115 files changed

+6984
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

115 files changed

+6984
-0
lines changed

‎bom-browser-object-model/bom.md

Whitespace-only changes.

‎bom-browser-object-model/frames/bom-frame.md

Whitespace-only changes.

‎bom-browser-object-model/history/bom-history.md

Whitespace-only changes.

‎bom-browser-object-model/location/bom-location.md

Whitespace-only changes.

‎bom-browser-object-model/navigator/bom-navigator.md

Whitespace-only changes.

‎bom-browser-object-model/screen/bom-screen.md

Whitespace-only changes.

‎bom-browser-object-model/times/bom-times.md

Whitespace-only changes.

‎bom-browser-object-model/window/bom-window.md

Whitespace-only changes.

‎bom-browser-object-model/window/window.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
// View of browser
3+
console.log ( 'Size view browser - Width: ', window.innerWidth )
4+
console.log ( 'Size view browser - Width: ', window.innerHeight )
5+
6+
// Size browser full
7+
console.log ( 'Size browser full - Width: ', window.outerWidth )
8+
console.log ( 'Size browser full - Width: ', window.outerHeight )

‎cssom-css-object-model/cssom.md

Whitespace-only changes.

‎dom-document-object-model/course-nc/01-node-tree/node-tree.md

Whitespace-only changes.

‎dom-document-object-model/course-nc/02-node-types/node-types.md

Whitespace-only changes.

‎dom-document-object-model/course-nc/create-element/css/main.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
.main {
3+
display: grid;
4+
justify-content: center;
5+
align-items: center;
6+
width: 100%;
7+
height: 500px;
8+
background-color: #80DEEA;
9+
}

‎dom-document-object-model/course-nc/create-element/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="es">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title> Create Element </title>
9+
10+
<!-- Styles -->
11+
<link rel="stylesheet" href="./css/main.css">
12+
</head>
13+
<body>
14+
<main class='main'>
15+
16+
</main>
17+
<script type="text/javascript" src="./js/create-element.js" />
18+
</body>
19+
</html>

‎dom-document-object-model/course-nc/create-element/js/create-element.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
// Quering element container and saved in the constant
3+
const containerMain = document.querySelector('.main')
4+
5+
// Creating element H2
6+
const H2Title = document.createElement('h2')
7+
// Adding text to element
8+
H2Title.innerText = ' This is a text added by code javascript, Managed with the DOM '
9+
10+
// Adding ot Deleting styles by code
11+
//H2Title.classList.add('main')
12+
//H2Title.classList.remove('main')
13+
14+
// Adding element H2 to container main
15+
containerMain.appendChild(H2Title)
16+

‎dom-document-object-model/course-nc/create-text-node/index.html

Whitespace-only changes.

‎dom-document-object-model/course-nc/event-listener/add-event-listener/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="es">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title> Event Listener </title>
9+
10+
<!-- Styles -->
11+
<style>
12+
.mainStyles {
13+
display: grid;
14+
justify-content: center;
15+
align-items: center;
16+
width: 100%;
17+
height: 500px;
18+
background-color: #80DEEA;
19+
}
20+
21+
.titleStyles {
22+
color: #80DE;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<main class="main" >
28+
<h2 class='h2-title' > EVENT LISTENER </h2>
29+
<button class='btn-cambiar' > Cambiar </button>
30+
</main>
31+
<script type="text/javascript" src="./js/event-listener.js" />
32+
</body>
33+
</html>

‎dom-document-object-model/course-nc/event-listener/add-event-listener/js/event-listener.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
const ContainerMain = document.querySelector('.main')
3+
const H2Title = document.querySelector('.h2-title')
4+
const btnCambiar = document.querySelector('.btn-cambiar')
5+
6+
btnCambiar.addEventListener('click', () => {
7+
H2Title.classList.toggle('titleStyles')
8+
ContainerMain.classList.toggle('mainStyles')
9+
})

‎dom-document-object-model/course-nc/event-listener/form-onsubmit-add-event-listener-arrow-fuction/css/styles.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
2+
html, body {
3+
font-family: Roboto, arial, helvetica, sans-serif;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
.main {
9+
display: grid;
10+
justify-content: center;
11+
width: 450px;
12+
background-color: #F5F5F5;
13+
border-radius: 10px;
14+
margin: 20px;
15+
padding: 10px;
16+
box-shadow: 4px 4px 5px #BDBDBD;
17+
}
18+
19+
.main__div {
20+
text-align: center;
21+
}
22+
23+
.main__title {
24+
color: #29B6F6;
25+
}
26+
27+
.form {
28+
text-align: center;
29+
}
30+
31+
.form__div {
32+
margin: 20px 10px;
33+
}
34+
35+
.form__label {
36+
color: #424242;
37+
}
38+
39+
.form__input {
40+
border-radius: 4px;
41+
border: none;
42+
padding: 8px;
43+
margin-left: 5px;
44+
color: #29B6F6;
45+
outline: none;
46+
}
47+
48+
.form__button {
49+
border: none;
50+
background-color: #4FC3F7;
51+
padding: 8px 10px;
52+
border-radius: 4px;
53+
color: #fff;
54+
cursor: pointer;
55+
transition: .4s;
56+
}
57+
58+
.form__button:hover {
59+
60+
background-color: #29B6F6;
61+
box-shadow: 2px 2px 5px #BDBDBD;
62+
}

‎dom-document-object-model/course-nc/event-listener/form-onsubmit-add-event-listener-arrow-fuction/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Form OnSubmit Add Event Listener Arrow Fuction</title>
9+
10+
<link rel="stylesheet" href="./css/styles.css">
11+
</head>
12+
13+
<body>
14+
<main class="main">
15+
<div class="main__div">
16+
<h4 class="main__title">FORM ONSUBMIT ADD EVENT LISTENER ARROW FUCTION</h4>
17+
<form id="myForm" action="" class="form" >
18+
<div class="form__div">
19+
<label for="inputName" class="form__label">Name : </label>
20+
<input id="inputName" name="inputName" type="text" class="form__input" placeholder="Name" />
21+
</div>
22+
<div class="form__div">
23+
<label for="inputLastName" class="form__label">Last Name : </label>
24+
<input id="inputLastName" name="inputLastName" type="text" class="form__input" placeholder="Last Name" />
25+
</div>
26+
<div class="form__div">
27+
<label for="inputEmail" class="form__label">Email :</label>
28+
<input id="inputEmail" name="inputEmail" type="email" class="form__input" placeholder="Email" />
29+
</div>
30+
<div class="form__div">
31+
<input type="submit" class="form__button" />
32+
</div>
33+
</form>
34+
</div>
35+
</main>
36+
37+
<script type="text/javascript" src="./js/index.js"></script>
38+
</body>
39+
40+
</html>

‎dom-document-object-model/course-nc/event-listener/form-onsubmit-add-event-listener-arrow-fuction/js/index.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
3+
4+
const myForm = document.getElementById('myForm');
5+
console.log(myForm);
6+
7+
myForm.addEventListener("submit", (e) => {
8+
9+
e.preventDefault();
10+
console.log('Event : ', e)
11+
12+
const inputName = document.getElementById('inputName').value;
13+
const inputLastName = document.getElementById('inputLastName').value;
14+
const inputEmail = document.getElementById('inputEmail').value;
15+
16+
console.log('Form OnSubmit Add Event Listener Name: ', inputName, ' Last Name: ', inputLastName, ' Email: ', inputEmail );
17+
window.alert('Form OnSubmit Add Event Listener Name: ' + inputName + ' Last Name : ' + inputLastName + ' Email :' + inputEmail);
18+
19+
});

‎dom-document-object-model/course-nc/event-listener/form-onsubmit-add-event-listener/css/styles.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
2+
html, body {
3+
font-family: Roboto, arial, helvetica, sans-serif;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
.main {
9+
display: grid;
10+
justify-content: center;
11+
width: 450px;
12+
background-color: #F5F5F5;
13+
border-radius: 10px;
14+
margin: 20px;
15+
padding: 10px;
16+
box-shadow: 4px 4px 5px #BDBDBD;
17+
}
18+
19+
.main__div {
20+
text-align: center;
21+
}
22+
23+
.main__title {
24+
color: #29B6F6;
25+
}
26+
27+
.form {
28+
text-align: center;
29+
}
30+
31+
.form__div {
32+
margin: 20px 10px;
33+
}
34+
35+
.form__label {
36+
color: #424242;
37+
}
38+
39+
.form__input {
40+
border-radius: 4px;
41+
border: none;
42+
padding: 8px;
43+
margin-left: 5px;
44+
color: #29B6F6;
45+
outline: none;
46+
}
47+
48+
.form__button {
49+
border: none;
50+
background-color: #4FC3F7;
51+
padding: 8px 10px;
52+
border-radius: 4px;
53+
color: #fff;
54+
cursor: pointer;
55+
transition: .4s;
56+
}
57+
58+
.form__button:hover {
59+
60+
background-color: #29B6F6;
61+
box-shadow: 2px 2px 5px #BDBDBD;
62+
}

‎dom-document-object-model/course-nc/event-listener/form-onsubmit-add-event-listener/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Form OnSubmit Add Event Listener</title>
9+
10+
<link rel="stylesheet" href="./css/styles.css">
11+
</head>
12+
13+
<body>
14+
<main class="main">
15+
<div class="main__div">
16+
<h4 class="main__title">FORM ONSUBMIT ADD EVENT LISTENER</h4>
17+
<form id="myForm" action="" class="form" >
18+
<div class="form__div">
19+
<label for="inputName" class="form__label">Name : </label>
20+
<input id="inputName" name="inputName" type="text" class="form__input" placeholder="Name" />
21+
</div>
22+
<div class="form__div">
23+
<label for="inputLastName" class="form__label">Last Name : </label>
24+
<input id="inputLastName" name="inputLastName" type="text" class="form__input" placeholder="Last Name" />
25+
</div>
26+
<div class="form__div">
27+
<label for="inputEmail" class="form__label">Email :</label>
28+
<input id="inputEmail" name="inputEmail" type="email" class="form__input" placeholder="Email" />
29+
</div>
30+
<div class="form__div">
31+
<input type="submit" class="form__button" />
32+
</div>
33+
</form>
34+
</div>
35+
</main>
36+
37+
<script type="text/javascript" src="./js/index.js"></script>
38+
</body>
39+
40+
</html>

‎dom-document-object-model/course-nc/event-listener/form-onsubmit-add-event-listener/js/index.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
3+
4+
const myForm = document.getElementById('myForm');
5+
console.log(myForm);
6+
7+
myForm.addEventListener("submit", function (e) {
8+
9+
e.preventDefault();
10+
console.log('Event : ', e)
11+
12+
const inputName = document.getElementById('inputName').value;
13+
const inputLastName = document.getElementById('inputLastName').value;
14+
const inputEmail = document.getElementById('inputEmail').value;
15+
16+
console.log('Form OnSubmit Add Event Listener Name: ', inputName, ' Last Name: ', inputLastName, ' Email: ', inputEmail );
17+
window.alert('Form OnSubmit Add Event Listener Name: ' + inputName + ' Last Name : ' + inputLastName + ' Email :' + inputEmail);
18+
19+
});

0 commit comments

Comments
 (0)