I'm interested in implementing a cooldown feature on my button, but I'm not quite sure how to go about

Working on a React.Js website and looking to improve the Contact Me page by adding a cooldown to the button. Unfortunately, I haven't shared all the code here but feel free to reach out on Discord: uvejs#5162 for more details.

import "./contactpage.css"
import Footer from "../../Components/Footer/Footer";
import Navbar from "../../Components/Navbar/Navbar";
import React, { useRef, useState } from 'react';
import emailjs from '@emailjs/browser';

const initialInputs = {
    return (
        <div className="group">
            <Navbar />
            <form action="" ref={form} onSubmit={sendEmail} className="contact-form">
                <label className="form-input-label" > Your Name
                    <input required name="from_name" value={inputs.from_name} onChange={handleChange} className="form-input" type="text"  />
                </label>
                <br />
                <label required className="form-input-label"> Your Email
                    <input name="from_email" value={inputs.from_email} onChange={handleChange} className="form-input" type="text"  />
                </label>
                <br />
                <label required className="form-input-label" > About Your Project
                    <input name="message" value={inputs.message} onChange={handleChange} className="form-input" type="text"  />
                </label>
                <button className="custom-button" > Send </button>
            </form>

            <Footer />
        </div>
    )
}

export default Contact;

Answer №1

To access the code pen example, simply click on this link - cooldown button

$('button.cooldown').click(function(){
  var btn = $(this);
  btn.prop('disabled', true);
  setTimeout(function(){
    btn.prop('disabled', false);
  },15000);
});
$buttonBaseColor: #336699;
$disableDuration: 15s;
button.cooldown{
  background: $buttonBaseColor;
  min-height: 48px;
  min-width: 144px;
  position: relative;
  margin: 5px;
  border-radius: 5px;
  border: 0;
  color: #fff;
  padding: 0 15px;
  font-size: 16px;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  &:active, &:focus{
    outline: none;
  }
  &:disabled{
    background: darken($buttonBaseColor, 10%);
    color: darken(#fff, 15%);
    cursor: default;
    box-shadow: inset 3px 3px 10px 0px rgba(0,0,0,0.2);
    &:after{
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
      height: 5px;
      background: darken($buttonBaseColor, 20%);
      animation: cooldown $disableDuration linear;
    }
  }
}

@keyframes cooldown {
   0% { width: 100%; }
   100% { width: 0; }
}





/* layout stuff */
section{
  text-align: center;
  margin-top: 100px;
  color: #333;
}
p{font-size: 12px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <button class="cooldown">Push Me!</button>
  <p>This button has a cool down of 30s until re-enabled</p>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I use Express.js to send an image file instead of a binary file?

When dealing with a React request in express, I am encountering an issue where I receive the image binary file instead of the actual image file as a response. I have attempted using methods such as res.sendFile and res.download to send the image, but they ...

Learn the trick to making specific words appear bold in Select2 by changing the font style

I'm currently working with select2 version 4.0.1, and I have a requirement to modify the font for specific words. In particular, I want to display codes AK and HI in a different/bolder font style, similar to the example below: <select id="select2" ...

Optimizing CSS table styles for larger cell width

In my CSS file, I have defined the following style: .ES{ max-width:20px; word-wrap:break-word; } However, when I apply this to my table... <table border="1" cellpadding="2" class="ES" > <tr> <td><input name="rbeso" type="radio" ...

Angular: sending the user input to the component

I'm trying to link the value of an HTML input field to a variable 'numToAdd' in my component, and then increment the 'numToAdd' variable by 1. However, I'm facing difficulties passing the input value to the component variable. ...

Typography splits into a second line within the grid on the toolbar

I need help with my Appbar design. I want to align the title (Lorem ipsum text) on the left and the buttons on the right. However, when I tried implementing the code below, I noticed that there seems to be a maximum width causing the text to break into t ...

Achieving uniform alignment of multiple field labels in Bootstrap and Simple Form

Here is the current layout of my form: https://i.sstatic.net/2vZjl.jpg You may notice that the labels are not properly aligned. I would like them to appear like this: https://i.sstatic.net/gm39D.jpg Below is the code for all the input fields: <%= si ...

Do you believe that using bower to install HTML5Boilerplate is a beneficial decision?

Is it recommended to use HTML5 Boilerplate with Bower for installation? What steps should one take afterwards, considering that it has its own directory structure for CSS and JavaScript, leading everything to be contained under bower_components/html5boil ...

Dissipating visuals / Effortless website navigation

Do you have experience working with HTML or are you looking for specific code examples? I've noticed some websites with sliders that feature clickable images fading in as soon as the page loads. I tried searching for information on how to achieve thi ...

How can JSON data be passed to the Google Charts API?

I am currently working on a project that involves retrieving JSON data from a website and visualizing it on a live graph using the Google Charts API. Despite my efforts, I am unable to get the chart to display properly. Can someone please guide me in the r ...

Exploring the filter method in arrays to selectively print specific values of an object

const array = [ { value: "Value one", label: "Value at one" }, { value: "Value 2", label: "Value at 2" }, { value: "" , label: "Value at 3" } ...

Why should you use DIV comment tags in HTML code and how can you automate their implementation?

As I've been browsing through the codes of various professional websites, I couldn't help but notice how the HTML code is often neatly commented like this: <!-- END DIV Main Menu --> This type of commenting can be really beneficial, don&a ...

Iterate through each entry in the database and identify and fix any duplicate records

In my form, I have a JSON array that includes the name and value of each input. I am attempting to add an "optionprix" attribute for each input with the "optionname" class based on the corresponding value of the input with the "optionprix" class. Here is ...

Using React/JSX arrow functions to map through a JSON object containing an array

A JSON object is at my disposal const slides = [ { title: "Greetings Earthlings", bullets: [ "Enables us to ... communicate", "Allows us to ... connect", "Gives us the ability to ... share", ], slideIndex: 0, }, { ...

Use Enums instead of conditions in Typescript

Consider the code snippet below, which is a function that generates a CSS class based on the value of toCheck: const computeSomething = (toCheck: string) => { return clsx('flex', { 'flex-start': toCheck === 'FIRST', ...

Encountering issues with authentication state being lost upon page refresh while using ReactJS hooks

After logging in with valid credentials, the server sends a JWT to the browser, which is then stored in local storage. The page redirects to the home page and everything works fine until the home page's loadUser function tries to retrieve user details ...

What is the best way to store an array of file names in a single column in a database table?

I have a table named t1 with two columns: id and name. I want to insert file names in the name column. <input type="file" name="files[]" multiple></br> <input type="submit" name="submit" value="ADD"> Table: id | name 1 | e1.jpg, e2 ...

Challenges with ReactToPrint Library and Optimizing Layout for Thermal Printer

Working on a React.js project, I have been using the ReactToPrint library to print a specific section of my page. However, I am facing an issue where the page size remains too large and important content is being left out in the printed receipt. It seems ...

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

React: Combining State and Props in a Single Parameter

I'm a software developer in the early stages of my career. I recently encountered an issue while working with the Textfield component from Material UI. Although I am able to retrieve the value using a property, I am unable to edit the text field. As ...

When using Gatsby to create pages with a single JSON file, any changes made to the data are not automatically

My goal is to dynamically create pages from a single JSON file in Gatsby without utilizing GraphQL. The content of the works.json file appears as follows: [ { "title": "Client Name", "slug": "client-name", ...