Is there a way for me to programmatically remove a user-inputted paragraph in JavaScript after a delay of 2 seconds

Question

Is there a way for me to programmatically remove a user-inputted paragraph in JavaScript after a delay of 2 seconds

Recently, I mastered the art of creating a to-do list using JavaScript. As a fun personal project, I decided to implement this knowledge in creating a "Share Your Secret" website. The concept is simple: users can share their secrets anonymously on the platform.

const mytext = document.getElementById('mytext');
const btn = document.getElementById('btn');
const items = document.getElementById('items');

btn.addEventListener('click', function(e){
  e.preventDefault();
  const paragraph = document.createElement('p');
  paragraph.classList.add("item");
  paragraph.innerText = mytext.value;
  items.appendChild(paragraph);
  mytext.value = '';
 
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: rgb(231, 237, 241);
}
main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10%;
  font-family: "Source Sans Pro", sans-serif;
}
h2 {
  color: rgb(71, 80, 102);
  font-size: 40px;
  margin-bottom: 30px;
}
.myform {
  display: flex;
  justify-content: center;
  align-items: center;
}
#btn {
  margin-left: 10px;
  width: 40px;
  height: 100px;
  white-space: pre-line;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 2px 2px rgb(184, 182, 182);
  color: rgb(35, 70, 136);
}
#btn:active {
  color: rgb(48, 95, 182);
  box-shadow: 0 0 2px grey;
}

#mytext {
  background-color: aliceblue;
  border-radius: 10px;
  border: none;
  padding: 7px;
  box-shadow: 1px 1px rgb(200, 207, 212);
  outline: none;
}
.items {
  border-radius: 5px;
  font-family: cursive;
  color: rgb(61, 61, 60);
  width: 400px;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding: 5px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./styles.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
<main>
  <h2>Write Your Secret</h2>
  <div class="container">
    <form class="myform" action="">
      <textarea name="text" id="mytext" cols="30" rows="10" placeholder="Write Whatever You Wish"></textarea>
      <button id="btn">S
        h
        a
        r
        e</button>
    </form>
    <div class="items" id="items"></div>
  </div>
  
</main>

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

In the to-do app example, when a user enters something in the input box, their secret gets displayed on the screen. However, for my "Share Your Secret" website, I have a specific requirement - any shared secret should disappear automatically after 2 seconds. This adds a level of mystery and anonymity to the platform. Initially, I just want the secrets to vanish quickly, similar to how ink vanishes in the Harry Potter movies from Tom Riddle's diary. The visual effect is secondary; the primary goal is to make the secrets disappear after 2 seconds.

javascript html css

Answer 1

Answer №1

By simply inserting the following code snippet:

setTimeout(() => paragraph.classList.add("hidden"), 2000)

You can achieve your desired effect by adding the "hidden" class after a 2-second delay. The class hidden can be customized to hide elements based on your preferences, including setting visibility to hidden, or implementing transition effects like the one described below:

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

If you opt for a transition as demonstrated above, you can incorporate the following line to remove the element once the transition is complete:

paragraph.addEventListener('transitionend',() => paragraph.remove())

See the live example provided below for a better understanding.

const mytext = document.getElementById('mytext');
const btn = document.getElementById('btn');
const items = document.getElementById('items');

btn.addEventListener('click', function(e){
  e.preventDefault();
  const paragraph = document.createElement('p');
  paragraph.classList.add("item");
  paragraph.innerText = mytext.value;
  items.appendChild(paragraph);
  mytext.value = '';

  paragraph.addEventListener('transitionend',() => paragraph.remove())
  setTimeout(() => paragraph.classList.add("hidden"), 2000)
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: rgb(231, 237, 241);
}
main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10%%;
  font-family: "Source Sans Pro", sans-serif;
}
h2 {
  color: rgb(71, 80, 102);
  font-size: 40px;
  margin-bottom: 30px;
}
.myform {
  display: flex;
  justify-content: center;
  align-items: center;
}
#btn {
  margin-left: 10px;
  width: 40px;
  height: 100px;
  white-space: pre-line;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 2px 2px rgb(184, 182, 182);
  color: rgb(35, 70, 136);
}
#btn:active {
  color: rgb(48, 95, 182);
  box-shadow: 0 0 2px grey;
}

#mytext {
  background-color: aliceblue;
  border-radius: 10px;
  border: none;
  padding: 7px;
  box-shadow: 1px 1px rgb(200, 207, 212);
  outline: none;
}
.items {
  border-radius: 5px;
  font-family: cursive;
  color: rgb(61, 61, 60);
  width: 400px;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding: 5px;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

<main>
  <h2>Write Your Secret</h2>
  <div class="container">
    <form class="myform" action="">
      <textarea name="text" id="mytext" cols="30" rows="10" placeholder="Write Whatever You Wish"></textarea>
      <button id="btn">S
        h
        a
        r
        e</button>
    </form>
    <div class="items" id="items"></div>
  </div>

</main>

Answer 2

By simply inserting the following code snippet:

setTimeout(() => paragraph.classList.add("hidden"), 2000)

You can achieve your desired effect by adding the "hidden" class after a 2-second delay. The class hidden can be customized to hide elements based on your preferences, including setting visibility to hidden, or implementing transition effects like the one described below:

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

If you opt for a transition as demonstrated above, you can incorporate the following line to remove the element once the transition is complete:

paragraph.addEventListener('transitionend',() => paragraph.remove())

See the live example provided below for a better understanding.

const mytext = document.getElementById('mytext');
const btn = document.getElementById('btn');
const items = document.getElementById('items');

btn.addEventListener('click', function(e){
  e.preventDefault();
  const paragraph = document.createElement('p');
  paragraph.classList.add("item");
  paragraph.innerText = mytext.value;
  items.appendChild(paragraph);
  mytext.value = '';

  paragraph.addEventListener('transitionend',() => paragraph.remove())
  setTimeout(() => paragraph.classList.add("hidden"), 2000)
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: rgb(231, 237, 241);
}
main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10%%;
  font-family: "Source Sans Pro", sans-serif;
}
h2 {
  color: rgb(71, 80, 102);
  font-size: 40px;
  margin-bottom: 30px;
}
.myform {
  display: flex;
  justify-content: center;
  align-items: center;
}
#btn {
  margin-left: 10px;
  width: 40px;
  height: 100px;
  white-space: pre-line;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 2px 2px rgb(184, 182, 182);
  color: rgb(35, 70, 136);
}
#btn:active {
  color: rgb(48, 95, 182);
  box-shadow: 0 0 2px grey;
}

#mytext {
  background-color: aliceblue;
  border-radius: 10px;
  border: none;
  padding: 7px;
  box-shadow: 1px 1px rgb(200, 207, 212);
  outline: none;
}
.items {
  border-radius: 5px;
  font-family: cursive;
  color: rgb(61, 61, 60);
  width: 400px;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding: 5px;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

<main>
  <h2>Write Your Secret</h2>
  <div class="container">
    <form class="myform" action="">
      <textarea name="text" id="mytext" cols="30" rows="10" placeholder="Write Whatever You Wish"></textarea>
      <button id="btn">S
        h
        a
        r
        e</button>
    </form>
    <div class="items" id="items"></div>
  </div>

</main>

Answer 3

Answer №2

 const button = document.getElementById('button');
 const list = document.getElementById('list');

 const cleanInput = () => {
    setInterval(function(){textInput.value = ''; }, 2000);
 }

button.addEventListener('click', function(event){
  event.preventDefault();
  const listItem = document.createElement('p');
  listItem.classList.add("item");
  listItem.innerText = textInput.value;
  list.appendChild(listItem);
  textInput.value = ''; 
});

cleanInput()

Answer 4

 const button = document.getElementById('button');
 const list = document.getElementById('list');

 const cleanInput = () => {
    setInterval(function(){textInput.value = ''; }, 2000);
 }

button.addEventListener('click', function(event){
  event.preventDefault();
  const listItem = document.createElement('p');
  listItem.classList.add("item");
  listItem.innerText = textInput.value;
  list.appendChild(listItem);
  textInput.value = ''; 
});

cleanInput()

Is there a way for me to programmatically remove a user-inputted paragraph in JavaScript after a delay of 2 seconds

Answer №1

Answer №2

Similar questions

Provide spacing on the sides for a background position

Repositioning singular particles within a Three.JS particle array

In what way is the background-color of WindowInfoBackground utilized?

Is there a way to adjust the width of my editor file in vscode to prevent the need for horizontal scrolling when reading a paragraph to the end?

What is the best way to align images to the right while also centering them in relation to each other?

Ways to prevent the need for multiple if/else statements and repetitious function instances

Only the box that I click on will receive the applied color

successive ajax requests

What is the method used by Bootstrap to create a darker page background behind a modal?

Implementing translation text into a PHP database

Performing various JavaScript functions within a single hyperlink

What specific bower package is required for implementing the locationProvider functionality in AngularJS?

Searching for hidden elements within a div using a filter option

The iteration of an ajax POST handler, looping endlessly

Experiencing difficulties installing the MEAN stack

Utilizing logical operators to assign values to variables in Typescript

JavaScript causes iPad and iPhone browsers to crash while loading images

Vue.js - Testing components with intricate child components

Is there a way to organize a list of arrays within a loop based on a specific index within each array in JavaScript?

`How to Merge Angular Route Parameters?`