From the course: Creating a Calculation Tool with AngularJS 1
Unlock this course with a free trial
Join today to access over 22,400 courses taught by industry experts.
Add the main HTML structure - Angular Tutorial
From the course: Creating a Calculation Tool with AngularJS 1
Add the main HTML structure
- Now, we're ready to creating the HTML structure for the calculator. In our HTML file, let's come in here and delete the HTML comment here. What we're going to do now is add the HTML containers so that we can style and structure the layout. Before we start putting any HTML on the page, I want to talk about the HTML Strategy. So, we're going to have a div contianer that's going to be the outermost container for the entire calculator. Inside of that container, we'll have an HTML five element called main. Inside of there, we'll have four HTML five section elements, one for each type of light bulb. Then, the second element we'll have in the main container will be a form element, and then, inside of there, we'll have three div elements. And these will hold the individual form elements. So, back in our text editor, inside of the body area, let's start by adding a div tag, then a space. We'll add an id. We're gonna set the id="myCalculator'. Then, we'll end the div tag. Let's hit a few…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.