technolyceum/g11-m2
Template
15
0
Fork 6
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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

68
FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/css/style.css Executable file
View File

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

53
FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/index.html Executable file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Challenge A</title>
<!--add css here-->
<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>
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet'>
</head>
<body>
<div class="superButton makeBlue">Reset</div>
<div id="panel">
<div class="container">
<div class="container">
<div class="theButton makeBlue red"></div>
</div>
<div class="container">
<div class="theButton makeBlue green"></div>
</div>
<div class="container">
<div class="theButton makeBlue blue"></div>
</div>
<div class="container">
<div class="theButton makeBlue blue"></div>
</div>
<div class="container">
<div class="theButton makeBlue red"></div>
</div>
<div class="container">
<div class="theButton makeBlue green"></div>
</div>
<div class="container">
<div class="theButton makeBlue red"></div>
</div>
<div class="container">
<div class="theButton makeBlue green"></div>
</div>
<div class="container">
<div class="theButton makeBlue blue"></div>
</div>
<div class="container">
<div class="theButton makeBlue green"></div>
</div>
</div>
</div> <!--ensures page has loaded when scripts placed at body bottom-->
<script src="js/script.js"></script>
</body>
</html>

34
FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/07-other_traversing_methods_challenge_1/js/script.js Executable file
View File

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