Integration Javascript Memory Game

Ask the community
,
1

Hello everyone,

I want to integrate a memory game to my website:

I have the html, css and java code from “code pen”, but I don’t get it.

All “getElements” are underlining red. Can you help me why?
This is the start of my .js file.

// cards array holds all cards
let card = document.getElementsByClassName("card");
let cards = [...card];

// deck of all cards in game
const deck = document.getElementById("card-deck");

// declaring move variable
let moves = 0;
let counter = document.querySelector(".moves");

// declare variables for star icons
const stars = document.querySelectorAll(".fa-star");

// declaring variable of matchedCards
let matchedCard = document.getElementsByClassName("match");

// stars list
let starsList = document.querySelectorAll(".stars li");

// close icon in modal
let closeicon = document.querySelector(".close");

// declare modal
let modal = document.getElementById("popup1");

Many Thanks <3

2

You can’t put it in the Velo code file.
You should do it in an iframe (an embedded widget).
Put there the html.
And the js put wrapped in the tags

3

Velo understands all of Javascript, except for anything that accesses the DOM. You can’t embed HTML in a Velo page. You might want to consider using an HtmlComponent . For more information, see the article Working with the HTML Component in Velo .

To learn about programming with Velo, read the following articles that will help you start working with Velo:

4

Thank you Sir! So, I put the html code in and at the End in the skript tags the Java Script code. And where can I put in the Css code? In “code pen” it looks like this (picture).

2870×786 225 KB

5

I got it! Thanks :slight_smile:

6

Hey Elemen7o and everyone else. I am have an issue figuring this out myself :frowning: Do you breaking down exactly what I have to do in order to add code pen stuff to my website? I am not too good at this stuff so I would love if you could take it from step 1 :sweat_smile: Thank you everyone