Skip to content

Commit

Permalink
Added 4 Projects
Browse files Browse the repository at this point in the history
  • Loading branch information
@mr-eaze
mr-eaze committed Dec 11, 2013
0 parents commit 954ebc1
Show file tree
Hide file tree
Showing 91 changed files with 6,144 additions and 0 deletions.
81 changes: 81 additions & 0 deletions Shapes/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<html>

<head>
<title>jQuery Test</title>
</head>

<body>

<link rel="stylesheet" type="text/css" href="style.css">

<!-- Header -->

<h1 class="text" id="header">Color-<span id="a">A</span>-Shape</h1>


<!-- Shape Picker -->

<div id="pickerShape">
<h2 class="title" id="titleShape">Shape</h2>

<div class="buttonContainer" id="shapeButtonContainer">

<button class="button" id="buttonSquare">
<div class="shape" id="square"></div>
</button>

<button class="button" id="buttonCircle">
<div class="shape" id="circle"></div>
</button>

<button class="button" id="buttonTriangle">
<div class="shape" id="triangle"></div>
</button>

</div>
</div>


<!-- Color Picker -->

<div id="pickerColor">
<h2 class="title" id="titleColor">Color</h2>

<div class="buttonContainer" id="colorButtonContainer">

<button class="button" id="buttonBlue">
<div class="color" id="blueColor"></div>
</button>

<button class="button" id="buttonGreen">
<div class="color"id="greenColor"></div>
</button>

<button class="button" id="buttonRed">
<div class="color"id="redColor"></div>
</button>

</div>
</div>


<!-- Display Area -->

<div id="newShapeContainer">
<div class="newShapeArea">
<div class="invisibleShape" id="bigSquare" ></div>
<div class="invisibleShape" id="bigCircle" ></div>
<div class="invisibleShape" id="bigTriangle"></div>
</div>
</div>


<!-- jQuery CDN -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="main.js"></script>


</body>

</html>
46 changes: 46 additions & 0 deletions Shapes/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
// jQuery = $


// Shape Picker

$("#buttonSquare").click(function() {
$("#bigSquare") .css("display", "inherit");
$("#bigCircle") .css("display", "none" );
$("#bigTriangle").css("display", "none" );
});

$("#buttonCircle").click(function() {
$("#bigCircle") .css("display", "inherit");
$("#bigSquare") .css("display", "none" );
$("#bigTriangle").css("display", "none" );
});

$("#buttonTriangle").click(function() {
$("#bigTriangle").css("display", "inherit");
$("#bigSquare") .css("display", "none" );
$("#bigCircle") .css("display", "none" );
});


// Color Picker

$("#buttonBlue").click(function() {
$("#bigSquare") .css("background-color", "#5c97e6")
$("#bigCircle") .css("background-color", "#5c97e6")
$("#bigTriangle").css("border-bottom", "200px solid #5c97e6")
$("#a") .css("color", "#5c97e6")
});

$("#buttonGreen").click(function() {
$("#bigSquare") .css("background-color", "#98d9ad")
$("#bigCircle") .css("background-color", "#98d9ad")
$("#bigTriangle").css("border-bottom", "200px solid #98d9ad")
$("#a") .css("color", "#98d9ad")
});

$("#buttonRed").click(function() {
$("#bigSquare") .css("background-color", "#ff998f")
$("#bigCircle") .css("background-color", "#ff998f")
$("#bigTriangle").css("border-bottom", "200px solid #ff998f")
$("#a") .css("color", "#ff998f")
});
167 changes: 167 additions & 0 deletions Shapes/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
* {
color: black;
}

#header {
font-family: Arial;
width: 290px;
margin: 50px auto;
text-align: center;
font-size: 40px;
font-weight: bold;
padding: 5px;
border-bottom: dotted LightGray 1px;
}

#a {
color: black;
}

#pickerShape { margin-bottom: 40px; }

#pickerColor { margin-bottom: 40px; }

.title {
font-family: Arial;
font-size: 20px;
line-height: 20px;
display: block;
margin: 10px auto;
text-align: center;
padding: 5px;
border-bottom: dotted LightGray 1px;
}

#titleShape { width: 65px;}

#titleColor { width: 65px; }

button {
background-color: WhiteSmoke;
padding: 0;
border: none;
width: 50px;
height: 50px;
border-radius: 2px;
}

.buttonContainer { margin: auto; }

#colorButtonContainer {
margin: auto;
max-width: 160px;
min-width: 160px;
}

#shapeButtonContainer {
margin: auto;
max-width: 160px;
min-width: 160px;
}

.shape {
padding: 0;
margin: 0;
vertical-align: center;
display: inline-block;
width: 50px;
height: 50px;
}

#square {
margin: 10px auto;
width: 20px;
height: 20px;
background-color: black;
}

#circle {
margin: 10px auto;
width: 20px;
height: 20px;
background-color: black;
border-radius: 100%;
}

#triangle {
margin: 10px auto;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid black;
}

.colorButton {
width: 30px;
height: 30px;
border-style: none;
border: solid black 2px;
border-radius: 100%;
display: inline-block;
vertical-align: center;
margin-left: auto;
margin-right: auto;
margin: 10px;
padding: 10px;
}


#blueColor { background-color: #5c97e6; }
#greenColor { background-color: #98d9ad; }
#redColor { background-color: #ff998f; }

.color {
width: 20px;
height: 20px;
border-style: none;
border-radius: 100%;
display: inline-block;
vertical-align: center;
margin: 10px;
}

#newShapeContainer {
width: 310px;
height: 310px;
margin: auto;
padding: 5px;
border: dotted LightGray 1px;
border-radius: 2px;
}

.newShapeArea {
background-color: WhiteSmoke;
width: 300px;
height: 300px;
margin: auto;
padding: 5px;
border-radius: 2px;
}


#bigSquare {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: black;
display: none;
}

#bigCircle {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: black;
border-radius: 100%;
display: none;
}

#bigTriangle {
margin: 50px auto;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid black;
display: none;
Loading

0 comments on commit 954ebc1

Please sign in to comment.