CODEWITHSUNDEEP
javascripthtmljqueryrandom
josephl
josephl

Reputation: 53

2 different buttons, each generates random from 2 different unique list

I am creating a random meal generator. If you click breakfast a random breakfast food will generate with link to recipe. I have everything working for the breakfast button. However, when I try to duplicate the same process for the lunch button, I get errors. It seems like the index.js is having issues distinguishing the functions.

So basically, the breakfast button pulls fine from breakfastlist.js but I can't figure out how to get lunch button to pull from lunchlist.js. If someone could direct me on how to do this I'd appreciate it.

*Currently I have no code pulling from the lunchlist.js since it broke everything else.

breakfastlist.js

var breakfastlist = [
      {
        idMeal: 1,
        mealName: 'Yogurt Parfait',
        mealLink: 'https://www.tasteofhome.com/recipes/rise-and-shine-parfait/'
      },
      {
      idMeal: 2,
      mealName: 'Avocado Toast & Eggs',
      mealLink: 'https://www.favfamilyrecipes.com/open-face-avocado-egg-sandwich/#wprm-recipe-container-19935'
      },  
      {
        idMeal: 3,
        mealName: 'Oatmeal and Fruit',
        mealLink: 'https://healthyfitnessmeals.com/fruit-and-oatmeal-breakfast-bowl/'
      },
     ];

export { breakfastlist }

lunchlist.js

var lunchlist = [
  {
        idMeal: 1,
        mealName: 'Pasta Salad',
        mealLink: 'https://www.loveandlemons.com/pasta-salad/'
  },
  {
        idMeal: 2,
        mealName: 'Black Bean and Quinoa Salad',
        mealLink: 'https://sweetpeasandsaffron.com/refreshing-quinoa-black-bean-salad/'
  }
];

export { lunchlist }

index.js

// Import stylesheets
import './style.css';
import {
  breakfastlist
} from './lists/breakfastlist.js';
import {
  lunchlist
} from './lists/lunchlist.js';

function rotateb() {
  var random_num = Math.floor(Math.random() * breakfastlist.length);
  add(random_num);
}

function add(i) {
  var chi = document.createElement('a');
  chi.textContent = breakfastlist[i].mealName;
  chi.setAttribute('href', breakfastlist[i].mealLink);
  var tab1 = document.getElementById("message");
  if (tab1.hasChildNodes()) {
    tab1.removeChild(tab1.firstChild);
  }
  tab1.appendChild(chi);
}

document.getElementById('breakfast_btn').addEventListener('click', rotateb);

index.html

<script type="module" src="breakfastlist.js"></script>
<script type="module" src="index.js"></script>
<script type="module" src="lunchlist.js"></script>

<head>
  <link rel="stylesheet" href="style.css">
</head>


<table align=center>
  <tr>
    <td align=center style=font-size:20pt>
      <b>Can't Make a Decison?</b>
    </td>
  </tr>
  <tr>
    <td align=center>
      click button to stop being grr
    </td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" id="breakfast_btn" class="isbreakfastbutton" onclick=>Breakfast 🥞</a></td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" id="lunch_btn" class="islunchbutton">Lunch 🥪 </a></td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" id="dinner_btn" class="isdinnerbutton">Dinner 🍝</a></td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" id="snacks_btn" class="issnacksbutton">Snacks 🥨</a></td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" id="treats_btn" class="istreatsbutton">Treats 🍰</a></td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" class="isbutton" onclick="resetForm()">Clear</a>
    </td>
  </tr>
  <tr>
    <td align=center>
      <p id="message"></p>
    </td>
  </tr>
</table>

<script>
  function resetForm() {
    document.getElementById("message").innerHTML = "";
  }
</script>

link to end result

https://meal-generator-kjhxn3.stackblitz.io

Upvotes: 0

Views: 56

Answers (2)

Aakif
Aakif

Reputation: 156

You can try this as well

 // Import stylesheets
import './style.css';
import {breakfastlist} from './lists/breakfastlist.js';
import {lunchlist} from './lists/lunchlist.js';

function rotateb() {
var id = this.id;
switch(id){
  case 'breakfast_btn':
     var random_num = getRandom(breakfastlist);
     add(random_num,breakfastlist);
     break;
  case 'lunch_btn':
      var random_num = getRandom(lunchlist);
      add(random_num,lunchlist);
      break;
    
} 

}
function getRandom(list){
  return Math.floor(Math.random() * list.length);
}
function add(i,list) {
 var chi = document.createElement('a');
 chi.textContent = list[i].mealName;
 chi.setAttribute('href', list[i].mealLink);
 var tab1 = document.getElementById("message");
 if (tab1.hasChildNodes()) {
  tab1.removeChild(tab1.firstChild);
 }
 tab1.appendChild(chi);
}

document.getElementById('breakfast_btn').addEventListener('click', rotateb);
document.getElementById('lunch_btn').addEventListener('click', rotateb);

Upvotes: 0

imvain2
imvain2

Reputation: 15847

You could duplicate the code, but another solution is to reuse the existing code and adjust it accordingly by passing the list object as another parameter.

function rotate(source) {
    var random_num = Math.floor(Math.random() * source.length);
    add(random_num, source);
}

function add(i, source) {
 var chi = document.createElement('a');
 chi.textContent = source[i].mealName;
 chi.setAttribute('href', source[i].mealLink);
 var tab1 = document.getElementById("message");
 if (tab1.hasChildNodes()) {
  tab1.removeChild(tab1.firstChild);
 }
 tab1.appendChild(chi);
} 

document.getElementById('breakfast_btn').addEventListener('click', function(e){
     e.preventDefault();
     rotate(breakfastlist);
});

document.getElementById('lunch_btn').addEventListener('click', function(e){
     e.preventDefault();
     rotate(lunchlist);
});

Upvotes: 1

Related Questions