g11s2/myowncopy
Template
1
0
Fork 0
forked from technolyceum/g11-m2
Code Pull Requests Activity

added dom

Browse Source
This commit is contained in:
root
2025-11-20 17:25:11 +03:00
parent 50443223cd
commit 864bbef52d
353 changed files with 7926 additions and 2542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/Cards-jquery.html Executable file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery</title>
<link href="style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<nav>
<ul>
<li id="logoNav">CODE INSTITUTE</li>
<li id="stream1_btn">Stream 1</li>
<li id="stream2_btn">Stream 2</li>
<li id="stream3_btn">Stream 3</li>
</ul>
</nav>
<div class="card stream1">
<img class="card_image" src="img/3.png" alt="coding icon">
<div class="card_bottom">
<h2 class="card_head">HTML</h2>
<p class="card_para">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. </p>
<a href="" class="bottom_button">Button</a>
</div>
</div>
<div class="card stream3">
<img class="card_image" src="img/1.png" alt="coding icon">
<h2 class="card_head">MySql</h2>
<p class="card_para">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</p>
<a href="" class="bottom_button">Button</a>
</div>
<div class="card stream2">
<img class="card_image" src="img/2.png" alt="coding icon">
<h2 class="card_head">Python</h2>
<p class="card_para">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</p>
<a href="" class="bottom_button">Button</a>
</div>
<div class="card stream1">
<img class="card_image" src="img/3.png" alt="coding icon">
<div class="card_bottom">
<h2 class="card_head">jQuery</h2>
<p class="card_para">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. </p>
<a href="" class="bottom_button">Button</a>
</div>
</div>
<div class="card stream3">
<img class="card_image" src="img/4.png" alt="coding icon">
<h2 class="card_head">Django</h2>
<p class="card_para">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.</p>
<a href="" class="bottom_button">Button</a>
</div>
<div class="card stream1">
<img class="card_image" src="img/1.png" alt="coding icon">
<h2 class="card_head">CSS</h2>
<p class="card_para">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.</p>
<a href="" class="bottom_button">Button</a>
</div>
<div id="my_footer">
<p id="copyright">Copyright Infomation</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
</body>
</html>

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/3.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/4.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/code-institute.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-1.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-2.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-3.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/img/slider-4.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

20
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/script.js Executable file
View File

@@ -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');
});
});

7
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/statements.js Executable file
View File

@@ -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");

157
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/challenge_solution/style.css Executable file
View File

@@ -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;
}
}

70
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/Cards-jquery.html Executable file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery</title>
<link href="style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<nav>
<ul>
<li id="logoNav">CODE INSTITUTE</li>
<li id="stream1_btn">Stream 1</li>
<li id="stream2_btn">Stream 2</li>
<li id="stream3_btn">Stream 3</li>
</ul>
</nav>
<div class="card stream1">
<img class="card_image" src="img/3.png" alt="coding icon">
<div class="card_bottom">
<h2 class="card_head">HTML</h2>
<p class="card_para">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. </p>
<a href="" class="bottom_button">Button</a>
</div>
</div>
<div class="card stream3">
<img class="card_image" src="img/1.png" alt="coding icon">
<h2 class="card_head">MySql</h2>
<p class="card_para">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</p>
<a href="" class="bottom_button">Button</a>
</div>
<div class="card stream2">
<img class="card_image" src="img/2.png" alt="coding icon">
<h2 class="card_head">Python</h2>
<p class="card_para">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</p>
<a href="" class="bottom_button">Button</a>
</div>
<div class="card stream1">
<img class="card_image" src="img/3.png" alt="coding icon">
<div class="card_bottom">
<h2 class="card_head">jQuery</h2>
<p class="card_para">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. </p>
<a href="" class="bottom_button">Button</a>
</div>
</div>
<div class="card stream3">
<img class="card_image" src="img/4.png" alt="coding icon">
<h2 class="card_head">Django</h2>
<p class="card_para">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.</p>
<a href="" class="bottom_button">Button</a>
</div>
<div class="card stream1">
<img class="card_image" src="img/1.png" alt="coding icon">
<h2 class="card_head">CSS</h2>
<p class="card_para">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.</p>
<a href="" class="bottom_button">Button</a>
</div>
<div id="my_footer">
<p id="copyright">Copyright Infomation</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
</body>
</html>

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/3.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/4.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/code-institute.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-1.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-2.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-3.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/img/slider-4.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

20
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/script.js Executable file
View File

@@ -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');
});
});

38
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/statements.js Executable file
View File

@@ -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("<h1>This is my fancy new content. Thanks jQuery, you're the best!</h1>");
// 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("<p>This is a new element</p>");
// Append a span containing the copyright to the footer
$("my_footer").append("<span>&copy; 2017.</span>")

157
FromJavaScriptTojQuery-master/02-jQueryIntroduction/04-changing_html_and_css_with_jquery/video_solution/style.css Executable file
View File

@@ -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;
}
}