Justify Content not Working

[naomileron]

Hi @neilmispelaar

Describe the bug I'm having an issue with "justify content." Every time I use it, it doesn't do anything. The text content just stays at its default position. I coloured the flexboxes to have a bright colour so I can see the space that I'm working with, and as far as I can tell, there is enough room for my content to do what I wanted it to.

To Reproduce (Wasn't sure what to put here) Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior I've want my content to be centered and I also wanted one area to have space-between

Screenshots

Desktop (please complete the following information):

• OS: Build 22621.1413
• Browser: Chrome
• Version: Windows 11

Smartphone (please complete the following information):

• Device: iPhone 11
• OS: iOS 16.2
• Browser: Safari
• Version: iOS 16.2 (Wasn't sure what to put here, sorry if this isn't what was meant)

Additional context I also just wanted to make sure that it's okay that I've been using an online tutorial to help me with this assignment?

[naomileron]

Sorry, I forgot to mention something. Also, where I am targeting tasks.task (in the last screen shot), this is not doing anything at all that I am telling it to. I've checked multiple times to make sure I was targeting the right thing, so I'm not sure what I'm doing wrong.

[neilmispelaar]

Hi @naomileron

justify-content:center centres the whole flex object.

If you want to want to centre the text inside a container you would use text-align: center;

Here is some info on text align: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Hope that helps!

--

Your main element is in the center because of justify-content:center

[naomileron]

Thank you! This helped a lot!

[neilmispelaar]

Hi @naomileron

The selector #tasks.task that you are using just has a small bug in it - which we can fix up easily!

First Your HTML structure has an ID of "tasks" and then inside that element you have another ID of "task"

   <div id="tasks">

            <div id="task">

Second Your CSS selector is actually targeting ONE element with an ID and a CLASS

#tasks.task

The above would target:

<div id="tasks" class="task">
  ...
</div>

So, to fix, to target a nested a element you just need to add a space into your selector (note the space in between):

#parent #child {
...
}

Lastly, just double check your selector because you are targeting an id then a class but your HTML has an id inside an id.

[naomileron]

It's working now. Thanks so much for all the clarification!

[naomileron]

hi again @neilmispelaar

I think I'm getting confused with selectors in css. I'm trying to target the text that shows up in the todo list, and in my html, I put id's on each element. I thought this was the correct way to do so, but it doesn't seem to be working:

[neilmispelaar]

A couple of things:

1. IDs have to be unique. You can only have one ID of that name on a page. So you can't have two elements with id="content" on your page. To target multiple elements on a page you must use classes such as: class="whateverClassNameHere"
2. In VSCode, if you hover over your selector in your CSS file, VSCode will give you a "pop-up" that shows you what the selector is targeting.
3. I would recommend using a class="todoText" on your text and then in CSS do:

.todoText { 
  color: var(--light); 
}

VSCode helper:

[neilmispelaar]

Also,

<div id="content">
                <input
                type="text"
                id="text"
                value="My task"
                readonly/>
              </div>

Just noticed that you have an input element that you are using to display your TodoText

So you might need something like this to target the text colour of the input element (not just the text colour of the parent div) Note: I changed the content id to a class called todoText

CSS

.todoText input {
  color: var(--light); 
}

HTML

<div class="todoText">
                <input
                type="text"
                id="text"
                value="My task"
                readonly/>
              </div>

[naomileron]

Thank you so much! It's working now.

[naomileron]

@neilmispelaar Sorry, one more thing. I changed my code so that I only have one id per div, so I changed everything else to a class. I changed my css selector back to what I had before, but now it's not targeting anything anymore.

Here's my html:

and here's my css:

Sorry for so many questions and thank you so much for all your help.

[naomileron]

Sorry, I actually think it's working now. My screen was just very delayed to show the changes.

[neilmispelaar]

LOL. And yay! Glad you sorted it out.

[naomileron]

@neilmispelaar

I've been following a tutorial that shows me how to add an edit button if the user wants to edit their task. Because of this, my js looks a bit different, and at the point where I am, when something is typed into the input, it should be added to the tasks list. When I do that though, I'm getting an error, and I'm not sure what I did wrong. Should I just not include the edit button and stick to the examples you gave in class, or is there a solution for this?

JavaScript:

Console Log:

[neilmispelaar]

Have a look at the console errors - that will give you a clue:

Uncaught ReferenceError: task is not defined

https://imd1005-web-development-winter-2023.github.io/assignment-03-naomileron/main.js:18 main.js:18:5

Notice how the error says "main.js:18". That means the problem is on line 18.

If we bring that line up:

task_content_element.innerText = task; 

So the problem from the error message is that "task is not defined".

So, JavaScript doesn't know what the variable task is.

How are you defining or setting that variable?

[neilmispelaar]

Try something like to troubleshoot:

task_content_element.innerText = "I AM A TASK"; 

[naomileron]

@neilmispelaar

I realized that I didn't define the task variable, so I added that, however now it's giving me an error on line 13 where I added the definition, and I'm not sure what it means.

JavaScript:

Console Log:

Thank you so much for all your help.

[neilmispelaar]

add:

Console.log(input)

To check the value of your input variable.

My guess is that the query selector is wrong (line 4)

[naomileron]

Thanks so much! It was because the query selector was wrong.

The list now accepts input, but now it doesn't print what the user enters. It only displays "add task." I think this is because that's what the value of the submit button is, but I'm not sure how to fix that. Would adding an array help?

html:

site:

JavaScript:

[neilmispelaar]

hey @naomileron

So close! And you are on the right track.

The text for the To Do (that the user provides) is in the <input type=text id=“todo-input” …>

So you want to grab the .value from that element, not the submit button element.

[naomileron]

@neilmispelaar Sorry, I'm a bit lost. So I change task_content_element.innerText = task; to be equal to the input element?

[neilmispelaar]

No worries @naomileron

Step 1:

Change your input variable so that it selects the text box (you are currently selecting the submit button)

const input = document.querySelector(“#todo-input”)

Step 2:

Now that you have a variable that points to the input text box we can use that to set the text for your to do content

task_content_element.innerText = input.value

[naomileron]

@neilmispelaar Thank you so much, everything is working now!

I just had one last question. I'm a bit confused on how to add an empty state to the list. Sorry that I can't quite remember, but which exercises/lecture slides could help me out with this?

[neilmispelaar]

Hi @naomileron

Hmmmmm, I’m not sure which exercise had it actually.

Here’s one strategy you could use:

Put a simple <p class=“empty-message”>Some message here…</p> in your HTML

Then when a user adds their first To do item, in your code when the submit event is fired you could try to find that p element on the page and IF it’s on the page then remove the element from the page.

[naomileron]

Thank you so so much for all your fast responses and help!!

[naomileron]

@neilmispelaar I remember some of my feedback from assignment 02 was to test my site in more browsers, so I just wanted to include some screenshots that show that I did that this time -- on a variety of devices and browser widths:

Sorry that there were so many questions, and thank you again for all your help!