Build a Recipe App with Spoonacular API: Part Two

JavaScript API Web Development

English (Auto-generated)

Okay. So let's take a look at the html and CSS for a project before we start writing any javascript and we're using the bootstrap framework to make our page responsive so that it just scales up and down in size. And we've already have a reference to our custom uh style sheet. So style dot CSS and we have um a reference to a javascript file where we are going to be writing a javascript just before the closing body tag out here. So script dot Js No, on the page we have two main sections and on in our html these are denoted by two dibs with a class of container. So the first container is here this is the header container and the header container has a header image and it has this text out here recipes for all seasons, just food, this heading. And we also have the input and button elements inside this header container and in our html this is where are headed container is so Div class is equal to container fluid and I d header. Div. And inside of here we have our input type is equal to text and we it has an idea of text search and we have a button with an on click attribute whose value is the function search. So on our web page, this is where the first div is. And the second div is here where all the search results are going to be displayed and in our html if we head back um this is our second container. So Div class container fluid. And then we have a div class row whose I. D. Is results dash deV. And inside of here is where we're going to be a pending our search results and inserting them into the dom. So this is all about the html and the CSS is here and you can change the CSS if you want. So there's not a lot of CSS uh and there's not actually a lot of html either. The two main three main elements that we're going to be using our number one. This input type is equal to text and then the button, the search button and then this results dev. So with that being said, let's go on and now start working on the javascript in the next podcast.
149 Views 0 Likes 0 Comments

Let's take a look at the HTML and CSS for our recipe project before we start coding the functionality using JavaScript.

Leave a comment (supports markdown format)