The Dynamic Form || Small Project (HTML, CSS, JavaScript)

Aftab Ur Rehman May 28, 2024

 The Dynamic Form


Here is the official video link : Click

This project utilizes the core technologies of web development: HTML, CSS, and JavaScript.



  • HTML structures the form, creating two distinct forms: one for the initial question and another for the hidden "thanks" message.
  • CSS styles the design, ensuring a clean layout, visually appealing buttons, and initially hiding the "thanks" form.
  • JavaScript brings the magic to life:
    • Clicking "Yes" submits the "question form" and reveals the hidden "thanks" form, demonstrating the user's positive response.
    • Hovering over "No" triggers a subtle animation using CSS's transform property, creating the illusion of the button shifting to the right.
    • Moving the mouse away from "No" simply reverses the animation, returning the button to its original position.

Here is the source code of this project :

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aftab</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <Div is="container">
        <Div class="box">
            <img src="/Reels/img.jpg" alt="aftab-image">
            <h1>Am I your favorite?</h1>
           
            <a id="yes-button" href="yes.html" type="button">Yes</a>
            <button id="no-button">No</button>
        </Div>
    </Div>


    <script src="scripts.js"></script>
</body>
</html>




CSS: 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: linear-gradient(45deg, rgba(77, 124, 105, 0, 728));
}

#container{
    position: relative;
    width: 500px;
    height: 600px;
    margin: 5px;
    overflow: hidden;
}

img{ /*Depend on your image*/
    width: 50%;
    height: 180px;
}

#yes-button{
    background-color: rgb(255, 0, 0);
    text-decoration: none;
    position: absolute;
    border: none;
    width: 100px;
    border-radius: 10px;
    font-size: 25px;
    padding: 9px;
    padding-left: 25px;
    cursor: pointer;
    transition: top 0.5, left 0.5s;
    margin-top: 20px;
    color: white;
}

#no-button{
    position: absolute;
    left: 25px;
    background-color: rgba(0, 89, 225);
    border: none;
    width: 90px;
    border-radius: 10px;
    font-size: 25px;
    padding: 8px;
    cursor: pointer;
    margin-top: 20px;
    transform: top 0.5, left 0.5s;
    color: white;
}




JavaScript:

let target = document.getElementById('no-button');

function moveTarget() {
    const maxWidth = 400;
    const maxHeight = 400;

    const randomX = Math.floor(Math.random() * maxWidth);
    const randomY = Math.floor(Math.random() * maxHeight);

    target.style.left = randomX + 'px';
    target.style.top = randomY + 'px';
}

target.addEventListener('mouseenter', function () {
    moveTarget();
});





Aftab Ur Rehman

Posted by Aftab Ur Rehman

Post a Comment

0 Comments