Javascript Html and CSS flashcards game

Hi ,
I have made flashcards with the help of javascript and html and Im having trouble in mapping a database link (Succesfully display data in a term and definition box ) through my javascript to display Ive tried using json files to store my data but im having trouble refernecing so it can succesfully display the data.

html code:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Hind Siliguri">
	<title> Resource 1 </title>
	<link rel="stylesheet" href="StyleOne.css">
	
	<script src="https://kit.fontawesome.com/9a7d96e03a.js">

	</script>
</head>



	<!21.12,21 ––>
	<nav>
      <div class = "logo">
      </div>
      <ul>
        <li>
          <a href="index.html"> 
          <i class="fas fa-home"></i>
          </a>
        </li>
         <li> 
           <a href="/Main/Introduction.html"> Introduction</a> 
         </li>
       <li> 
           <a href="/Resource1/ResourceOne.html">Resource 1</a>
         </li>
         <li> 
           <a href="/Resource2/ResourceTwo.html">Resource 2</a> 
         </li>
         <li> 
           <a href="#"> Pigs can fly? </a> 
         </li>
        
      </ul>
          </nav>
  <!19.12,21 ––>
 <body onload="getRandomTerm()">
<h1>
  Resource 1: Flashcards (?)
</h1>
<div class = "term">
    <h3>  
    term:
    </h3>
</div>
<div class = "definition">
<h3>
  definition:
  </h3>

</div>

<div class= "button">
<button class="check">Check Definition</button>
<button class="next">Next Definition</button>
<button class= "hide">Hide definition</button>
</div>

<script src="JS1.js"></script>

<script src="Terms.js"></script>
</body>

</html>

Javascript:

const term = document.querySelector('.term');
const definition = document.querySelector('.definition')
const checkButton = document.querySelector('.check');
const nextButton = document.querySelector('.next');
const hideButton = document.querySelector('.hide');

//I want to use this data in a different file as it will be longer sets of data and reference it//
words = {
  Hello: "Wassap",
  Goodbye: "Laters",
  "You good?": "Hell yea"
  }
//

//refernced in this javascript math object variable//
data = Object.entries(words)

function getRandomWord(){
  randomTerm= data[Math.floor(Math.random() * data.length)]
term.innerHTML = `<h3>${randomTerm[0]}</h3>`;
definition.innerHTML = `<h3>${randomTerm[1]}</h3`;
}
///////////////////////////////////

///Buttons when clicked what should be displayed//
checkButton.addEventListener('click', function(){
  definition.style.display = 'block'; 
});
nextButton.addEventListener('click', function(){
  getRandomWord();
  definition.style.display = 'none'
})

hideButton.addEventListener('click', function(){
  definition.style.display = 'none';
})

Hey @Apter345! You seem to be well on your way to solving your issue. You seem to have identified two possible ways to store the flashcard data:

  • Using a database
  • Storing the data in JSON files

The first approach, using a database, requires some extra technology to run on the backend. Do you have such a technology in mind? Using what language? One example would be a Node.js webserver connected to any database, but a Django application would be a good alternative too, just to name a few.

The second approach is a bit simpler, as it doesn’t require the use of a backend technology. You can just add the JSON files to your code besides the already existing HTML and JavaScript file and then load the JSON in JavaScript with something like this:

fetch('my-json-file.json').then(r => r.json()).then(data => {
    // do something with `data` here
})