diff --git a/00-HTML-CSS-basics/CSS Basics/css/normalize.css b/00-HTML-CSS-basics/CSS Basics/css/normalize.css new file mode 100644 index 000000000..fa4e73dd4 --- /dev/null +++ b/00-HTML-CSS-basics/CSS Basics/css/normalize.css @@ -0,0 +1,447 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/00-HTML-CSS-basics/CSS Basics/css/style.css b/00-HTML-CSS-basics/CSS Basics/css/style.css new file mode 100644 index 000000000..7955e10f9 --- /dev/null +++ b/00-HTML-CSS-basics/CSS Basics/css/style.css @@ -0,0 +1,95 @@ +* +{ + /*font-size: 14px;*/ + font-family: "Arial"; +} + +body +{ + background-color: #A4A4A4; +} + +header, nav, aside, footer +{ + background-color: #00FF80; +} + +header, footer +{ + text-align: center; +} + +.header, .footer +{ + background-color: magenta; /*SI EL NOMBRE DE LA CLASE TERMINA CON 'R', EL FONDO DEBE SER DE COLOR MAGENTA ¿COMO SE HARIA ESO?*/ + width: 95%; + margin: 2.5%; +} + +.navigation, .sidebar +{ + background-color: blue; /*SI EL NOMBRE DE LA CLASE CONTIENE UNA 'A', EL FONDO DEBE SER DE COLOR AZUL ¿COMO SE HARIA ESO?*/ + color: white; +} + +.header +{ + font-size: 46px; + border: thick solid black; +} + +h1 +{ + display: inline; +} + +.main +{ + margin: 2.5%; + width: 95%; +} + +.footer +{ + font-size: 10px; +} + +.content +{ + font-size: 14px; /*SI ESTA EN font-size EN EL SELECTOR UNIVERSAL, SE IGNORA ESTA LINEA ¿PORQUE?*/ + display: inline-block; + /*position: absolute;*/ /*¿PORQUE SE ROMPE EL DISEÑO SI AGREGO ESTO ACA? AL SE inline-block SIN LOS MARGENES DEBERIA APARECER JUSTO AL LADO DE NAV BAR*/ + height: 200px; + width: 80%; + margin-left: 10%; + margin-right: 1%; + background-color: orange; + padding: 1%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.navigation +{ + font-size: 12px; + display: inline-block; + position: absolute; + height: 200px; + width: 9%; +} + +.sidebar +{ + font-size: 10px; + display: inline-block; + position: absolute; + height: 200px; + width: 9%; +} + +ul +{ + list-style: none; + padding: 0px; +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/CSS Basics/index.html b/00-HTML-CSS-basics/CSS Basics/index.html new file mode 100644 index 000000000..d1fb37f7c --- /dev/null +++ b/00-HTML-CSS-basics/CSS Basics/index.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + +
+

This is the Header

+
+
+ +
+

This is the Section Header

+

This is the article

+

This is the section footer

+
+ +
+ + + + + + + + + + + + + + + diff --git a/00-HTML-CSS-basics/HTML Basics/Expenses.html b/00-HTML-CSS-basics/HTML Basics/Expenses.html new file mode 100644 index 000000000..1a0f4f500 --- /dev/null +++ b/00-HTML-CSS-basics/HTML Basics/Expenses.html @@ -0,0 +1,26 @@ + + + + Expenses + + + + + + + + + + + + + + + + + + + +
Food$5000
Electricity$300
Cable TV and Internet$1000
Petrol$2000
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/HTML Basics/Media.html b/00-HTML-CSS-basics/HTML Basics/Media.html new file mode 100644 index 000000000..8eb304eda --- /dev/null +++ b/00-HTML-CSS-basics/HTML Basics/Media.html @@ -0,0 +1,19 @@ + + + + Media + + + + Logotipo de Google + + + + + + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/HTML Basics/SignUp.html b/00-HTML-CSS-basics/HTML Basics/SignUp.html new file mode 100644 index 000000000..713b2933b --- /dev/null +++ b/00-HTML-CSS-basics/HTML Basics/SignUp.html @@ -0,0 +1,45 @@ + + + + Sign Up + + + + + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/HTML Basics/TodoList.html b/00-HTML-CSS-basics/HTML Basics/TodoList.html new file mode 100644 index 000000000..31a49278f --- /dev/null +++ b/00-HTML-CSS-basics/HTML Basics/TodoList.html @@ -0,0 +1,17 @@ + + + + My Todo List + + +
+

My Todo List

+ +
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/HTML Basics/audio.mp3 b/00-HTML-CSS-basics/HTML Basics/audio.mp3 new file mode 100644 index 000000000..1b3734683 Binary files /dev/null and b/00-HTML-CSS-basics/HTML Basics/audio.mp3 differ diff --git a/00-HTML-CSS-basics/HTML Basics/img.png b/00-HTML-CSS-basics/HTML Basics/img.png new file mode 100644 index 000000000..743a8e21c Binary files /dev/null and b/00-HTML-CSS-basics/HTML Basics/img.png differ diff --git a/00-HTML-CSS-basics/HTML Basics/video.mp4 b/00-HTML-CSS-basics/HTML Basics/video.mp4 new file mode 100644 index 000000000..c6fc8d621 Binary files /dev/null and b/00-HTML-CSS-basics/HTML Basics/video.mp4 differ diff --git a/00-HTML-CSS-basics/Layout/Layout.html b/00-HTML-CSS-basics/Layout/Layout.html new file mode 100644 index 000000000..e4d1a7e39 --- /dev/null +++ b/00-HTML-CSS-basics/Layout/Layout.html @@ -0,0 +1,48 @@ + + + + Layout + + + + + +
+

Showcase

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+
+

Obelisk - Buenos Aires, Argentina

+ +
+
+

London Eye and Big Ben - London, England

+ +
+
+

Monument of Independence, Mexico D.F, Mexico

+ +
+
+

Brooklyn Bridge, New York, United States

+ +
+
+

Eiffel Tower, Paris, France

+ +
+
+

Colisuem, Rome, Italy

+ +
+
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/Layout/baires.jpg b/00-HTML-CSS-basics/Layout/baires.jpg new file mode 100644 index 000000000..16b19cce7 Binary files /dev/null and b/00-HTML-CSS-basics/Layout/baires.jpg differ diff --git a/00-HTML-CSS-basics/Layout/css/main.css b/00-HTML-CSS-basics/Layout/css/main.css new file mode 100644 index 000000000..4be71b61a --- /dev/null +++ b/00-HTML-CSS-basics/Layout/css/main.css @@ -0,0 +1,69 @@ +body +{ + background-color: #848484; +} + +/* HEADER STYLES */ +h1 +{ + display: inline-block; + margin-left: 1%; + width: 30%; + position: absolute; +} + +p +{ + display: inline-block; + margin-left: 31%; + width: 50%; +} + +/* CONTEINER STYLES */ +.container +{ + margin-top: 50px; +} + +div +{ + width: 30%; + height: 300px; + padding: 1%; + float: left; + +} + +img +{ + width: 100%; + height: 100%; + +} + +.hovered div +{ + position: absolute; + padding: 0%; + visibility: hidden; +} + +.hovered:hover img +{ + opacity: 0.2; + transition: opacity 0.3s; +} + +.hovered:hover div +{ + visibility: visible; +} + +h2 +{ + font-size: 18px; + font-weight: bold; + color: black; + text-align: center; + margin-top: 40px; +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/Layout/css/normalize.css b/00-HTML-CSS-basics/Layout/css/normalize.css new file mode 100644 index 000000000..fa4e73dd4 --- /dev/null +++ b/00-HTML-CSS-basics/Layout/css/normalize.css @@ -0,0 +1,447 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/00-HTML-CSS-basics/Layout/example-layout.png b/00-HTML-CSS-basics/Layout/example-layout.png new file mode 100644 index 000000000..92a5ce90f Binary files /dev/null and b/00-HTML-CSS-basics/Layout/example-layout.png differ diff --git a/00-HTML-CSS-basics/Layout/london.jpg b/00-HTML-CSS-basics/Layout/london.jpg new file mode 100644 index 000000000..95701bf73 Binary files /dev/null and b/00-HTML-CSS-basics/Layout/london.jpg differ diff --git a/00-HTML-CSS-basics/Layout/mexico.jpg b/00-HTML-CSS-basics/Layout/mexico.jpg new file mode 100644 index 000000000..6b29dea43 Binary files /dev/null and b/00-HTML-CSS-basics/Layout/mexico.jpg differ diff --git a/00-HTML-CSS-basics/Layout/newyork.jpg b/00-HTML-CSS-basics/Layout/newyork.jpg new file mode 100644 index 000000000..a57da7114 Binary files /dev/null and b/00-HTML-CSS-basics/Layout/newyork.jpg differ diff --git a/00-HTML-CSS-basics/Layout/paris.jpg b/00-HTML-CSS-basics/Layout/paris.jpg new file mode 100644 index 000000000..df5b7e918 Binary files /dev/null and b/00-HTML-CSS-basics/Layout/paris.jpg differ diff --git a/00-HTML-CSS-basics/Layout/rome.jpg b/00-HTML-CSS-basics/Layout/rome.jpg new file mode 100644 index 000000000..5a8272dfd Binary files /dev/null and b/00-HTML-CSS-basics/Layout/rome.jpg differ diff --git a/01-JS-DOM-APIs/Index/css/normalize.css b/01-JS-DOM-APIs/Index/css/normalize.css new file mode 100644 index 000000000..fa4e73dd4 --- /dev/null +++ b/01-JS-DOM-APIs/Index/css/normalize.css @@ -0,0 +1,447 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/01-JS-DOM-APIs/Index/css/styles.css b/01-JS-DOM-APIs/Index/css/styles.css new file mode 100644 index 000000000..8514629bd --- /dev/null +++ b/01-JS-DOM-APIs/Index/css/styles.css @@ -0,0 +1,9 @@ +section +{ + text-align: center; +} + +#helloworld +{ + transition: opacity 3s; +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/Index/index.html b/01-JS-DOM-APIs/Index/index.html new file mode 100644 index 000000000..83e7d56a7 --- /dev/null +++ b/01-JS-DOM-APIs/Index/index.html @@ -0,0 +1,19 @@ + + + + Index + + + + + + + + + + +

Hello World!

+ +
+ + diff --git a/01-JS-DOM-APIs/Index/js/XMLHttpRequest.js b/01-JS-DOM-APIs/Index/js/XMLHttpRequest.js new file mode 100644 index 000000000..aebf035ba --- /dev/null +++ b/01-JS-DOM-APIs/Index/js/XMLHttpRequest.js @@ -0,0 +1,26 @@ +function ajaxCall(config) { + return new Promise (function (resolve, reject) { + var xhr = new XMLHttpRequest(); + if("withCredentials" in xhr) { + //CHROME, MOZILLA, OPERA AND SAFARI CASE + xhr.open(config.method, config.url, true); + } + else if(typeof XDomainRequest != "undefined") { + //IE CASE + xhr = new XDomainRequest() ; + xhr.open(method, url); + } + else { + //CORS ISNT SUPPORTED + alert("CORS not supported by the browser"); + return; + } + xhr.send(); + xhr.onload = function () { + resolve(this.responseText); + } + xhr.onerror = function () { + reject(); + } + }); +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/Index/js/main.js b/01-JS-DOM-APIs/Index/js/main.js new file mode 100644 index 000000000..875061724 --- /dev/null +++ b/01-JS-DOM-APIs/Index/js/main.js @@ -0,0 +1,30 @@ +window.onload = fade; +function fade() { + let title = document.getElementById('helloworld'); + title.style.opacity="0"; +} + +function getJoke() { + config = { + method: "GET", + url: "http://api.icndb.com/jokes/random" + }; + + let prom = ajaxCall(config); + + prom.then(function(txt) { + var joke = document.getElementById('sectionJoke'); + if (joke.hasChildNodes()) { + joke.removeChild(joke.firstChild); + } + var element = document.createElement("p"); + var objectJoke = JSON.parse(txt); + var content = document.createTextNode(objectJoke.value.joke); + element.appendChild(content); + document.getElementById('sectionJoke').appendChild(element); + }); + + prom.catch (function () { + alert("Sorry, there was an error making the request"); + }); +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/Matrix/css/matrix.css b/01-JS-DOM-APIs/Matrix/css/matrix.css new file mode 100644 index 000000000..01b1e2aa7 --- /dev/null +++ b/01-JS-DOM-APIs/Matrix/css/matrix.css @@ -0,0 +1,31 @@ +h1 { + text-align: center; +} + +body { + background-color: #e6e6e6; +} + +input{ + margin-left: 10px; +} + +#position { + margin: 10px; +} + +table { + border: 1px solid black; + border-collapse: collapse; + margin: 10px; + width: 1200px; +} + +table td { + border: 1px solid black; + padding: 10px; +} + +table td:hover { + background: yellow; +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/Matrix/css/normalize.css b/01-JS-DOM-APIs/Matrix/css/normalize.css new file mode 100644 index 000000000..fa4e73dd4 --- /dev/null +++ b/01-JS-DOM-APIs/Matrix/css/normalize.css @@ -0,0 +1,447 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/01-JS-DOM-APIs/Matrix/js/matrix.js b/01-JS-DOM-APIs/Matrix/js/matrix.js new file mode 100644 index 000000000..7cb1ca740 --- /dev/null +++ b/01-JS-DOM-APIs/Matrix/js/matrix.js @@ -0,0 +1,35 @@ +window.onload = newRow; + +var row = -1; +var col; + +function newRow() { + if(row != -1 && col == 1) { + alert("Row empty"); + return; + } + var newr = document.createElement("tr"); + document.getElementById('table').appendChild(newr); + row++; + col = 1; + showPosition(); +} + +function addMatrix() { + var val = document.getElementById("text"); + if(val.value == "") { + alert("Write something"); + return; + } + var element = document.createElement("td"); + var content = document.createTextNode(val.value); + element.appendChild(content); + document.getElementById("table").childNodes[row].appendChild(element); + col++; + showPosition(); +} + +function showPosition() { + var pos = document.getElementById("position"); + pos.innerHTML = "Row: " + (row+1) + " Column: " + col; +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/Matrix/matrix.html b/01-JS-DOM-APIs/Matrix/matrix.html new file mode 100644 index 000000000..e57875e57 --- /dev/null +++ b/01-JS-DOM-APIs/Matrix/matrix.html @@ -0,0 +1,21 @@ + + + + DOM Matrix + + + + + +
+

Matrix to DOM Table

+
+
+ + + +
+
+
+ + \ No newline at end of file diff --git a/01-JS-DOM-APIs/Repositories/js/XMLHttpRequest.js b/01-JS-DOM-APIs/Repositories/js/XMLHttpRequest.js new file mode 100644 index 000000000..aebf035ba --- /dev/null +++ b/01-JS-DOM-APIs/Repositories/js/XMLHttpRequest.js @@ -0,0 +1,26 @@ +function ajaxCall(config) { + return new Promise (function (resolve, reject) { + var xhr = new XMLHttpRequest(); + if("withCredentials" in xhr) { + //CHROME, MOZILLA, OPERA AND SAFARI CASE + xhr.open(config.method, config.url, true); + } + else if(typeof XDomainRequest != "undefined") { + //IE CASE + xhr = new XDomainRequest() ; + xhr.open(method, url); + } + else { + //CORS ISNT SUPPORTED + alert("CORS not supported by the browser"); + return; + } + xhr.send(); + xhr.onload = function () { + resolve(this.responseText); + } + xhr.onerror = function () { + reject(); + } + }); +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/Repositories/js/main.js b/01-JS-DOM-APIs/Repositories/js/main.js new file mode 100644 index 000000000..f32328ff8 --- /dev/null +++ b/01-JS-DOM-APIs/Repositories/js/main.js @@ -0,0 +1,39 @@ +function search() { + var word = document.getElementById("textbox"); + if(word.value == "") { + alert("Write something"); + return; + } + var config = { + method: "GET", + url: "https://api.github.com/search/repositories" + "?q=" + word.value + }; + + var prom = ajaxCall(config); + + prom.then(function (txt) { + console.log(txt); + var list = document.getElementById("list"); + if (list.hasChildNodes()) { + while (list.childNodes.length >= 1) { + list.removeChild(list.firstChild); + } + } + var obj = JSON.parse(txt); + if(obj.total_count == 0) { + alert("No matches found"); + } + for(var i = 0; i < obj.items.length; i++) { + let element = document.createElement("li"); + let content = document.createTextNode(obj.items[i].full_name); + element.appendChild(content); + document.getElementById("list").appendChild(element); + } + }); + + prom.catch(function () { + alert("Sorry, there was an error making the request"); + }); + + +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/Repositories/repositories.html b/01-JS-DOM-APIs/Repositories/repositories.html new file mode 100644 index 000000000..6b7d3dab9 --- /dev/null +++ b/01-JS-DOM-APIs/Repositories/repositories.html @@ -0,0 +1,15 @@ + + + + GitHub Repositories + + + + +
+ + +
+ + + \ No newline at end of file diff --git a/02-oop-inheritance/OOP.html b/02-oop-inheritance/OOP.html new file mode 100644 index 000000000..617d0b357 --- /dev/null +++ b/02-oop-inheritance/OOP.html @@ -0,0 +1,10 @@ + + + + Object-Oriented Programming + + + + + + \ No newline at end of file diff --git a/02-oop-inheritance/js/oop.js b/02-oop-inheritance/js/oop.js new file mode 100644 index 000000000..3b6f09331 --- /dev/null +++ b/02-oop-inheritance/js/oop.js @@ -0,0 +1,62 @@ +function Movie(title, year, duration) { + this.title = title; + this.year = year; + this.duration = duration; +} + +var jleague = new Movie("Justice League", 2017, 120); +var thepruge = new Movie("The Purge", 2013, 84); +var avengers = new Movie("The Avengers", 2012, 142); +var hpotter = new Movie("Harry Potter and the Prisoner of Azkaban", 2004, 141); + +//KEY POINT 6 +var Social = { + share(friendName) { + console.log("Share " + this.title + " with " + friendName); + }, + like(friendName) { + console.log(friendName + " likes " + this.title); + } +} + +var jleague = Object.assign(Social, jleague); +jleague.share("Leonel Signore"); + +var avengers = Object.assign(Social, avengers); +avengers.like("Leonel Signore"); + +//KEY POINT 8 +class Actor { + constructor(name, age) { + this.name = name; + this.age = age; + } +} + +var dRadcliffe = new Actor("Daniel Radcliffe", 28); +var tFelton = new Actor("Tom Felton", 30); +var otherCast = [ + new Actor("Emma Watson", 27), + new Actor("Rupert Grint", 29) +]; + +hpotter.cast = new Array(); + +var hpotter = Object.assign(hpotter, { + addCast(actors) { + if(actors[0] == undefined) { //SI NO ES UN VECTOR + hpotter.cast[hpotter.cast.length] = actors; + alert("no es vector"); + } + else { + for(let i = 0; i < actors.length; i++) { + hpotter.cast[hpotter.cast.length] = actors[i]; + } + alert("es vector"); + } + } +}); + +hpotter.addCast(dRadcliffe); +hpotter.addCast(tFelton); +hpotter.addCast(otherCast); \ No newline at end of file diff --git a/03-MVC-AngularJS/Refactoring/MoviesApp.html b/03-MVC-AngularJS/Refactoring/MoviesApp.html new file mode 100644 index 000000000..4a4faedd8 --- /dev/null +++ b/03-MVC-AngularJS/Refactoring/MoviesApp.html @@ -0,0 +1,74 @@ + + + + + Movie List + + + + + + + + + + + + + + + + + + +

MOVIE LIST

+ +
+
+ + +

+ + +

+ + +

+ + +

+ + +

+ + +

+ +

+ + + +

+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/03-MVC-AngularJS/Refactoring/css/styles.css b/03-MVC-AngularJS/Refactoring/css/styles.css new file mode 100644 index 000000000..2f2fe6b6a --- /dev/null +++ b/03-MVC-AngularJS/Refactoring/css/styles.css @@ -0,0 +1,67 @@ +body { + background-color: #e6e6e6; +} + +h1 { + text-align: center; + background-color: #2E9AFE; + border: 3px solid black; +} + +ul { + list-style: none; +} + +#titleText { + width: 300px; + background-color: #e6e6e6; +} + +#mainForm { + background-color: #FF8000; + width: 300px; + border: 6px double black; + padding: 5px; + margin-left: 40px; +} + +#formMovies { + float: left; +} + +textarea { + resize: none; +} + +img:hover { + cursor: pointer; +} + +.formButtons { + background: none; +} + +/*DETAILS VIEW STYLES*/ +#detailsZone { + width: 900px; + float: left; + margin-left: 15px; +} + +#detailsHeader { + background-color: #BA1E1E; + border: 6px double black; + padding: 5px; + text-align: center; +} + +table { + border: 2px solid black; + border-collapse: collapse; + margin-left: auto; + margin-right: auto; +} + +table td { + border: 2px solid black; +} diff --git a/03-MVC-AngularJS/Refactoring/favico.ico b/03-MVC-AngularJS/Refactoring/favico.ico new file mode 100644 index 000000000..cf2be202f Binary files /dev/null and b/03-MVC-AngularJS/Refactoring/favico.ico differ diff --git a/03-MVC-AngularJS/Refactoring/js/MovieApp.AddEditRemoveService.js b/03-MVC-AngularJS/Refactoring/js/MovieApp.AddEditRemoveService.js new file mode 100644 index 000000000..4b37297cd --- /dev/null +++ b/03-MVC-AngularJS/Refactoring/js/MovieApp.AddEditRemoveService.js @@ -0,0 +1,33 @@ +angular.module("MovieApp") + +.service("AddEditRemoveService", AddEditRemoveService); + +function AddEditRemoveService() { + this.nextID = movieArray.length+1; + if(movieArray.length > 0) { + this.movies = movieArray; + } + else { + this.movies = []; + } + + this.getAll = function () { + return this.movies; + } + this.add = function (newMovie) { + newMovie.id = this.nextID; + this.movies.push(newMovie); + this.nextID++; + } + this.clear = function () { + this.movies = []; + this.nextID = 1; + return this.getAll(); + } + this.remove = function (movieToRemove) { + this.movies = this.movies.filter(function (movieToCompare) { + return movieToCompare.title !== movieToRemove.title; + }); + return this.getAll(); + }; +} \ No newline at end of file diff --git a/03-MVC-AngularJS/Refactoring/js/MovieApp.DetailsController.js b/03-MVC-AngularJS/Refactoring/js/MovieApp.DetailsController.js new file mode 100644 index 000000000..e39a9dff2 --- /dev/null +++ b/03-MVC-AngularJS/Refactoring/js/MovieApp.DetailsController.js @@ -0,0 +1,18 @@ +angular.module("MovieApp") + +.controller("DetailsController", DetailsController); + +function DetailsController ($scope, $routeParams, AddEditRemoveService) { + $scope.movieList = AddEditRemoveService.getAll(); + var i = 0; + while($scope.movieList[i].id != $routeParams.id) { + i++; + } + $scope.titleMovie = $scope.movieList[i].title; + $scope.durationMovie = $scope.movieList[i].duration; + $scope.yearMovie = $scope.movieList[i].year; + $scope.genreMovie = $scope.movieList[i].genre; + $scope.clasificationMovie = $scope.movieList[i].clasification; + $scope.directorMovie = $scope.movieList[i].director; + $scope.descriptionMovie = $scope.movieList[i].description; +} \ No newline at end of file diff --git a/03-MVC-AngularJS/Refactoring/js/MovieApp.MainController.js b/03-MVC-AngularJS/Refactoring/js/MovieApp.MainController.js new file mode 100644 index 000000000..9658e75b6 --- /dev/null +++ b/03-MVC-AngularJS/Refactoring/js/MovieApp.MainController.js @@ -0,0 +1,33 @@ +angular.module("MovieApp") + +.controller("MainController", MainController); + +function MainController ($scope, $location, AddEditRemoveService) { + $scope.movieList = AddEditRemoveService.getAll(); + $scope.editMode = false; + + $scope.addMovie = function () { + AddEditRemoveService.add($scope.newMovie); + $scope.newMovie = {}; + }; + $scope.clearAll = function () { + $scope.movieList = AddEditRemoveService.clear(); + $location.url("/"); + }; + $scope.editMovie = function (movieToEdit) { + $scope.newMovie = movieToEdit; + $scope.editMode = true; + $location.url("/"); + }; + $scope.finishEdit = function () { + $scope.newMovie = {}; + $scope.editMode = false; + }; + $scope.removeMovie = function (movieToRemove) { + $scope.movieList = AddEditRemoveService.remove(movieToRemove); + $location.url("/"); + }; + $scope.detailsMovie = function (movieToShow) { + $location.url("/details"+movieToShow.id); + }; +} \ No newline at end of file diff --git a/03-MVC-AngularJS/Refactoring/js/MovieApp.Routing.js b/03-MVC-AngularJS/Refactoring/js/MovieApp.Routing.js new file mode 100644 index 000000000..ee346df53 --- /dev/null +++ b/03-MVC-AngularJS/Refactoring/js/MovieApp.Routing.js @@ -0,0 +1,11 @@ +angular.module("MovieApp") +.config(["$routeProvider", function ($routeProvider) { + $routeProvider + .when("/details:id", { + templateUrl: "views/details.htm", + controller: "DetailsController" + }) + .otherwise({ + redirectTo: "/" + }); +}]); \ No newline at end of file diff --git a/03-MVC-AngularJS/Refactoring/js/MovieApp.js b/03-MVC-AngularJS/Refactoring/js/MovieApp.js new file mode 100644 index 000000000..489e3a14a --- /dev/null +++ b/03-MVC-AngularJS/Refactoring/js/MovieApp.js @@ -0,0 +1 @@ +angular.module("MovieApp", ["ngRoute"]); \ No newline at end of file diff --git a/03-MVC-AngularJS/Refactoring/js/Movies.json b/03-MVC-AngularJS/Refactoring/js/Movies.json new file mode 100644 index 000000000..1757aa822 --- /dev/null +++ b/03-MVC-AngularJS/Refactoring/js/Movies.json @@ -0,0 +1,42 @@ +movieArray = [ +{ + id: 1, + title: "Justice League", + year: 2017, + duration: 120, + genre: "Action/Adventure/Fantasy", + clasification: "PG", + director: "Zack Snyder", + description: "Fueled by his restored faith in humanity and inspired by Superman's selfless act, Bruce Wayne enlists the help of his newfound ally, Diana Prince, to face an even greater enemy. Together, Batman and Wonder Woman work quickly to find and recruit a team of metahumans to stand against this newly awakened threat. But despite the formation of this unprecedented league of heroes-Batman, Wonder Woman, Aquaman, Cyborg and The Flash-it may already be too late to save the planet from an assault of catastrophic proportions." +}, +{ + id: 2, + title: "The Purge", + year: 2013, + duration: 84, + genre: "Horror/SciFi/Thriller", + clasification: "18A", + director: "James DeMonaco", + description: "In an America wracked by crime and overcrowded prisons, the government has sanctioned an annual 12-hour period in which any and all criminal activity-including murder-becomes legal. The police can't be called. Hospitals suspend help. It's one night when the citizenry regulates itself without thought of punishment. On this night plagued by violence and an epidemic of crime, one family wrestles with the decision of who they will become when a stranger comes knocking. When an intruder breaks into James Sandin's (Ethan Hawke) gated community during the yearly lockdown, he begins a sequence of events that threatens to tear a family apart. Now, it is up to James, his wife, Mary (Lena Headey), and their kids to make it through the night without turning into the monsters from whom they hide." +}, +{ + id: 3, + title: "The Avengers", + year: 2012, + duration: 142, + genre: "Action/Adventure/SciFi", + clasification: "G", + director: "Josh Whedon", + description: "Nick Fury is the director of S.H.I.E.L.D., an international peace-keeping agency. The agency is a who's who of Marvel Super Heroes, with Iron Man, The Incredible Hulk, Thor, Captain America, Hawkeye and Black Widow. When global security is threatened by Loki and his cohorts, Nick Fury and his team will need all their powers to save the world from disaster which is formed by Loki and his team" +}, +{ + id: 4, + title: "Harry Potter and the Prisoner of Azkaban", + year: 2004, + duration: 141, + genre: "Adventure/Family/Fantasy", + clasification: "G", + director: "Alfonso Cuaron", + description: "Harry Potter is having a tough time with his relatives (yet again). He runs away after using magic to inflate Uncle Vernon's sister Marge who was being offensive towards Harry's parents. Initially scared for using magic outside the school, he is pleasantly surprised that he won't be penalized after all. However, he soon learns that a dangerous criminal and Voldemort's trusted aide Sirius Black has escaped from the Azkaban prison and wants to kill Harry to avenge the Dark Lord. To worsen the conditions for Harry, vile creatures called Dementors are appointed to guard the school gates and inexplicably happen to have the most horrible effect on him. Little does Harry know that by the end of this year, many holes in his past (whatever he knows of it) will be filled up and he will have a clearer vision of what the future has in store" +}, +]; \ No newline at end of file diff --git a/03-MVC-AngularJS/Refactoring/png/add.png b/03-MVC-AngularJS/Refactoring/png/add.png new file mode 100644 index 000000000..82f46ccf8 Binary files /dev/null and b/03-MVC-AngularJS/Refactoring/png/add.png differ diff --git a/03-MVC-AngularJS/Refactoring/png/clear.png b/03-MVC-AngularJS/Refactoring/png/clear.png new file mode 100644 index 000000000..5b5f2464f Binary files /dev/null and b/03-MVC-AngularJS/Refactoring/png/clear.png differ diff --git a/03-MVC-AngularJS/Refactoring/png/details.png b/03-MVC-AngularJS/Refactoring/png/details.png new file mode 100644 index 000000000..9bfdc7410 Binary files /dev/null and b/03-MVC-AngularJS/Refactoring/png/details.png differ diff --git a/03-MVC-AngularJS/Refactoring/png/edit.png b/03-MVC-AngularJS/Refactoring/png/edit.png new file mode 100644 index 000000000..470670e5f Binary files /dev/null and b/03-MVC-AngularJS/Refactoring/png/edit.png differ diff --git a/03-MVC-AngularJS/Refactoring/png/finish.png b/03-MVC-AngularJS/Refactoring/png/finish.png new file mode 100644 index 000000000..65a326a40 Binary files /dev/null and b/03-MVC-AngularJS/Refactoring/png/finish.png differ diff --git a/03-MVC-AngularJS/Refactoring/png/remove.png b/03-MVC-AngularJS/Refactoring/png/remove.png new file mode 100644 index 000000000..921e0d4ce Binary files /dev/null and b/03-MVC-AngularJS/Refactoring/png/remove.png differ diff --git a/03-MVC-AngularJS/Refactoring/views/details.htm b/03-MVC-AngularJS/Refactoring/views/details.htm new file mode 100644 index 000000000..b9e3d7f6d --- /dev/null +++ b/03-MVC-AngularJS/Refactoring/views/details.htm @@ -0,0 +1,24 @@ +

Details: {{titleMovie}}

+

{{descriptionMovie}}

+ + + + + + + + + + + + + + + + + + + + + +
Year{{yearMovie}}
Duration{{durationMovie}} Minutes
Genre{{genreMovie}}
Clasification{{clasificationMovie}}
Directed By{{directorMovie}}
\ No newline at end of file diff --git a/03-MVC-AngularJS/js/mainController.js b/03-MVC-AngularJS/js/mainController.js new file mode 100644 index 000000000..eb964d69b --- /dev/null +++ b/03-MVC-AngularJS/js/mainController.js @@ -0,0 +1,40 @@ +angular.module("moviesApp", []) +.controller("mainController", function ($scope) { + $scope.movieList = movieArray; + $scope.showDetails = false; + $scope.editMode = false; + $scope.addMovie = function () { + $scope.movieList.push($scope.newMovie); + $scope.newMovie = {}; + }; + $scope.clearAll = function () { + $scope.movieList = []; + }; + $scope.details = function () { + if(!$scope.showDetails) { + $scope.showDetails = true; + } + else { + $scope.showDetails = false; + } + }; + $scope.editMovie = function (movieToEdit) { + $scope.newMovie = movieToEdit; + document.getElementById('btnFinish').style.visibility="visible"; + document.getElementById('btnSubmit').style.visibility="hidden"; + document.getElementById('btnClr').style.visibility="hidden"; + $scope.editMode = true; + }; + $scope.finishEdit = function () { + $scope.newMovie = {}; + document.getElementById('btnFinish').style.visibility="hidden"; + document.getElementById('btnSubmit').style.visibility="visible"; + document.getElementById('btnClr').style.visibility="visible"; + $scope.editMode = false; + }; + $scope.removeMovie = function (movieToRemove) { + $scope.movieList = $scope.movieList.filter(function (movieToCompare) { + return movieToCompare.title !== movieToRemove; + }); + }; +}); \ No newline at end of file diff --git a/03-MVC-AngularJS/js/movies.js b/03-MVC-AngularJS/js/movies.js new file mode 100644 index 000000000..32304ca1c --- /dev/null +++ b/03-MVC-AngularJS/js/movies.js @@ -0,0 +1,22 @@ +movieArray = [ +{ + title: "Justice League", + year: 2017, + duration: 120 +}, +{ + title: "The Purge", + year: 2013, + duration: 84 +}, +{ + title: "The Avengers", + year: 2012, + duration: 142 +}, +{ + title: "Harry Potter and the Prisoner of Azkaban", + year: 2004, + duration: 141 +}, +]; \ No newline at end of file diff --git a/03-MVC-AngularJS/moviesApp.html b/03-MVC-AngularJS/moviesApp.html new file mode 100644 index 000000000..b2b4b2f18 --- /dev/null +++ b/03-MVC-AngularJS/moviesApp.html @@ -0,0 +1,38 @@ + + + + Movie List + + + + + + + +
+ +

+ + +

+ +

+ +
+
+ +
+

MOVIES LIST

+
+ + + + \ No newline at end of file diff --git a/04-HTML5-APIs/Drop and Drag/css/styles.css b/04-HTML5-APIs/Drop and Drag/css/styles.css new file mode 100644 index 000000000..5f18aad54 --- /dev/null +++ b/04-HTML5-APIs/Drop and Drag/css/styles.css @@ -0,0 +1,6 @@ +#dragDropZone { + width: 500px; + height: 500px; + margin: 20px; + border: 1px solid red; +} \ No newline at end of file diff --git a/04-HTML5-APIs/Drop and Drag/index.html b/04-HTML5-APIs/Drop and Drag/index.html new file mode 100644 index 000000000..0e0d083a2 --- /dev/null +++ b/04-HTML5-APIs/Drop and Drag/index.html @@ -0,0 +1,13 @@ + + + + Drag and Drop + + + + +
+

Drag and Drop the files here...

+
+ + \ No newline at end of file diff --git a/04-HTML5-APIs/Drop and Drag/js/main.js b/04-HTML5-APIs/Drop and Drag/js/main.js new file mode 100644 index 000000000..d6377c6cf --- /dev/null +++ b/04-HTML5-APIs/Drop and Drag/js/main.js @@ -0,0 +1,23 @@ +window.onload = function () { + drop = document.getElementById('dragDropZone'); + //REINICIAR EL COMPORTAMIENTO POR DEFECTO DEL NAVEGADOR + drop.addEventListener("dragenter", function(e){e.preventDefault();}, false); + drop.addEventListener("dragover", function(e){e.preventDefault();}, false); + drop.addEventListener("drop", dropped, false); +} + +function dropped (e) { + e.preventDefault(); + var file = e.dataTransfer.files; + if(file.length != 1) { + alert("You must drag only one file"); + return; + } + drop.innerHTML = "

File Name: " + file[0].name + " - Size: " + (file[0].size/1024).toFixed(2) + "kb


"; + var reader = new FileReader(); + reader.onload = function (e) { + var text = e.target.result; + drop.innerHTML += text; + } + reader.readAsText(file[0]); +} \ No newline at end of file diff --git a/04-HTML5-APIs/LocalStorage and IndexedDB/css/styles.css b/04-HTML5-APIs/LocalStorage and IndexedDB/css/styles.css new file mode 100644 index 000000000..5eaf10c41 --- /dev/null +++ b/04-HTML5-APIs/LocalStorage and IndexedDB/css/styles.css @@ -0,0 +1,11 @@ +#localStoreData { + float: left; + width: 40%; + margin-left: 5%; +} + +#indexedDBData { + float: left; + width: 40%; + margin-left: 5%; +} \ No newline at end of file diff --git a/04-HTML5-APIs/LocalStorage and IndexedDB/index.html b/04-HTML5-APIs/LocalStorage and IndexedDB/index.html new file mode 100644 index 000000000..cd467b658 --- /dev/null +++ b/04-HTML5-APIs/LocalStorage and IndexedDB/index.html @@ -0,0 +1,24 @@ + + + + Local Storage and Indexed DB + + + + + +
+
+
+
+ + +
+
+
+
+
+
Data With Indexed Data Base
+
+ + \ No newline at end of file diff --git a/04-HTML5-APIs/LocalStorage and IndexedDB/js/WebStorage.js b/04-HTML5-APIs/LocalStorage and IndexedDB/js/WebStorage.js new file mode 100644 index 000000000..f35c5a08d --- /dev/null +++ b/04-HTML5-APIs/LocalStorage and IndexedDB/js/WebStorage.js @@ -0,0 +1,27 @@ +function newItem (newText) { + localStorage.setItem(newText, newText); + showStorage(); + document.getElementById("txt").value = ""; +} + +function showStorage () { + var dataZone = document.getElementById("localStoreData"); + dataZone.innerHTML = "Data With LocalStorage"; + for(var i = 0; i < localStorage.length; i++) { + var key = localStorage.key(i); + var value = localStorage.getItem(key); + dataZone.innerHTML += "
Text: "+value+"
"; + } +} + +function clearAll () { + if(confirm("Sure?")) { + localStorage.clear(); + showStorage(); + } +} + +function removeItem(key) { + localStorage.removeItem(key); + showStorage(); +} \ No newline at end of file diff --git a/04-HTML5-APIs/LocalStorage and IndexedDB/js/main.js b/04-HTML5-APIs/LocalStorage and IndexedDB/js/main.js new file mode 100644 index 000000000..59b3060db --- /dev/null +++ b/04-HTML5-APIs/LocalStorage and IndexedDB/js/main.js @@ -0,0 +1,16 @@ +window.onload = function () { + var btnSave = document.getElementById('btnSave'); + var btnClear = document.getElementById("btnClear"); + btnSave.addEventListener("click", funcSave, false); + btnClear.addEventListener("click", funcClear, false); + showStorage(); +} + +function funcSave() { + var newText = document.getElementById("txt").value; + newItem(newText); +} + +function funcClear() { + clearAll(); +} \ No newline at end of file