JavaScript and ui overthinking it[closed]

1

I don’t know why but I struggle a lot with JavaScript And making it work with the ui. Any tips? I get how closures and everything else works but when it comes to the ui I feel like I over think it.

2

Could you give a more concrete example? Share some code you’re working on?

3

As PS says, it’s hard to answer without seeing an example.

But generally, I think you learn good UI/UX by using lots of web pages. Figure out what works and what doesn’t. There are a lot of good books too. I reccomend “Don’t Make Me Think” by Krug - it’s a fast read and makes you think about UX.

1 Like
4

Well for example I did Jonas’ the complete JavaScript course and in that course we made a game called pig game. After I finished doing it I tried again but this time by myself and I couldnt do it. And another example is on the object oriented course in tree house I couldn’t do the quiz project it confuses me I could do all those projects using the console and prompt but I can’t when it comes down to making it work with the HTML. Thanks I will check out that article.

5

http://domenlightenment.com/

This was shared with me and I’ll share it with you. I don’t know if it’s the kind of help you’re looking for, but it could be worth a read.

6

OK, I think I’m starting to understand. I thought you meant the design of the UI and although it’s still not clear to me, it sounds like you’re talking about the mechanics of the UI.

…but I can’t when it comes down to making it work with the HTML.

Then perhaps you need to step back and make sure that you understand HTML. Free Code Camp can surely get you started. Web design is based on a few fundamental things, of which HTML is an important one. I would make sure I was very comfortable with that before going much further.

That being said, I think you’ll find that the more specific your question, the better the response you’ll get. Questions like, “I don’t get how for AJAX works.” don’t do very well. But questions like, “Here’s link to a codepen and on line 47 I make an AJAX call. I expected it to do X, but it did Y. What am I doing wrong?”

Very specific questions get better answers. I would recommend just to start building very simple UIs. The fCC builds are a great place to start. Let us know if you run into trouble.

7

Thanks @lfaudreejr I Will shortly be reading that. @ksjazzguitar here is a link to my a short codepen project it is not finished yet but I don’t know how I am going to check the clicked choice to see if it is the correct answer or not. Here is the link https://codepen.io/Avalos010/pen/WOjYjK

8

I made some slight changes to your HTML and you JS:

<header>
  <h1> Questions </h1>
</header>
<div class="container">
  <h3 id="question"> Question </h3>
  <button class = "btn-answer" id="choice-1"></button>
  <button class = "btn-answer" id="choice-2"></button>

  <p> <span id="answered"> 0 Out Of <span id="total"> 0 </span></span></p>

</div>

and…

function Question(question,choices,answer) {
  this.question = question;
  this.choices = choices;
  this.answer = answer;
}

var questions = [ new Question("Where is Chicago Located?",["iowa",'illinois'], 'illinois'),
                  new Question("Where is the United States Located?",['North America','Central America'], 'North America')
                ];

var currentQuestion = 0;

document.querySelector('#question').innerText = questions[currentQuestion].question;
document.querySelector('#choice-1').innerText = questions[currentQuestion].choices[0];
document.querySelector('#choice-2').innerText = questions[currentQuestion].choices[1];


var answerBtns = document.getElementsByClassName('btn-answer');
for (var i=0; i < answerBtns.length; i++) {
  answerBtns.item(i).onclick = handleAnswer;
}

function handleAnswer() {
  if (this.innerText == questions[currentQuestion].answer)
    console.log("Good job, " + this.innerText + " is correct!");
  else
    console.log("Opps! Sorry, " + this.innerText + " is wrong, we were looking for " + questions[currentQuestion].answer);
}

This should get you started. I think it would be a little easier with jQuery (isn’t everything) but this will work. A few things could be dry-ed up a bit (like using a loop to assign the answers to their buttons and looping for all the questions, etc.), as this expands, but this gets you on the right track.

9

okay so i finally finished it, the code may not look pretty but it is 80% functional and that is me making progress lol all i need now is to practice even more and get better at dry code also. Thank you guys for all the articles you have shared with me.

p.s This is the fist time i ever ask for help for Web development i don’t know why i never ask for help maybe its the anxiety. Asking for help is one of the most helpful things out there.

10

Yes, asking for help is good. And this is a great bunch of guys. When you ask for help elsewhere, you may run into a few - ignore them.