diff --git a/.DS_Store b/.DS_Store index 86b97d7..b720d2f 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/Chess Coding Exercise.pdf b/Chess Coding Exercise.pdf deleted file mode 100644 index 77b7adc..0000000 Binary files a/Chess Coding Exercise.pdf and /dev/null differ diff --git a/FromJavaScriptTojQuery-master/.DS_Store b/FromJavaScriptTojQuery-master/.DS_Store new file mode 100644 index 0000000..65424c5 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..630174a 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..4cea038 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/console-exercises.txt b/FromJavaScriptTojQuery-master/console-exercises.txt new file mode 100644 index 0000000..509cfec --- /dev/null +++ b/FromJavaScriptTojQuery-master/console-exercises.txt @@ -0,0 +1,87 @@ +console.log('%cWOW!', 'font-size: 24px; color: purple; text-shadow: 2px 2px #000;'); +document.body.style.transform = 'rotate(5deg)'; setTimeout(() => { document.body.style.transform = 'rotate(-5deg)'; }, 100); setTimeout(() => { document.body.style.transform = 'rotate(0deg)'; }, 200); +console.log(`There are ${document.querySelectorAll('a').length} links on this page!`); +document.body.style.backgroundColor = '#ffcccc'; +console.log(123 * 456); +console.log('%cWow!', 'color:red; font-size:2 Newton0px; background:linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet)'); +let i = 0; setInterval(() => { console.log(i % 2 ? '%cBlink!', 'color:red' : '%cBlink!', 'color:blue'); i++; }, 500); +console.clear(); console.log('✨ Console cleaned like magic!'); +throw new Error('Oops! Just kidding :)'); +console.log(navigator.userAgent); +console.log(`Screen: ${window.screen.width}x${window.screen.height}`); +console.table(performance.memory); +const factorial = n => n <= 1 ? 1 : n * factorial(n - 1); console.log(factorial(5)); +console.log('#' + Math.floor(Math.random()*16777215).toString(16)); +document.body.style.backgroundColor = 'lightblue'; +console.log(`Images on page: ${document.images.length}`); +document.querySelectorAll('a').forEach(link => { link.style.border = '1px solid red'; }); +const secret = Math.floor(Math.random() * 100) + 1; console.log('Guess a number between 1-100!'); let guess; while (guess !== secret) { guess = parseInt(prompt('Your guess?')); if (guess < secret) console.log('Too low!'); else if (guess > secret) console.log('Too high!'); } console.log('🎉 You won!'); +console.time('test'); for (let i = 0; i < 1000000; i++) {} console.timeEnd('test'); +console.log('Try typing "let me google that for you" here!'); +console.table([ { name: 'Alice', score: 95 }, { name: 'Bob', score: 87 }, { name: 'Charlie', score: 92 } ]); + +Here are one-line console commands to type in browser inspect element: + +## CHANGE TEXT +```javascript +document.querySelector('h1').textContent = 'DOM MASTERY!' +document.querySelector('.lead').textContent = 'Learning Console Magic!' +document.querySelector('.navbar-brand').textContent = 'Console Nav' +``` + +## CHANGE STYLES +```javascript +document.body.style.backgroundColor = 'lightblue' +document.querySelector('.jumbotron').style.backgroundColor = 'yellow' +document.querySelector('h1').style.color = 'red' +``` + +## CREATE ELEMENTS +```javascript +document.querySelector('.nav').innerHTML += '
  • New Item
    • ' +document.querySelector('.content').innerHTML += '

    Added via console!

    ' +``` + +## REMOVE ELEMENTS +```javascript +document.querySelector('.jumbotron').remove() +document.querySelector('.nav li:last-child').remove() +``` + +## CLASS MANIPULATION +```javascript +document.querySelector('.jumbotron').classList.add('highlight') +document.querySelector('.jumbotron').classList.remove('jumbotron') +``` + +## FUN EFFECTS +```javascript +document.body.style.transform = 'rotate(5deg)' +setInterval(() => document.body.style.backgroundColor = `hsl(${Math.random()*360}, 100%, 50%)`, 500) +``` + +## MODIFY ALL ITEMS +```javascript +document.querySelectorAll('.nav li').forEach(li => li.style.color = 'red') +``` + +## ADD CLICK EVENTS +```javascript +document.querySelector('h1').addEventListener('click', () => alert('Clicked!')) +``` + +## CHANGE ATTRIBUTES +```javascript +document.querySelector('.navbar-brand').setAttribute('href', '#new-link') +``` + +Just copy and paste any of these directly into the browser console! + +### Notes: +- All commands are valid JavaScript intended for the browser’s DevTools Console. +- Some commands (like `prompt` or `performance.memory`) may behave differently depending on the browser or page context. +- Experiment: + - Try each command one by one. + - Observe the output and side effects (e.g., visual changes). + - Read the code to understand how it works. + - Experiment with modifying values (e.g., change colors, numbers, selectors). \ 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..441778f --- /dev/null +++ b/FromJavaScriptTojQuery-master/jquery_learning_portal.html @@ -0,0 +1,796 @@ + + + + + + jQuery Learning Portal + + + +
    +

    jQuery Learning Portal

    +

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

    +
    + +
    +
    +
    +

    Chronological Video Guide

    + + +
    +
    +

    All videos organized by creation date (oldest to newest):

    + +
    +

    April 24, 2023

    + +
    + Apr 24 + JavaScript to jQuery.mp4 +

    This is the foundational video for the jQuery course - start here!

    +
    + +
    + Apr 24 + 02-jQuery-selectors.mp4 +

    Covers jQuery selector syntax

    +
    + +
    + Apr 24 + 05-events-in-jQuery.mp4 +

    Introduction to jQuery event handling

    +
    + +
    + Apr 24 + 06-jQuery-effects.mp4 +

    Built-in jQuery animation effects

    +
    + +
    + Apr 24 + 07-jQuery-method-chaining.mp4 +

    Understanding jQuery method chaining

    +
    + +
    + Apr 24 + 08-the-importance-of-this-jQuery.mp4 +

    Understanding "this" in jQuery context

    +
    + +
    + Apr 24 + jQuery Introduction.mp4 +

    Introduction to jQuery library

    +
    + +
    + Apr 24 + jQuery1.mp4 +

    First look at jQuery

    +
    + +
    + Apr 24 + jQuery - The DOM.mp4 +

    jQuery and DOM manipulation

    +
    + +
    + Apr 24 + jquery events introduction.mp4 +

    Introduction to jQuery events

    +
    +
    + +
    +

    April 25, 2023

    + +
    + Apr 25 + jQuery_ Traversing Mt. Dom Introduction.mp4 +

    Introduction to DOM traversal with jQuery

    +
    + +
    + Apr 25 + Traversing up the DOM.mp4 +

    Traversing up the DOM tree

    +
    + +
    + Apr 25 + Traversing Sideways.mp4 +

    Traversing sideways in the DOM

    +
    + +
    + Apr 25 + jQuery_ Other Traversing Methods.mp4 +

    Other DOM traversal methods

    +
    + +
    + Apr 25 + External Resources_ Intro.mp4 +

    Introduction to external resources

    +
    + +
    + Apr 25 + External Resources_ cURL.mp4 +

    Working with cURL

    +
    + +
    + Apr 25 + External Resources_ XHR in depth.mp4 +

    In-depth look at XHR

    +
    + +
    + Apr 25 + External Resources_ URLs.mp4 +

    Working with URLs

    +
    + +
    + Apr 25 + External Resources_ XHR.mp4 +

    XMLHttpRequest basics

    +
    + +
    + Apr 25 + External Resources_ Unpacking Data.mp4 +

    Unpacking data from external sources

    +
    + +
    + Apr 25 + External Resources_ JSON.parse.mp4 +

    Parsing JSON data

    +
    + +
    + Apr 25 + External Resources_ Getting The Data Onto The Page.mp4 +

    Displaying external data on the page

    +
    + +
    + Apr 25 + External Resources_ cURL and APIs.mp4 +

    Working with cURL and APIs

    +
    + +
    + Apr 25 + External Resources_ Callbacks.mp4 +

    Understanding callbacks

    +
    + +
    + Apr 25 + Tabular Data - Part One - Using The Keys To Generate A Table_.mp4 +

    Generating tables from data

    +
    + +
    + Apr 25 + Tabular Data - Part Two.mp4 +

    Continuation of tabular data work

    +
    + +
    + Apr 25 + Tabular Data - Part Three.mp4 +

    Advanced tabular data techniques

    +
    + +
    + Apr 25 + Tabular Data - Part Four - Pagination.mp4 +

    Pagination for large datasets

    +
    + +
    + Apr 25 + Adding The Markers To The Map(1).mp4 +

    Adding markers to maps

    +
    + +
    + Apr 25 + Interactive Resume 20_ Adding the map element.mp4 +

    Adding map elements to resumes

    +
    + +
    + Apr 25 + Resume 20_ Moving The Code Into It's Own Script.mp4 +

    Organizing resume code into separate scripts

    +
    + +
    + Apr 25 + Referencing The JS Files.mp4 +

    Properly referencing JavaScript files

    +
    + +
    + Apr 25 + Render The Map.mp4 +

    Rendering maps on the page

    +
    + +
    + Apr 25 + Plugs & Sockets.mp4 +

    Working with plugs and sockets

    +
    + +
    + Apr 25 + GoogleMapsAPIVid2.mp4 +

    Working with Google Maps API

    +
    + +
    + Apr 25 + REST.mp4 +

    Understanding REST principles

    +
    + +
    + Apr 25 + One Last Thing.mp4 +

    Final thoughts and tips

    +
    +
    +
    +
    + +
    +
    +

    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/Presentatinon_Git_Fundamentals.html b/Presentatinon_Git_Fundamentals.html deleted file mode 100644 index bb9d288..0000000 --- a/Presentatinon_Git_Fundamentals.html +++ /dev/null @@ -1,579 +0,0 @@ - - - - - - Git Fundamentals - Grade 11 ICT - - - -
    -
    - -
    - - -
    -
    - -
    -
    - -
    -

    Lesson 1: Introduction to Git

    -

    Learning Outcomes

    -
      -
    • Understand what Git is and why it's important for developers
      • -
    • Install Git on your computer
      • -
    • Configure Git with your user credentials
      • -
    • Understand the basic Git workflow
      • -
    - -

    Why Git Matters

    -
    -

    Git is the most widely used version control system in the world. It allows developers to:

    -
      -
    • Track changes to code over time
      • -
    • Collaborate with other developers on the same project
      • -
    • Revert to previous versions if something goes wrong
      • -
    • Work on different features simultaneously without conflicts
      • -
    -

    Understanding Git is essential for any software development career!

    -
    -
    - -
    -

    Git Introduction Video

    -
    - -
    -

    - Note: We're using a general Git introduction video here. The original link was to a text tutorial, but a video is more engaging for a presentation. -

    -
    - -
    -

    Setting Up Git

    -

    Installation Instructions

    - -

    Windows/Mac

    -
      -
    • Visit git-scm.com
      • -
    • Download the latest version for your operating system
      • -
    • Run the installer with default settings
      • -
    - -

    Chrome OS (2020+ devices)

    -
      -
    • Go to the Launcher
      • -
    • Search for "Linux" and click "Turn on"
      • -
    • Git is included in the Linux environment
      • -
    - -

    Older Chrome OS devices

    -
      -
    • Install Termux from the Google Play Store
      • -
    • Open Termux and enter: pkg install git
      • -
    • Type y when prompted to confirm installation
      • -
    -
    - -
    -

    Configuring Git

    -

    Setting Your Credentials

    - -

    After installing Git, you need to configure your username and email address:

    - -
    -git config --global user.name "g11s1"
    -git config --global user.email "g11s1@ict.ru" -
    - -
    -

    Important Note: Git credentials are set per computer, not per folder. If you change computers or someone else uses your computer, you'll need to check and possibly update the Git user credentials.

    -

    To check your current Git configuration:

    -
    git config --list
    -
    - -

    Exercise: Configure Git

    -
    -
      -
    1. Open your terminal/command prompt
      2. -
    2. Set your username: git config --global user.name "g11sX" (replace X with your student number)
      3. -
    3. Set your email: git config --global user.email "g11sX@ict.ru"
      4. -
    4. Verify your settings: git config --list
      5. -
    -
    -
    - - -
    -

    Lesson 2: Working with Local Repositories

    -

    Learning Outcomes

    -
      -
    • Create and initialize a local Git repository
      • -
    • Understand the basic Git workflow: add, commit, status
      • -
    • Fork and clone remote repositories
      • -
    • Make changes and push them to a remote repository
      • -
    - -

    Why This Matters

    -
    -

    Local repositories allow you to work on projects independently before sharing your changes. Understanding how to:

    -
      -
    • Create repositories
      • -
    • Track changes with commits
      • -
    • Work with remote repositories
      • -
    -

    These are fundamental skills for any development workflow!

    -
    -
    - -
    -

    Challenge 1: Local Repository

    -
    -
      -
    1. Create a new folder called my-first-git-project
      2. -
    2. Initialize it as a Git project: git init
      3. -
    3. Open the folder in Sublime Text
      4. -
    4. Create a basic README.md with an explanation of a project you'd like to do (use headers, lists, etc.)
      5. -
    5. Add the file to staging: git add README.md
      6. -
    6. Commit the changes: git commit -m "Added README file"
      7. -
    7. Check the commit history: git log
      8. -
    -
    - -

    Example README.md

    -
    -# My First Git Project
    -
    -## Project Description
    -This is a simple web application that will:
    -- Display current weather information
    -- Allow users to search for weather by city
    -- Show a 5-day forecast
    -
    -## Technologies Used
    -- HTML
    -- CSS
    -- JavaScript
    -- Weather API -
    -
    - -
    -

    Challenge 2: Fork and Clone Repository

    -
    -

    Forking a Repository

    -
      -
    1. Go to the example repository: https://gitea.techshare.cc/technolyceum/g11-m2.git
      2. -
    2. Click the "Fork" button to create your own copy
      3. -
    - -

    Cloning to Your Local Environment

    -
      -
    1. Open your terminal/command tool
      2. -
    2. Navigate to your projects folder: cd projects
      3. -
    3. Clone your forked repository: git clone [your-forked-repo-url]
      4. -
    4. Navigate into the new folder: cd [repository-name]
      5. -
    - -

    Making and Pushing Changes

    -
      -
    1. Make changes to the index.html file
      2. -
    2. Stage your changes: git add .
      3. -
    3. Check status: git status
      4. -
    4. Commit changes: git commit -m "Changed index file"
      5. -
    5. Push to remote: git push -u origin master
      6. -
    6. Review your changes on the remote repository website
      7. -
    -
    -
    - - -
    -

    Lesson 3: Collaboration with Git

    -

    Learning Outcomes

    -
      -
    • Add collaborators to a GitHub repository
      • -
    • Clone and work on a collaborator's repository
      • -
    • Understand how to push changes and view differences
      • -
    • Use Git commands to compare changes between versions
      • -
    - -

    Why Collaboration Matters

    -
    -

    Most software development happens in teams. Git enables:

    -
      -
    • Multiple developers to work on the same codebase
      • -
    • Clear tracking of who made what changes
      • -
    • Managing contributions from different team members
      • -
    • Resolving conflicts when changes overlap
      • -
    -

    These collaboration skills are essential for real-world development!

    -
    -
    - -
    -

    Adding Collaborators

    -
    -

    Step 1: Pair Up

    -

    Find a partner for this exercise - either a classmate or mentor.

    - -

    Step 2: Add Collaborator in GitHub

    -
      -
    1. Navigate to your project in GitHub
      2. -
    2. Click on the 'Settings' tab
      3. -
    3. Select 'Collaborators' from the left menu
      4. -
    4. Click 'Add people' and search for your partner's GitHub username
      5. -
    5. Send the collaboration invitation
      6. -
    - -
    -

    Note: The exact steps may vary slightly depending on the Git platform (GitHub, GitLab, Gitea, etc.), but the concept is the same.

    -
    -
    -
    - -
    -

    Collaboration Exercise

    -
    -

    Step 3: Clone and Modify

    -
      -
    1. Your partner should clone your repository: git clone [your-repo-url]
      2. -
    2. Create a new folder for this project if needed
      3. -
    3. Give your partner a simple "spec" - a small change to make in your project
      4. -
    4. Your partner makes the change, then: -
      -git add .
      -git commit -m "Made requested change"
      -git push origin master -
      -
      5. -
    - -

    Step 4: Review Changes

    -
      -
    1. Pull the latest changes: git pull origin master
      2. -
    2. View recent changes: git diff HEAD
      3. -
    3. Compare with previous version: git diff HEAD~1
      4. -
    4. Check the commit history on GitHub to see your partner's contribution
      5. -
    - -

    Step 5: Reverse Roles

    -

    Now repeat the process with roles reversed - you become the collaborator on your partner's repository.

    -
    -
    - -
    -

    Git Commands Summary

    -

    Basic Git Workflow

    - -
    -# Initialize a new repository
    -git init

    - -# Clone an existing repository
    -git clone [repository-url]

    - -# Check status of files
    -git status

    - -# Add files to staging
    -git add [filename]
    -git add . # Add all files

    - -# Commit changes
    -git commit -m "Commit message"

    - -# Push to remote repository
    -git push origin master

    - -# Pull latest changes
    -git pull origin master

    - -# View commit history
    -git log

    - -# Compare changes
    -git diff
    -git diff HEAD
    -git diff HEAD~1 -
    - -

    Congratulations!

    -

    You've completed the 3-lesson Git fundamentals course. You now have the basic skills to use Git for version control and collaboration!

    -
    -
    -
    - -
    - -
    - -
    - Grade 11 ICT - Git Fundamentals | Use the navigation buttons to move between slides -
    -
    - - - - \ No newline at end of file diff --git a/Update Boilertplate Chess Game Code in Gitea.html b/Update Boilertplate Chess Game Code in Gitea.html deleted file mode 100644 index b5be316..0000000 --- a/Update Boilertplate Chess Game Code in Gitea.html +++ /dev/null @@ -1,218 +0,0 @@ - - - - - - Chess Coding Exercise - - - -

    Chess Board Coding Exercise

    - -
    -

    Part 1: Setup Git

    - -
    - 1. Check if Git is installed: -
    git --version
    - If you see a version number, Git is installed. If not, download from git-scm.com -
    - -
    - 2. Set your credentials: -
    git config --global user.name "g11s1"
    -
    git config --global user.email "g11s1@ict.ru"
    -
    - -
    - 3. Create and navigate to your folder: -
    cd Documents
    -
    mkdir chess-project
    -
    cd chess-project
    -
    -
    - -
    -

    Part 2: Get the Code

    - -
    - 1. Go to Gitea in your browser: -
    https://gitea.techshare.cc
    -
    - -
    - 2. Login with your credentials -
    - -
    - 3. Fork this repository: -
    https://gitea.techshare.cc/technolyceum/g11-m2.git
    - Click the "Fork" button to create your own copy -
    - -
    - 4. Clone your forked repository: -
    git clone https://gitea.techshare.cc/your-username/g11-m2.git
    - Replace "your-username" with your actual Gitea username -
    - -
    - 5. Enter the project folder: -
    cd g11-m2
    -
    -
    - -
    -

    Part 3: Coding Tasks

    - -
    - Task 1: CSS Styling -

    Find the .chess-board CSS and add:

    -
    width: 400px; -height: 400px; -display: grid; -border: 3px solid gray;
    -
    - -
    - Task 2: JavaScript Function -

    Find the function and replace with:

    -
    function createChessBoard() {
    -
    - -
    - Task 3: For Loops -

    Find the loops and replace with:

    -
    for (let row = 0; row < 8; row++) { - for (let col = 0; col < 8; col++) {
    -
    - -
    - Test your work: -
      -
    1. Save the HTML file
      2. -
    2. Open it in a browser
      3. -
    3. Click "Create Chess Board"
      4. -
    4. You should see a chess board with 64 squares!
      5. -
    -
    -
    - -
    -

    Part 4: Save to Git

    - -
    - 1. Check what you changed: -
    git status
    -
    - -
    - 2. Add your changes: -
    git add .
    -
    - -
    - 3. Commit with a message: -
    git commit -m "Completed chess board coding exercise"
    -
    - -
    - 4. Push to your repository: -
    git push origin main
    -
    - -
    - If asked for credentials: -
      -
    • Enter your Gitea username
      • -
    • Enter your Gitea password
      • -
    • If you get errors, try:
      • -
      git push https://gitea.techshare.cc/your-username/g11-m2.git main
      -
    -
    - -
    - 5. Verify on Gitea: -

    Refresh your repository page in the browser to see your changes

    -
    -
    - -
    - What you learned: - -
    - - \ No newline at end of file diff --git a/boilerplateHTMLtemplate.html b/boilerplateHTMLtemplate.html deleted file mode 100644 index aeac321..0000000 --- a/boilerplateHTMLtemplate.html +++ /dev/null @@ -1,858 +0,0 @@ - - - - - - Learn to Code: Chess Game - - - -
    -

    Customizable Chess Game

    -

    Change board size, grid dimensions, shape, and colors to create your perfect chess experience! The grid size option changes the number of squares in each row and column.

    -
    - -
    -
    -
    -

    Board Settings

    - - - - - - - - - - - - - - -
    - -
    -

    Game Controls

    - - -
    - -
    -

    Accessibility

    - - -
    -
    - -
    -
    - -
    -
    - White's turn. Click on a piece to select it. -
    -
    -
    - - - - \ No newline at end of file diff --git a/git-challenges b/git-challenges deleted file mode 160000 index 25509f3..0000000 --- a/git-challenges +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 25509f3f2249a4bb8aab3bddf4808475ef28ba7e diff --git a/newchessgame_v1.html b/newchessgame_v1.html deleted file mode 100644 index ce96096..0000000 --- a/newchessgame_v1.html +++ /dev/null @@ -1,789 +0,0 @@ - - - - - - Customizable Chess Game - - - -
    -

    Customizable Chess Game

    -

    Change board size, grid dimensions, shape, and colors to create your perfect chess experience! The grid size option changes the number of squares in each row and column.

    -
    - -
    -
    -
    -

    Board Settings

    - - - - - - - - - - - - - - -
    - -
    -

    Game Controls

    - - -
    - -
    -

    Accessibility

    - - -
    -
    - -
    -
    - -
    -
    - White's turn. Click on a piece to select it. -
    -
    -
    - - - - \ No newline at end of file diff --git a/pingpong.html b/pingpong.html deleted file mode 100644 index 3b308c0..0000000 --- a/pingpong.html +++ /dev/null @@ -1,97 +0,0 @@ - - - - - Simple Paddle Game - - - - -
    -
    -
    -
    - - - - - \ No newline at end of file