ANTON ULYANOV: All right, awesome.
So hey, everyone, joining us both in person and from the great beyond.
I'm Anton.
I'm a senior at Harvard in Mather House.
And this is a CS50 seminar about building interactive websites
with Bootstrap and jQuery.
So we saw a little bit about how to use Bootstrap
and jQuery to make our websites beautiful.
And now we're going to see a little bit about how to also make
those beautiful websites interactive.
So just to kind of set the topic for today,
we're going to start with three or four disclaimers.
And you'll see what I mean by that in just a second.
We'll do a quick review of Bootstrap.
Hopefully, you've seen a little bit about how
it works from doing this CS50 psets, but we'll
cover kind of a few of the basics in more detail
to set the context for the rest of the conversation.
Then we will actually see how to make our websites interactive
with no JavaScript at all, just HTML.
And you can already add interactivity to your websites.
And then we'll add on jQuery and see how we can combine that with our Bootstrap
code to make our websites even better.
So for those of you kind of here in person,
I'm more than happy to answer questions whenever they come up.
OK, so to start us off, as I promised, a few disclaimers--
so first, we're only going to be talking about the front-end framework.
So we're going to be talking about HTML with Bootstrap and JavaScript
and jQuery.
This means that a lot of stuff we do will not work in the sense
that you won't be able to register users for your website or anything like that.
But the beauty of this is that these frameworks are really independent,
and you can build it on with any back-end framework you want.
So you can use Flask with Python, as we saw in class.
You can use any back-end of your choosing.
And this will work just fine.
This is also going to be largely a quick look just at what's
possible with Bootstrap and jQuery.
So we're going to use simplified examples throughout just
to illustrate some of the main points.
And of course, we're going to gloss over some of the more nitty gritty syntax.
The advantage of that, though, is that there is always
a lot of support online.
So the Bootstrap and jQuery documentation are both very thorough.
And being the two most popular libraries used online for this type of stuff,
there are so many examples everywhere.
Pretty much anything you can think of, someone
has already implemented either and Bootstrap or in Bootstrap and jQuery.
And you can find all those examples online.
Also, if you're interested in learning a little bit more just about Bootstrap,
there was a CS50 seminar I think a couple of years ago by one of the TFs
from Yale.
So you can definitely take a look at that online.
And that will kind of give a much more thorough introduction
to Bootstrap as a whole, whereas here we're just going to cover enough of it,
essentially, to get our feed running and start talking about that with jQuery
as well.
OK, we're going use, as you see, a bunch of code examples in the seminar.
There's a coding sandbox with CS50.
So you can access that there and play around with all the examples.
They're all there for you.
Awesome, OK, so with that, let's chat a little bit about Bootstrap.
All right, so what is Bootstrap?
Why bother with it in the first place?
Essentially, because as you saw in the kind of last couple of problem sets,
Bootstrap makes things look very beautiful very easily, right,
with very little involvement on your part.
So to go from here to here, all I did was just
include the Bootstrap CSS files, link them into the head of the HTML file.
And you can go from something that looks like this to a beautiful website
with different layouts for your content, dynamic fonts, resizing,
all of the good stuff--
so a very easy way to go from something that has all the content
you need to something that looks the way you want it to.
One other kind of neat thing about Bootstrap
is that it was really built to be a mobile-first framework.
And what that means is that there's been a lot of thought that
goes into making sure that your content re-sizes automatically if you're
on a phone versus on a laptop.
There's been a lot of thought that goes into making sure
that all the layouts look good, regardless of the screen size
you're on or the resolution that you're on.
So hopefully, kind of just with these two images
and also with what you've seen in class so far, a lot of good reason
to use Bootstrap-- and we'll see how we can use it most effectively here.
OK, so how to get started?
As I said, literally, to go from this to this, all I had to do
was include a few URLs in the head of my HTML file.
So bootstrap is a collection of CSS elements.
That's the first style sheet that we're adding in--
just compiled Bootstrap code, a bunch of CSS classes.
We're also seeing a lot of JavaScript.
For the interactivity, Bootstrap relies on jQuery and JavaScript
under the hood.
So you need to include those as well.
And then finally, there's this little meta tag at the end.
This meta tag essentially is telling Bootstrap and the browser what type
of device you're on.
Right, as we mentioned, a lot of stuff is
built to rescale automatically depending on whether you're
on a phone or a laptop.
That's what this meta tag is saying there.
It's essentially giving the CSS and the JavaScript information
about your device, how big the browser is,
and then that will allow it to rescale automatically.
OK, so let's chat through a little bit of the basics of Bootstrap.
And then we'll start talking about much more kind of concrete stuff
in terms of how we can actually build interactive websites.
So Bootstrap uses CSS classes to style all of the elements.
And essentially, what that means is that you have normal HTML tags,
as you've always seen.
I'm not sure if nav was one that we ran into, but tags like paragraph,
div, all the usual ones.
And Bootstrap just adds styling on top of that with the Bootstrap classes.
So you can go online to the Bootstrap documentation
and see all of the different classes and what
all of the different stylings that will be applied, depending on what classes
you use.
Also, I'm not sure if this is something we've seen before,
but essentially we can chain classes together.
Right?
Just separating them out with a spacebar,
that would give us multiple classes applied to the same element.
OK, so that's how we style things.
And then how do we lay things out?
Bootstrap just relies on a grid.
So you have one container that wraps around all of your content.
And that container can either take up a certain amount of width on the screen
or just fill the entire screen, regardless
of what the user's device is.
Inside of that container, you have rows that
break the container horizontally and then columns, up to 12 of them,
that create that grid for you.
Inside of each row, you can have up to 12 columns.
So thinking back to this image here, what do we see on the right?
Essentially, something that very likely looks like this--
we have a container.
We have a row inside of that container and a bunch of columns.
All right, here we just have two columns, but, of course,
we could always make more.
So in fact, this is the HTML code styled with Bootstrap
that goes into making that set of boxes with headings and buttons on the right.
We have three divs that are columns.
They're styled to be columns.
And then this md-4 is just specifying that we
want the columns to be of medium width and that they
should take up 4 of the 12 columns.
All right, remember we have 12.
And so each of these columns is taking up four of those.
If you don't specify a number at the end,
it'll just divide right by the number of columns
you have, and they'll scale automatically,
which is why here, when we just had two, they would just take up
half of the screen each if we don't specify six and six
or something like that.
OK, so fairly easily, we can get to a lot of good looking stuff.
And remember kind of one of the core things I wanted to emphasize
is that this is very accessible because you're just using the exact same HTML
elements you've always been using.
All right, this is only a mix of divs, headings, and paragraphs.
And we get that same website that we've kind of always known, but now
in a much more beautiful context.
So to see this more concretely, we can--
so I recreated this website with just the quick HTML.
All we have is a navigation bar-- that's that nav bar on the top--
with a mix of a for links and buttons.
And then we have the familiar stuff we've seen,
just a bunch of divs, some of which are classed as jumbotron,
which is that big Hello, world! thing.
We see our container div.
And then we see our row and our columns.
So using just the normal HTML elements, we've recreate the exact same thing
just by applying the Bootstrap classes.
And just to show what I mean by making things beautiful by resizing them,
so if we extend out our browser window, notice
what happens as we shrink down the browser window.
Perhaps, we're a user moving from their laptop to a phone device.
We make the windows smaller.
The content wraps around within all of the paragraphs automatically.
It gets bunched up a little bit closer together.
And then once we're past a certain minimum width,
we're going to see the nav bar collapse down
to just one button on the top right just like you would see on a cell phone.
And we can then click on that to open up the navigation bar.
All of that implemented automatically.
We also see our three columns collapse down into just one column
where they're stacked on top of each other,
just like we would see on a mobile phone, so
a really nice kind of mobile-first framework in that sense.
OK, so we have seen some of the basics.
We just style things using classes, and we lay things out onto a grid.
So let's talk about how these classes actually work.
Essentially, Bootstrap just has some pre-built
what's called components, which are different class stylings that you
can apply to various HTML elements.
For example, you might style your header tags
or your paragraph tags with different forms of text.
You might style forms using the two classes here--
form group and form control.
You might style buttons using the class button and button primary there
at the end.
So we're just applying classes to HTML elements.
And here we see what makes the form go from just
a normal HTML form to a Bootstrap form.
The only difference is just those classes
and then linking in that style sheet.
OK, so in this seminar, we're going to talk about two components of Bootstrap.
Remember components are just stylings applied to normal HTML elements.
We're going to talk about specifically alerts and modals.
And we're going to see how we can first create those and then make
them interactive for us by just using Bootstrap
and then by combining in the JavaScript.
OK, so what are alerts?
If you looked at the staff solution of the CS50 finance pset
when you registered, you probably saw this blue kind of banner
across the top that said registered.
That's a Bootstrap alert.
It's just a div where you emphasize the content inside of that div
by changing the background color, making the font a little bit prettier.
All you do, you just create a normal div and then set its class to be an alert.
All right, so using the alert class here,
and then specifying alert-primary, remember chaining the classes,
we can create a blue alert, rather than just a normal one, which
is what that primary styling is adding.
So we can customize that.
We can change it to alert-danger, which creates a red alert, maybe something
where a user has done something wrong, or they're
trying to do an action that causes an error.
And we can also create tags inside of the alerts.
And if we use the alert-link class on a tag inside of an alert,
that'll make that link match the formatting of that alert.
So normally, links would be blue with an underline.
Using alert-link will make the formatting
on that link match whatever the formatting of the alert is.
OK, the second component to talk about is modals.
So modals in Bootstrap are divs.
They're content that sits above the normal, the rest of the page,
and kind of floats on top of it, blocks off whatever you might be seeing there.
All right, a common example of this might
be some kind of confirmation dialog.
In the CS50 finance pset, maybe one of the special features you implemented
was, before a user sells a stock, you asked
them to confirm that they want to sell.
You pop up a little modal.
You say are you sure you want to sell-- yes or cancel.
A modal, again, just a div where we apply certain stylings--
so a modal really consists of a header, a body, and a modal footer.
So the header is just the title there.
The body is whatever content you want include inside of the modal.
And then the footer here would have the two buttons there for Close
and Save Changes.
OK, let's see how that actually looks.
Let's see how that looks in a code example
before we see how we can make these two alerts and modals interactive.
So jumping back to our sandbox and restarting our terminal,
so here I've used our normal Flask back-end
that we would have used in Python with CS50.
Of course, you can use whatever back-end you find most convenient because this
is just the front-end.
OK, so let's just go to our static alert and see what that looks like.
So we see a bunch of different alerts here.
And how did we implement them?
With the HTML, once we get into the body, I have my container.
Inside of it, I have a heading for static alerts.
hr is just a horizontal line underneath that.
And then each alert is just a div that has
a different class applied to it, which gives us
the blue alert versus the secondary gray alert versus the green, the red,
and so on--
so just divs with different stylings.
OK, and then the modal, we won't go through the code
right now because the modal kind of is inherently interactive.
But how might the modal look?
We might click a button that says Launch Modal or something like that.
And then we would see the modal header up there
where it says my modal, the modal body, the content, and then the footer that
has the Close button inside of it.
So the modal, kind of a preview of the type of interactivity
that we can create very, very easily within Bootstrap.
OK, so first, as promised, we can recreate that modal
without using any JavaScript whatsoever.
What we just saw, you can click buttons.
You can make things pop up and go away--
no JavaScript at all, just the same HTML with probably under 20 characters
of additional typing written out.
OK, how do we do that?
With something called data dash something attributes.
So data attributes are a new feature in HTML5, the latest version of HTML.
What happens there?
Essentially, sometimes, we might want to associate additional information
about a certain HTML element.
And we don't really have any good place to put it.
Right?
With HTML elements, what we've seen so far are IDs and classes.
Remember IDs are supposed to be unique, and we
might want to refer to them in our CSS or something like that.
Classes, of course, we don't want to store data
about our content in the class.
The class is something that's supposed to be used for CSS stylings.
So what can we do?
We can add data attributes.
And these attributes can be essentially data dash anything-- whatever you want,
my favorite parameter, whatever it is.
And then you can put some kind of string inside of it.
And then when you're referencing that HTML element,
you can get back the data that's inside of there.
So for example, here, we might have the inventory for a restaurant.
So they have potatoes, carrots, and eggplants.
And maybe each of those have some kind of product code
when they're trying to reorder from a vendor.
So we can say data-product_id and specify a string, product_id,
for each of the elements inside of that list.
And then if we're processing that list in our Python or with our JavaScript,
we can get back those strings, the 1001, 1121, and 0615.
We can get those back by referring to the data-product_id attribute
of that HTML element.
OK, so how do we do that?
And why does that matter for Bootstrap?
In Bootstrap, these data dash attributes are
used to add the interactivity to components
without kind of any additional effort required on the part of the user.
So essentially, on the back-end, there's a lot of JavaScript that's
implemented for you in Bootstrap.
And when it sees that there's some kind of data attribute on an HTML element,
it knows what to do for you.
So for example, we can enable dismissing an alert.
Right?
We see this little cross on the bottom right here.
How do we enable that?
All we do, first, remember we style it in the same way
as we would our normal alert.
We just add a bunch of classes.
And all of these classes, you can just find in the Bootstrap documentation.
But what makes it a special alert?
This data-dismiss="alert".
What is that saying?
It's saying, when the user clicks on this button,
you should dismiss something.
And what should you dismiss?
The element with the tag alert on it or the alert element.
OK, so again, kind of just to quickly recap, on the back-end,
there's a lot of JavaScript that is implemented for you.
And when you have this data-dismiss attribute,
what the JavaScript is seeing is it's seeing you clicked on a button.
And this button is supposed to dismiss something
because the attribute is called data-dismiss,
and it's present on the button.
What is it dismissing the element with the alert.
Yeah?
AUDIENCE: The same thing we made with a [INAUDIBLE]..
ANTON ULYANOV: Yes, exactly.
So you can absolutely do the same thing with JavaScript.
And that's, to an extent, what we're going to see in the second half
with jQuery simplifying the JavaScript we need.
But for people that are less comfortable with JavaScript, you can do all of this
just with the HTML.
OK, and we can see the exact same thing in modals--
modals a little bit more complicated, a little bit more code.
But again, remember modal is just a bunch of divs
where one div defines the header.
A div defines the body.
And a div defines the footer.
So what is different about this?
We've added one more line of code from our previous modal,
which is the button.
So with the button, we have a data toggle,
which is saying that, when the button is clicked,
we should be toggling something on versus off.
What are we toggling?
The modal that's on the page.
The data target is telling us which modal we actually want to toggle.
So essentially, data-toggle="modal" is saying what are we going to toggle--
a modal, some element of type modal.
And then the data-target is saying which modal would we want to turn on--
the div with ID "#exampleModal."
So what type of--
kind of what is the string inside of data-target?
The sharp "#exampleModal"-- it's just a normal CSS selector Right?
We can use sharp some ID.
We can use dot some class.
If we just use the naked string with no sharp or dot in front of it,
it'll just select the HTML tag.
All right, yeah?
AUDIENCE: Are modals limited to one button?
Or can you have like a yes or no or confirm?
ANTON ULYANOV: No, you can have-- right, so inside of them-- good question.
The question was are modals limited to one type of button.
Inside of the modal, you can have whatever content you would normally
have inside of an HTML page.
So you can definitely have multiple buttons here,
as we'll see actually in just a little bit.
You can have a form inside of a modal.
Whatever content, you know, is most interesting,
you can put inside of it because it's just a bunch of HTML code.
OK, so what does this modal look like on an actual website?
Just like that, right, so we can have multiple buttons.
In fact, just in this modal alone, we actually
have three buttons, right, because the little cross on the top right
is also a button in and of itself.
OK, so let's jump back to our code examples
and just see this in a little bit more detail.
OK, so going back here, let's first look at our interactive alert.
So let's restart Flask and open up our interactive alert and go to that page
here.
So now we see an alert.
And we know it's an interactive alert because it has the little X.
And you can click the X and dismiss the alert.
If we refresh the page, what happens?
The alert comes back.
Right?
And again, we can just keep redoing this as much as we need.
OK, what is different?
Just like we saw on the slides, all we needed to do
was add this button of class close, which styles it as the little cross
in the far right of the alert.
And we have a data-dismiss="alert" attribute, which is saying that,
when that button is clicked, we want to dismiss something.
What do we want to dismiss?
The alert that's on the page.
And again, maybe if we had multiple alerts or something like that,
we could add the data-target attribute to specify which
alert we actually want to dismiss.
OK, now let's jump back to our example of the modal
now that we understand a little bit better how this interactivity works.
So in our modal example, we have a button.
We can click on it to launch a modal.
It pops over our screen.
If we click on the cross, our modal leaves.
And we can launch it again.
We can click on the Close button also to close our modal.
In fact, the way that modals are implemented,
it's listening for clicks anywhere kind of outside of the modal content
as well.
So if you just click elsewhere on the page, intuitively, as you would expect,
the modal would also close then.
OK, how are we doing this?
Let's jump down to the body of our page.
So just like we saw in the slide content, we have a data-toggle="modal"
attribute, which is saying, when the button is clicked,
toggle something of type modal.
Which modal?
The modal specified by data-target with ID "#exampleModal".
OK, then we have our modal.
And inside of it, a couple of things to focus--
first, this little cross in the top right of our modal
when we launch it, the cross in the top right here,
that's this button right here, which has the class
close, which styles it as a cross.
And what happens when you click it?
You dismiss the data of type modal.
And then again at the bottom in the footer,
we have another button that says Close.
Here we've styled it to be a button that's gray with button secondary.
And what is happening when you click that button?
You dismiss the element of type modal again.
So no JavaScript involved on your part, but kind
of recall that what's happening underneath the hood
is that there is a lot of JavaScript that's prewritten,
and it's just listening for when you click on certain elements.
When you click on them, it's trying to read
what attributes they have if they have any of these special data dash
attributes.
And if they do, then it's responding appropriately.
So all running in JavaScript underneath the hood,
but you're not seeing that because you can just
use the data attributes to pass in the commands that you want to run.
Yeah?
AUDIENCE: We saw in lecture that if the user deactivated JavaScript then
certain things wouldn't work.
Does that apply to this as well?
ANTON ULYANOV: Yes, exactly right.
So the question was what happens if the user disables
JavaScript or something like that.
Recall the Bootstrap kind of relies under the hood on JavaScript
to animate all of these things.
And up top when we're linking in, right, we're linking in the CSS style sheet,
but then also three different JavaScript libraries.
So if the user disables JavaScript, this wouldn't work.
Exactly.
What JavaScript libraries are we linking in?
We're linking in jQuery that we're going to work with just a sec.
Popper.js is an additional library of prewritten functions
that are used in Bootstrap.
And then Bootstrap has prewritten a bunch of JavaScript code
again to make this stuff work, which is this third one down here.
OK, so we see how this can work without any additional interaction
on our behalf.
Right?
We just specify the data attributes, say what we want to dismiss
or what we want to toggle on or off, and then
it kind of just weirdly, magically kind of just works, which is great.
I certainly encourage you all to use that whether you're
thinking about final projects or something like that.
But we can certainly make this a little bit more interesting.
And how can we do that?
How can we get beyond just the basic functionality that's provided for us?
That's where the jQuery and the JavaScript would come in.
OK, so very quick recap of jQuery and what's happening-- jQuery
is a JavaScript library.
It makes programming in JavaScript a lot easier.
They're kind of branding is, "Write less, do more."
And we're going to see that reflected in their syntax in just a sec.
jQuery is especially popular when it comes
to manipulating elements of the DOM, the Document Object Model.
So Bootstrap interactivity, as I mentioned,
is already implemented with JavaScript and jQuery under the hood.
So right now, we're going to first uncover, see
how we can just recreate what happens in Bootstrap with JavaScript and jQuery.
And they're going to see how we can expand on that and make our elements
even more interactive.
OK, how do we use jQuery?
We just link it in the head.
The previous code chunk from Bootstrap already has all of that.
So if you just link in everything that was on the Bootstrap slide,
you'll have all this functionality for you.
OK, and how does jQuery work?
It's a very simple syntax.
It's $selector.action.
So the dollar sign, just a reference to the fact that you're using jQuery.
Selector is something like #id or .class or something like that.
It selects an element from the HTML.
And then action is the action that's being applied to that element.
So for example, if we say something like $("#test").hide(),
we'll select the element with ID test in our HTML page and hide it.
.hide is a function that will remove that from display.
So you can imagine maybe there's something like some kind of online game
where there are a bunch of things popping up like the punch
down the mole game.
You might click on those, and they'll be hidden from the display for you.
OK, so again, the selectors in jQuery-- just like the CSS selectors
we've already seen-- #id, .class.
And then if you just use the naked selector, that'll choose by HTML tag.
So something like $"key" would select all of the paragraph tags on that page.
OK, but jQuery is useful not just for applying actions to events
kind of linearly, line by line.
We can also listen for certain things to happen
and then have a response to that.
So for example, with .click, click is not the action that is being applied
onto the paragraph.
It's listening for someone to click on the paragraph
and then submitting your response to it.
So in this case, what's happening when someone clicks on a paragraph?
We just have the naked selector there.
So that's just something with the HTML p tag.
jQuery is responding to that and is changing the text of the element that
got clicked on, which is being selected with $(this),
and changing that to "contents have changed."
OK, this is essentially the interactivity
that we're going to see that's useful in Bootstrap
and how we're going to combine the two.
So let's integrate jQuery with Bootstrap.
First, let's just recreate dynamically closing alerts with that little button.
So Bootstrap interactivity basically provides you
with kind of custom jQuery functions and jQuery listeners
that you can use and then respond to appropriately.
So recreating kind of what we've already seen,
let's just say we have a test alert, right, just a div
with the alert styling being applied onto it.
And let's say below that, separately, we have a button with some styling applied
to it to make the button look nice.
And what's going to happen below that with our script?
So the script says $("#close_alert").
That means select the element with ID close_alert,
which is that button we have below.
.on means that, rather than taking some action directly,
we're listening for some kind of event to happen.
So we have . on("click"), which just means the function after that is going
to run when the button is clicked, so when the user interacts with
the button.
When that's clicked, what's going to happen?
We're going to select the element with class alert, which
we can see right up here.
And we're going to close it.
What's special between jQuery and Bootstrap
is this part down here at the bottom where
we're able to close the alert that's a special function that Bootstrap
has written for us with JavaScript.
OK, so let's see this with our jQuery alert.
And again, we will restart Flask.
OK, so let's jump to our jQuery alert.
Right here, note there's no kind of interactivity
built into the alert itself.
We're just trying to recreate it using JavaScript and HTML alone.
OK, so what happens?
We can click on the button, and we'll close the alert
just as if we had clicked on the button inside of the alert with data-toggle.
Again, we can refresh and see that same behavior.
So what's happening?
As promised, right, when a user clicks on the button with ID close_alert,
the function after that is going to run that's being listened for.
And it's going to close the alert, as we see here.
OK, so this is great, kind of neat that we were able to do this ourselves
without relying on the magic of Bootstrap with the data-toggle
and stuff like that attributes, but not especially useful.
In fact, I would say it kind of looks worse because you
have to have the separate button.
Right?
Why would we ever want to do this?
Because now that we have this jQuery separated out from the Bootstrap--
right, remember this script here, this code in jQuery,
can be whatever we want it to be.
So whereas before with the data dash attributes
we were just bound to the behavior that was built into Bootstrap for us, now
we can really do whatever we want with the same selection, event listeners,
and functions.
What do we mean by that?
So let's say that, rather than just trying to close an alert,
we're actually going to try to dynamically change the content
inside of the alert or inside of the modal, all right, something
that we can't do with just Bootstrap alone.
First, quickly, let's recap.
Why is this bootstrapped?
Because we have the class styling applied to it that's making them
Bootstrap alerts.
And why is it closing?
Because we've written this jQuery function here.
OK, so to add interactivity into our Bootstrap, let's create a modal.
But rather than just using data-toggle, data-dismiss, all of that
to open and close our modal, let's actually
change the content inside of the modal, depending on how the user opens it.
So just like we have multiple buttons inside of the modal,
we can also launch the same modal from two different locations.
All right, how would we do that?
We just set the same data-target from two different buttons.
So regardless of whether the user clicks on this top button or the bottom button
there in the code, will open up the same modal.
But we will know which button the user clicked on
because we have this additional data-myfavoriteparameter attribute.
This is the use case we're talking about where
storing additional information about which specific button the user clicked
or special information about the HTML attribute is useful.
So let's create a modal that allows us to provide feedback
for either Brian or Veronica, depending on which button we clicked.
And this is something we might see in the Q score system.
Later on at the end of the semester, you have to provide feedback
for different CS50 staff members.
We can just have a button for each staff member
that will allow you to provide feedback for that person or something like that.
OK, so we have two buttons here, identical buttons,
the only thing that's different between them
is data-myfavoriteparameter, which is allowing
us to store a little bit of additional information,
specifically which of the two buttons the user clicked on,
whether it's the Brian button or the Veronica button.
OK, now let's go to our modal.
Our modal here looks exactly the same as it has before.
Again, a lot of code, but really what it is just a header that has a title in it
called New Feedback.
It's some body content that doesn't have anything inside of it right now.
And then it's a footer that has two buttons, either Close or Submit
Feedback.
Note that we have the little data-dismiss="modal"
attribute on the Close button.
So we already know that, when we click on Close,
the modal is just going to close for us.
Right?
We're relying on the earlier data dash interactivity
that we learned with Bootstrap because we're lazy,
and we don't want to write out all of the jQuery just
to recreate the behavior that we already have for us.
We want to rely on that when we can.
And then when we need to extend, that's where we can use the jQuery.
OK, so we have a modal.
We have buttons.
These buttons will both open up the modal
because the same data target attribute is present in both of the buttons.
How do we actually make this interactive?
Right?
How do we pass in the data that we got about which button
the user clicked on to somehow change the content inside of this modal?
That's where jQuery comes in.
So we want to change this title attribute
and specify which person we're providing feedback for.
OK, so in our jQuery, recall that we can use listeners and then
respond to those listeners.
And then based on what happened, we can dynamically react to that.
So here we have a listener for #exampleModal.
#exampleModal is the ID of the modal that is being activated.
And on show.bs.modal is where Bootstrap is coming in and helping us out.
That's a custom event, which will get triggered
when the modal is shown from Bootstrap.
So again, show.bs.modal is where the Bootstrap
is integrating with the jQuery.
Someone wrote show.bs.modal as a function that will fire off
when the modal is shown from Bootstrap.
So when that happens, let's respond to that modal being shown.
Right?
Whenever this event triggers, we know that our modal just popped up.
The user just clicked on one of the buttons.
What can we do?
So first, let's extract information about which button
the user clicked to actually show us that modal.
How can we do that?
With this event.relatedTarget selector, this
is a custom selector just like #exampleModal.
But in this case, we're kind of making a self reference
to the event that just happened.
So we're selecting the thing that launched the modal, essentially,
with this event.relatedTarget.
This is just giving us whichever button launched the modal.
What do we want to do?
We want to pull out of it.
Remember the data- dash.
So we want to pull out of it the data that
was stored in data-myfavoriteparameter.
So recall that myfavoriteparameter varied between Brian and Veronica,
depending on which button the user clicked.
So on this first line here, we're going to go back, look at the HTML code,
pull out the button that was used to launch
the modal through event.relatedTarget.
And inside of the variable recipient, we're
going to store either the string Brian or the string Veronica,
depending on which of the two buttons the user clicked on.
OK, now let's actually update the modal.
Right?
Remember that we're trying to change the title of our modal.
So rather than just saying New Feedback, we
want this to dynamically change depending
on which button the user had clicked.
OK, let's select the modal.
Again, this is a special selector that just selects the current HTML element.
How do we know what this is?
It refers to whatever was up here, so the modal with id #exampleModal.
OK, inside of the modal, we can find an element with class modal-title.
We see that element up here.
It's whatever we're trying to select.
So we found it inside of the modal.
And then we can set the text inside of it to something different with
the .text function.
The .text function just replaces the text inside of some kind of HTML
element.
We want to replace it with "New Feedback for"
and then put in our recipient dynamically.
So what do we expect is going to happen now?
If we click on the Brian button, we're going
to have to provide new feedback for Brian.
If we click on Veronica, we're going to provide new feedback for Veronica.
OK, let's see this in action now with our jQuery modal, new and improved.
OK, and let's go to jQuery modal.
So we see we have the two buttons that we had written in our code before.
Those are down here, just two buttons, one for Brian, one for Veronica.
What happens when we click on Feedback for Brian?
We get a new modal that pops up, and it actually says New Feedback for Brian.
So using the custom jQuery that we just wrote,
we're able to bring together the HTML and this new interactive modal.
Right?
We're able to make our interactivity customized
and not just rely on the built-in data-toggle, data-dismiss functions
that are prewritten for us in bootstrap.
So why is this actually useful?
All right, of course, kind of it's cute to write
New Feedback for Brian, New Feedback for Veronica,
which we see would happen if we did this.
Right?
But for example, something we might do is
we might have a form inside of the modal where
we pre-fill one of the inputs using this exact same setup here.
Then when the user submits that form, that content
will get passed into our back-end, into our Flask and our Python,
and then we can deal with it more dynamically there.
So this essentially allows us to keep passing information onwards in a very
interactive way and make our beautiful websites much more interactive, much
more customized, depending on what the user is doing.
So for example, now if the user clicked the button Submit Feedback,
and we had implemented this a little bit more thoroughly,
we could have passed through the value of Veronica
without the user having to type anything else additionally inside.
Why?
Because we know, again, how the user actually got here, right,
with the Veronica button.
So we can keep passing that information on without the user
having to provide us that information at every single step again.
OK, awesome.
So again, our usual stuff about modals is still present here.
All right, we have the Close button, the Submit Feedback button.
Because we're only focusing on the front-end,
Submit Feedback won't actually do anything.
It's just a button that we can press.
But if we close, we'll see the modal get closed out.
OK, that brings us to the end of kind of the structured portion
of our conversation.
As we wrap up, just wanted to touch on 2 or 2 and 1/2 really good resources
to learn more about this if you want.
So the place where you can learn everything
you want to know about Bootstrap, in addition
Claire's awesome seminar from a couple of years
ago, is just in the Bootstrap documentation.
So if you go to Documentation, you can go to Components.
And then you can see everything you can implement
in Bootstrap-- alerts, badges, breadcrumbs, buttons, all
different sorts of things.
If you just click on one of those, you will
see what different stylings you can apply
and what that will actually look like.
So essentially, this documentation is a massive repository of classes
that you can apply to different elements to style them.
All right, so if you want a yellow button,
you'll set it to be btn, which would make it look pretty.
And then you'll set it to btn-warning, which will fill it inside with yellow
and make sure that the text is appropriate because we don't want,
for example, white on yellow text.
OK, two additional resources that I think
were very, very helpful with this--
first, the Bootstrap 4 Tutorial on W3Schools,
you can get all of the examples, all of the content.
And this would show you how to implement that with much more interactivity
than just the Bootstrap documentation.
And then the jQuery tutorial-- all right, essentially,
kind of all we're doing is writing jQuery, but in a special way
that allows us to reference the HTML elements and the Bootstrap
that we had before.
So two really great tutorials in terms of Bootstrap 4 and jQuery on W3Schools.
And then if you just want references for Bootstrap specifically,
you can always go back to the Bootstrap documentation.
OK, awesome.
So I think that wraps us up.
Of course, happy to chat about any questions,
how to see this kind of more in practice,
how this might apply to final projects.
If not, thanks so much for coming.