00:04This time, continuing with simple web development exercises, we will perform the
00:10Calculating the area of a right triangle: To begin, we create a folder called cal
00:14Let's go to the Visual Studio Explorer and create an HTML file called cal.html inside
00:21From this we type html, we choose html 5 and the code is generated by default, now we are going to
00:28In Bootstrap, we go to documentation, then to downloads, and look for the links.
00:43CDNs are widely used to deliver stylesheets and active JavaScript files.
00:48Static code from libraries like Bootstrap is compiled from CSS and JavaScript source code.
00:55and we copy, we go to components, we select buttons, a series is observed
01:03From button styles we copy the code for the blue button btm btn first and
01:11Now let's go to the HTML file and paste the Bootstrap CDN links.
01:19In the title we changed the title to area of the triangle
01:28In the body, we center using the `center` tag. This is because we don't use CSS; we use Bootstrap, and we will need...
01:35Next, we write the h2 tag and add the following title: area of the triangle
01:41And we close, we make a line break, we write br, now let's go with the inputs, these are the rectangles
01:49for data entry, we type input type equal to number, it will be numeric since we will always type
01:55numbers in the text box, then type id; this id serves to give an identity to the
02:01variable height in javascript after the guide text plus holder called enter the base
02:13Now in input to determine height, we type input type equal to number, it will be numeric since
02:19We will always type numbers in the text box, then we type id; this id is also useful for
02:26assign an identity to the variable height in javascript after the guide text plus holder called enter
02:31For the height in the button label, we write the class equal to the button code in Bootstrap and...
02:40We paste, we click, the same result, this is that when the user clicks, the action is executed.
02:46of calculation and we write calculate and close
03:08We do a double line break with br
03:16We wrote the h6 tag with the description area
03:27Then we write a did with an id equal to result
03:43And we close Enter. Now we create the JavaScript file called next.js and link it to the file.
03:50html script scr equals filename link next.js and close the script
04:02the file in the same
04:25In JavaScript, we write the function, open braces, and type the variable result.
04:30A `document.getElemPyID` allows, as its name indicates, the selection of an element from the document by...
04:37The average value of the id attribute that has been assigned to it in this case is the result
04:55We create another variable called b, equal to document.getElemPyID base.value
05:00The `value` method of array instances returns a new array iterator object that iterates over the value of each element
05:06We use parseInt which deals with integers
05:24We create another variable called `document.getElemPyID`, `base.value`, the `value` method of array instances returns
05:34a new array iterator object that iterates the value of each element we use parseInt
05:39that they are whole numbers
05:43We create another variable, var.area, equal to base times height divided by 2; here we are allowed to perform the calculation
05:57Finally, the result.innerHTML equals more area; this means
06:02innerHTML is a property that allows us to read data or assign it to the content of a
06:06day and saw it well from the same
06:12Then we right-click on the HTML file and go to preview, which allows us to see the result.
06:23Now we move on to see the result, which is correct with the programming. We see that if we enter different numbers when doing
06:29Clicking this allows you to perform the calculation
06:44You have everything you need. If you found the video helpful, don't forget to subscribe.
Comentarios