cross-stitch design toy

cross-stitch-design-toy.markdown

cross-stitch design toy

made a cross stitch toy for the #notfancyappchallenge and #codepenchallenge.

A Pen by Kassandra escoe on CodePen.

License.

index.html

<div id="container">
  <h1>CROSS-STITCH</h1>
  <ul id="controls">
    <li> <input id="red_btn" type="radio" name="color_btn" value="red" ></li>
    <li> <input  id="green_btn" type="radio" name="color_btn" value="green"></li>
    <li> <input  id="green_btn" type="radio" name="color_btn" value="blue"></li>
     <li> <input  id="pink_btn" type="radio" name="color_btn" value="pink"></li>
    <li> <input  id="yellow_btn" type="radio" name="color_btn" value="yellow"></li>
     <li> <input  id="orange_btn" type="radio" name="color_btn" value="orange"></li>
     <li> <input  id="purple_btn" type="radio" name="color_btn" value="purple"></li>
     <li> <input  id="black_btn" type="radio" name="color_btn" value="black"></li>
  </ul>
  <table>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
       <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
       <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
       <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
       <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
          <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
  </table>
  <button onclick="clearscreen()">clear</button>
  </div>

script.js

$(document).ready(function(){
 var color_value = "black";
  
   $("input[type='radio']").click(function(){
     color_value = $("input[name='color_btn']:checked").val();
      $("h1").css("color",color_value);
    });
  
  $("td").mousedown(function(){
      $(this).css("color",color_value);
  });
  
   $("button").click(function(){
      $("td").css("color", "rgba(0, 0, 0, 0.06)");
  });
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.scss

$black: black;
$bg: grey;
$canvasbg: white;
$hover: grey;

html{
  backkground-color: $bg;
  background-image:url("http://fc09.deviantart.net/fs71/i/2013/352/8/1/newspaper_collage_texture_by_flordeneu-d6yeuvs.jpg")
}
button{
  position:absolute;
  left:160px;
  bottom:10px;
}
#controls{
  float:left;
  li{ list-style:none; }
  #red_btn{}
  #blue_btn{}
  #green_btn{}
}
#container{
  height:400px;
  width:350px;
  position:fixed;
  border: solid black 1px;
  background-color: $canvasbg;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  &:hover {cursor: pointer; }
}
h1{
  text-align: center;
  text-decoration: underline;
}
  td{
  float:right;
  border:1px solid lighten($black ,97%);
  color: lighten($black ,95%);
  /*background-color: grey;*/
  height:20px;
  width:10px;
  padding:2px 6px;
  font-size:20px;
  &:hover{ color:$hover; }
}