// Cloned by Eamon Cullimore on 30 Nov 2023 from World "Meal Planner" by Eamon Cullimore
// Please leave this clone trail here.
// Cloned by Eamon Cullimore on 28 Nov 2023 from World "Hello World" by Eamon Cullimore
// Please leave this clone trail here.
var API_KEY = "";
var message = `I need ${mealA} ${mealT} recipes for ${people} people, total cost of the ingredients should be under ${priceL}, don’t use more than 6 ingredients per recipe, each recipe should share at least ${precentage}% of its ingredients with at least 1 other recipes, and the recipes should take less than 30 minutes to prepare. Each recipe must include ${preferences}. Include recipes from these cuisines: Ireland. Include short cooking instructions with each recipe. Also create a shopping list with the ingredients grouped by category and the approximate cost per ingredient.`;
var tmp = 0;
var mealA = 0;
var mealT = "";
var people = 0;
var priceL = 0;
var precentage = 0;
var preferences = "";
function setMealAmount(){
mealA = jQuery("input#mealAmount").val();
console.log(mealA);
}
function setMealType(){
mealT = document.getElementById('mealType').value;
console.log(mealT);
}
function setNumPeople(){
people = jQuery("input#people").val();
console.log(people);
}
function setPriceLimit(){
priceL = jQuery("input#priceLimit").val();
console.log(priceL);
}
function setPrecentage(){
precentage = jQuery("input#precentage").val();
console.log(precentage);
}
function setPreferences(){
preferences = jQuery("input#preferences").val();
console.log(preferences);
}
const submit = document.querySelector('#entermessage');
const reply = document.querySelector('#output');
const input = document.querySelector('#entermessage');
const historyElement = document.querySelector('#h');
async function getMessage() {
theprompt = message;
const options = {
method: 'POST',
headers: {
'Authorization': `Bearer ${API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
temperature: 0.7,
messages: [{role:"user",content:theprompt}],
max_tokens: 100
})
};
try{
const response = await fetch('https://api.openai.com/v1/chat/completions', options);
const data = await response.json();
output.textContent = data.choices[0].message.content;
if(data.choices[0].message.content){
var pElement = document.createElement('p');
const bElement = document.createElement('br');
pElement = theprompt;
h.append(bElement,pElement);
}
}catch (error){
console.error(error);
}
}
/*function test(){
theprompt = $("#message").val();
var pElement = document.createElement('p');
const bElement = document.createElement('br');
pElement = theprompt;
h.append(bElement,pElement);
}*/
function setapikey()
{
API_KEY = jQuery("input#apikey").val();
API_KEY = API_KEY.trim();
console.log(API_KEY);
if (jQuery("input#apikey").val() === ""){
$("#start").html ( "<b> Need API KEY. </b><br> Try Again" );
setTimeout(function() {
location.reload();
}, 1000);
}
else{
$("#start").html ( "<b> Loading Project...<b><br><p>Make sure your API KEY is correct.</p>" );
setTimeout(function() {
start();
}, 5000);
}
}
function start(){
if (API_KEY){
document.write(`
<style>
h1 {text-align:center;}
body {margin:20px;}
body {padding:20px;position:relative;}
#entermessage{
text-align:center;
position:absolute;
bottom:70px;
width:100%;
}
#reply{
text-align:center;
bottom:190px;
left:0;
right:0;
margin:auto;
width:50%;
border-style:outset;
position:absolute;
}
#output{
padding:10px;
}
#enterkey{
text-align:center;
}
button{
padding:10px;
border-radius:50%;
background-color:black;
color:white;
}
button:hover{
background-color:lightblue;
color:black;
}
</style>
<h1>Meal Planner</h1><br>
<br>
<br>
<div id= selectors>
<p>Amount of meals you would like?</p><br>
<input type="number" min="1" max="14" NAME="mealAmount" onfocus="this.value=''" id="mealAmount" VALUE='' >
<button onclick='setMealAmount();' type="button" >Set</button>
<br>
<p>Type of Meals</p><br>
<select id ="mealType" onchange = "" >
<option> ---Meal Type--- </option>
<option> breakfast </option>
<option> lunch </option>
<option> dinner </option>
</select>
<button onclick='setMealType();' type="button" >Set</button>
<br>
<p>How many people</p><br>
<input type="number" min="1" max="14" NAME="people" onfocus="this.value=''" id="people" VALUE='' >
<button onclick='setNumPeople();' type="button" >Set</button>
<br>
<p>price Limit</p><br>
<input type="number" max="200" NAME="priceLimit" onfocus="this.value=''" id="priceLimit" VALUE='' >
<button onclick='setPriceLimit();' type="button" >Set</button>
<br>
<p>Shared precentage between each meal</p><br>
<input type="number" min="1" max="100" NAME="precentage" onfocus="this.value=''" id="precentage" VALUE='' >
<button onclick='setPrecentage();' type="button" >Set</button>
<br>
<p>Your preferences</p><br>
<input type="text" NAME="preferences" onfocus="this.value=''" id="preferences" VALUE='' >
<button onclick='setPreferences();' type="button" >Set</button>
<br>
</div>
<div id=reply>
<p> The Output: </p>
<p id=output ></p>
</div>
<div id=entermessage>
<b>↓↓↓ Generate Plan ↓↓↓</b><br><br>
<button onclick='console.log(message);' type="button" >Generate Plan</button>
</div>
`)
}else{
document.write(`<p> NEED KEY TO START!!!</p>`)
}
}
document.write(
` <style>
#start {
border: 5px solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
}
</style>
<div>
<h1 style="text-align:center;padding:20px;">Meal Planner</h1>
</div>
<div id=start>
Enter your API KEY: <br><br>
<input NAME="apikey" id="apikey" VALUE='' >
<button style="padding:10px; border-radius: 50%;" onclick='setapikey();' class=ab-normbutton >SET KEY TO START!</button>
`
)