supersimpledev / javascript-course Goto Github PK

I couldn't understand this error //// Uncaught SyntaxError: "undefined" is not valid JSON
at JSON.parse ()
at 10-rock-paper-scissor copy.html:43:27 ////

let scores = JSON.parse(localStorage.getItem('scores')) || {
wins:0,
losses:0,
ties:0
};
.
.
.
.
localStorage.setItem('scores', JSON.stringify(scores));

Please does anyone have a comprehensive solution to the problem in lesson 14, I noticed that the cart disappears when I added local storage.

Here is the problem I am encountering:
Uncaught TypeError: Cannot read properties of undefined (reading 'id')
at checkout.js:20:48
at Array.forEach ()
at checkout.js:7:6Understand this error

Here is my code for checkout.js:
import {cart, removeFromCart} from '../data/cart.js';
import {products} from '../data/products.js';
import {formatCurrency} from './utils/money.js';

let cartSummaryHTML = '';

cart.forEach((cartItem) => {
const productId = cartItem.productId;

let matchingProduct;

products.forEach((product) => {
if (product.id === productId) {
matchingProduct = product;
}
});

cartSummaryHTML += `

  <div class="cart-item-details-grid">
    <img class="product-image"
      src="${matchingProduct.image}">

    <div class="cart-item-details">
      <div class="product-name">
        ${matchingProduct.name}
      </div>
      <div class="product-price">
        $${formatCurrency(matchingProduct.priceCents)}
      </div>
      <div class="product-quantity">
        <span>
          Quantity: <span class="quantity-label">${cartItem.quantity}</span>
        </span>
        <span class="update-quantity-link link-primary">
          Update
        </span>
        <span class="delete-quantity-link link-primary js-delete-link" data-product-id="${matchingProduct.id}">
          Delete
        </span>
      </div>
    </div>

    <div class="delivery-options">
      <div class="delivery-options-title">
        Choose a delivery option:
      </div>
      <div class="delivery-option">
        <input type="radio" checked
          class="delivery-option-input"
          name="delivery-option-${matchingProduct.id}">
        <div>
          <div class="delivery-option-date">
            Tuesday, June 21
          </div>
          <div class="delivery-option-price">
            FREE Shipping
          </div>
        </div>
      </div>
      <div class="delivery-option">
        <input type="radio"
          class="delivery-option-input"
          name="delivery-option-${matchingProduct.id}">
        <div>
          <div class="delivery-option-date">
            Wednesday, June 15
          </div>
          <div class="delivery-option-price">
            $4.99 - Shipping
          </div>
        </div>
      </div>
      <div class="delivery-option">
        <input type="radio"
          class="delivery-option-input"
          name="delivery-option-${matchingProduct.id}">
        <div>
          <div class="delivery-option-date">
            Monday, June 13
          </div>
          <div class="delivery-option-price">
            $9.99 - Shipping
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  const container = document.querySelector(
    `.js-cart-item-container-${productId}`
  );
  container.remove();
});

          I put them together.Is that fine?

Originally posted by @verakissyou17 in #32 (comment)

In order to be consistent with the video content, it would be more clear to add an alternative solution localStorage.remove('calculation') inside the Clear button.

please i’ll need help on the last problem in project 3

When I tried console.log(quantity)
I received the error message "TypeError: Cannot read properties of null (reading 'value')
at HTMLButtonElement. (amazon.js:75:46)"

Hi,
is the \n missing from the 3j answer or am I just being stupid?
Here's your solution: alert(Total cost: $${(599 + 295) / 100} Thank you, come again!);

This is what I wrote: alert(Total cost: $${(599 + 295) / 100} + \nThank you, come again!);

Thank you for a good course and keep up the good work!

Hello, I did this exercise that way below. It is wrong? work the same way that yours.

<script>

  function convertTemperature (degrees,unit){
    
    
    if (unit === 'F') {
      const result = (degrees - 32) *5 / 9
      console.log(`'${result}C'`);
    } else if (unit === 'C') {
      const result2 = (degrees *9 / 5) + 32
      console.log(`'${result2}F'`);
    }
  }

  convertTemperature (86, 'F');
  
</script>

the solution doesnot updates the items when updating the code, we have to refresh it

Hello!
I download starting files from lesson 13, but files looks updated. Like someone done Lesson-13 and post files here.

can you please add chapters back in the video preview , it makes it hard to follow through the course

Greetings sir, I really appreciate you what you been in my coding journey. I haven't met you before but it seems to me like you are my old friend and your teaching skills is wonderful.
I really don't know while the particular exercise 14j solution is not removing the class list 'is-editing-quantity'. Please someone should help me because I have been stuck here a week now😭

@SuperSimpleDev When we add the products to the cart its showing as NaN

Step-1: Clicking on the clear button (The value is empty now)
Step-2: Clicking on the '=' button (The value stored in the localStorage is undefined)

due to which the below issue appears

A quick search on mdn web docs tells me eval() is a huge security risk and is slower than the alternatives.

I understand for beginners' sake this might be an easier way to make a calculator. But if the aim is to go from beginner to pro, why isn't a warning given to the students regarding eval()'s security risk, or even discussed at all. I still see eval() being in the course solution up to lesson 10.

Why is this?

With reference to exercise 12q, there is no onclick attribute in 12g.html.

In lines 24 and 29, reversedFood should have been used instead of foods.

for (let i = 0; i < reversedFoods.length; i++) {
if (reversedFoods[i] === 'egg' && eggsRemoved < 2) {
eggsRemoved++;
continue;
}

result.push(reversedFoods[i]);

Hi everyone, I have an issue with problem 16j. The problem requires people to have an interactive update button to continue. However, I used a copy of the lesson 16 code from SuperSimpleDev, and the code doesn't have an interactive update button. Someone, please give me the solution to problem 16j, and then I can continue the exercise. I am hard stuck right now. Thank you guys in advance

This is my js code

Jasmine alert error messege

How do i generate the Id in product.js.
Const product = [{
id:
name:
}]

I don't know the full course, I am at lesson 14 and I haven't found a lessons list. When we will get to database and js integrations, server side JS (node.js?) And creation and use of APIs? I really like how the course is explained and I would like to stick with it also for these topics

I have an error on rock paper scissors projects then rock image does not appear on the screen and I will inspect there is no erron on the console and also in vs code but the image is not appearing and what's is the problem I will try to clear the problem and the next error will appear I will spend more time to solve this but the error will not solved

How can I solve this error

here I am attaching the info. to debug the issue:
want to test the priceformatter function the code organization is quite similar to the tutorial , the code is also same from the tutorial however the monerTest.js file is in the spec folder which i have given the path to recognize it as a script , code moneyTest.js : import { priceFormatter } from "../../scripts/utils/money";

console.log("test suit: formatcurrancy");

describe('test suit: fromate currancy', () => {
it('convert cents into dollars', () => {
expect(priceFormatter(2095)).toEqual(20.95);
});
});,

test.js :

error; Incomplete: No specs found, , randomized with seed 48042

https://supersimple.dev/projects/dom-with-css/
line 114


it is written that under 40 + 10 but in code under 35
This problem is only on suspersimle.dev
In code from 10 lesson all ok

Hey Dev, When I try to place order on Checkout page then it show the error in console (400 Bad Request) for this API =https://supersimplebackend.dev/orders ,can you provide solution for this..
document.querySelector('.js-place-order').addEventListener('click', async ()=>{
const response=await fetch('https://supersimplebackend.dev/orders',{
method:'POST',
headers:{
'Content-Type':'application/json'
},
body: JSON.stringify({
cart: cart
})
});
const order= await response.json();
console.log(order);
});

****

document.querySelector('.js-moves').innerHTML = You <img src="images/${playerMove}-emoji.png" class="move-icon"> <img src="images/${computerMove}-emoji.png" class="move-icon"> Computer;

the above code is not working, I have tried to fix it but it won't work. please help.``

i tried every thing also i copied your code to my code editor and still can't run the code correctly

13m Solution with closure: this line "let addedMessageTimeoutId" that is declared outside the loop doesn't achieve the expected result. But when I move inside the loop, it works fine. From what I asked chatGPT, even though this is a more advanced solution, the solution using objects is better in terms of scalability and maintainability. Can I get your opinion on this?

Cart is not getting its default value after emptying. Anyone also encounter it? If not, I need your help

here is what am facing it in the console tab the check out page is not working pls simon simplify the tech world
Uncaught TypeError: Cannot read properties of undefined (reading 'id')
at checkout.js:20:48
at Array.forEach ()
at checkout.js:7:6

There are 3 projects at the end of the video.

I am struggling with the third one. I have to indicate that a todo is done with a checkbox.

But if I refresh the page, it resets the 'checked' checkbox resets to 'unchecked'.

I tried localStorage, but it doesn't work.

And I literally can't find the solution in the GitHub repo for any of the projects. Are they here?

Rock Paper Scissors

In the lesson 13, when i added the item into the cart it shows me a “NAN” instead of the number.

(https://github.com/SuperSimpleDev/javascript-course/assets/92880605/499f5d7c-b17c-4679-a0ad-25c9507c6d20

SCREENSHOT Above

CODE below

import { addToCart, cart } from '../../data/cart.js';

describe('test suite: addToCart', () => {
it('adds and exisiting product to the cart', () => {

});
it('add a new product to the cart', () => {
spyOn(localStorage, 'getItem').and.callFake(() => {
return JSON.stringify({});
});
console.log(localStorage.getItem('cart'));

addToCart('e43638ce-6aa0-4b85-b27f-e1d07eb678c6');
expect(cart.length).toEqual(1);

});
});

From - Lesson 16 (Testing)
Using Jasmine Testing Framework

The above lines of code is supposed to display an empty array in the console since the code is supposed to spyOn locaStorage('getItem')and call fake the cart array, but instead it's returning "null" in the console. I don't know where I went wrong. I need assistance, I have been trying to solve this issue for the past 3 days now.
Thanks.