My custom rule

In this example below you will see how to do a My custom rule with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by oshios, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oshios ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>My custom rule</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--
원래의 요소들은 각각의 의미가 따로 있습니다.
이 의미들은 전통적인 인쇄 문서에서 유래했기 때문에, 더 많은 쓰임을 위해서 의미를 재정의하고 활용해볼 예정입니다.

화면 단위들
* 선 (Stroke) <s> = 화면 Screen
// 활용: 화면 단위로 제작 예정
* 굵게 (Bold) <b> = 덩어리 Block
// 활용: 요소 덩어리 단위, 흔히 div/span 처럼 사용 예정

항목 단위들
* 기울임 (Italic) <i> = 항목 Item
// 활용: <b> 와 유사하지만, <b> 의 하위 단위로 사용 예정
* 밑줄 (Underline) <u> = 밑면 Underside
// 활용: <b> 또는 <i> 와 유사하지만, 현재 화면 주요 요소가 아닌 부분에 사용 예정

항상 최상위 요소들
* 문단 (Paragraph) <p> = 규정 테두리 Paradigm
// 활용: 최상위 공통 화면 구획에 사용 예정
* 인용 (Quote) <q> = 구석 Quoin
// 활용: 최상위 공통 화면 구획이지만, 주요하지 않은 부분에 사용 예정
-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/oshios/my-custom-rule-xdzrze */
html,
body,
/* <S>creen ------- */ s,
/* <B>lock -------- */ b,
/* <I>tem --------- */ i,
/* <U>nderside ---- */ u,
/* <P>aradigm ----- */ p,
/* <Q>uoin -------- */ q {
   position: static;
   display: block;
   margin: 0;
   padding: 0;
}


/*Downloaded from https://www.codeseek.co/oshios/my-custom-rule-xdzrze */
(function(root) {
   "use strict";
   var _generateGameBoard = function(cell) {
      if (_isNumeric(cell)) {
         throw new TypeError("cell is not numeric.");
      }
      if (cell < 3 || cell > 10) {
         throw new Error(
            "cell value is invalid, allowed scope is over 3 and between under 10."
         );
      }
      var square = cell * cell;
      return {
         data: new Array(square),
         length: cell,
         square: square
      };
   };
   var _isNumeric = function(value) {
      return typeof value === "number" && !isNaN(value);
   };
})(window);

Comments