Build a Fortune Telling App - Step 13

Curriculum Help
1

Tell us what’s happening:

I pass test 2, You div should have a class img-loader when I don’t have the tag inside it, but this check fails when I do. Putting a closing tag on doesn’t help. I’m not sure why the fourth check `The img element should use CDN_URL and img for its src when img is provided, and fall back to LOCAL_DEFAULT_IMG when it is not.` doesn’t pass either, even though I copy-pasted the src value that it asks for.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: index.ts */
// User Editable Region

    <div class="img-loader">
      <img class="card-img hidden" src="{img ? ${CDN_URL}/${img} : LOCAL_DEFAULT_IMG}">
    </div>

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Challenge Information:

Build a Fortune Telling App - Step 13

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-fortune-teller-app/68e0280810407794171d6558.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hey @neat-hannah,
The step instructs us to add a div with the class img-loader, and then create another img element. It doesn’t instruct us to place the img element inside the div.

3

Thanks, that’s made test 2 pass. But what’s wrong with my src? I copy-pasted what it says in the instructions ({img ? ${CDN_URL}/${img} : LOCAL_DEFAULT_IMG}) as-is, and tried putting a dollar sign before it, but neither works. Should I not be copying this?

4

Ensure your template literal syntax is correct.

5

I’ve switched to using ` instead of ", but still it doesn’t like it. Again, I’ve tired a dollar sign at the front, and removing the dollar signs in the middle. I really don’t know what could be wrong with this:

src=`{img ? ${CDN_URL}/${img} : LOCAL_DEFAULT_IMG}`

This is my whole JS:

interface Card {
  name: string;
  value: string | number;
  name_short: string;
  value_int: number;
  suit: string;
  type: string;
  img: string;
  meaning_up: string;
  meaning_rev: string;
  desc: string;
}

interface Deck {
  cards: Card[];
}

const CDN_URL = "https://cdn.freecodecamp.org/curriculum/typescript/tarot-app";
const defaultImg = new URL("default.svg", import.meta.url);
const LOCAL_DEFAULT_IMG = defaultImg;

const getElement = <T extends HTMLElement>(selector: string): T => {
  const el = document.querySelector<T>(selector);
  if (!el) throw new Error(`Element not found: ${selector}`);
  return el;
};

const hideElements = (...elements: HTMLElement[]) =>
  elements.forEach((el) => el.classList.add("hidden"));

const showElements = (...elements: HTMLElement[]) =>
  elements.forEach((el) => el.classList.remove("hidden"));

const getRandomItem = <T,>(items: T[]): T => {
  const index = Math.floor(Math.random() * items.length);
  return items[index];
};

const renderCard = (drawingType: string, isReversed: boolean, shortName: string, img: string): string => `
<div>
  <h2>${drawingType}</h2>
  <figure class="card_container ${isReversed ? "reversed-card" : ""}" data-id="${shortName}">
    <div class="img-loader">
    </div>
    <img class="card-img hidden" src=`{img ? ${CDN_URL}/${img} : LOCAL_DEFAULT_IMG}`/>
  </figure>
</div>
`

I’m getting this error in the console:

Error: index.tsx(18,7): error TS2451: Cannot redeclare block-scoped variable 'CDN_URL'.
index.tsx(45,39): error TS1005: ',' expected.
index.tsx(45,40): error TS7031: Binding element 'img' implicitly has an 'any' type.
index.tsx(45,44): error TS1005: ',' expected.
index.tsx(45,46): error TS7031: Binding element '$' implicitly has an 'any' type.
index.tsx(45,47): error TS1005: ',' expected.
index.tsx(45,48): error TS2451: Cannot redeclare block-scoped variable 'CDN_URL'.
index.tsx(45,48): error TS7031: Binding element 'CDN_URL' implicitly has an 'any' type.
index.tsx(45,56): error TS1005: ',' expected.
index.tsx(46,3): error TS1109: Expression expected.
index.tsx(46,5): error TS2304: Cannot find name 'figure'.
index.tsx(47,1): error TS1109: Expression expected.
index.tsx(47,3): error TS2304: Cannot find name 'div'.
index.tsx(48,2): error TS1160: Unterminated template literal.
6

Use double quotes only with src and a correct syntax would be

src="${}"

Once you correct this, focus on your if/else statement.

7

I didn’t write the if/else statement, it’s given in the task. Why would that not work?

8

It’s giving you the exact logic to implement and if you feel like there is an issue with the step, you are always welcome to open an issue on freeCodeCamp’s Github repository.

9

I’ve implemented that logic. I am no longer getting any errors in the console other than `4. The img element should use CDN_URL and img for its src when img is provided, and fall back to LOCAL_DEFAULT_IMG when it is not.` when I run, but when I make changes in the IDE part this somes up in the console:

Error: index.tsx(18,7): error TS2451: Cannot redeclare block-scoped variable 'CDN_URL'.
index.tsx(45,47): error TS2581: Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i --save-dev @types/jquery`.
index.tsx(45,48): error TS1005: ':' expected.
index.tsx(45,49): error TS2451: Cannot redeclare block-scoped variable 'CDN_URL'.
index.tsx(45,49): error TS7031: Binding element 'CDN_URL' implicitly has an 'any' type.
index.tsx(45,57): error TS1005: ',' expected.
index.tsx(46,3): error TS1109: Expression expected.
index.tsx(46,5): error TS2304: Cannot find name 'figure'.
index.tsx(47,1): error TS1109: Expression expected.
index.tsx(47,3): error TS2304: Cannot find name 'div'.
index.tsx(48,2): error TS1160: Unterminated template literal.

From the red squiggle lines in my code, there’s a problem with the declaration of CDN_URL and with the end of the HTML snippet (everything after the tag.

image
image3438×1354 334 KB

10

I have created an issue to about this, the string inside the ternary is missing its backticks