00:06Continuing with web design programming in Visual Studio, today we will create a search engine.
00:11These videos, presented as final projects, serve as a dictionary example, to begin with.
00:17We created a folder on the desktop, and inside it, we created a new file called
00:21index html, within this we type html, select html5, and we have the programming,
00:36Let's go to title, we write Chinese-Spanish dictionary, continuing, let's go to body, we write
00:44the h1 tag, we rewrite Chinese-Spanish dictionary, this is a title to give
00:49Name the website in its tab, another to name the website itself, then
00:56From this we write the following tag called section, and an id, this to give a section
01:01and its identity will be main container, we make a div, and inside this, we write the tag
01:18input, type equals text, name equals search engine, id equals search engine, plashholder, this is to give
01:24address, and meaning to the user, within the text box, and we write search pingin
01:29In Spanish, we now create a list or table of text, with the ul tag, with its id equal
01:41To create the list of articles, we write the tag li, its class or class.
01:46It's the same as the article, and we type it on the keyboard; for Chinese, Mandarin, we type
01:52On the keyboard, for Chinese, Mandarin, the following words in Chinese and Spanish,
01:57wow, me, nor, you, ta, he, ta, she, you, have, if, be, lie, bad, re, heat, pin, frequency,
02:08sue, study, yiki, together, feng, madness
02:34We link the new CSS file in the HTML file; for this we write, link rel is equal
02:40is l7, ref, name, index, css.
03:28Now we're going to develop the programming in CSS; all the programming is developed in
03:33a box model, or model box, that's how we write it, then we type keys, we write,
03:39margin means that it separates the element from other elements, with a value of zero, then
03:44We write padding, it means the separation of the content layer and the border, just like
03:49Setting box sizing to zero, which is equal to border box, means including content and padding.
03:55and border, but do not include the margin.
03:57Font family is the typeface we designate as Chinese, by default it does not appear change.
04:06In body the color type is lead, we open keys in section, width 100w, which is wide
04:14This means it would represent 100% of the viewport width or the full width
04:19of the screen, height, 100vh, which in height, would represent 100% of the height of the window
04:25graphic or the full height of the screen, and, of course, ww means viewport width,
04:32viewport width, display, flex, which is flexible display, next
04:38justific content, center, justify content, center, with flex direction, column, direction
04:44flexible, column, we write justific content, center, which is justifying content,
04:49center, and finally we write to ignitems, center, which aligns elements, center.
05:05The following is the input label that corresponds to the search bar; we have a
05:09width of 50, viewport width, viewport width, a padding of 10
05:15pixels, outline, none, which means with a null scheme, we also have a border or edge of
05:205 pixels, a solid color of asterisk cc of 1 and 4, we also write func weight,
05:25600 specifies the weight or thickness of the letter.
05:48For the elements of the list we have the following characteristics, in list of
05:52articles, font cc, 30 pixels, font size, 30 pixels, margin top, 20 pixels,
06:00a top margin of 20 pixels, with list style, none, which is list style, none.
06:06font weight, 600, white font color, with textaling, center, which in the alignment
06:13of center text. The following are the LI tags, they have a margin of 5 pixels, margin 5 pixels
06:35Finally, we have a null display filter. We create a JavaScript file called registro.js.
06:58To program in a javascript file, we write the following: document,
07:04adeventistener that yup, efecha, the adeventistener method, is a listener that indicates
07:09To the browser that is attentive to user interaction, we write the conditional if,
07:13If, this is so that when a word is typed, the text is described.
07:17It also allows the letter element to iterate through all the written elements.
07:27Next we write, if, e, ki equal, equal, equal, escape, e, target, valo equal,
07:33to empty, this means that if you press escape or esc, it will delete the text inside the search box.
07:39Next we write, document, electoral keris, article, foreach, letter date,
07:44This means that it iterates through all the existing elements in the list; we write letter, text content,
07:50tolover case, includes, e, target, valo e, tolover case, with this.
08:00The tolover case method returns the value of the string converted to lowercase.
08:05We write, letter, class list, remove, filter, means that if this is true, remove the
08:11filter class, and finally we write, letter, class list, add, filter, otherwise, perform
08:17a scan and searches for matches by letter, for each element; what the filter does is that
08:22Do not display items that do not contain what the user's search query requests.
08:51Once the JavaScript file is created, we link it in the HTML file.
08:55To do this we write, script scr equals log dot js, and close the script.
09:03Now we move on to the functionality of our website, we type, w, we get wu, or yo
09:09In Chinese, with the letter te we get ni, or tu, in Chinese, likewise we get the different
09:15words described above.
09:31That's all, if you found the video helpful, don't forget to subscribe.
Comentarios