CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapflexbox
ericjb
ericjb

Reputation: 7

How can I dynamically add bootstrap alerts to a page using javascript?

I'm working on creating a todo list using Bootstrap. Here's how I'd like it to look. I've created the form and know how to access the data in the form.

What I don't know how to do is dynamically add the alerts to the page using JavaScript upon clicking the submit button. I'd like the alerts to be a part of the bootstrap grid and scale accordingly with resizing the window.

HTML I'm using below with a variation of Sheikh's answer for the JS. I think I should be able to figure out the rest from here. 

function myAlert(task, days) {
  const wrapper = document.createElement('div');
  wrapper.innerHTML = 
  `<div class="alert alert-warning alert-dismissible fade show" role="alert">
    ${task}</br>${days}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
    </div>`;
  document.body.appendChild(wrapper);
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <!-- Script to add tasks-->
    <script src=scripts.js></script>

    <title>To-do list</title>
  </head>
  <body>
    <div class="container">

          <h1 style="text-align: center">Todo List</h1>

          <form name="form1" action="" onsubmit="event.preventDefault(); myAlert(document.getElementById('task').value, document.getElementById('days').value)">
              <div class="form-group">
                  <label for="task">Task</label>
                  <input id="task" class="form-control" type="text" name="task" required>
              </div>
              <div class="form-group">
                  <label for="days">Days To Complete</label>
                  <input id="days" class="form-control" type="text" name="task"  required>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
          </form>
          <hr/>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 0

Views: 1652

Answers (1)

Mudassir
Mudassir

Reputation: 1520

function myAlert(message){
var wrapper = document.createElement("div");
wrapper.innerHTML = '<div class="alert alert-info" role="alert">'+message+'</div>'
document.body.appendChild(wrapper);}

Then use it like this

myAlert('This is a info alert')

Upvotes: 1

Related Questions