Home > ask for date > impress your crush > Ask for a Date to Crush | Impress Crush |#untoldcoding

Ask for a Date to Crush | Impress Crush |#untoldcoding

December 23, 2023 ,

 Ask for a Date to Crush | Impress Crush 





Click here to see LIVE DEMO





For this Type of Website you have to use HTML, CSS, JS

1st file name should be Index.html whoes source code is given below

Keywords: ask out crush, dating advice, confidence tips, SEO writing, love connection

Index.html





Then We have to add CSS file for Styling 
here is the CSS File 

Style.css




File name must be Style.css


Output:




At last we need a new page which show when we click on yes button 
here is the code 

Yes.html




File name must be Yes.html

Output look like 






Want to Download zip file : Click here


Join us on Telegram : Click here.

Join us on Whatsapp : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.



To create a button which move on random position we have an example


html

1<button id="myButton">Click me</button>

css

1button { 2 position: relative; 3 cursor: pointer; 4 animation: none; 5} 6 7@keyframes move { 8 0% { transform: translate(0, 0); } 9 100% { transform: translate(calc(var(--random-x))px, calc(var(--random-y))px); } 10}

Javascript

1document.getElementById('myButton').addEventListener('click', function() { 2 const randomX = Math.floor(Math.random() * 500); 3 const randomY = Math.floor(Math.random() * 500); 4 5 this.style.setProperty('--random-x', randomX); 6 this.style.setProperty('--random-y', randomY); 7 8 this.style.animation = 'move 1s forwards'; 9});


ssss


In this example, we create a button and give it an ID so we can easily reference it in our JavaScript code.

In the CSS, we define a keyframes animation called 'move' that transforms the button's position to a random point within a 500x500 pixel area.

In the JavaScript, we add an event listener to the button that runs when the button is clicked. Inside the event listener, we generate two random numbers, 'randomX' and 'randomY', to represent the new position of the button.

Then, we use the 'style.setProperty' method to set the CSS variables '--random-x' and '--random-y' to the values of 'randomX' and 'randomY' respectively. This allows us to use these variables in our CSS animation.

Finally, we set the button's animation property to 'move 1s forwards', which applies the 'move' animation to the button and plays it forwards. The animation will last for 1 second and will not repeat.

Now, whenever you click the button, it will smoothly animate to a random position within the specified area.


How to create a button that moves to a random location on hover using JavaScript

Discussion:

HTML:

We create a button with ID "movingButton".

JavaScript:

We select the button using document.getElementById().
We attach a mouseover event listener to the button.
If the process is successful, we do:
Get the width and height of the screen using window.innerWidth and window.innerHeight.
Get the width and height of the button using offsetWidth and offsetHeight.
Create random left-up positions in the screen border to account for the size of the button.
Set the CSS properties to random positions on the left and top of the button.

Manufacturing efficiencies:


Boundaries:

To restrict the button movement to a specific location, change the screenWidth and screenHeight calculations.

Animation of:

Explore using CSS transitions or JavaScript animations for smooth motion effects.
exercise:
Use mouseout or other events for different trigger behavior.

Post a Comment

3 comments:

  1. Anushka Seth30 December 2023 at 09:06

    i wanna know how can i convert my html file in my laptop to a link so that i can send it to my partner

    ReplyDelete

Subscribe to: Post Comments ( Atom )
Powered by Blogger.