One, foreword

Valentine’s Day, which falls on February 14, 2022, is a day of love and romance, as well as flowers, chocolates and greeting cards, where men and women exchange gifts to express their love or friendship.

If there are anyone who wants to declare their love to someone on Valentine’s Day, don’t miss this item.

Second, effect display

1. The first page

The front page is the name of the person who writes ###, and the name of the person you want can be changed at the back. There are two buttons in the middle, agree on the left and disagree on the right.

2. Button selection

The mouse is a moving heart. When you choose a button that disagrees, the button will move according to the track written in the code. Is the success rate 100%, because there is no option to reject (haha).

3. Successful confession

After clicking Agree, a screen appears. Then you can write down your love words and put them in this interface.

Three, code explanation

1. The first page

    <div class="container">
      <div id="preloader">
        <div class="spinner">
          <div class="dashed-loading"></div>// Load the scene</div>
      </div>
      <header class="header"></header>
      <div class="content">/ / text<div class="answer-question">
          <button class="btn btn--yes"></button>// Call the left button<button class="btn btn--no"></button>// Invoke the right button</div>
      </div>
Copy the code

Styles 2.

 .header-name {
        font-size: 3.4 rem;
    }
    .content{// Text style}.music-control{music controlopacity:.1;
    }
    .btn--yes{// Agree the button's CSS parametersposition: absolute; // The relevant positiontop: 198px;
        left: 60px;
    }
    .btn--no{// Disagree with the button's argumentsposition: absolute; // The relevant positiontop: 198px;
        right: 70px;
    }
Copy the code

3. Move the button

<div class="icon-container">// Move up<span class="ti-arrow-up"></span><span class="icon-name"> ti-arrow-up</span>
</div>
<div class="icon-container">// Move to the right<span class="ti-arrow-right"></span><span class="icon-name"> ti-arrow-right</span>
</div>
<div class="icon-container">// Move left<span class="ti-arrow-left"></span><span class="icon-name"> ti-arrow-left</span>
</div>
<div class="icon-container">// Move down<span class="ti-arrow-down"></span><span class="icon-name"> ti-arrow-down</span>
</div>
<div class="icon-container">// Move vertically<span class="ti-arrows-vertical"></span><span class="icon-name"> ti-arrows-vertical</span>
</div>
Copy the code

4. JS control

  btnYes.onclick = () = > {// Click the "Agree" button to enter the interface
    popup.classList.add("show");
  };
  btnClose.onclick = () = > {// Close the current screen
    popup.classList.remove("show");
  };

  overlay.onclick = () = > {
    popup.classList.remove("show");
  };

  btnNo.onclick = () = > {// Define disagree button position
    btnNo.style.top = 100 + "px";// Initialize the coordinates
    btnYes.style.top = 280 + "px";// Initialize the coordinates
  };

  btnNo.onmouseover = (e) = > {
    var x = Math.random() * e.relatedTarget.clientHeight * 0.9;// Random x coordinates
    var y = Math.random() * e.relatedTarget.clientWidth * 0.9;// Random y coordinates
    btnNo.style.top = x + "px";// Move the x axis of the disagree button
    btnNo.style.right = y + "px";// Move the Y-axis of the disagree button
  };
}
Copy the code

Four,

Github source address: vindicate

If anyone wants to declare their love on Valentine’s Day, you can use Github Pages to generate a link for free (as described in the following section, it is very easy to deploy) and visit the website directly after deployment. Can change the word of name character and profession according to oneself requirement, wish everybody finds an object as soon as possible, give birth to your son early yo!

Fifth, making Pages

Github Pages provides a domain name for each account and generates an executable site for projects submitted to the repository.

1. Go to GitHub and create a new public repository named username.github. IO, where username is your GitHub username.

2. Use Git client or manually submit the source file for the Valentine’s Day project. After some time, you will be able to access the page via username.