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

lundi 14 septembre 2020

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

random

lundi 14 septembre 2020

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

Aucun commentaire:

Enregistrer un commentaire