diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..b720d2f Binary files /dev/null and b/.DS_Store differ diff --git a/FromJavaScriptTojQuery-master/.DS_Store b/FromJavaScriptTojQuery-master/.DS_Store new file mode 100644 index 0000000..73505ef Binary files /dev/null and b/FromJavaScriptTojQuery-master/.DS_Store differ diff --git a/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/.DS_Store b/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/.DS_Store new file mode 100644 index 0000000..1a84a7d Binary files /dev/null and b/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/.DS_Store differ diff --git a/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/.DS_Store b/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/.DS_Store new file mode 100644 index 0000000..ba3b77f Binary files /dev/null and b/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/.DS_Store differ diff --git a/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/index.html b/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/index.html new file mode 100755 index 0000000..a217083 --- /dev/null +++ b/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + + +
+ +
+
+

The DOM

+

The good, the bad and the ugly.

+
+
+

Manipulating the DOM with Javascript.

+
+
+
+ + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/js/app.js b/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/js/app.js new file mode 100755 index 0000000..73c0265 --- /dev/null +++ b/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/js/app.js @@ -0,0 +1 @@ +console.log('Hello World'); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/js/transcript.js b/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/js/transcript.js new file mode 100755 index 0000000..17255a4 --- /dev/null +++ b/FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/js/transcript.js @@ -0,0 +1,106 @@ +/**************************************** + * This is the set of JavaScript statements that we execute inside of the + * console against the `index.html` file. + ****************************************/ + +/* + * Selecting elements. + */ + +// Returns a single element. This is because we can't every have more than +// one element with the same id. Note that we don't include a '#' for the id +var article = document.getElementById('home-page'); + +// Returns a list of elements. This is because we can have a number +// of
elements on the page +var sections = article.getElementsByTagName('section'); + +// Also returns a list of elements that match the class name. This is because +// unlike the ids, we can have numerous instances of elements with the same +// class names. Note that we don't include a '.' for the class +var leads = document.getElementsByClassName('lead'); + +// Let's look at the text content of the .lead element +var lead = leads[0]; +lead.textContent; + +// Very flexible way of finding elements in the DOM. Returns first element found +var article = document.querySelector('#home-page'); +var section = document.querySelector('section'); +var lead = document.querySelector('.lead'); + +// Can get all matched results. This returns a list +var sections = document.querySelectorAll('section'); + +// Let's look at an individual node and see it's children and it's parent +var article = document.getElementById('home-page'); + +article.children; +article.parentElement; +article.nextElementSibling +article.firstElementChild; +article.lastElementChild; + +let section = article.firstElementChild; + +/* + * Creating new elements + */ + +// Create a new li to go in the nav +var li = document.createElement('li'); + +// Give it a class name +li.classList.add('last'); + + +// Change its CSS +li.style.backgroundColor = 'pink'; + +// Create an anchor link to go in the new li +var a = document.createElement('a'); + +// Give is some text +a.textContent = "Four"; + +a.style.color = 'white'; + +// Insert the anchor link into the li +li.appendChild(a); + + +/* + * Modifying the DOM + */ + +// Find the ul element +var uls = document.getElementsByTagName('ul'); + +var ul = uls[0]; + +// Insert the new li element into our ul +ul.appendChild(li); + +// Let's try move it up to the top of the list +var firstLi = ul.getElementsByTagName('li'); +ul.insertBefore(li, firstLi); + +firstLi.classList.remove('active'); +// Starting to get messy + +/* + * Updating a list of elements + * - this is where it gets painful + */ +var lis = ul[0].getElementByTagName('li'); +var ul = document.getElementsByTagName('ul'); +var li; +for (var i = 0; i < lis.length; i++) { + lis[i].style.backgroundColor = 'pink'; +} + +// Wouldn't it be great if we could do something like ... + +ul.find('li').removeClass('active').addClass('inactive').css('background-color', 'pink'); + +// without having to write big for loops diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/.DS_Store b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/.DS_Store new file mode 100644 index 0000000..fd6e6f9 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/.DS_Store differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/Cards-jquery.html b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/Cards-jquery.html new file mode 100755 index 0000000..e0b780b --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/1.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/2.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/3.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/4.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/code-institute.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-1.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-2.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-3.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-4.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/script.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/script.js new file mode 100755 index 0000000..1ca15bb --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/script.js @@ -0,0 +1,20 @@ +$(document).ready(function() { + $("#stream1_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream1").addClass('highlight_stream'); + }); + $("#stream2_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream2").addClass('highlight_stream'); + }); + $("#stream3_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream3").addClass('highlight_stream'); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/style.css b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/style.css new file mode 100755 index 0000000..3a72481 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/02-downloading_jquery/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/Cards-jquery.html b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/Cards-jquery.html new file mode 100755 index 0000000..e0b780b --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/1.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/2.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/3.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/4.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/code-institute.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-1.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-2.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-3.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-4.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/script.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/script.js new file mode 100755 index 0000000..1ca15bb --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/script.js @@ -0,0 +1,20 @@ +$(document).ready(function() { + $("#stream1_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream1").addClass('highlight_stream'); + }); + $("#stream2_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream2").addClass('highlight_stream'); + }); + $("#stream3_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream3").addClass('highlight_stream'); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/statements.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/statements.js new file mode 100755 index 0000000..7699134 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/statements.js @@ -0,0 +1,31 @@ +/** + * The set of statements that are executed in the browser console to try out + * jQuery selectors + */ + +// Get all img elements on the page +$("img"); + +// Get all elements with a class of `card_image` +$(".card_image"); + +// Get the footer by its ID +$('#my_footer'); + +// All paragrapgh elements in the `footer` +$("footer p"); + +// Get all header elements (h1-h6) +$(":header"); + +// Get first element on the page +$(":first"); + +// Get the last `div` on the page +$("div:last") + +// Get the last `img` on the page +$("img:last"); + +// Get all elements that have an attribute of `href` +$("[href]") diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/style.css b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/style.css new file mode 100755 index 0000000..3a72481 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/challenge_solution/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/Cards-jquery.html b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/Cards-jquery.html new file mode 100755 index 0000000..e0b780b --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/1.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/2.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/3.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/4.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/code-institute.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-1.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-2.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-3.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-4.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/script.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/script.js new file mode 100755 index 0000000..1ca15bb --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/script.js @@ -0,0 +1,20 @@ +$(document).ready(function() { + $("#stream1_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream1").addClass('highlight_stream'); + }); + $("#stream2_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream2").addClass('highlight_stream'); + }); + $("#stream3_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream3").addClass('highlight_stream'); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/statements.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/statements.js new file mode 100755 index 0000000..aaa2ee6 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/statements.js @@ -0,0 +1,38 @@ +/** + * The set of statements that are executed in the browser console to try out + * jQuery selectors + */ + +// Select all of the anchor elements on the page using the `$` as shorthand +// for the `jQuery` function +$("a"); + +// The long version of the function +jQuery("a"); + +// Get all elements that contain a class of `card_image` +$(".card_image"); + +// Get all elements that contain an ID of `logoNav` +$("#logoNav"); + +// Get all anchors that are direct children of paragraphs +$("p>a"); + +// Get all anchor elements that are descendants of paragraphs +$("p a"); + +// Get all list item elements that are direct children of unordered lists +$("ul>li"); + +// Get all list item elements that are descendants of unordered lists +$("ul li"); + +// Get the first anchor element from the DOM +$("a:first"); + +// Get the last anchor element from the DOM +$("a:last"); + +// Select all header elements (h1, h2, h3, h4, h5, h6) +$(":header"); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/style.css b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/style.css new file mode 100755 index 0000000..3a72481 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/03-jquery_selectors/video_solution/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/Cards-jquery.html b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/Cards-jquery.html new file mode 100755 index 0000000..e0b780b --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/1.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/2.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/3.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/4.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/code-institute.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-1.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-2.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-3.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-4.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/script.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/script.js new file mode 100755 index 0000000..1ca15bb --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/script.js @@ -0,0 +1,20 @@ +$(document).ready(function() { + $("#stream1_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream1").addClass('highlight_stream'); + }); + $("#stream2_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream2").addClass('highlight_stream'); + }); + $("#stream3_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream3").addClass('highlight_stream'); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/statements.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/statements.js new file mode 100755 index 0000000..35c9aab --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/statements.js @@ -0,0 +1,7 @@ +/** + * The set of statements that are executed in the browser console to try out + * jQuery selectors + */ + +// Modify the contents of all of the paragraph elements on the page +$("p").text("New text"); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/style.css b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/style.css new file mode 100755 index 0000000..3a72481 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/Cards-jquery.html b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/Cards-jquery.html new file mode 100755 index 0000000..e0b780b --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/1.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/2.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/3.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/4.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/code-institute.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-1.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-2.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-3.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-4.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/script.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/script.js new file mode 100755 index 0000000..1ca15bb --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/script.js @@ -0,0 +1,20 @@ +$(document).ready(function() { + $("#stream1_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream1").addClass('highlight_stream'); + }); + $("#stream2_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream2").addClass('highlight_stream'); + }); + $("#stream3_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream3").addClass('highlight_stream'); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/statements.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/statements.js new file mode 100755 index 0000000..e14d93f --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/statements.js @@ -0,0 +1,38 @@ +/** + * The set of statements that are executed in the browser console to try out + * jQuery selectors + */ + + // Get the `background-color` of all paragraphs +$("p").css("background-color"); + +// Get the `font-family` of all paragraphs +$("p").css("font-family"); + +// Change the color of the text of all list item elements +$("li").css("color", "red"); + +// Underline all h2 elements +$("h2").css("text-decoration", "underline"); + +// Add a solid border of 1px and a color of `#ccc` to all unordered lists +$("ul").css("border", "solid 1px #ccc"); + +// Get the HTML contained within an element with an ID of `my_footer` +$("#my_footer").html(); + +// Get the HTML contained within an element called `body` +$("body").html(); + +// Add a h1 to the `body` element +$("body").html("

This is my fancy new content. Thanks jQuery, you're the best!

"); + +// Add new text to the footer +$("#my_footer").text("This is my fancy new text. Thanks again jQuery"); + +// Append a new element to the end of all of the elements contained in the +// element that has an ID of `myElement` +$("#myElement").append("

This is a new element

"); + +// Append a span containing the copyright to the footer +$("my_footer").append("© 2017.") \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/style.css b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/style.css new file mode 100755 index 0000000..3a72481 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/Cards-jquery.html b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/Cards-jquery.html new file mode 100755 index 0000000..e0b780b --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/1.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/2.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/3.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/4.png b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/code-institute.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-1.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-2.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-3.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-4.jpg b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/script.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/script.js new file mode 100755 index 0000000..1ca15bb --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/script.js @@ -0,0 +1,20 @@ +$(document).ready(function() { + $("#stream1_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream1").addClass('highlight_stream'); + }); + $("#stream2_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream2").addClass('highlight_stream'); + }); + $("#stream3_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream3").addClass('highlight_stream'); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/statements.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/statements.js new file mode 100755 index 0000000..c11854d --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/statements.js @@ -0,0 +1,13 @@ +/** + * The set of statements that are executed in the browser console to try out + * jQuery selectors + */ + +// Append a span to every paragraph +$("p").append("lorem ipsum"); + +// Remove all links using the remove function +$("a").remove(); + +// Empty all div elements that have a class of card +$("div.card").empty(); diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/style.css b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/style.css new file mode 100755 index 0000000..3a72481 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/05-changing_html_and_css_with_jquery_challenge_2/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/06-changing_html_and_css_with_jquery_challenge_3/statements.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/06-changing_html_and_css_with_jquery_challenge_3/statements.js new file mode 100755 index 0000000..b8efd0c --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/06-changing_html_and_css_with_jquery_challenge_3/statements.js @@ -0,0 +1,43 @@ +/** + * Loading jQuery on a website and using it to manipulate the DOM + */ + + + /** + * eir.ie + */ +// Create a new script element +var script = document.createElement('script'); + +// Set the `src` attribute of the new script element +script.src = "//code.jquery.com/jquery-latest.min.js"; + +// Append the new script element to the head element of the page +document.head.appendChild(script); + +// Find out the `font-family` of all paragraphs +$("p").css("font-family"); + +// Find out the `font-family` of all `h2` elements +$("h2").css("font-family"); + +// Change the text of each paragraph element to you name +$("p").text("Aaron"); + + /** + * Stack Overflow + */ +// Create a new script element +var script = document.createElement('script'); + +// Set the `src` attribute of the new script element +script.src = "//code.jquery.com/jquery-latest.min.js"; + +// Append the new script element to the head element of the page +document.head.appendChild(script); + +// Change the `background-color` of all paragraph elements +$("p").css("background-color", "#000"); + +// Change the `font-family` of all paragraph elements +$("p").css("font-family", "Verdana"); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/challenge_solution/js/myscript.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/challenge_solution/js/myscript.js new file mode 100755 index 0000000..2ff22d7 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/challenge_solution/js/myscript.js @@ -0,0 +1,4 @@ +$(document).ready(function() { + $("tr:odd").addClass("odd"); + $("tr:even").addClass("even"); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/challenge_solution/table.html b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/challenge_solution/table.html new file mode 100755 index 0000000..4b7b3a7 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/challenge_solution/table.html @@ -0,0 +1,79 @@ + + + + + Table + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CountryPriceNutritionCategory
SpinachAmerica2890Veg
CarrotsFrance5675Veg
BrocolliBulgaria1270Veg
OrangeMorocco1550Fruit
TangerineCyprus1225Fruit
+ + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/video_solution/js/myscript.js b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/video_solution/js/myscript.js new file mode 100755 index 0000000..62ddb03 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/video_solution/js/myscript.js @@ -0,0 +1,3 @@ +$(document).ready(function() { + +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/video_solution/table.html b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/video_solution/table.html new file mode 100755 index 0000000..3e327a1 --- /dev/null +++ b/FromJavaScriptTojQuery-master/02-jQueryIntroduction/07-writing_our_first_jquery_script/video_solution/table.html @@ -0,0 +1,55 @@ + + + + + Table + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CountryPriceNutritionCategory
SpinachAmerica2890Veg
CarrotsFrance5675Veg
+ + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/.DS_Store b/FromJavaScriptTojQuery-master/03-jQueryEvents/.DS_Store new file mode 100644 index 0000000..e4e4754 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/.DS_Store differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/Cards-jquery.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/Cards-jquery.html new file mode 100755 index 0000000..5b521b9 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/Cards-jquery.html @@ -0,0 +1,75 @@ + + + + + + jQuery + + + + + +
+ +
+ html image +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. +

+ Button +
+
+
+ mysql image +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ python image +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ jquery image +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ django image +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ css image +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/script.js new file mode 100755 index 0000000..9d3944a --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/script.js @@ -0,0 +1,82 @@ +//waits until page is loaded first +$(document).ready(function(){ + + //applies colour red to paragraphs when clicked on + $("p").click(function(){ + $("p").css('color', 'red'); + }); + + //will add lightblue to h2 elements + $("h2").hover(function(){ + $("h2").css('background-color', 'lightblue'); + }); + + /* + this will apply larger font size to the active h2 element + by adding the h2_font_size class but + not the other h2 elements by removing class h2_font_size from them + */ + $("#hr_html").hover(function(){ + $("#hr_mysql").css('font-size', '1em'); + $("#hr_python").css('font-size', '1em'); + $("#hr_jquery").css('font-size', '1em'); + $("#hr_django").css('font-size', '1em'); + $("#hr_css").css('font-size', '1em'); + $("#hr_html").css('font-size', '2em'); + }); + + $("#hr_mysql").hover(function(){ + $("#hr_mysql").css('font-size', '2em'); + $("#hr_python").css('font-size', '1em'); + $("#hr_jquery").css('font-size', '1em'); + $("#hr_django").css('font-size', '1em'); + $("#hr_css").css('font-size', '1em'); + $("#hr_html").css('font-size', '1em'); + }); + + $("#hr_python").hover(function(){ + $("#hr_mysql").css('font-size', '1em'); + $("#hr_python").css('font-size', '2em'); + $("#hr_jquery").css('font-size', '1em'); + $("#hr_django").css('font-size', '1em'); + $("#hr_css").css('font-size', '1em'); + $("#hr_html").css('font-size', '1em'); + }); + + $("#hr_jquery").hover(function(){ + $("#hr_mysql").css('font-size', '1em'); + $("#hr_python").css('font-size', '1em'); + $("#hr_jquery").css('font-size', '2em'); + $("#hr_django").css('font-size', '1em'); + $("#hr_css").css('font-size', '1em'); + $("#hr_html").css('font-size', '1em'); + }); + + $("#hr_django").hover(function(){ + $("#hr_mysql").css('font-size', '1em'); + $("#hr_python").css('font-size', '1em'); + $("#hr_jquery").css('font-size', '1em'); + $("#hr_django").css('font-size', '2em'); + $("#hr_css").css('font-size', '1em'); + $("#hr_html").css('font-size', '1em'); + }); + + $("#hr_css").hover(function(){ + $("#hr_mysql").css('font-size', '1em'); + $("#hr_python").css('font-size', '1em'); + $("#hr_jquery").css('font-size', '1em'); + $("#hr_django").css('font-size', '1em'); + $("#hr_css").css('font-size', '2em'); + $("#hr_html").css('font-size', '1em'); + }); + + //applies colour black to body background when mouse enters over buttons + $(".bottom_button").mouseenter(function(){ + $("body").css( "background-color", "black"); + }); + + //applies colour grey to body background when mouse leaves buttons + $(".bottom_button").mouseleave(function(){ + $("body").css( "background-color", "#eee"); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/style.css new file mode 100755 index 0000000..2435486 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/challenge_solution/style.css @@ -0,0 +1,139 @@ +body{ + font-family: 'Roboto', sans-serif; + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} +h2{ + font-size: 1em; + text-align: left; +} +p{ + font-size: .9rem; +} +p.text{ + background-color: red; +} + +div{ + border-radius: 4px; +} + +.card_image{ + width: 100%; +} +.bottom_button{ + display: flex;/*creates flex item*/ + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; + +} + +.card_bottom{ + display: flex; + flex-flow:column;/*sets flex direction*/ +} +.card_head{ + flex:0; +} +.card_para{ + flex:1 0 auto; +} + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +#logo{ + width: 800px; + margin: auto; +} + +.card{ + flex:1; /* equal width to cards applied*/ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +#my_footer{ + width:100%; + text-align: center; +} +#copyright{ + margin-top:10px; + margin-bottom:10px; + +} + +/************************* +Navigation + +**************************/ + +nav{ + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} +ul{ + display: flex;/*assigns as a flex container*/ + justify-content:space-between; + flex-flow: row;/*direction of flex*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} +li{ + flex:1;/*sets equal width to flex items*/ + height: 30px; + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav{ + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + +/*for desktop layout*/ +@media screen and (max-width: 700px){ + ul{ + flex-flow: column; + align-items:center; + } + li{ + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/Cards-jquery.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/Cards-jquery.html new file mode 100755 index 0000000..e0b780b --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/script.js new file mode 100755 index 0000000..1ca15bb --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/script.js @@ -0,0 +1,20 @@ +$(document).ready(function() { + $("#stream1_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream1").addClass('highlight_stream'); + }); + $("#stream2_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream2").addClass('highlight_stream'); + }); + $("#stream3_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream3").addClass('highlight_stream'); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/style.css new file mode 100755 index 0000000..3a72481 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/02-events_in_jquery/video_solution/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/Cards-jquery.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/Cards-jquery.html new file mode 100755 index 0000000..a378acb --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+ +
+ + + + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/script.js new file mode 100755 index 0000000..a9ac22f --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/script.js @@ -0,0 +1,6 @@ +$(document).ready(function() { + $("#button_effects1").click(function(){ + $('#button_effects1').hide('slow'); + + }); +}); diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/style.css new file mode 100755 index 0000000..df22219 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/03-jquery_effects/challenge_solution/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1 { + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/Cards-jquery.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/Cards-jquery.html new file mode 100755 index 0000000..3c2b1c0 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/script.js new file mode 100755 index 0000000..e7b53c9 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/script.js @@ -0,0 +1,20 @@ +$(document).ready(function() { + $("#button_effects1").click(function(){ + $('#par1').toggle(1000); + }); + $("#button_effects2").click(function(){ + $('#par2').toggle(1000); + }); + $("#button_effects3").click(function(){ + $('#par3').toggle(1000); + }); + $("#button_effects4").click(function(){ + $('#par4').toggle(1000); + }); + $("#button_effects5").click(function(){ + $('#par5').toggle(1000); + }); + $("#button_effects6").click(function(){ + $('#par6').toggle(1000); + }); +}); diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/style.css new file mode 100755 index 0000000..3a72481 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/04-jquery_effects_challenge_2/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/Cards-jquery.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/Cards-jquery.html new file mode 100755 index 0000000..3c2b1c0 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/script.js new file mode 100755 index 0000000..0a90b0c --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/script.js @@ -0,0 +1,20 @@ +$(document).ready(function() { + $("#button_effects1").click(function(){ + $('#par1').slideToggle(1000); + }); + $("#button_effects2").click(function(){ + $('#par2').slideToggle(1000); + }); + $("#button_effects3").click(function(){ + $('#par3').slideToggle(1000); + }); + $("#button_effects4").click(function(){ + $('#par4').slideToggle(1000); + }); + $("#button_effects5").click(function(){ + $('#par5').slideToggle(1000); + }); + $("#button_effects6").click(function(){ + $('#par6').slideToggle(1000); + }); +}); diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/style.css new file mode 100755 index 0000000..df22219 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/05-jquery_effects_challenge_3/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1 { + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/Cards-jquery.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/Cards-jquery.html new file mode 100755 index 0000000..3c2b1c0 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/script.js new file mode 100755 index 0000000..cd1deda --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/script.js @@ -0,0 +1,67 @@ +$(document).ready(function() { + // Create the slideToggle effects each of the paragraphs and + // buttons + $("#button_effects1").click(function(){ + $('#par1').slideToggle(1000); + }); + $("#button_effects2").click(function(){ + $('#par2').slideToggle(1000); + }); + $("#button_effects3").click(function(){ + $('#par3').slideToggle(1000); + }); + $("#button_effects4").click(function(){ + $('#par4').slideToggle(1000); + }); + $("#button_effects5").click(function(){ + $('#par5').slideToggle(1000); + }); + $("#button_effects6").click(function(){ + $('#par6').slideToggle(1000); + }); + + // Use the fadeTo effect when the mouse hovers over a specific button + // and fadeTo again when the mouse is no longer hovering over the button + $("#button_effects1").mouseenter(function(){ + $('#button_effects1').fadeTo(1000, 0.5); + }); + $("#button_effects1").mouseleave(function(){ + $('#button_effects1').fadeTo(1000, 1); + }); + + $("#button_effects2").mouseenter(function(){ + $('#button_effects2').fadeTo(1000, 0.5); + }); + $("#button_effects2").mouseleave(function(){ + $('#button_effects2').fadeTo(1000, 1); + }); + + $("#button_effects3").mouseenter(function(){ + $('#button_effects3').fadeTo(1000, 0.5); + }); + $("#button_effects3").mouseleave(function(){ + $('#button_effects3').fadeTo(1000, 1); + }); + + $("#button_effects4").mouseenter(function(){ + $('#button_effects4').fadeTo(1000, 0.5); + }); + $("#button_effects4").mouseleave(function(){ + $('#button_effects4').fadeTo(1000, 1); + }); + + $("#button_effects5").mouseenter(function(){ + $('#button_effects5').fadeTo(1000, 0.5); + }); + $("#button_effects5").mouseleave(function(){ + $('#button_effects5').fadeTo(1000, 1); + }); + + $("#button_effects6").mouseenter(function(){ + $('#button_effects6').fadeTo(1000, 0.5); + }); + $("#button_effects6").mouseleave(function(){ + $('#button_effects6').fadeTo(1000, 1); + }); + +}); diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/style.css new file mode 100755 index 0000000..df22219 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/06-jquery_effects_challenge_4/style.css @@ -0,0 +1,157 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1 { + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/button.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/button.html new file mode 100755 index 0000000..eef112a --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/button.html @@ -0,0 +1,22 @@ + + + + + + jQuery + + + +
+
+ +

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+
+
+ + + + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/css/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/css/style.css new file mode 100755 index 0000000..cd9b73a --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/css/style.css @@ -0,0 +1,59 @@ + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; + +} + +.card_bottom{ + display: flex; + flex-flow:column; +} + +.card{ + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + max-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + + +/************************* +Navigation + +**************************/ + + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + +.makeRed{ + background-color: red; +} + +.makeBorder{ + border:2px; +} diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/js/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/js/script.js new file mode 100755 index 0000000..a7748cc --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/Sample-Site/js/script.js @@ -0,0 +1,12 @@ +$(document).ready(function() { + // + // add your jQuery code here +$("#button1").mouseenter(function(){ +$('#button1').removeClass("makeRed").addClass("makeBorder"); +}); + +$("#button1").mouseleave(function(){ +$("#button1").removeClass("makeBorder").addClass("makeRed"); +}); + +}); diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/button.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/button.html new file mode 100755 index 0000000..eef112a --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/button.html @@ -0,0 +1,22 @@ + + + + + + jQuery + + + +
+
+ +

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+
+
+ + + + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/css/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/css/style.css new file mode 100755 index 0000000..cd9b73a --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/css/style.css @@ -0,0 +1,59 @@ + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; + +} + +.card_bottom{ + display: flex; + flex-flow:column; +} + +.card{ + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + max-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + + +/************************* +Navigation + +**************************/ + + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + +.makeRed{ + background-color: red; +} + +.makeBorder{ + border:2px; +} diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/js/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/js/script.js new file mode 100755 index 0000000..83da8de --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/challenge_solution/js/script.js @@ -0,0 +1,6 @@ +$(document).ready(function() { + + + + +}); diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/Cards-jquery.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/Cards-jquery.html new file mode 100755 index 0000000..3c2b1c0 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/Cards-jquery.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/script.js new file mode 100755 index 0000000..f184a9e --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/script.js @@ -0,0 +1,70 @@ +$(document).ready(function() { + // Create the slideToggle effects each of the paragraphs and + // buttons + $("#button_effects1").click(function(){ + $('#par1').slideToggle('1000'); + }); + $("#button_effects2").click(function(){ + $('#par2').slideToggle('1000'); + }); + $("#button_effects3").click(function(){ + $('#par3').slideToggle('1000'); + }); + $("#button_effects4").click(function(){ + $('#par4').slideToggle('1000'); + }); + $("#button_effects5").click(function(){ + $('#par5').slideToggle('1000'); + }); + $("#button_effects6").click(function(){ + $('#par6').slideToggle('1000'); + }); + + // Use the fadeTo effect when the mouse hovers over a specific button + // and fadeTo again when the mouse is no longer hovering over the button + $("#button_effects1").mouseenter(function(){ + $('#button_effects1').fadeTo(1000, 0.5); + }); + $("#button_effects1").mouseleave(function(){ + $('#button_effects1').fadeTo(1000, 1); + }); + + $("#button_effects2").mouseenter(function(){ + $('#button_effects2').fadeTo(1000, 0.5); + }); + $("#button_effects2").mouseleave(function(){ + $('#button_effects2').fadeTo(1000, 1); + }); + + $("#button_effects3").mouseenter(function(){ + $('#button_effects3').fadeTo(1000, 0.5); + }); + $("#button_effects3").mouseleave(function(){ + $('#button_effects3').fadeTo(1000, 1); + }); + + $("#button_effects4").mouseenter(function(){ + $('#button_effects4').fadeTo(1000, 0.5); + }); + $("#button_effects4").mouseleave(function(){ + $('#button_effects4').fadeTo(1000, 1); + }); + + $("#button_effects5").mouseenter(function(){ + $('#button_effects5').fadeTo(1000, 0.5); + }); + $("#button_effects5").mouseleave(function(){ + $('#button_effects5').fadeTo(1000, 1); + }); + + $("#button_effects6").mouseenter(function(){ + $('#button_effects6').fadeTo(1000, 0.5); + }); + $("#button_effects6").mouseleave(function(){ + $('#button_effects6').fadeTo(1000, 1); + }); + + $("#myButton").removeClass("blueBox").addClass("border"); + $("p").css("color", "blue").slideUp(2000).slideDown(2000); + $("a").attr("href", "http://www.example.com"); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/style.css new file mode 100755 index 0000000..05244da --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/07-method_chaining/video_solution/style.css @@ -0,0 +1,156 @@ +body { + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1 { + font-size: 3em; + text-align: center; +} + +h2 { + font-size: 1em; + text-align: left; +} + +p { + font-size: .9rem; +} + +div { + border-radius: 4px; +} + +.card_image { + width: 100%; +} + +.bottom_button { + display: flex; + box-sizing:border-box; + border-radius: 4px; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom { + display: flex; + flex-flow:column; +} + +.card_head { + flex:0; +} + +.card_para { + flex:1 0 auto; +} + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +#logo { + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight_stream { + background-color: #EB5255; +} + +#my_footer { + width:100%; + text-align: center; +} + +#copyright { + margin-top:10px; + margin-bottom:10px; +} + +/************************* +Navigation +**************************/ + +nav { + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul { + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li { + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav { + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline { + text-decoration:underline; +} + +.border { + border: solid 5px #ccc; +} + +@media screen and (max-width: 700px) { + ul { + flex-flow: column; + align-items:center; + } + + li { + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Cards-jquery.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Cards-jquery.html new file mode 100755 index 0000000..bc7e244 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Cards-jquery.html @@ -0,0 +1,71 @@ + + + + + + jQuery + + + + + +
+ +
+ HTML logo +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ MySql logo +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ Python logo +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ jQuery logo +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ Django logo +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ CSS logo +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/Cards-jquery.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/Cards-jquery.html new file mode 100755 index 0000000..5d32bf1 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/Cards-jquery.html @@ -0,0 +1,23 @@ + + + + + + jQuery + + + + + +
+
+ +

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+
+
+ + + + + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/button.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/button.html new file mode 100755 index 0000000..eef112a --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/button.html @@ -0,0 +1,22 @@ + + + + + + jQuery + + + +
+
+ +

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+
+
+ + + + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/css/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/css/style.css new file mode 100755 index 0000000..c596fc4 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/css/style.css @@ -0,0 +1,54 @@ + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; + +} + +.card_bottom{ + display: flex; + flex-flow:column; +} + +.card{ + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + max-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + + +/************************* +Navigation + +**************************/ + + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/js/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/js/script.js new file mode 100755 index 0000000..35ca5cf --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/Sample-Site/js/script.js @@ -0,0 +1,8 @@ +$(document).ready(function() { + // + // add your jQuery code here + $("button").click(function() { + $("p").slideToggle(2000); +}); + +}); diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/css/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/css/style.css new file mode 100755 index 0000000..c95edce --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/css/style.css @@ -0,0 +1,158 @@ +body{ + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} +h2{ + font-size: 1em; + text-align: left; +} +p{ + font-size: .9rem; +} + +div{ + border-radius: 4px; +} + +.card_image{ + width: 100%; +} +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; + +} + +.card_bottom{ + display: flex; + flex-flow:column; +} +.card_head{ + flex:0; +} +.card_para{ + flex:1 0 auto; +} + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +#logo{ + width: 800px; + margin: auto; +} + +.card{ + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} +.highlight_stream{ + background-color: #EB5255; +} + +#my_footer{ + width:100%; + text-align: center; +} +#copyright{ + margin-top:10px; + margin-bottom:10px; + +} + +/************************* +Navigation + +**************************/ + +nav{ + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} +ul{ + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} +li{ + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav{ + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + + +@media screen and (max-width: 700px){ + ul{ + flex-flow: column; + align-items:center; + } + li{ + font-size: 2em; + } +} + +.makeRed{ + background-color: red; +} + +.makeBorder{ + border:2px; +} \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/js/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/js/script.js new file mode 100755 index 0000000..186b4a3 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/08-method_chaining_challenge_2/js/script.js @@ -0,0 +1,40 @@ +$(document).ready(function() { + + + $("#stream1_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream1").addClass('highlight_stream'); + }); + $("#stream2_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream2").addClass('highlight_stream'); + }); + $("#stream3_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream3").addClass('highlight_stream'); + }); + + // removes class makeRed, adds class makeBorder on mouseenter + $("button").mouseenter(function() { + $(this).removeClass("makeRed").addClass("makeBorder"); + }); + + $("button").mouseleave(function() { + $("button").removeClass("makeBorder").addClass("makeRed"); + }); + + $("button").click(function() { + $("p").slideToggle(2000); + }); + + // hides/shows paragraphs when either button is clicked + $("button").click(function() { + $("p").hide(2000).show(2000); + }); +}); diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Cards-jquery.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Cards-jquery.html new file mode 100755 index 0000000..bc7e244 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Cards-jquery.html @@ -0,0 +1,71 @@ + + + + + + jQuery + + + + + +
+ +
+ HTML logo +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ MySql logo +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ Python logo +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ jQuery logo +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ Django logo +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ CSS logo +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/button.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/button.html new file mode 100755 index 0000000..9501120 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/button.html @@ -0,0 +1,24 @@ + + + + + + jQuery + + + +
+
+ +

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+
+
+ + + + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/css/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/css/style.css new file mode 100755 index 0000000..5f6c63d --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/css/style.css @@ -0,0 +1,53 @@ + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; + +} + +.card_bottom{ + display: flex; + flex-flow:column; +} + +.card{ + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + max-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + + +/************************* +Navigation + +**************************/ + + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/js/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/js/script.js new file mode 100755 index 0000000..f48b1f2 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/Sample-Site/js/script.js @@ -0,0 +1,13 @@ +$(document).ready(function() { + // + // add your jQuery code here + // hides/shows paragraphs when either button is clicked + $("button").click(function() { + $("p").hide(2000).show(2000); + }); + + $("button").click(function(){ + $("p").fadeIn().fadeOut(); + }); + +}); diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/css/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/css/style.css new file mode 100755 index 0000000..c95edce --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/css/style.css @@ -0,0 +1,158 @@ +body{ + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} +h2{ + font-size: 1em; + text-align: left; +} +p{ + font-size: .9rem; +} + +div{ + border-radius: 4px; +} + +.card_image{ + width: 100%; +} +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; + +} + +.card_bottom{ + display: flex; + flex-flow:column; +} +.card_head{ + flex:0; +} +.card_para{ + flex:1 0 auto; +} + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +#logo{ + width: 800px; + margin: auto; +} + +.card{ + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} +.highlight_stream{ + background-color: #EB5255; +} + +#my_footer{ + width:100%; + text-align: center; +} +#copyright{ + margin-top:10px; + margin-bottom:10px; + +} + +/************************* +Navigation + +**************************/ + +nav{ + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} +ul{ + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} +li{ + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav{ + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + + +@media screen and (max-width: 700px){ + ul{ + flex-flow: column; + align-items:center; + } + li{ + font-size: 2em; + } +} + +.makeRed{ + background-color: red; +} + +.makeBorder{ + border:2px; +} \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/js/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/js/script.js new file mode 100755 index 0000000..13abe1c --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/09-method_chaining_challenge_3/js/script.js @@ -0,0 +1,42 @@ +$(document).ready(function() { + $("#stream1_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream1").addClass('highlight_stream'); + }); + $("#stream2_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream2").addClass('highlight_stream'); + }); + $("#stream3_btn").on("click", function() { + $(".stream1").removeClass('highlight_stream'); + $(".stream2").removeClass('highlight_stream'); + $(".stream3").removeClass('highlight_stream'); + $(".stream3").addClass('highlight_stream'); + }); + + // removes class makeRed, adds class makeBorder on mouseenter + $("button").mouseenter(function() { + $(this).removeClass("makeRed").addClass("makeBorder"); + }); + + $("button").mouseleave(function() { + $("button").removeClass("makeBorder").addClass("makeRed"); + }); + + $("button").click(function() { + $("p").slideToggle(2000); + }); + + // hides/shows paragraphs when either button is clicked + $("button").click(function() { + $("p").hide(2000).show(2000); + }); + + $("button").click(function(){ + $("p").fadeIn().fadeOut(); + }); +}); diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/cards.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/cards.html new file mode 100755 index 0000000..ef1ee14 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/cards.html @@ -0,0 +1,70 @@ + + + + + + jQuery + + + + + +
+ +
+ coding icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+ +
+ coding icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ Button +
+
+ coding icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ Button +
+
+
+ coding icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+
+ coding icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ Button +
+ +
+ + + + + diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/css/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/css/style.css new file mode 100755 index 0000000..e145b26 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/css/style.css @@ -0,0 +1,148 @@ +body{ + font-family: 'Roboto', sans-serif; + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} +h2{ + font-size: 1em; + text-align: left; +} +p{ + font-size: .9rem; +} + +div{ + border-radius: 4px; +} + +.card_image{ + width: 100%; +} + +.bottom_button{ + display: flex; + box-sizing: border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color: rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom{ + display: flex; + flex-flow: column; +} + +.card_head{ + flex: 0; +} + +.card_para{ + flex: 1 0 auto; +} + +#container{ + display: flex; + flex-flow: row wrap; + box-sizing: border-box; + margin-right: auto; + margin-left: auto; + max-width: 1050px; +} + +#logo{ + width: 800px; + margin: auto; +} + +.card{ + flex: 1; + display: flex; + flex-flow: column; + min-width: 240px; + margin: 10px; + padding: 20px; + background-color: #fff; +} + +#my_footer{ + width: 100%; + text-align: center; +} +#copyright{ + margin-top: 10px; + margin-bottom: 10px; + +} + +/************************* +Navigation +**************************/ + +nav{ + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} + +ul{ + display: flex; + justify-content: space-between; + flex-flow: row; + align-items: baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} + +li{ + flex: 1; + height: 30px; + font-family: Dosis; + padding: 20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav{ + flex: 6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline{ + text-decoration: underline; +} + +.border{ + border: solid 5px #ccc; +} + +.stream-nav{ + cursor: pointer; +} + +.card-highlight{ + background-color: rgb(235, 82, 85); +} + +/*for desktop navigation*/ +@media screen and (max-width: 700px){ + ul{ + flex-flow: column; + align-items:center; + } + li{ + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/1.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/1.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/2.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/2.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/3.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/3.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/4.png b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/4.png differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/code-institute.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-1.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-2.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-3.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-4.jpg b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/img/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/js/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/js/script.js new file mode 100755 index 0000000..77a51ca --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/challenge_solution/js/script.js @@ -0,0 +1,13 @@ +$(".stream-nav").on("click", function() { + // A selector to match all cards in all streams + var allStreamsCardsSelector = ".card"; + // A selector to match just this stream's cards + // for this, we use the class with the name of the stream, + // which is the same as this nav link's id and then the "-card" suffix. + var thisStreamCardsSelector = "." + this.id + "-card"; + + // First remove the highlight from all of the cards + $(allStreamsCardsSelector).removeClass("card-highlight"); + // Then apply the highlight to just this stream's cards + $(thisStreamCardsSelector).addClass("card-highlight"); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/hiding_paragraphs/index.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/hiding_paragraphs/index.html new file mode 100755 index 0000000..88f576a --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/hiding_paragraphs/index.html @@ -0,0 +1,25 @@ + + + + + + jQuery + + + + +
+
+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+
+
+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+
+
+ + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/hiding_paragraphs/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/hiding_paragraphs/script.js new file mode 100755 index 0000000..9bee026 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/hiding_paragraphs/script.js @@ -0,0 +1,3 @@ +$('p').click(function() { + $(this).slideToggle('slow'); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/hiding_paragraphs/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/hiding_paragraphs/style.css new file mode 100755 index 0000000..078e477 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/hiding_paragraphs/style.css @@ -0,0 +1,19 @@ + +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + max-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/css/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/css/style.css new file mode 100755 index 0000000..09b4c1e --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/css/style.css @@ -0,0 +1,17 @@ +.container { + display: flex; + flex-flow: row wrap; + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +.box { + flex:1; + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; + min-width: 240px; + margin: 10px; + padding: 20px; + background-color: #000; +} \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/index.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/index.html new file mode 100755 index 0000000..016ccb8 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/index.html @@ -0,0 +1,36 @@ + + + + + + + + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/js/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/js/script.js new file mode 100755 index 0000000..7310531 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/if_statements/js/script.js @@ -0,0 +1,22 @@ +$(document).ready(function() { + $(".box").on("click", function() { + /** + * When we click on an element that has + * a 'box' class, this event will be fired. + */ + var classNames = $(this).attr("class").split(" "); + var boxClass = classNames[0]; + var className = classNames[1]; + if ($(this).css("background-color") == "rgb(255, 0, 0)") { + // If this object is already red, turn it black + $("." + className).css("background-color", "#000"); + } else { + // Else turn all elements with a box class black + // and then change the color of all elements + // with the same class name as the clicked element + // to red. + $("." + boxClass).css("background-color", "#000"); + $("." + className).css("background-color", "red"); + } + }); +}) \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/mouseenter_and_mouseleave/index.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/mouseenter_and_mouseleave/index.html new file mode 100755 index 0000000..bc5ebb4 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/mouseenter_and_mouseleave/index.html @@ -0,0 +1,25 @@ + + + + + + jQuery + + + + +
+
+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/mouseenter_and_mouseleave/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/mouseenter_and_mouseleave/script.js new file mode 100755 index 0000000..b914646 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/mouseenter_and_mouseleave/script.js @@ -0,0 +1,7 @@ +$('button').mouseenter(function() { + $(this).removeClass('makeRed').addClass('makeBlue'); +}); + +$('button').mouseleave(function() { + $(this).removeClass('makeBlue').addClass('makeRed'); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/mouseenter_and_mouseleave/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/mouseenter_and_mouseleave/style.css new file mode 100755 index 0000000..81e341d --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/mouseenter_and_mouseleave/style.css @@ -0,0 +1,26 @@ +#container { + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + max-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.makeRed { + background-color: red; +} + +.makeBlue { + background-color: blue; +} \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/red_and_black_boxes/css/style.css b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/red_and_black_boxes/css/style.css new file mode 100755 index 0000000..e12ff40 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/red_and_black_boxes/css/style.css @@ -0,0 +1,18 @@ +.container { + display: flex; + flex-flow: row wrap; + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} + +.box { + flex:1; + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; + min-width: 240px; + margin: 10px; + padding: 20px; + background-color: #000; +} \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/red_and_black_boxes/index.html b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/red_and_black_boxes/index.html new file mode 100755 index 0000000..016ccb8 --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/red_and_black_boxes/index.html @@ -0,0 +1,36 @@ + + + + + + + + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/red_and_black_boxes/js/script.js b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/red_and_black_boxes/js/script.js new file mode 100755 index 0000000..6d77f9a --- /dev/null +++ b/FromJavaScriptTojQuery-master/03-jQueryEvents/10-the_importance_of_this/red_and_black_boxes/js/script.js @@ -0,0 +1,10 @@ +$(document).ready(function() { + $(".box").on("click", function() { + /** + * When we click on an element that has + * a 'box' class, this event will be fired. + */ + var classNames = $(this).attr("class").split(" "); + $("." + classNames[1]).css("background-color", "red"); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/01-jquery_traversing_mt_dom/button.html b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/01-jquery_traversing_mt_dom/button.html new file mode 100755 index 0000000..e69de29 diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/01-jquery_traversing_mt_dom/css/style.css b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/01-jquery_traversing_mt_dom/css/style.css new file mode 100755 index 0000000..1fa9785 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/01-jquery_traversing_mt_dom/css/style.css @@ -0,0 +1,61 @@ +.container{ + display: inline-block; + vertical-align: top; + font-size: 0px; + } + .theButton { + height: 80px; + width: 266px; + border-radius: 8px; + text-align: center; + background-color: #555; + color: #FFF; + font-family: dosis; + font-size: 30px; + padding-top: 30px; + /* display: none;*/ + border: solid 2px #fff; /* border used to stop jump when border is applied*/ + } + .superButton { + height: 80px; + width: 100%; + border-radius: 8px; + text-align: center; + background-color: #555; + color: #FFF; + font-family: dosis; + font-size: 30px; + padding-top: 30px; + /* display: none;*/ + border: solid 2px #fff; /* border used to stop jump when border is applied*/ + } + + p{ + font-family: dosis; + font-size: 20px; + margin-left: 10px; + width:240px; + } + .makeBlue{ + background-color: #81BBC9; + } + + .makeBorder{ + border: solid 2px #000; + } + .makeTextBlack{ + color: #000; + } + .green{ + background-color: green; + } + .red{ + background-color: red; + } + .blue{ + background-color: blue; + } + .selected{ + background-color: #F07D00; + } + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/01-jquery_traversing_mt_dom/js/script.js b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/01-jquery_traversing_mt_dom/js/script.js new file mode 100755 index 0000000..ba2be1d --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/01-jquery_traversing_mt_dom/js/script.js @@ -0,0 +1,3 @@ +$(document).ready(function() { + // put your code here +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/css/style.css b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/css/style.css new file mode 100755 index 0000000..f10e76a --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/css/style.css @@ -0,0 +1,147 @@ +body{ + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} +h2{ + font-size: 1em; + text-align: left; +} +p{ + font-size: .9rem; +} + +div{ + border-radius: 4px; +} + +.card_image{ + width: 100%; +} +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; + +} + +.card_bottom{ + display: flex; + flex-flow:column; +} +.card_head{ + flex:0; +} +.card_para{ + flex:1 0 auto; +} + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +#logo{ + width: 800px; + margin: auto; +} + +.card{ + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +#my_footer{ + width:100%; + text-align: center; +} +#copyright{ + margin-top:10px; + margin-bottom:10px; + +} + +/************************* +Navigation + +**************************/ + +nav{ + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} +ul{ + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} +li{ + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav{ + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + + +@media screen and (max-width: 700px){ + ul{ + flex-flow: column; + align-items:center; + } + li{ + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/1.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/1.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/2.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/2.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/3.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/3.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/4.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/4.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/code-institute.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-1.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-2.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-3.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-4.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/images/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/js/script.js b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/js/script.js new file mode 100755 index 0000000..1f857ff --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/js/script.js @@ -0,0 +1,8 @@ +//wait until page is ready +$(document).ready(function() { + //sets element within paragraph to yellow + $("p").click(function(){ + $(this).children("a").css("background-color", "yellow"); /* returns all the child elements that are + within this paragraph*/ + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/traversing_mt_dom.html b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/traversing_mt_dom.html new file mode 100755 index 0000000..ec7d574 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/02-traversing_up_and_down_the_dom_tree/traversing_mt_dom.html @@ -0,0 +1,73 @@ + + + + + + jQuery Traversing Mt Dom + + + + + +
+ +
+ code icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ code icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+ +
+ code icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+ code icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ code icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+ code icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/css/style.css b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/css/style.css new file mode 100755 index 0000000..f10e76a --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/css/style.css @@ -0,0 +1,147 @@ +body{ + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} +h2{ + font-size: 1em; + text-align: left; +} +p{ + font-size: .9rem; +} + +div{ + border-radius: 4px; +} + +.card_image{ + width: 100%; +} +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; + +} + +.card_bottom{ + display: flex; + flex-flow:column; +} +.card_head{ + flex:0; +} +.card_para{ + flex:1 0 auto; +} + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +#logo{ + width: 800px; + margin: auto; +} + +.card{ + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +#my_footer{ + width:100%; + text-align: center; +} +#copyright{ + margin-top:10px; + margin-bottom:10px; + +} + +/************************* +Navigation + +**************************/ + +nav{ + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} +ul{ + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} +li{ + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav{ + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + + +@media screen and (max-width: 700px){ + ul{ + flex-flow: column; + align-items:center; + } + li{ + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/1.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/1.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/2.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/2.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/3.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/3.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/4.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/4.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/code-institute.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-1.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-2.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-3.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-4.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/images/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/index.html b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/index.html new file mode 100755 index 0000000..ec7d574 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/index.html @@ -0,0 +1,73 @@ + + + + + + jQuery Traversing Mt Dom + + + + + +
+ +
+ code icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ code icon +

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+ +
+ code icon +

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+ code icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ code icon +

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+ code icon +

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/js/script.js b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/js/script.js new file mode 100755 index 0000000..0a907a8 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/js/script.js @@ -0,0 +1,13 @@ +//wait until page is ready +$(document).ready(function() { + //sets element within paragraph to yellow + $("p").click(function(){ + $(this).children("a").css("background-color", "yellow"); /* returns all the child elements that are + within this paragraph*/ + }); + + // Toggle the visibility of the paragraph when a button is clicked + $("button").click(function(){ + $(this).next().slideToggle('slow'); + }); +}); diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/css/style.css b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/css/style.css new file mode 100755 index 0000000..e855a89 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/css/style.css @@ -0,0 +1,148 @@ +body{ + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} +h2{ + font-size: 1em; + text-align: left; +} +p{ + font-size: .9rem; +} + +div{ + border-radius: 4px; +} + +.card_image{ + width: 100%; +} +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; + +} + +.card_bottom{ + display: flex; + flex-flow:column; +} +.card_head{ + flex:0; +} +.card_para{ + flex:1 0 auto; + display: none; +} + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +#logo{ + width: 800px; + margin: auto; +} + +.card{ + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +#my_footer{ + width:100%; + text-align: center; +} +#copyright{ + margin-top:10px; + margin-bottom:10px; + +} + +/************************* +Navigation + +**************************/ + +nav{ + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} +ul{ + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} +li{ + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav{ + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + + +@media screen and (max-width: 700px){ + ul{ + flex-flow: column; + align-items:center; + } + li{ + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/1.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/1.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/2.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/2.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/3.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/3.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/4.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/4.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/code-institute.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-1.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-2.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-3.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-4.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/images/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/index.html b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/index.html new file mode 100755 index 0000000..8696d57 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/index.html @@ -0,0 +1,81 @@ + + + + + + jQuery Traversing Mt Dom + + + + + +
+ +
+ code icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ code icon +
+

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+ +
+ code icon +
+

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+
+ code icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ code icon +
+

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+
+ code icon +
+

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/js/script.js b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/js/script.js new file mode 100755 index 0000000..2d59975 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/04-traversing_sideways_challenge_2/js/script.js @@ -0,0 +1,18 @@ +//wait until page is ready +$(document).ready(function() { + //sets element within paragraph to yellow + $("p").click(function(){ + $(this).children("a").css("background-color", "yellow"); /* returns all the child elements that are + within this paragraph*/ + }); + + // Toggle the visibility of the paragraph when a button is clicked + $("button").click(function(){ + $(this).prev().slideToggle('slow'); + }); + + // Open the paragraph once the image is clicked + $("img").click(function() { + $(this).next().children("p").slideDown(); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/css/style.css b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/css/style.css new file mode 100755 index 0000000..bd4617d --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/css/style.css @@ -0,0 +1,152 @@ +body{ + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} +h2{ + font-size: 1em; + text-align: left; +} +p{ + font-size: .9rem; +} + +div{ + border-radius: 4px; +} + +.card_image{ + width: 100%; +} + +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom{ + display: flex; + flex-flow:column; +} +.card_head{ + flex:0; +} +.card_para{ + flex:1 0 auto; + display: none; +} + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +#logo{ + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight{ + background-color: pink; +} + +#my_footer{ + width:100%; + text-align: center; +} +#copyright{ + margin-top:10px; + margin-bottom:10px; + +} + +/************************* +Navigation + +**************************/ + +nav{ + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} +ul{ + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} +li{ + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav{ + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + + +@media screen and (max-width: 700px){ + ul{ + flex-flow: column; + align-items:center; + } + li{ + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/1.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/1.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/2.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/2.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/3.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/3.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/4.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/4.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/code-institute.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-1.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-2.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-3.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-4.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/images/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/index.html b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/index.html new file mode 100755 index 0000000..8696d57 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/index.html @@ -0,0 +1,81 @@ + + + + + + jQuery Traversing Mt Dom + + + + + +
+ +
+ code icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ code icon +
+

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+ +
+ code icon +
+

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+
+ code icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ code icon +
+

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+
+ code icon +
+

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/js/script.js b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/js/script.js new file mode 100755 index 0000000..01a0348 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/05-traversing_sideways_challenge_3/js/script.js @@ -0,0 +1,22 @@ +//wait until page is ready +$(document).ready(function() { + //sets element within paragraph to yellow + $("p").click(function(){ + $(this).children("a").css("background-color", "yellow"); /* returns all the child elements that are + within this paragraph*/ + }); + + // Toggle the visibility of the paragraph when a button is clicked + $("button").click(function(){ + $(this).prev().slideToggle('slow'); + }); + + // Open the paragraph once the image is clicked + $("img").click(function() { + $(this).next().children("p").slideDown(); + }); + + $(".card").click(function() { + $(this).toggleClass("highlight"); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/css/style.css b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/css/style.css new file mode 100755 index 0000000..bd4617d --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/css/style.css @@ -0,0 +1,152 @@ +body{ + font-family: 'Roboto', sans-serif; + /*background-image: url(img/code-institute.jpg); + background-size: cover; + color: #ffffff;*/ + background-color: #eee; +} + +h1{ + font-size: 3em; + text-align: center; +} +h2{ + font-size: 1em; + text-align: left; +} +p{ + font-size: .9rem; +} + +div{ + border-radius: 4px; +} + +.card_image{ + width: 100%; +} + +.bottom_button{ + display: flex; + box-sizing:border-box; + border-radius: 4px; + display: block; + width: 100%; + background-color:rgba(129, 187, 201,.85); + text-align: center; + padding: 1em .75em; + text-decoration: none; + color: #fff; +} + +.card_bottom{ + display: flex; + flex-flow:column; +} +.card_head{ + flex:0; +} +.card_para{ + flex:1 0 auto; + display: none; +} + +#container +{ + display: flex; /* makes container a flexbox*/ + flex-flow: row wrap; /* layout the boxes in rows and wrap them*/ + box-sizing:border-box; + margin-right:auto; + margin-left:auto; + max-width:1050px; +} +#logo{ + width: 800px; + margin: auto; +} + +.card { + flex:1; /* */ + display: flex; /* make the contents controllable by flexbox*/ + flex-flow:column; /* */ + min-width: 240px; /**/ + margin: 10px; + padding: 20px; + background-color: #fff; +} + +.highlight{ + background-color: pink; +} + +#my_footer{ + width:100%; + text-align: center; +} +#copyright{ + margin-top:10px; + margin-bottom:10px; + +} + +/************************* +Navigation + +**************************/ + +nav{ + font-family: roboto; + background-color: #eee; + margin: 30px auto; + width: 100%; +} +ul{ + display: flex; + justify-content:space-between; + flex-flow: row; + /*flex-flow: row-reverse;*/ + /*justify-content:flex-end;*/ + /*justify-content:space-around;*/ + /*align-items:flex-start;*/ + align-items:baseline; + border-radius: 10px; + list-style-type: none; /*Remove Bullets*/ + padding: 0; +} +li{ + flex:1; + height: 30px; + /*width:10%;*/ + /*border:2px solid #000;*/ + /*background-color: #81BBC9;*/ + /*border-radius: 10px;*/ + font-family: Dosis; + padding:20px 20px 20px 20px; + text-align: center; + font-size: 1.3em; +} + +#logoNav{ + flex:6; + text-align: left; + font-size: 2em; + font-weight: bold; +} + +.underline{ + text-decoration:underline; +} +.border{ + border: solid 5px #ccc; +} + + +@media screen and (max-width: 700px){ + ul{ + flex-flow: column; + align-items:center; + } + li{ + font-size: 2em; + } +} diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/1.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/1.png new file mode 100755 index 0000000..199a155 Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/1.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/2.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/2.png new file mode 100755 index 0000000..ce35a1a Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/2.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/3.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/3.png new file mode 100755 index 0000000..7bdf0ed Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/3.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/4.png b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/4.png new file mode 100755 index 0000000..24bedda Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/4.png differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/code-institute.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/code-institute.jpg new file mode 100755 index 0000000..e29917c Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/code-institute.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-1.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-1.jpg new file mode 100755 index 0000000..5ae3f85 Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-1.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-2.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-2.jpg new file mode 100755 index 0000000..67590cb Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-2.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-3.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-3.jpg new file mode 100755 index 0000000..5b0577f Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-3.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-4.jpg b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-4.jpg new file mode 100755 index 0000000..fc3ec6c Binary files /dev/null and b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/images/slider-4.jpg differ diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/index.html b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/index.html new file mode 100755 index 0000000..2c26a72 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/index.html @@ -0,0 +1,83 @@ + + + + + + jQuery Traversing Mt Dom + + + + + +
+ +
+ code icon +
+

HTML

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ code icon +
+

MySql

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+ +
+ code icon +
+

Python

+

If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin

+ +
+
+
+ code icon +
+

jQuery

+

Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.

+ +
+
+
+ code icon +
+

Django

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+
+ code icon +
+

CSS

+

The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.

+ +
+
+ +
+ + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/js/script.js b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/js/script.js new file mode 100755 index 0000000..eefb5c3 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/06-traversing_sideways_challenge_4/js/script.js @@ -0,0 +1,32 @@ +//wait until page is ready +$(document).ready(function() { + //sets element within paragraph to yellow + $("p").click(function(){ + $(this).children("a").css("background-color", "yellow"); /* returns all the child elements that are + within this paragraph*/ + }); + + // Toggle the visibility of the paragraph when a button is clicked + $("button").click(function(){ + $(this).prev().slideToggle('slow'); + }); + + // Open the paragraph once the image is clicked + $("img").click(function() { + $(this).next().children("p").slideDown(); + }); + + $(".card").click(function() { + $(this).toggleClass("highlight"); + }); + + // All cards that are not currently selected will be hidden when `select_btn` is clicked + $("#select_btn").click(function() { + $(".card:not(.highlight)").hide(); + }); + + // Select all cards + $("#all_btn").click(function(){ + $(".card").show(); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/css/style.css b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/css/style.css new file mode 100755 index 0000000..bccb162 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/css/style.css @@ -0,0 +1,68 @@ +.container { + display: inline-block; + vertical-align: top; + font-size: 0px; +} + +.theButton { + height: 80px; + width: 266px; + border-radius: 8px; + text-align: center; + background-color: #555; + color: #FFF; + font-family: dosis; + font-size: 30px; + padding-top: 30px; + border: solid 2px #fff; /* border used to stop jump when border is applied*/ +} + +.superButton { + height: 80px; + width: 100%; + border-radius: 8px; + text-align: center; + background-color: #555; + color: #FFF; + font-family: dosis; + font-size: 30px; + padding-top: 30px; + /* display: none;*/ + border: solid 2px #fff; /* border used to stop jump when border is applied*/ +} + +p { + font-family: dosis; + font-size: 20px; + margin-left: 10px; + width:240px; +} + +.makeBlue { + background-color: #81BBC9; +} + +.makeBorder { + border: solid 2px #000; +} + +.green { + background-color: #008000; +} + +.red { + background-color: #FF0000; +} + +.blue { + background-color: #0000FF; +} + +.selected { + background-color: #F07D00; +} + +/*make sure to add after all other color classes to advoid cascade issues*/ +.makeBlack { + background-color: #000000; +} \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/index.html b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/index.html new file mode 100755 index 0000000..32dc42e --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/index.html @@ -0,0 +1,53 @@ + + + + Challenge A + + + + + + +
Reset
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/js/script.js b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/js/script.js new file mode 100755 index 0000000..2c815ff --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/js/script.js @@ -0,0 +1,34 @@ +//waits until page is ready +$(document).ready(function(){ + + //will need to comment out some code when trying to view effects on theeir own + //hides all panels when a panel is clicked + $(".theButton").click(function(){ + $("#panel .container").siblings().hide(); + }); + + //hides only the panel that was clicked + $(".theButton").click(function(){ + $(this).hide(); + }) + + //adds a fadeTo to all panels when a panel is clicked + $(".theButton").click(function(){ + $("#panel .container").siblings().fadeTo(1000, .5); + }); + + //restores all panels to full opacity when reset button clicked + $(".superButton").click(function(){ + $("#panel .container").siblings().fadeTo(1000,1); + }); + + //turns panel background black on mouseenter + $(".theButton").mouseenter(function(){ + $(this).addClass("makeBlack"); + }); + + //returns to original colour on mouseout + $(".theButton").mouseout(function(){ + $(this).removeClass("makeBlack"); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/08-other_traversing_methods_challenge_2/index.html b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/08-other_traversing_methods_challenge_2/index.html new file mode 100755 index 0000000..1c3c53a --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/08-other_traversing_methods_challenge_2/index.html @@ -0,0 +1,86 @@ + + + + + Challenge B + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CountryPriceNutritionCategory
SpinachAmerica2890Veg
CarrotsFrance5675Veg
BroccoliBulgaria1270Veg
OrangeMorocco1550Fruit
TangerineCyprus1225Fruit
+ + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/08-other_traversing_methods_challenge_2/js/script.js b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/08-other_traversing_methods_challenge_2/js/script.js new file mode 100755 index 0000000..acb73e4 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/08-other_traversing_methods_challenge_2/js/script.js @@ -0,0 +1,9 @@ +//will wait until page ready +$(document).ready(function() { + /*when table header is clicked , removes selection class from all other table rows and + adds the selection class to this table headers row only*/ + $("th").click(function(){ + $("tr").children().removeClass("selection"); + $(this).siblings().addClass("selection"); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/09-other_traversing_methods_challenge_3/css/style.css b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/09-other_traversing_methods_challenge_3/css/style.css new file mode 100755 index 0000000..e8a0151 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/09-other_traversing_methods_challenge_3/css/style.css @@ -0,0 +1,67 @@ +.container { + display: inline-block; + vertical-align: top; + font-size: 0px; +} + +.theButton { + height: 80px; + width: 266px; + border-radius: 8px; + text-align: center; + background-color: #555; + color: #FFF; + font-family: dosis; + font-size: 30px; + padding-top: 30px; + border: solid 2px #fff; /* border used to stop jump when border is applied*/ +} + +.superButton { + height: 80px; + width: 100%; + border-radius: 8px; + text-align: center; + background-color: #555; + color: #FFF; + font-family: dosis; + font-size: 30px; + padding-top: 30px; + /* display: none;*/ + border: solid 2px #fff; /* border used to stop jump when border is applied*/ +} + +p { + font-family: dosis; + font-size: 20px; + margin-left: 10px; + width:240px; +} + +.makeBlue { + background-color: #81BBC9; +} + +.makeBorder { + border: solid 2px #000; +} + +.green { + background-color: #008000; +} +.red { + background-color: #FF0000; +} + +.blue { + background-color: #0000FF; +} + +.selected{ + background-color: #F07D00; +} + +/*make sure to add after all other color classes to advoid cascade issues*/ +.makeBlack { + background-color: #000000; +} \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/09-other_traversing_methods_challenge_3/index.html b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/09-other_traversing_methods_challenge_3/index.html new file mode 100755 index 0000000..32dc42e --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/09-other_traversing_methods_challenge_3/index.html @@ -0,0 +1,53 @@ + + + + Challenge A + + + + + + +
Reset
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/09-other_traversing_methods_challenge_3/js/script.js b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/09-other_traversing_methods_challenge_3/js/script.js new file mode 100755 index 0000000..73cd393 --- /dev/null +++ b/FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/09-other_traversing_methods_challenge_3/js/script.js @@ -0,0 +1,8 @@ +//waits until page is ready +$(document).ready(function(){ + //will display rgb value of selected panel in the reset panel + $(".theButton").click(function() { + var col = $(this).css('background-color'); + $('.superButton').text( col); + }); +}); \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/jquery_learning_portal.html b/FromJavaScriptTojQuery-master/jquery_learning_portal.html new file mode 100644 index 0000000..b8b3010 --- /dev/null +++ b/FromJavaScriptTojQuery-master/jquery_learning_portal.html @@ -0,0 +1,540 @@ + + + + + + jQuery Learning Portal + + + +
+

jQuery Learning Portal

+

Interactive guide to learning jQuery with videos, exercises, and solutions

+
+ +
+
+
+

Module 1: From JavaScript to jQuery

+ + +
+
+

Videos to Watch:

+ JavaScript to jQuery.mp4 + +

Location:

+

01-FromJavaScriptTojQuery/03-manipulating_the_dom/

+ +

Exercises:

+
1. Examine index.html to understand the HTML structure
+
2. Review js/app.js and js/transcript.js to see pure JavaScript implementation
+
3. Identify areas where DOM manipulation could be simplified with jQuery
+
4. Note the difference in syntax and complexity between standard JS and what jQuery offers
+
+
+ +
+
+

Module 2: jQuery Introduction

+ + +
+
+

Videos to Watch:

+ jQuery Introduction.mp4 + 02-jQuery-selectors.mp4 + jQuery1.mp4 + +

Location:

+

02-jQueryIntroduction/

+ +
+

Sub-module 1: Downloading jQuery (02-downloading_jquery/)

+
Exercise: Examine Cards-jquery.html, script.js, and style.css to understand how to include jQuery in a project
+ +
+ 
// Example jQuery inclusion in HTML
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="script.js"></script>
+
+
+ +
+

Sub-module 2: jQuery Selectors (03-jquery_selectors/)

+

Video Solution: Review video_solution folder files to see jQuery selector examples

+

Challenge: Try the challenge_solution to practice selectors independently

+ +
+ 
// jQuery Selectors Examples
+$('#myId')          // Select by ID
+$('.myClass')       // Select by Class
+$('p')              // Select by Tag
+$('div p')          // Descendant Selector
+$('div > p')        // Child Selector
+$('input[type=text]') // Attribute Selector
+
+
+ +
+

Sub-module 3: Changing HTML/CSS (04-changing_html_and_css_with_jquery/)

+

Video Solution: Review video_solution folder files to see how to change HTML/CSS with jQuery

+

Challenge: Try the challenge_solution to practice HTML/CSS manipulation

+ +
+ 
// jQuery HTML/CSS Methods
+$('#element').html()              // Get HTML content
+$('#element').html('New Content') // Set HTML content
+$('#element').text()              // Get text content
+$('#element').text('New Text')    // Set text content
+$('#element').css('color')        // Get CSS property
+$('#element').css('color', 'red') // Set CSS property
+$('#element').addClass('newClass')
+$('#element').removeClass('oldClass')
+$('#element').toggleClass('toggleClass')
+
+
+ +
+

Sub-module 4: Challenge 2 (05-changing_html_and_css_with_jquery_challenge_2/)

+
Exercise: Work with Cards-jquery.html, script.js, statements.js, and style.css to practice HTML/CSS changes
+
+ +
+

Sub-module 5: Challenge 3 (06-changing_html_and_css_with_jquery_challenge_3/)

+
Exercise: Review statements.js to understand advanced jQuery HTML/CSS manipulation
+
+ +
+

Sub-module 6: First jQuery Script (07-writing_our_first_jquery_script/)

+

Video Solution: Review files in video_solution to see first jQuery scripts

+

Challenge: Try challenge_solution to practice writing jQuery scripts from scratch

+ +
+ 
// Basic jQuery Document Ready Function
+$(document).ready(function() {
+    // Your jQuery code here
+    $('button').click(function() {
+        $('p').hide();
+    });
+});
+
+// Or shorthand version
+$(function() {
+    // Your jQuery code here
+});
+
+
+
+
+ +
+
+

Module 3: jQuery Events

+ + +
+
+

Videos to Watch:

+ jquery events introduction.mp4 + 05-events-in-jQuery.mp4 + 06-jQuery-effects.mp4 + 07-jQuery-method-chaining.mp4 + 08-the-importance-of-this-jQuery.mp4 + +

Location:

+

03-jQueryEvents/

+ +
+

Sub-module 1: Events in jQuery (02-events_in_jquery/)

+

Video Solution: Review video_solution files to see jQuery event handling

+

Challenge: Try challenge_solution to practice event handling

+ +
+ 
// jQuery Event Handling
+$('button').click(function() {
+    // Handle click
+});
+
+$('input').keydown(function(event) {
+    // Handle keydown
+});
+
+$('form').submit(function(event) {
+    event.preventDefault(); // Prevent form submission
+    // Handle form submission
+});
+
+// Event delegation
+$(document).on('click', '.dynamic-button', function() {
+    // Handle clicks on dynamically added elements
+});
+
+
+ +
+

Sub-module 2: jQuery Effects (03-jquery_effects/)

+

Challenge: Work with challenge_solution files to practice jQuery built-in effects

+ +
+ 
// jQuery Effects
+$('#element').hide();
+$('#element').show();
+$('#element').toggle();
+
+$('#element').fadeIn();
+$('#element').fadeOut();
+$('#element').fadeToggle();
+
+$('#element').slideUp();
+$('#element').slideDown();
+$('#element').slideToggle();
+
+// With duration
+$('#element').fadeIn(1000); // 1 second
+
+// With callback
+$('#element').fadeOut(function() {
+    alert('Fade out completed!');
+});
+
+
+ +
+

Sub-module 3: Effects Challenge 2 (04-jquery_effects_challenge_2/)

+
Exercise: Work with Cards-jquery.html, script.js, and style.css to practice effects
+
+ +
+

Sub-module 4: Effects Challenge 3 (05-jquery_effects_challenge_3/)

+
Exercise: Work with Cards-jquery.html, script.js, and style.css to practice advanced effects
+
+ +
+

Sub-module 5: Effects Challenge 4 (06-jquery_effects_challenge_4/)

+
Exercise: Work with Cards-jquery.html, script.js, and style.css to practice complex effects
+
+ +
+

Sub-module 6: Method Chaining (07-method_chaining/)

+

Video Solution: Review video_solution files to see jQuery method chaining

+

Challenge: Try challenge_solution to practice method chaining

+ +
+ 
// jQuery Method Chaining
+$('#element')
+    .css('color', 'blue')
+    .fadeOut(1000)
+    .delay(500)
+    .fadeIn(1000)
+    .addClass('highlight');
+
+// Each method returns a jQuery object, allowing chaining
+
+
+ +
+

Sub-module 7: Method Chaining Challenge 2 (08-method_chaining_challenge_2/)

+
Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html
+
+ +
+

Sub-module 8: Method Chaining Challenge 3 (09-method_chaining_challenge_3/)

+
Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html
+
+ +
+

Sub-module 9: Importance of "this" (10-the_importance_of_this/)

+

Challenge: Review challenge_solution files to understand "this" in jQuery

+

Additional Exercises: Explore hiding_paragraphs, if_statements, mouseenter_and_mouseleave, and red_and_black_boxes

+ +
+ 
// jQuery "this" keyword
+$('button').click(function() {
+    // "this" refers to the clicked button element
+    $(this).css('background-color', 'red');
+    
+    // Find elements relative to "this"
+    $(this).siblings().hide();
+    $(this).parent().addClass('active');
+});
+
+
+
+
+ +
+
+

Module 4: Traversing the DOM with jQuery

+ + +
+
+

Videos to Watch:

+ jQuery_ Traversing Mt. Dom Introduction.mp4 + Traversing up the DOM.mp4 + Traversing Sideways.mp4 + jQuery_ Other Traversing Methods.mp4 + +

Location:

+

04-jQuery-TraversingMtDOM/

+ +
+

Sub-module 1: jQuery Traversing Mt DOM (01-jquery_traversing_mt_dom/)

+
Exercise: Work with button.html, css/, and js/ files to practice basic traversal
+ +
+ 
// jQuery Traversing Methods
+$('#start').parent()         // Get direct parent
+$('#start').parents()        // Get all ancestors
+$('#start').parents('.class') // Get specific ancestor
+$('#start').children()       // Get direct children
+$('#start').find('.class')   // Find descendants
+$('#start').siblings()       // Get siblings
+$('#start').next()           // Get next sibling
+$('#start').prev()           // Get previous sibling
+
+
+ +
+

Sub-module 2: Up and Down Tree (02-traversing_up_and_down_the_dom_tree/)

+
Exercise: Work with traversing_mt_dom.html, css/, and js/ files to practice parent/child traversal
+
+ +
+

Sub-module 3: Traversing Sideways (03-traversing_sideways/)

+
Exercise: Work with index.html, css/, and js/ files to practice sibling traversal
+
+ +
+

Sub-module 4: Sideways Challenge 2 (04-traversing_sideways_challenge_2/)

+
Exercise: Work with index.html, css/, and js/ files to practice sideways traversal
+
+ +
+

Sub-module 5: Sideways Challenge 3 (05-traversing_sideways_challenge_3/)

+
Exercise: Work with index.html, css/, and js/ files to practice advanced sideways traversal
+
+ +
+

Sub-module 6: Sideways Challenge 4 (06-traversing_sideways_challenge_4/)

+
Exercise: Work with index.html, css/, and js/ files to practice complex sideways traversal
+
+ +
+

Sub-module 7: Other Methods Challenge 1 (07-other_traversing_methods_challenge_1/)

+
Exercise: Work with index.html, css/, and js/ files to practice other traversal methods
+
+ +
+

Sub-module 8: Other Methods Challenge 2 (08-other_traversing_methods_challenge_2/)

+
Exercise: Work with index.html and js/ files to practice additional traversal methods
+
+ +
+

Sub-module 9: Other Methods Challenge 3 (09-other_traversing_methods_challenge_3/)

+
Exercise: Work with index.html, css/, and js/ files to practice advanced traversal methods
+
+
+
+ +
+
+

Lab Exercise Workflow

+ + +
+
+

For each module/sub-module:

+
    +
  1. Watch the corresponding video listed in the module section
    2. +
  2. Open both the "video_solution" and "challenge_solution" folders when available
    3. +
  3. Study the HTML and CSS files to understand the base structure
    4. +
  4. Analyze the JavaScript/jQuery code in the script files
    5. +
  5. Identify how jQuery simplifies the code compared to plain JavaScript
    6. +
  6. Try modifying the code to reinforce learning
    7. +
  7. Complete challenges when provided
    8. +
+ +

Helpful Tips for Success:

+
    +
  • Start with simple examples and gradually move to complex ones
    • +
  • Always compare the vanilla JavaScript approach with the jQuery approach
    • +
  • Take notes on syntax differences and shortcuts jQuery provides
    • +
  • Test your code frequently in the browser
    • +
  • Don't hesitate to experiment - try different jQuery methods
    • +
  • Refer to jQuery documentation when exploring new methods
    • +
+ +

Assessment Criteria:

+

By the end of this lab, you should be able to:

+
    +
  • Explain the advantages of using jQuery over vanilla JavaScript
    • +
  • Convert basic JavaScript DOM manipulations to jQuery equivalents
    • +
  • Use jQuery selectors effectively to target elements
    • +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/FromJavaScriptTojQuery-master/student_instruction_sheet.txt b/FromJavaScriptTojQuery-master/student_instruction_sheet.txt new file mode 100644 index 0000000..a9b6446 --- /dev/null +++ b/FromJavaScriptTojQuery-master/student_instruction_sheet.txt @@ -0,0 +1,166 @@ +JavaScript to jQuery Programming Lab - Student Instruction Sheet + +================================================================================ + +Welcome to the JavaScript to jQuery Conversion Lab! This lab will guide you through +converting plain JavaScript code to jQuery, helping you understand the benefits and +syntax differences between these two approaches to DOM manipulation. + +DIRECTORY STRUCTURE OVERVIEW: + +The course is organized in 4 main modules: +1. 01-FromJavaScriptTojQuery - Introduction and basic DOM manipulation +2. 02-jQueryIntroduction - Core jQuery concepts and selectors +3. 03-jQueryEvents - Event handling and effects with jQuery +4. 04-jQuery-TraversingMtDOM - DOM traversal techniques + +DETAILED VIDEO MAPPINGS AND EXERCISES: + +MODULE 1: From JavaScript to jQuery (Starting Point) +---------------------------------------------------- +Video: JavaScript to jQuery.mp4 +Location: 01-FromJavaScriptTojQuery/03-manipulating_the_dom/ + +Exercises: +1. Examine index.html to understand the HTML structure +2. Review js/app.js and js/transcript.js to see pure JavaScript implementation +3. Identify areas where DOM manipulation could be simplified with jQuery +4. Note the difference in syntax and complexity between standard JS and what jQuery offers + +MODULE 2: jQuery Introduction +----------------------------- +Videos: +- jQuery Introduction.mp4 +- 02-jQuery-selectors.mp4 +- jQuery1.mp4 + +Location: 02-jQueryIntroduction/ + +Sub-modules and exercises: +1. 02-downloading_jquery/ + Exercise: Examine Cards-jquery.html, script.js, and style.css to understand how to include jQuery in a project + +2. 03-jquery_selectors/ + Video Solution: Review video_solution folder files to see jQuery selector examples + Challenge: Try the challenge_solution to practice selectors independently + +3. 04-changing_html_and_css_with_jquery/ + Video Solution: Review video_solution folder files to see how to change HTML/CSS with jQuery + Challenge: Try the challenge_solution to practice HTML/CSS manipulation + +4. 05-changing_html_and_css_with_jquery_challenge_2/ + Exercise: Work with Cards-jquery.html, script.js, statements.js, and style.css to practice HTML/CSS changes + +5. 06-changing_html_and_css_with_jquery_challenge_3/ + Exercise: Review statements.js to understand advanced jQuery HTML/CSS manipulation + +6. 07-writing_our_first_jquery_script/ + Video Solution: Review files in video_solution to see first jQuery scripts + Challenge: Try challenge_solution to practice writing jQuery scripts from scratch + +MODULE 3: jQuery Events +----------------------- +Videos: +- jquery events introduction.mp4 +- 05-events-in-jQuery.mp4 +- 06-jQuery-effects.mp4 +- 07-jQuery-method-chaining.mp4 +- 08-the-importance-of-this-jQuery.mp4 + +Location: 03-jQueryEvents/ + +Sub-modules and exercises: +1. 02-events_in_jquery/ + Video Solution: Review video_solution files to see jQuery event handling + Challenge: Try challenge_solution to practice event handling + +2. 03-jquery_effects/ + Challenge: Work with challenge_solution files to practice jQuery built-in effects + +3. 04-jquery_effects_challenge_2/ + Exercise: Work with Cards-jquery.html, script.js, and style.css to practice effects + +4. 05-jquery_effects_challenge_3/ + Exercise: Work with Cards-jquery.html, script.js, and style.css to practice advanced effects + +5. 06-jquery_effects_challenge_4/ + Exercise: Work with Cards-jquery.html, script.js, and style.css to practice complex effects + +6. 07-method_chaining/ + Video Solution: Review video_solution files to see jQuery method chaining + Challenge: Try challenge_solution to practice method chaining + +7. 08-method_chaining_challenge_2/ + Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html + +8. 09-method_chaining_challenge_3/ + Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html + +9. 10-the_importance_of_this/ + Challenge: Review challenge_solution files to understand "this" in jQuery + Additional Exercises: Explore hiding_paragraphs, if_statements, mouseenter_and_mouseleave, and red_and_black_boxes + +MODULE 4: Traversing the DOM with jQuery +---------------------------------------- +Videos: +- jQuery_ Traversing Mt. Dom Introduction.mp4 +- Traversing up the DOM.mp4 +- Traversing Sideways.mp4 +- jQuery_ Other Traversing Methods.mp4 + +Location: 04-jQuery-TraversingMtDOM/ + +Sub-modules and exercises: +1. 01-jquery_traversing_mt_dom/ + Exercise: Work with button.html, css/, and js/ files to practice basic traversal + +2. 02-traversing_up_and_down_the_dom_tree/ + Exercise: Work with traversing_mt_dom.html, css/, and js/ files to practice parent/child traversal + +3. 03-traversing_sideways/ + Exercise: Work with index.html, css/, and js/ files to practice sibling traversal + +4. 04-traversing_sideways_challenge_2/ + Exercise: Work with index.html, css/, and js/ files to practice sideways traversal + +5. 05-traversing_sideways_challenge_3/ + Exercise: Work with index.html, css/, and js/ files to practice advanced sideways traversal + +6. 06-traversing_sideways_challenge_4/ + Exercise: Work with index.html, css/, and js/ files to practice complex sideways traversal + +7. 07-other_traversing_methods_challenge_1/ + Exercise: Work with index.html, css/, and js/ files to practice other traversal methods + +8. 08-other_traversing_methods_challenge_2/ + Exercise: Work with index.html and js/ files to practice additional traversal methods + +9. 09-other_traversing_methods_challenge_3/ + Exercise: Work with index.html, css/, and js/ files to practice advanced traversal methods + +LAB EXERCISE WORKFLOW: + +For each module/sub-module: +1. Watch the corresponding video listed in the module section +2. Open both the "video_solution" and "challenge_solution" folders when available +3. Study the HTML and CSS files to understand the base structure +4. Analyze the JavaScript/jQuery code in the script files +5. Identify how jQuery simplifies the code compared to plain JavaScript +6. Try modifying the code to reinforce learning +7. Complete challenges when provided + +HELPFUL TIPS FOR SUCCESS: + +1. Start with simple examples and gradually move to complex ones +2. Always compare the vanilla JavaScript approach with the jQuery approach +3. Take notes on syntax differences and shortcuts jQuery provides +4. Test your code frequently in the browser +5. Don't hesitate to experiment - try different jQuery methods +6. Refer to jQuery documentation when exploring new methods + +ASSESSMENT CRITERIA: + +By the end of this lab, you should be able to: +1. Explain the advantages of using jQuery over vanilla JavaScript +2. Convert basic JavaScript DOM manipulations to jQuery equivalents +3. Use jQuery selectors effectively to target elements \ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index d01f8fb..0000000 --- a/LICENSE +++ /dev/null @@ -1,18 +0,0 @@ -MIT License - -Copyright (c) 2025 admin - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and -associated documentation files (the "Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the -following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial -portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT -LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO -EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER -IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE -USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/Presentation_m2s1_Javascript_fundamentals_1.html b/Presentation_m2s1_Javascript_fundamentals_1.html deleted file mode 100644 index 3f44969..0000000 --- a/Presentation_m2s1_Javascript_fundamentals_1.html +++ /dev/null @@ -1,582 +0,0 @@ - - - - - - JavaScript Fundamentals - Presentation 1 - - - -
-
-

🚀 JavaScript Fundamentals

-

Presentation 1: Getting Started with Web Development

- -
-
-
- -
-

📚 Learning Outcomes

-
    -
  • Understand what JavaScript is and its importance
    • -
  • See JavaScript in action with an interactive demo
    • -
  • Learn the difference between frontend and backend development
    • -
  • Set up development environment on Windows
    • -
  • Write and run your first JavaScript program
    • -
  • Learn basic Git commands for version control
    • -
-
- -
-

💡 Why This Matters

-

JavaScript is the programming language of the web. It runs on browsers, servers (Node.js), and mobile devices. Mastering fundamentals is your first step toward becoming a web developer!

-
- -
- -
- -
Slide 1 of 7
-
- -
-

💡 JavaScript in Action

-

Interactive Light Bulb Demo

- -
-
-
- -
-

See What JavaScript Can Do

-

Below is a simple example of JavaScript changing HTML content dynamically. Click the buttons to turn the light bulb on and off!

- -
-

What Can JavaScript Do?

-

JavaScript can change HTML attribute values.

-

In this case JavaScript changes the value of the src (source) attribute of an image.

- - - - - - -
- -

How It Works

-

This example uses JavaScript to:

-
    -
  • Find an HTML element by its ID (getElementById('myImage'))
    • -
  • Change the image source (src attribute) when buttons are clicked
    • -
  • Respond to user interactions (onclick event)
    • -
- -

This is just a small taste of what JavaScript can do. Throughout this course, you'll learn how to create much more complex and interactive web applications!

-
- -
- - -
- -
Slide 2 of 7
-
- -
-

🌐 Web Development Path

-

Frontend vs Backend Development

- -
-
-
- -
-

Your Path to Becoming a Web Developer

-

To become a web developer, follow these steps in order:

- -
-
-

1. HTML

-

Create your first web page with the standard markup language for web content.

-
-
-

2. CSS

-

Style your web page with beautiful colors, fonts, and layouts.

-
-
-

3. JavaScript

-

Make your web pages dynamic and interactive for users.

-
-
- -

After mastering HTML, CSS, and JavaScript, you can publish your website for the world to see!

-
- -
-

Frontend vs Backend Development

- -
-
-

Frontend Development

-

Client-side - How a web page looks

-
    -
  • What users see and interact with
    • -
  • HTML, CSS, JavaScript
    • -
  • Frameworks: React, Angular, Vue
    • -
  • Creates static websites
    • -
-

Hello, Front-End Developer!

-
- -
-

Backend Development

-

Server-side - How a web page works

-
    -
  • Server, database, application logic
    • -
  • Languages: PHP, Python, Java, Node.js
    • -
  • Database: SQL, MongoDB
    • -
  • Makes websites dynamic
    • -
-

Manages data and business logic

-
-
- -

Full-Stack Developers work with both frontend and backend technologies!

-
- -
- - -
- -
Slide 3 of 7
-
- -
-

🛠️ Environment Setup

- -
-
-
- -
-

Tools We'll Use

-
-
Windows PowerShell
-
Yandex Browser
-
jseditor.io
-
Git
-
- -

PowerShell Setup Commands:

- -# Open PowerShell as Administrator -# Navigate to your working directory -cd Documents -mkdir javascript-course -cd javascript-course -mkdir presentation1 -cd presentation1 - -# Create your first JavaScript file -echo "console.log('Hello World!');" > app.js - -# Run with Node.js -node app.js - - -

Alternative: Use JSEditor.io

-

For quick testing, use jseditor.io - no setup required!

-
- -
- - -
- -
Slide 4 of 7
-
- -
-

👋 Your First JavaScript Program

- -
-
-
- -
-

Hello World & Basic Output

-

Open jseditor.io and try this code:

- - -// Presentation 1 - Basic JavaScript -console.log("=== JavaScript Fundamentals ==="); -console.log("Hello World! 🌍"); -console.log("Welcome to JavaScript Programming!"); - -// Basic calculations -console.log("2 + 2 = " + (2 + 2)); -console.log("10 * 5 = " + (10 * 5)); -console.log("100 / 4 = " + (100 / 4)); - -// String concatenation -console.log("Hello " + "there " + "friend!"); - - -

💡 Tip: The console.log() function prints output to the console.

-
- -
- - -
- -
Slide 5 of 7
-
- -
-

💻 Lab Work: Personal Profile

- -
-
-
- -
-

Build a Personal Introduction Program

-

Create a program that displays your personal information:

- - -// Lab Exercise: Personal Profile -console.log("=== Personal Profile ==="); - -// Your personal information -const firstName = "Maria"; -const lastName = "Johnson"; -const age = 22; -const occupation = "Web Developer"; -const favoriteLanguage = "JavaScript"; - -// Display the information -console.log("Full Name: " + firstName + " " + lastName); -console.log("Age: " + age); -console.log("Occupation: " + occupation); -console.log("Favorite Programming Language: " + favoriteLanguage); -console.log(" "); -console.log("Nice to meet you! 😊"); - -// Calculate years until 30 -const yearsUntil30 = 30 - age; -console.log("Years until 30: " + yearsUntil30); - - -

✅ Challenge: Add more personal information and calculations!

-
- -
- - -
- -
Slide 6 of 7
-
- -
-

📁 Git Practice & Next Steps

- -
-
-
- -
-

Version Control with Git

- -# Initialize git in your project folder -git init - -# Check the status of your files -git status - -# Add all files to staging -git add . - -# Commit your changes with a message -git commit -m "Completed Presentation 1: JavaScript fundamentals" - -# Push to gitea.techshare.cc (replace with your repo) -git remote add origin https://gitea.techshare.cc/your-username/js-course.git -git branch -M main -git push -u origin main - -
- -
-

🎯 What We Learned Today

-
    -
  • ✓ Saw JavaScript in action with interactive demo
    • -
  • ✓ Learned about frontend vs backend development
    • -
  • ✓ JavaScript environment setup
    • -
  • ✓ Basic syntax and console output
    • -
  • ✓ Variables (let) and constants (const)
    • -
  • ✓ Building a personal profile program
    • -
  • ✓ Basic Git workflow
    • -
- -

🚀 Next Session: Operators, Arrays, and more data manipulation!

-
- -
- - -
- -
Slide 7 of 7
-
-
- - - - \ No newline at end of file diff --git a/Presentation_m2s1_Javascript_fundamentals_2.html b/Presentation_m2s1_Javascript_fundamentals_2.html deleted file mode 100644 index de69166..0000000 --- a/Presentation_m2s1_Javascript_fundamentals_2.html +++ /dev/null @@ -1,728 +0,0 @@ - - - - - - JavaScript History & Evolution - - - -
-
-

📜 The History of JavaScript

-

From 10-Day Prototype to World's Most Popular Language

- -
-
-
- -
-

The Birth of JavaScript

-

JavaScript was created around April 1995 by Brendan Eich, who was working at Netscape Communications Corporation.

- -
-
-
-

1995 - The 10-Day Challenge

-

Brendan Eich was given only 10 days to design and code a working prototype of a programming language that could run in the browser.

-

Netscape was in fierce competition with Microsoft and needed to release their browser quickly.

-
-
- -
-
-

Original Goal

-

Create a language that appealed to non-professional programmers, similar to Microsoft Visual Basic's accessibility.

-

Initially called LiveScript, it was renamed to JavaScript to capitalize on Java's popularity.

-
-
-
- -
-

"Learning JavaScript used to mean you weren't a serious developer. Today, not learning JavaScript means the same thing."

-

- Tim O'Reilly, Founder of O'Reilly Media

-
-
- -
- -
- -
Slide 1 of 7
-
- -
-

🚀 JavaScript's Evolution

-

From Simple Scripts to Full Applications

- -
-
-
- -
-

The Early Years (1995-2005)

-

In the beginning, JavaScript was designed primarily for:

-
    -
  • Adding simple interactions to web pages
    • -
  • Basic form validation
    • -
  • Image rollovers and simple animations
    • -
-

It wasn't considered a "serious" programming language by many developers.

- -
-
-
-

2005 - The jQuery Revolution

-

jQuery and AJAX were released, making JavaScript much more powerful and easier to use.

-

Developers could now easily:

-
    -
  • Manipulate the DOM
    • -
  • Make asynchronous requests
    • -
  • Create rich interactive experiences
    • -
-
-
- -
-
-

2008 - Modern Browsers Emerge

-

Google launched Chrome with its powerful V8 JavaScript engine.

-

Facebook began driving massive web adoption, requiring more sophisticated front-end capabilities.

-
-
-
-
- -
- - -
- -
Slide 2 of 7
-
- -
-

💪 The Modern JavaScript Era

-

Breaking Browser Boundaries

- -
-
-
- -
-

Browser APIs & Server-Side JavaScript

- -
-
-
-

Browser APIs

-

Browsers began exposing powerful APIs to JavaScript:

-
    -
  • Geolocation API
    • -
  • Canvas for graphics
    • -
  • Local Storage
    • -
  • Device APIs
    • -
-

This allowed web applications to behave more like native desktop applications.

-
-
- -
-
-

2009 - Node.js Changes Everything

-

Ryan Dahl created Node.js, allowing JavaScript to run on the server.

-

This was a revolutionary development because:

-
    -
  • Developers could use one language for both frontend and backend
    • -
  • JavaScript could now compete with PHP, Python, Java, Ruby
    • -
  • Full-stack JavaScript development became possible
    • -
-
-
-
- -
-

Today's JavaScript Ecosystem

-

JavaScript now powers:

-
    -
  • Web Applications - Frontend frameworks like React, Angular, Vue
    • -
  • Server Applications - Node.js, Express.js
    • -
  • Mobile Apps - React Native, Ionic, NativeScript
    • -
  • Desktop Apps - Electron
    • -
  • Internet of Things - JavaScript on microcontrollers
    • -
-
-
- -
- - -
- -
Slide 3 of 7
-
- -
-

🎯 Why Learn JavaScript?

-

4 Compelling Reasons

- -
-
-
- -
-
-

🌐 Browser Dominance

-

JavaScript is the only programming language that runs natively in all web browsers. If you want to create interactive web experiences, you must learn JavaScript.

-
- -
-

📚 Learning Curve

-

JavaScript is relatively easy to start with basic concepts, though it has depth and complexity for advanced development. This makes it accessible for beginners.

-
- -
-

💼 Essential for Web Apps

-

Modern web applications require JavaScript. From simple websites to complex SPAs (Single Page Applications), JavaScript is fundamental.

-
- -
-

🚀 Career Opportunities

-

There's high demand for JavaScript developers across frontend, backend, and full-stack roles. Learning JavaScript opens doors to numerous career paths.

-
-
- -
-

Career Paths with JavaScript

-

Mastering JavaScript can lead to various roles:

-
    -
  • Frontend Developer - Building user interfaces with React, Angular, or Vue
    • -
  • Backend Developer - Creating servers and APIs with Node.js
    • -
  • Full-Stack Developer - Handling both frontend and backend
    • -
  • Mobile Developer - Building apps with React Native
    • -
  • DevOps Engineer - Working with JavaScript-based tools
    • -
-
- -
- - -
- -
Slide 4 of 7
-
- -
-

⚔️ JavaScript vs Java

-

Understanding the Difference

- -
-
-
- -
-

The Name Confusion

-

JavaScript was originally named LiveScript, but was renamed to JavaScript for marketing reasons.

-

Java was extremely popular at the time, and Netscape hoped the similar name would attract developers.

-

Important: JavaScript and Java are completely different languages with different purposes, syntax, and use cases.

-
- -
-
-

JavaScript

-
    -
  • Dynamic, interpreted scripting language
    • -
  • Runs in browsers and on servers (Node.js)
    • -
  • Prototype-based object orientation
    • -
  • Dynamic typing (variables can change types)
    • -
  • Event-driven and functional programming features
    • -
  • Primarily used for web development
    • -
-
- -
-

Java

-
    -
  • Static, compiled programming language
    • -
  • Runs on Java Virtual Machine (JVM)
    • -
  • Class-based object orientation
    • -
  • Static typing (variables have fixed types)
    • -
  • Traditional object-oriented programming
    • -
  • Used for enterprise applications, Android apps, etc.
    • -
-
-
- -
-

Key Takeaway

-

You don't need to know Java to learn JavaScript (or vice versa). They are separate languages with different learning paths and applications.

-
- -
- - -
- -
Slide 5 of 7
-
- -
-

🔧 Full-Stack JavaScript Development

-

One Language, Entire Application

- -
-
-
- -
-

What is a Full-Stack JavaScript Developer?

-

A full-stack JavaScript developer can build both client-side (frontend) and server-side (backend) software using JavaScript.

-

In addition to HTML and CSS, they work with:

-
- -
-
-

Client Software (Front End)

-
    -
  • HTML & CSS
    • -
  • JavaScript (ES5/ES6+)
    • -
  • React / Angular / Vue
    • -
  • jQuery
    • -
  • HTML DOM
    • -
  • JSON & XML
    • -
  • Bootstrap / W3.CSS
    • -
  • Redux / GraphQL
    • -
  • Webpack / Grunt / Gulp
    • -
-
- -
-

Server Software (Back End)

-
    -
  • Node.js
    • -
  • Express.js
    • -
  • Databases (MongoDB, SQL)
    • -
  • REST APIs
    • -
  • Authentication
    • -
  • Web Sockets
    • -
  • Server Deployment
    • -
  • Cloud Platforms (AWS, Azure)
    • -
  • Testing (Jest, Mocha)
    • -
-
-
- -
-

The Full-Stack Advantage

-

With JavaScript across the entire stack, developers can:

-
    -
  • Use the same language for frontend and backend
    • -
  • Share code between client and server
    • -
  • Context-switch less between different syntax
    • -
  • Build applications more efficiently
    • -
  • Participate in both frontend and backend discussions
    • -
-
- -
- - -
- -
Slide 6 of 7
-
- -
-

🚀 Your JavaScript Journey

-

From Beginner to Professional Developer

- -
-
-
- -
-

JavaScript's Incredible Journey

-

From a 10-day prototype to the world's most popular programming language, JavaScript has come a long way.

- -
-
-
-

1995 - The Beginning

-

Created in 10 days by Brendan Eich at Netscape

-

Simple scripting for web pages

-
-
- -
-
-

2005 - jQuery Era

-

Made JavaScript powerful and accessible

-

DOM manipulation became easy

-
-
- -
-
-

2009 - Node.js Revolution

-

JavaScript broke out of the browser

-

Full-stack development became possible

-
-
- -
-
-

Today - Universal Language

-

Web, mobile, desktop, servers, IoT

-

Massive ecosystem and community

-
-
-
-
- -
-

Your Path Forward

-

By learning JavaScript, you're not just learning a programming language - you're gaining access to:

-
    -
  • Web Development - Create interactive websites and web applications
    • -
  • Mobile Development - Build cross-platform mobile apps
    • -
  • Backend Development - Create servers and APIs
    • -
  • Career Opportunities - Join one of the largest developer communities
    • -
-

JavaScript is your gateway to modern software development!

-
- -
- - -
- -
Slide 7 of 7
-
-
- - - - \ No newline at end of file diff --git a/light.html b/light.html deleted file mode 100644 index 8a6af9b..0000000 --- a/light.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - -

What Can JavaScript Do?

- -

JavaScript can change HTML attribute values.

- -

In this case JavaScript changes the value of the src (source) attribute of an image.

- - - - - - - - - \ No newline at end of file diff --git a/pic_bulboff.gif b/pic_bulboff.gif deleted file mode 100644 index 65cacdd..0000000 Binary files a/pic_bulboff.gif and /dev/null differ diff --git a/pic_bulbon.gif b/pic_bulbon.gif deleted file mode 100644 index 72ecfc4..0000000 Binary files a/pic_bulbon.gif and /dev/null differ