기본 콘텐츠로 건너뛰기

DOM : make the ball move by clicking the field

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    #field {
      width: 200px;
      height: 150px;
      border: 10px solid black;
      background-color: #00FF00;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    #ball {
      position: absolute;
      left: 0;
      top: 0;
      width: 40px;
      height: 40px;
      transition: all 1s;
    }
  </style>
</head>

<body style="height:2000px">

  Click on a field to move the ball there.
  <br>


  <div id="field">
    <img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  </div>

  <script>
    field.onclick = function(event) {
//MIN : its onclick of the field, since the user is going to click inside the field to move
      // window-relative field coordinates
      let fieldCoords = this.getBoundingClientRect();
//MIN : so that it uses this to get the object
//MIN : getting a bounding client rectangle

      // the ball has position:absolute, the field: position:relative
      // so ball coordinates are relative to the field inner left-upper corner
      let ballCoords = {
        top: event.clientY - fieldCoords.top - field.clientTop - ball.clientHeight / 2,
        left: event.clientX - fieldCoords.left - field.clientLeft - ball.clientWidth / 2

/*MIN : clientX / Y by the actual pointer of mouse, fieldCoords from the most left / top point of the document to the start point of black field border, clientLeft to abstract the border thickness itself and abstracting clientH/W to place the ball point to be the middle of the image*/
      };

      // prevent crossing the top field boundary
      if (ballCoords.top < 0) ballCoords.top = 0;

      // prevent crossing the left field boundary
      if (ballCoords.left < 0) ballCoords.left = 0;


      // // prevent crossing the right field boundary
      if (ballCoords.left + ball.clientWidth > field.clientWidth) {
        ballCoords.left = field.clientWidth - ball.clientWidth;
      }

      // prevent crossing the bottom field boundary
      if (ballCoords.top + ball.clientHeight > field.clientHeight) {
        ballCoords.top = field.clientHeight - ball.clientHeight;
      }

      ball.style.left = ballCoords.left + 'px';
      ball.style.top = ballCoords.top + 'px';
    }
  </script>

</body>
</html>
라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

JS 5.5 task6 Create an extendable calculator

<HTML>   <body>   </body>   <script> function Calculator() {   let methods = {     "-" : (a, b) => a - b,     "+" : (a, b) => a + b   };   //methods is an object which keeps key for operators   //and value to return the actual operation values   //each returns the result of operation that key(operator) does   this.calculate = function (str){     //calculate is one element in the function Calculator     //it takes the string and returns the value     //in the function element list is delimeted by , not ;     let split = str.split(" "),     a = +split[0],     op = split[1],     b = split [2]     if(!methods[op] || isNaN(a) || isNaN(b)) {       return NaN; // error handling     }     return methods[op](a,b);   }   this.addMethod = function(name, func){     methods[name] = func;     //this is how to add new key and ele to object   } } let powerCalc = new Calculator; powerCalc.addMethod("*&
댓글 쓰기
자세한 내용 보기

JS 5.7 task5 Store read dates

<HTML>   <body>   </body>    <script>    let messages = [        {text: "Hello", from: "John"},        {text: "How goes?", from: "John"},        {text: "See you soon", from: "Alice"}    ];    let readMap = new WeakMap();    alert(readMap.size);    readMap.set(messages[0], new Date(2019, 3, 5));   </script> </HTML> <!-- task4 needed weakSet to save simply readmessage, this task needs to save THE TIME IT WAS READ along with the message itself the message out of the set or map means it hasn't been read I kinda feel good and bad at the same time to happen to read the solution but I do get to think more about the difference with tasks and be more available to understand the main contents so I think, its good? -->
댓글 쓰기
자세한 내용 보기

How to set base url when deployed in Heroku? : base url and axios

https://stackoverflow.com/questions/47164330/axios-api-calls-in-heroku/47165888 baseUrl = process.env.baseURL || "http://localhost:5000" Even more stable way https://stackoverflow.com/questions/52129849/how-to-get-the-base-url-variable-on-a-deployed-heroku-node-app const production  = 'https://examplePage.com'; const development = 'http://localhost:3000/'; const url = (process.env.NODE_ENV ? production : development); process.env.NODE_ENV will resolve to undefined if you are running on localhost production mode. and return production if you have deployed the app production mode.
댓글 쓰기
자세한 내용 보기