Learning web development: Marking guides and questions

[maurodibert]

Hi @chrisdavidmills!!! How are you? Sorry for my disappearance! hehe, we’re working a lot over here! And now… I came back with my questions! hehe

I’m on the first septs of Java Script and cannot understand why after the second line you use “[i]”. I hope don’t bother you with sth maybe silly! Have a nice day!

Active learning: Printing those products!

for(var i = 0; i < products.length; i++) {
 var subArray = products[i].split(':');
 var name = subArray[0];
 var price = Number(subArray[1]);
 total += price;
 itemText = name + ' — $' + price;

[markhwebster]

Hi, thanks for creating all these lessons! I’ve been using some time off work to study JavaScript here at your awesome website.

I got all the way thru to your IndexedDB notes demo lesson with very few problems. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage

But now I’ve got some strange problems with the ‘notes demo’ exercise. It works in some places, but not others.

I can get my code to work when I upload to my server and view it on my iPhone in either Chrome or Safari.

I can also get my code to work when I use Safari on my 2016 macbook. Here is my code:
http://websterart.com/html/study-js/toDoIndexed/indexed.html

But my code will not work when I view the same page in Chrome or Firefox on my macbook.

However, when I posted the exact same code at codepen, it works great in Chrome on my macbook:

But that same code won’t work locally on my macbook in Chrome, Firefox or Safari, I’m using xxamp.
http://localhost/www/html/study-js/toDoIndexed/indexed.html

Anytime the code won’t work, whether it’s local on my macbook, or online in Chrome on my server http://websterart.com/html/study-js/toDoIndexed/indexed.html

It throws this error:
////
Uncaught DOMException: Failed to execute ‘transaction’ on ‘IDBDatabase’: One of the specified object stores was not found. “and it says the error is on line 97 of my indexed.js file.
////
Any thoughts? I love this little toDo note app and would like to pretty it up if I could get it working everywhere.

Thanks for looking into it,

mark webster
websterart.com

[2alin (adilson)]

@maurodibert Loop structures (<for>) are used to run across a list of elements and somehow either work with those elements or apply something to them. In our assessment the idea is to take every element of our original list (elements of the form name:price), split each element and then total them up and print the desire string in the list. But to be able to work with each of those elements (name:price), we need a “index” variable that can take the values from 0 to 4 (less than products.length) and the variable (index) used is “i” . And of course as the course had explained, if you have a list and want to accesss an element of the list you need to use listName[positionIndex].
I hope I was able to help you. If you still have any doubts, let me know; I can give you more code examples about working with lists using loops.

[jennoskl]

Hey there, I was having trouble understanding the Looping code section, the Active learning: Filling in a guest list. The last part of the code refused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + '.'; admitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + '.';
kind of baffles me. Basically, I don’t understand how .textContent.length-2 works… what it does to the output.

[chrisdavidmills]

@maurodibert Hi Mauro! Sorry for missing this for so long ;-| @2alin is pretty much correct.

• Array values are read using bracket notation, so for example you can read the second value of an array with myArray[1] (remember computers count from 0, not 1!)
• In this case we are looping through all the values inside the products array using a for() loop.
• Each time the loop runs, the value of i increases by 1, so the first time it runs, products[i] is equal to products[0], then second time it is products[1], and so on.

[chrisdavidmills]

Hi Mark,

Thanks for getting in touch, and I’m sorry it’s taken me so long to get back to you.

I had a good look at your code, and tested it out both locally and on a server. The error I kept getting was along the lines of “NotFoundError: The operation failed because the requested database object could not be found. For example, an object store did not exist but was being opened.” when the displayData() function was being run.

I eventually spotted this typo:

request.onugradeneeded = function(e) {

should be

request.onupgradeneeded = function(e) {

So the database was being created and opened, but then the upgrade code was never being run, so displayData() then couldn’t open the object store containing the data because it didn’t exist.

Your code seems to run fine once this is fixed.

One thing you might need to do after fixing the typo is update your DB version number say to version 2, i.e.

let request = window.indexedDB.open('notes', 2);

This is because if the database already exists, the code to upgrade it won’t run, so you need to create a new version of it.

Hope this helps.

[chrisdavidmills]

Hi @jennoskl,

Nice to hear from you!

So this is a good question — these two lines are not the simplest to understand! Let’s walk through one of them; both of them do exactly the same thing, except that one works on the “admitted” string, and one of them works on the “refused” string.

So, after the loop finishes running, the contents of the “refused” string are "Refuse: Phil, Lola, " - note the extra space at the end. This is because each time to loop adds a name to the list, it adds it with a comma then a space after it.

This is fine for the names in the middle of the list, but looks wrong at the end of the list. What we want to do is remove the comma and extra space at the end of the list and replace them with a full stop. This is what this line does:

refused.textContent.slice(0,refused.textContent.length-2) + '.';

So, walking through it:

• refused is a reference to a paragraph element.
• We want to manipulate the text content of this paragraph, so we use refused.textContent to reference the text string.
• We then use the slice() function to return a substring taken from this string. The slice we want is between character 0 of the string (the first character) and the third from last character (the last character of the final name in the list).
• To get the position of the third from last character, we use refused.textContent.length-2. You might think it should be -3, not -2, but it isn’t. The length of the textContent is 19 characters, but the position of the last character is 18, because computers count from 0. Therefore, we’ve already got a position number that is one less than we thought, so we only need to subtract 2 to get to the position we want.

Does this help at all? Let me know if you need any more clarification.

[markhwebster]

Chris,

Great catch! That definitely fixed it. No worries about the long reply time.

I really wanted it to work though, so I found another IndexedDB lesson over at treehouse. It is written a little differently, but seemed familiar after yours and worked first try.

http://blog.teamtreehouse.com/create-your-own-to-do-app-with-html5-and-indexeddb

I prettied it up a little and added some drag functionality for smartphones:

https://websterart.com/html/study-js/treehouse/treeslip.html

I continued on into your Django lessons but eventually realized I was over my head, as I don’t know Python.

I decided I should return to Javascript for a deeper understanding and am now working through a book called:

Eloquent Javascript

At 64, I do sometimes wonder if I’m too old to learn this stuff. It takes a lot of repetition to make the logic stick in my tired old brain.

I will be back to teaching beginning HTML and Front End development here in a week at www.cptc.edu. I plan to continue studying Javascript on the side though.

All the best,

• mark

https://websterart.com/html/landscapes-v4.php

[chrisdavidmills]

Nice work Mark. I’m glad I was able to help you a bit anyway.

The Treehouse stuff is really good; I also rate Eloquent JavaScript — I read that when I was first learning, and it is good for explaining some of the weirder bits of the language.

I don’t think you are ever too old to learn new things. On one of my previous jobs I used to regularly talk to an 80 year old guy what was learning HTML and CSS so he could share pictures with his family overseas. That was really cool.

Best of luck for the teaching. I’d be interested in knowing what stuff exactly you teach in your course, and if my material would be any help to your students.

[markhwebster]

Chris,
We teach computer newbies how to become full stack developers. I specialize in front end development (Photoshop, HTML5, CSS3, Javascript animation - banners, ADA and Wordpress + PHP ), while my co-teacher covers OOP PHP and MySQL. Our students end up with a portfolio style website with a handbuilt ecommerce shopping cart.

I’m studying to expand into some of the higher end Javascript libraries and apps like React and Node.

I will definitely be bringing my Javascript students to your website. I particularly liked this lesson on the Number Guessing Game:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash

I modified your game a bit into an animated hangman game optimized for phones. It’s fun drawing the SVG art and animating it:

http://websterart.com/html/hangman4.html

Thanks again for building all those lessons, it’s a great resource!

• mark

[chrisdavidmills]

Thanks for the rundown Mark, sounds like a really interesting course with a good balance. Nice to see that the ADA/a11y angle is covered as well; this is overlooked by so many unfortunately.

I am glad you like the JS articles. I am updating them soon so they cover all the modern ECMAScript syntax (e.g. arrow functions, template literals, forEach…). We probably won’t cover frameworks like React, as they tend to do a good job of writing their own documentation, and we want to concentrate on pure web technologies rather than things built on top of them.

We do cover Node in our server-side module - same place you found the Django stuff.

I really like your hangman game - a nice evolution of my original example!

Thanks again, and feel free to keep in touch if you have any other queries or suggestions for improvement of my articles.

[maurodibert]

@chrisdavidmills Hi Chris!!! Sorry me now! I’ve with a lot of things and starting studying again now! Really thanks for the answer, both of you! @2alin!

[chrisdavidmills]

No worries - nice to hear from you!

[2alin (adilson)]

@maurodibert
you’re welcome , and happy to have you back. Let’s keep learning!

[maurodibert]

hehe thanks, @chrisdavidmills! and @2alin And look: I’ve found this before but I’ve forgot to tell you and since I’m reviewing, I’ve noticed again: in the text says there’s a live example but there isn’t! he.

Have a nice day man!

[chrisdavidmills]

Ha, that is funny — I did have an example written to link to there, but never actually linked it up! I have added the links to the live example and the source code now. Thanks for pointing it out!

[maurodibert]

I’ve imagined sth like that! hehe Not at all man! And since I’m here again I have to annoy you with some sort of question! hehe: I was wondering: how can I see a specific javascript code of a specific part of an html? Suppose I try to see in the inspector how a button works? Could I see JS code that makes that works?

Thanks!