I am trying to center the text of a button in a todoList app and I keep messing up

1

Here is what I expect the text in my button to look like:

image
image1920×950 12.1 KB

Here is what I get:

image
image1917×961 17.7 KB

Notice how the text in the button is at the very bottom of my button?

Here is the link to my code.

2

You have set the height of your button to be 55px, so now you also need to set the line-height to be also 55px

1 Like
3

That work. Now I am trying to add text in which each time I add text, the text is added to a new line and the form box also extends each time text is added(since I want to add as many items as I can), but now everytime I click to add text to my form, it always starts on a new line .
Here is what I want:

https://romeojeremiah.github.io/bluelime-todo-list/

Here is what I get
https://codepen.io/noblegas/pen/dyYpXBa

4

That did it . Now I have a question about another problem in this app which I asked below this comment

5

Currently You have this ↓↓↓ for adding new tasks:

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);
})

SOLUTION:

  1. In HTML you need to replace <div class="result"></div> with <ul class="result"></ul>
  2. In JS modify eventlistener on button click:
button.addEventListener('click',function(e){
    e.preventDefault();
    let text = document.createElement('li');     // creating <li></li> element
    text.innerText = input.value;   // adding text value into <li>input.value</li>
    result.appendChild(text);       // inserting <li> into <ul class="result">
})
  1. Add some styling for .result:
.result {
    margin-top: 20px;
    margin-left: 35px;
    list-style: none;
}