Jump to content
Larry Ullman's Book Forums

HartleySan

Members
  • Posts

    3047
  • Joined

  • Last visited

  • Days Won

    243

Everything posted by HartleySan

  1. Hey, Seifer, replying way after the fact. As a general flow, you'll probably want to have a function that renders all the cards based on what's in the array, another function for adding items to the array and a third function for deleting things. Lots of pseudo-code here, but the render function would be something like the following: const render = () => { let html = ''; html += '<ul>'; items.forEach((item) => { html += `<li> // More HTML here for each card </li>`; }); html += '</ul>'; document.querySelector('wherever-you-want-to-put-the-html').innerHTML = html; }; Then, every time a change is made to the items array, you simply call the render function and it does everything for you. This is very similar to how React/Vue, etc. work behind the scenes. The add and remove functions would be something like the following: const add = (item) => { items.push(item); render(); }; const remove = (idx) => { items = items.filter((item, i) => i !== idx); render(); }; Again, being very rough here, but that's the basic flow, and everything else goes around this. You can style things and add whatever functionality you want on top of this. Good luck!
  2. sam, there are a lot of ways you can do this, and there's no "right" answer. I think #1 and #2 in your list are fine. Usually, in a modern MVC (model-view-controller) approach, you DB query for a user would take place in the user model, and your controller that receives the Ajax request would make the call to the user model to begin with. More simply though, if you have a user class, in the script that receives the Ajax request, you can call methods in the user class however you see fit, and once you have all the data you need from the DB, yes, I would package it up into a logical format and send it back via JSON. At that point, JS can do whatever it wants from the Ajax response to render the data accordingly.
  3. Hi, sam67. I'm not Larry, but if you don't mind, I'll chime in with my two cents: For the most part, how you structure your PHP (procedural vs. OOP, etc.) doesn't really affect an Ajax request from JS and vice versa. What I mean is, whether a request comes from a standard browser request or an Ajax request, PHP is more or less going to receive it the same way. The request is just a request, possibly with some data attached as a payload, and how you choose to handle that request in PHP is up to you. At least, that's my immediate response to your question. I could be completely misunderstanding what you're asking though, so if maybe you could provide some more info and clarify where I'm maybe misunderstanding you, maybe I can help more. Thank you.
  4. I think so, yes. To me, Larry's books have always been about teaching the fundamentals really well, and then it's up to you to take that knowledge and apply it. I don't think the fundamentals have changed at all since that book came out. Once you get through the book and understand what it's saying, you can very easily go through all the changes in all subsequent PHP versions and pick them up. The changes are nothing revolutionary. Once you get through the book, if you want to then focus on something that's most likely to get you a job / help you start a career, I would learn a modern PHP framework that's still very relevant. Laravel instantly pops to mind as I write that. Good luck!
  5. Disabling a checkbox in JS is actually really easy. You simply do the following: checkboxDomElem.disabled = true; And you can toggle the checkbox back on by setting disabled to false. The trick is writing the correct logic in your JS (or PHP, and then pass it over to your JS) that knows that when you click a particular checkbox in the first row to disable three particular checkboxes in the second row, etc., etc. For that, there are any number of things you can do, but I personally prefer Vue.js these days. It's an extremely powerful JS framework that makes this stuff easy. With it, you essentially just have to pass it a dependency tree, so that it knows which checkboxes are conditionally dependent on which others and you're done. Good luck!
  6. A 404 error is a page-not-found error, which means that your server cannot find the script in question. In other words, the URL to the file is probably incorrect. Within the xampp folder, where is the script stored, and is your Apache server running? Thanks.
  7. kbear, are you using some third-party library or did you build the slide-out yourself? If it's the former, then you'll have to check the documentation for the library, as there's likely an option to prevent it from sliding in/out on page load. If it's the latter, well, that's your code, so you'll have to program whatever you need to stop it from happening on page-load.
  8. You will get that warning every time you try to use the header function after you've already echo'ed stuff in your code. The code will have to be reorganized so that the header functions all come before any echo statements, then you should be fine.
  9. Jack, I'm not Larry, but I may be able to help. To help though, a little more context may be helpful. When you post the form data, is it posting to the same script you render the web page from or is it posting to a completely separate script? That will greatly affect how you display the posted data. Thanks.
  10. John, we talked about this in your last post, but you cannot do mathematical addition on strings. Whenever you do .value on a DOM form input, you are going to get a string back, even if it looks like a number. That will always be the case. And when you start trying to do fancy math with strings, you'll almost always end up with NaN (or not-a-number). NaN is not a syntax error, that's a logic error in that you're trying to do number math with strings. Please fix that problem and you should be okay.
  11. Your if condition says, "If the number of hours worked is less than 80 and less than 100, then do something." I think that's your problem. Anything under 100 hours will net you the same result every time.
  12. Speaking in high-level generalities, I think there are two parts to this: Identifying the events that will cause notifications to be created; and Deciding how to display notifications to the users. An example of #1 might be creating a notification for a topic creator every time someone posts something in one of their topics. For example, you might create a notification with the ID of the person who posted in the topic and then the ID of the topic creator, who will get the notification. You can then decide how you want to notify the topic creator. Do you want to send them an email? Do you want to do what Stack Overflow does and have an icon at the top of the site? Do you want both? If you go with the icon approach, then the simple thing to do is to do a check for unread notifications directed at a particular user every time a user loads a page on the site. You could display the number of unread notifications or something, and once they read the notifications, then the number goes down. That's the basic gist. If you want to go into more detail, then we can, but hopefully that's a good start.
  13. Here's a good starting point: https://www.w3schools.com/html/html5_geolocation.asp You have to do this in JS though, not PHP, and if the browser doesn't support navigator.geolocation, then you have to fall back on some PHP alternative, which is up to you to decide. Please note that the Geolocation API is built into regular JS, and it's separate from the Google Maps API, which is provided by Google. However, if you use the Geolocation API to get the user's current location, then you can feed the acquired coordinates into the Google Maps API from there. Make sense?
  14. John B, glad you got it working. The only thing I will say in response as a critique is that I think that things like the following are a bit difficult to understand: +regularPay+ +overtimePay People familiar with JS will know that +numInStrFormat will convert a String number to a Number number, but it does make the code a bit difficult to understand at first glance. In general, the easier code is to read, the better. All the same, glad you got it working, and it seems like you learned a lot along the way, which is great.
  15. Sounds good. I don't see a screenshot, but good luck with all of that, and let me know if you need anything else. Thanks.
  16. Hmmm... hard to say without a bit more context. I generally use Chrome for development, as I find the dev tools to be more to my liking. As such, I haven't used FF in a while to dev. With that said, I vaguely recall there being something in FF with the fact that if an error occurs before you load the console, then it wouldn't show the error in the console. Maybe try loading the console in FF first, then reloading the page and seeing if the error shows up. Beyond that, it's hard for me to assist without knowing exactly what you're doing and how. Thanks.
  17. John B, the browser console is your best friend for trying to debug JS issues/errors. I loaded up your code and instantly saw the following error: The following is line 23: var totalTaxes = document.getElementById ('totalTaxes').value = parseFloat(ficaTax+stateTax+federalTax*grossPay)/100.toFixed(2); An unexpected token error basically means that there is some invalid/unknown character in your code. This one is a bit interesting though in that the error is actually with the following expression: 100.toFixed(2) The reason this is a problem is because the 100. is ambiguous. Specifically, when you put a period right after a number like that, the JS parser doesn't know whether to treat that like a decimal in a number (e.g., 100.00) or as a dot used to invoke a method of the Number object (e.g., toFixed(2)). The easiest way to resolve this error is to remove the ambiguity by doing something like the following: (100).toFixed(2) With all that said, I still think there are some other logic errors in your code. If I were to make a recommendation, I would try to take a lot of the repetitive things you're doing and pull them out into one or more functions to decrease the likelihood of bugs in your code as well as make it simpler. As some examples, you could turn document.getElementById(str) into a function. You could also turn document.getElementById(str).value into another function that utilizes the first function. Furthermore, you could add a flag for whether to convert to a string or a number. Lastly, I would probably write a function to then set the value of a DOM input element. Putting all of that together, I may rewrite your code as follows: function calculate() { 'use strict'; var regularHours = getVal('regularHours', true), overtimeHours = getVal('overtimeHours', true), hourlyRate = getVal('hourlyRate', true), ficaTax = getVal('ficaTax', true), stateTax = getVal('stateTax', true), federalTax = getVal('federalTax', true), regularPay = to2Dec(regularHours * hourlyRate, true), overtimePay = to2Dec(overtimeHours * hourlyRate * 1.5, true), grossPay = to2Dec(regularPay + overtimePay, true), totalTaxes = to2Dec((ficaTax + stateTax + federalTax) * grossPay / 100, true), // Not sure about the correct parens here for the math. netPay = to2Dec(grossPay - totalTaxes, true); setVal('regularPay', regularPay); setVal('overtimePay', overtimePay); setVal('grossPay', grossPay); setVal('totalTaxes', totalTaxes); setVal('netPay', netPay); setVal('employeeName', getVal('firstName') + ' ' + getVal('lastName')); // Need the comma with first name first? return false; } function getVal(id, toNum) { var elem = gI(id); if (toNum) { return parseFloat(elem.value); } return elem.value; } function setVal(id, val) { gI(id).value = val; } function gI(id) { return document.getElementById(id); } function to2Dec(num, toNum) { // To two-decimal number if (toNum) { return parseFloat(num.toFixed(2)); } return num.toFixed(2); } function init() { 'use strict'; gI('form1').onsubmit = calculate; } window.onload = init; In my mind, that's a lot easier to debug as well as read. Please share your thoughts and any other questions you have. Thanks.
  18. If you do a Google search for something like "JS string to number", you'll get a multitude of good resources. Here's the first hit: https://gomakethings.com/converting-strings-to-numbers-with-vanilla-javascript/ I generally use parseInt(str, 10), and since that gets annoying to type after a while, I have that logic bundled up until a function called toInt. One nice thing about coding, and JavaScript in particular, is that you can Google just about anything. Just type "JS" and then whatever you're looking for, and you'll likely get a Stack Overflow hit or something else that's relevant. As for your second question, when you ask "will the values for regularPay and overtimePay still appear in the calculator," I assume you're asking whether a number can be stored into the value property of a DOM input element. If that's the case, then yes. JS will automatically perform string interpolation for you. That is to say, if you try to stick a number into something that requires a string, JS will automatically convert it to a string for you. For example, if I do the following: '10' + 10 I'll get the string '1010', not 20. That's because when you try to do a string "plus" a number, JS doesn't try to do the math, it converts the number to a string and then concats the two strings together. As such, yes, you can stick a number into the value property of a DOM input element, and it'll automatically turn it into a string to be displayed on the screen. Hope that all makes sense.
  19. gbengasupowale807, I took a look at your code, and like Larry suggested, it helps a lot of you use your browser console. In this case, it looks like the browser is reloading the page after the JS error occurs, thus making it hard to catch the error. However, if you check the Preserve log option in Chrome (or the similar option in the browser of your choice), you should then see the error upon form submission. Long story short, you're trying to reference the value property of the testimony DOM element on line 4 of testimony.js. However, the problem is that testimony is a form DOM element, which doesn't have a value property, thus the issue. Resolve that, and hopefully, you can progress forward with your code.
  20. John, I can see where things can get a bit confusing. When you run the toFixed method on a number, the result is a string, not a number. As an example, in your code, both the regularPay and overtimePay variables are actually strings, not numbers. As such, regularPay + overtimePay is not going to give you what you would expect. What's more, when you try to run the toFixed method on the result of regularPay + overtimePay, you will get an error because only numbers, not strings, even have the toFixed method available to them. For the sake of your calculations, you may want to convert the result of toFixed each time back into a number. Ultimately, it's up to you how you want to handle it though. As another note, it often helps to load your browser JS console up when you're writing JS code like this. It'll typically tell you when there's an error as well as what kind of error it is and where it's located. It makes these sorts of things easier to debug. Hope that all makes sense and good luck. Feel free to response with any other questions. Thanks.
  21. Maybe try Codecademy.com to start with and play around with the various languages there until you find one that suits you.
  22. Try echoing out the $curtain_price_total and $cur_v values each time through the loop, and make sure they are what you expect.
  23. There are a couple of things I can suspect: You didn't initialize $curtain_price_total to 0. $cur_v is a string, not a number. By default, all values pulled from a MySQL DB are strings. Either of those relevant?
  24. Personal opinion, but if you want an OS-agnostic application, the web is generally your best bet. It offers the most flexibility, and there's very little you can do in desktop applications these days that you can't do on the web. Just my two cents.
×
×
  • Create New...