JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>todoList</title>
  <link rel="stylesheet" href="styles.css">
  <style>

  </style>
</head>

<body>

  <div class="container">


    <div class="smaller_box">

      <form action="" class="formclass">

        <h1>Todo List</h1>
        <div class="inputgroup">
          <input type="text" style="width:75%; height:55px" />
          <button>Add task</button>
        </div>

        <div class="result">


        </div>
      </form>



    </div>
    
  </div>

</body>

</html>

CSS

.container {
  background: #00ffff;
  min-height: 100vh;
   min-width: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.smaller_box {
  width: 800px;
  min-height: 400px;
  background: #0000ff;
  border: 4px solid #000000;
  margin-bottom: 500px;
  border-radius: 10px;
 
}

h1 {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  color: white;
  font-size: 4rem;
  text-shadow: .1em .1em .2em rgba(0, 0, 0, 0.6);
}

.inputgroup {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

button {
  background: red;
  color: white;
  padding: 1px;
  font-size: 28px;
  height: 55px;
  cursor: pointer;
  font-weight: bold;
  line-height: 55px;
  /*  <-- this was it ! */
  vertical-align: middle;
}

.result {
  border: 1px solid red;
  color: white;
  font-size: 2rem;
  line-height: 3rem;
 word-wrap: break-word;
  display: block;
}

JavaScript

const button = document.querySelector('button');
const input = document.querySelector('input');
const result = document.querySelector('.result');

button.addEventListener('click', function(e) {
  e.preventDefault();
  let text = document.createTextNode(input.value);
  result.appendChild(text);
  let linebreak = document.createElement('br');
  result.appendChild(linebreak);

});