Added dirocty from javascript to jquery
This commit is contained in:
@@ -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="css/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" class="stream-nav">Stream 1</li>
|
||||
<li id="stream2" class="stream-nav">Stream 2</li>
|
||||
<li id="stream3" class="stream-nav">Stream 3</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="card stream1-card">
|
||||
<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-card">
|
||||
<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-card">
|
||||
<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-card">
|
||||
<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-card">
|
||||
<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-card">
|
||||
<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="js/script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -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");
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class='card'>
|
||||
<p>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>
|
||||
</div>
|
||||
<div class='card'>
|
||||
<p>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>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
$('p').click(function() {
|
||||
$(this).slideToggle('slow');
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="box one">
|
||||
</div>
|
||||
<div class="box three">
|
||||
</div>
|
||||
<div class="box one">
|
||||
</div>
|
||||
|
||||
<div class="box two">
|
||||
</div>
|
||||
<div class="box one">
|
||||
</div>
|
||||
<div class="box two">
|
||||
</div>
|
||||
|
||||
<div class="box three">
|
||||
</div>
|
||||
<div class="box three">
|
||||
</div>
|
||||
<div class="box two">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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");
|
||||
}
|
||||
});
|
||||
})
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class='card'>
|
||||
<button class="makeRed">Button One</button>
|
||||
</div>
|
||||
<div class='card'>
|
||||
<button class="makeRed">Button Two</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
$('button').mouseenter(function() {
|
||||
$(this).removeClass('makeRed').addClass('makeBlue');
|
||||
});
|
||||
|
||||
$('button').mouseleave(function() {
|
||||
$(this).removeClass('makeBlue').addClass('makeRed');
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="box one">
|
||||
</div>
|
||||
<div class="box three">
|
||||
</div>
|
||||
<div class="box one">
|
||||
</div>
|
||||
|
||||
<div class="box two">
|
||||
</div>
|
||||
<div class="box one">
|
||||
</div>
|
||||
<div class="box two">
|
||||
</div>
|
||||
|
||||
<div class="box three">
|
||||
</div>
|
||||
<div class="box three">
|
||||
</div>
|
||||
<div class="box two">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user