Interactive_Entertainment_Planner/script.js at main · tmarmstead/Interactive_Entertainment_Planner · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
//general container
var generalContainer = $('<div class = "container">');
$('body').append(generalContainer);

//headers
var titleSubDiv = $('<h2 class= "has-background-warning-light has-text-weight-light has-text-centered is-size-3 pt-4 pb-4 appH2" id = "appH2">').text('Interactive Entertainment Planner');
$('.container').append(titleSubDiv);


var headerDiv = $('<h1 class = "has-text-centered is-uppercase is-size-1 pt-1 pb-3  class = "appH1" id = "appH1">').text(' Let\'s have fun tonight!');
$('.container').append(headerDiv);

var headerSubDiv = $('<h2 class= "has-background-warning-light  has-text-centered is-size-5 pt-4 pb-4 appH2" id = "appH2">').text('Need help with your evening plans? Well you\'ve come to the right place! Welcome friend!');
$('.container').append(headerSubDiv);


var appIntroText = $('<p class = "has-text-centered has-text-light has-background-primary-dark pl-5 pr-5 pt-5 pb-5 mt-4 appIntro" id = "appIntro">').text('First, enter a movie title in the input field below to find similar movie suggestions. Then click the following buttons to generate a drink and a recipe. You can view your previously searched ingredients by clicking the previously searched ingredients button at the bottom of the page.  Finally, have fun!');
$('.container').append(appIntroText);

//make 3 containers, one for each field

//movie
var movieContainer = $('<div class = "container column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd" id = "movie-container">');
$('body').append(movieContainer);
//create btn
movieInput = $("<input>").attr('id', 'movie-input').attr('placeholder', 'Enter Movie Title Here');
movieBtn = $("<button>")
movieBtn.text('Enter');
movieBtn.attr('class', 'button movie-button has-background-primary-dark has-text-light has-text-weight-light', );
$("#movie-container").append(movieInput)
$("#movie-container").append(movieBtn)
//container for results
var movieResultsContainer = $('<div class = "container" id = "movie-container-results">');
$('body').append(movieResultsContainer);
movieResultsContainer.attr('class', 'movie-results has-text-centered has-background-warning-light is-block has-text-weight-semibold mb-6')

//drinks
var drinkContainer = $('<div class = "container column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd" id = "drink-container">');
$('body').append(drinkContainer);
//create btn
drinkBtn = $("<button id='drink-button'>")
drinkBtn.text('Generate Drink');
$("#drink-container").append(drinkBtn)
drinkBtn.attr('class', 'button has-background-primary-dark has-text-light has-text-weight-light')
//container for results
var drinkResultsContainer = $('<div class = "container" id = "drink-container-results">');
$('body').append(drinkResultsContainer);


//recipe
var recipeContainer = $('<div class = "container column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd" id = "recipe-container">');
$('body').append(recipeContainer);
//create btn
recipeInput = $("<input>").attr('id', 'recipeInput').attr('placeholder', 'Enter Ingredients Here');
recipeBtn = $("<button>").attr('id', 'recipeSearch');
recipeBtn.text('Enter');
$("#recipe-container").append(recipeInput)
$("#recipe-container").append(recipeBtn)
recipeBtn.attr('class', 'button has-text-light has-text-weight-light mb-4 has-background-primary-dark');
//container for results
var recipeResultsContainer = $('<div class = "container" id = "recipe-container-results">');
$('body').append(recipeResultsContainer);
recipeResultsContainer.attr('class', 'recipe-results mt-4 mb-6 has-text-centered has-background-warning-light is-block has-text-weight-semibold');