Skip to content

Instantly share code, notes, and snippets.

@Dilden

Dilden/html-artwork.markdown

Created September 15, 2016 22:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Dilden/fb423e5d8c109ffe7f40fddc3b84794b to your computer and use it in GitHub Desktop.
Save Dilden/fb423e5d8c109ffe7f40fddc3b84794b to your computer and use it in GitHub Desktop.
Download ZIP
HTML artwork
Raw
html-artwork.markdown

HTML artwork

Use the buttons on the top of the screen to add different shapes with different colors, rotate the shapes, or remove them. Build whatever you can imagine.

A Pen by Dylan Hildenbrand on CodePen.

License.

Raw
index.html
<body>
<input type="button" name="block" value="block" id="block">
<label id="count-block">1</label>
<label id="count-block-text"> block</label>
<input type="button" name="triangle" value="up triangle" id="triangle">
<label id="count-tri">1</label>
<label id="count-tri-text"> triangle</label>
<input type="button" name="circle" value="circle" id="circle">
<label id="count-circle">1</label>
<label id="count-circle-text"> circle</label>
<input type="color" name="colorpicker" value="#2385d1" id="colorpicker">
<input type="button" name="rotate" value="rotate right" id="rotater">
<input type="button" name="delete" value="delete" id="delete">
<span class="grab" data-rot="0"></span>
<span class="tri-contain" data-rot="0">
<div class="triRight"></div>
</span>
<span class="circle" data-rot="0"></span>
</body>
Raw
script.js
$(document).ready(function () {
function clickable(){
$("span").on("click", function(){
var obj = $("body").find(".selected");
if($(this) != obj){
if(!$(this).hasClass('tri-contain')){
}
$(obj).removeClass("selected");
$(this).addClass("selected");
}
});
}
function newObj(){
$("body").append("<span data-rot='0' class='tri-contain'><div class='tri' style=' border-bottom-color: "+ $("#colorpicker").val() +"'></div></span>");
$(".tri-contain").draggable().resizable();
var labelcount = parseInt($("#count-tri").text(), 10);
$("#count-tri").text(labelcount + 1);
if((labelcount+1)!=1){
$("#count-tri-text").text(" triangles");
}
else{
$("#count-tri-text").text(" triangle");
}
$(".tri-contain").on("resize", function(){
var height = $(this).height();
var width = $(this).width();
$(this).find(".tri").css({"border-bottom-width": height, "border-left-width": width/2, "border-right-width": width/2});
$(this).find(".triRight").css({"border-bottom-width": height, "border-left-width": width/2, "border-right-width": width/2});
$(this).find(".triDown").css({"border-top-width": height, "border-left-width": width/2, "border-right-width": width/2});
$(this).find(".triLeft").css({"border-bottom-width": height, "border-left-width": width/2, "border-right-width": width/2});
});
clickable();
}
function newSqr (){
$("body").append("<span class='grab' style='background-color: "+ $("#colorpicker").val() +"' data-rot='0'></span>");
$(".grab").draggable();
$(".grab").resizable();
var labelcount = parseInt($("#count-block").text(), 10);
$("#count-block").text(labelcount + 1);
if((labelcount+1)!=1){
$("#count-block-text").text(" blocks");
}
else{
$("#count-block-text").text(" block");
}
clickable();
}
function newCir (){
$("body").append("<span class='circle' style='background-color: "+ $("#colorpicker").val() +"' data-rot='0'></span>");
$(".circle").draggable();
$(".circle").resizable();
var labelcount = parseInt($("#count-circle").text(), 10);
$("#count-circle").text(labelcount + 1);
if((labelcount+1)!=1){
$("#count-circle-text").text(" circles");
}
else {
$("#count-circle-text").text(" circle");
}
clickable();
}
function deleteObj(){
var delobj = $("body").find(".selected");
// $("body").find(".selected").remove();
var count = 0;
if(delobj.hasClass('tri-contain')){
count = parseInt($('#count-tri').text(), 10);
count--;
$("#count-tri").text(count);
if(count!=1){
$("#count-tri-text").text(" triangles");
}
else {
$("#count-tri-text").text(" triangle");
}
}
else if(delobj.hasClass('circle')){
count = parseInt($('#count-circle').text(), 10);
count--;
$("#count-circle").text(count);
if(count!=1){
$("#count-circle-text").text(" circles");
}
else {
$("#count-circle-text").text(" circle");
}
}
else if(delobj.hasClass('grab')){
count = parseInt($('#count-block').text(), 10);
count--;
$("#count-block").text(count);
if(count!=1){
$("#count-block-text").text(" blocks");
}
else {
$("#count-block-text").text(" block");
}
}
delobj.remove();
}
function rotater(){
var rotation = $(".selected").data('rot') + 45;
$(".selected").css({"transform": "rotate("+rotation+"deg)"}).data('rot', rotation);
}
/* Initialize draggable and droppable elements*/
$("body").droppable();
$(".grab").draggable().resizable();
$(".tri-contain").draggable().resizable();
$(".circle").draggable().resizable();
/* Call to functions */
$("#block").on("click", function(){
newSqr();
});
$("#triangle").on("click", function(){
newObj();
});
$("#circle").on("click", function(){
newCir();
});
$("#delete").on("click", function(){
deleteObj();
});
$("#rotater").on("click", function(){
rotater();
});
clickable();
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
Raw
style.css
body {
height: 100%;
width: 100%;
}
.grab {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
display: block;
}
.tri-contain {
width: 100px;
height: 50px;
/* border: 1px solid black; */
position: absolute;
left: 140px;
display: block;
}
.tri {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;
border-top: none;
}
.triRight {
width: 0;
height: 0;
border: 50px solid transparent;
border-right-color: blue;
border-top: none;
}
.triDown {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: blue;
border-bottom: none;
}
.triLeft {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: blue;
border-top: none;
}
.circle {
width: 40px;
height: 40px;
background-color: green;
position: absolute;
left: 400px;
border-radius: 50%;
display: block;
}
input {
margin: 5px 10px;
}
#delete {
float: right;
margin-right: 30px;
}
.selected {
box-shadow: 5px 5px 5px #000;
}
Raw
styles
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment