All language subtitles for 107 Tabs - Display Buttons.en_US

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian Download
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,180 --> 00:00:00,690 Beautiful. 2 00:00:00,870 --> 00:00:05,600 We can display one job in our case, of course, that is the first job. 3 00:00:05,610 --> 00:00:13,500 But if all this value around and I'll say for example one, then of course I'll see the second job from 4 00:00:13,500 --> 00:00:13,980 my list. 5 00:00:14,350 --> 00:00:20,330 Now, it would be awesome if we would the buttons for all the jobs that we have in the list. 6 00:00:20,700 --> 00:00:25,410 And then once we click on a button, then, of course we change their state value. 7 00:00:25,800 --> 00:00:32,830 And then the moment we do that, we also display a different job from our list. 8 00:00:33,270 --> 00:00:39,510 Now, before we go any further, let me just tell you that, yes, EEOC right now, they're set up on 9 00:00:39,510 --> 00:00:42,780 a bigger screen just because we haven't added the buttons. 10 00:00:43,080 --> 00:00:44,040 So don't freak out. 11 00:00:44,040 --> 00:00:47,130 We'll fix it in a second when we add the buttons. 12 00:00:47,610 --> 00:00:51,900 And the way it's going to work is where we have the button container. 13 00:00:52,230 --> 00:00:57,080 So at the moment, we just have the comment, but eventually will have the button container. 14 00:00:57,480 --> 00:01:03,140 I'm going to add a div with a class of bittoun and then container. 15 00:01:03,600 --> 00:01:12,690 Now in here I would want to iterate over jobs and then for every job I would want to display specific 16 00:01:12,690 --> 00:01:15,630 button so each job should have that. 17 00:01:16,230 --> 00:01:17,700 So I'm going to go here with jobs. 18 00:01:18,120 --> 00:01:25,890 So I'll use the map of course, because I would want to wrap the values in some kind of meaningful return 19 00:01:26,730 --> 00:01:27,060 button. 20 00:01:27,300 --> 00:01:29,910 And then I'll also check for the index. 21 00:01:29,910 --> 00:01:33,430 And this is going to be the case where index is going to be important. 22 00:01:33,780 --> 00:01:35,220 So we're going to go here with the return. 23 00:01:36,120 --> 00:01:40,500 We're returning a button for every item we have in the list. 24 00:01:40,740 --> 00:01:44,970 And if you just want to see the item, you can choose whichever property you would want. 25 00:01:45,220 --> 00:01:47,460 In my case, that is going to be a company. 26 00:01:47,760 --> 00:01:50,640 So in here, go with item that represents that object. 27 00:01:50,880 --> 00:01:55,740 But since we cannot randomly object and react, we would need to go with specific property. 28 00:01:56,010 --> 00:01:59,460 So in my case, I chose the property of company. 29 00:01:59,880 --> 00:02:03,240 So now as you can see, I have my buttons. 30 00:02:03,270 --> 00:02:09,360 Now, of course, nothing is happening as I click on them, but at least I can see that I render button 31 00:02:09,510 --> 00:02:13,590 for every job that I have in my list. 32 00:02:13,990 --> 00:02:15,300 OK, that's awesome. 33 00:02:15,630 --> 00:02:19,980 Now I also need to add a key because there's going to be a big fat warning. 34 00:02:20,370 --> 00:02:27,510 If I don't turn here, I'm going to go with item and then that it since I know that that property is 35 00:02:27,510 --> 00:02:31,730 on my object and now of course, I would want the unclick. 36 00:02:32,100 --> 00:02:38,010 Now, I'm purposely not adding siestas yet because this is going to be a bit more interesting. 37 00:02:38,760 --> 00:02:41,440 So I'm leaving that for the last for now. 38 00:02:41,440 --> 00:02:48,090 I would just want to deal with on unclick where the moment I click on a button, I would want to grab 39 00:02:48,090 --> 00:02:54,190 that index, which essentially just tells me where in the list of that particular job is sitting. 40 00:02:54,510 --> 00:03:01,130 And then once I click on that button, I would want to change my value and that as I change the value, 41 00:03:01,140 --> 00:03:08,100 also notice that, of course, our data will change because in here we're looking for jobs and then 42 00:03:08,100 --> 00:03:09,280 whatever is the value. 43 00:03:09,690 --> 00:03:11,700 So by default is going to be zero. 44 00:03:11,700 --> 00:03:19,320 But then as we click on different buttons, also, the value instead will change and so will the values 45 00:03:19,320 --> 00:03:20,530 for these properties. 46 00:03:20,820 --> 00:03:21,240 All right. 47 00:03:21,550 --> 00:03:22,800 So where I have the button. 48 00:03:23,730 --> 00:03:31,680 Now, I would want to set up my own click show right next to the key I'm going to go with and click 49 00:03:31,680 --> 00:03:37,850 here and I'll say that I'm going to have my line function on line. 50 00:03:37,860 --> 00:03:42,110 We're going to go with set value and we'll pass in the index. 51 00:03:42,480 --> 00:03:47,850 So I'm grabbing the index that represents the placement in the array. 52 00:03:48,150 --> 00:03:55,970 And then once I click on my state value and as I change the state value, I also change what I might 53 00:03:55,980 --> 00:03:56,460 display. 54 00:03:56,880 --> 00:04:03,590 So if I click on this one, this represents right now this particular job, once I click on this one 55 00:04:03,840 --> 00:04:10,380 and of course I have the third job and then once I click on the first one, then I display the initial 56 00:04:10,380 --> 00:04:13,170 job that I rendered by default. 57 00:04:13,350 --> 00:04:14,230 OK, that's good. 58 00:04:14,730 --> 00:04:23,640 And also, if you take a look at the complete project, you'll notice that the item that I have clicked 59 00:04:23,640 --> 00:04:25,680 on has this active class. 60 00:04:25,980 --> 00:04:28,800 So as I'm hovering, there are some changes in sizes. 61 00:04:29,130 --> 00:04:34,580 But also once I click on the item, I would want to apply some specific Cyesis. 62 00:04:34,950 --> 00:04:41,430 So this is exactly what we're going to do where instead of just adding the success directly, like we 63 00:04:41,430 --> 00:04:46,590 normally did with a class name, what I'm going to do over here is class name. 64 00:04:47,600 --> 00:04:53,140 And then I would want to set up my template strand, and that's why I'm going to go back to JavaScript, 65 00:04:53,300 --> 00:05:00,020 so I'll set up my earlier addresses and then by default, I would want to add the job between class. 66 00:05:00,420 --> 00:05:07,310 So I'm going to go here with a job, my friend B10, so get some default styles right away. 67 00:05:07,640 --> 00:05:16,520 But then since it is a template string, I can also check if the index is equal to the value, which 68 00:05:16,520 --> 00:05:19,930 just simply means that this is the button that I have clicked on. 69 00:05:20,240 --> 00:05:26,480 I also would want to add the active button class and the way we do that, we set up our interpolation 70 00:05:26,840 --> 00:05:35,870 and inside we say if the index is equal to my current state value, then I would also want to add the 71 00:05:36,050 --> 00:05:37,150 additional class. 72 00:05:37,550 --> 00:05:43,670 So I'll use my and operator and I'm going to say active my friend B10. 73 00:05:44,120 --> 00:05:53,960 So what I'm checking here is if the index of the button matches the current state value that I have 74 00:05:53,960 --> 00:06:01,760 for my value, then of course I would want this active button if not marked for the rest of them, then 75 00:06:01,760 --> 00:06:02,450 I'm not adding. 76 00:06:02,690 --> 00:06:04,830 And then once I click on a button. 77 00:06:05,180 --> 00:06:11,330 Notice how now for the second button index of that button matches my state value. 78 00:06:11,540 --> 00:06:16,160 And that's why I'm adding that active button which I can navigate to a bigger screen. 79 00:06:16,670 --> 00:06:24,010 I can check out how we display that specific job and we're also adding classes on the fly. 80 00:06:24,320 --> 00:06:27,830 And if you're more interested, you can go to your console. 81 00:06:28,370 --> 00:06:31,340 Not of course we're looking for we are looking for the section. 82 00:06:31,730 --> 00:06:38,420 We have a job center and then we have the button container and notice here how we have job button, 83 00:06:38,420 --> 00:06:39,290 false, false. 84 00:06:39,470 --> 00:06:41,530 And then we have our active button. 85 00:06:41,900 --> 00:06:47,960 So as I'm clicking notice how the placement of the active button class changes. 86 00:06:48,260 --> 00:06:52,010 So it goes to the button that I have clicked on. 87 00:06:52,320 --> 00:06:53,420 That's our project. 88 00:06:53,690 --> 00:06:57,620 Hopefully everyone enjoyed it and I'll see you in the next project. 8744

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.