Hi. I'm here to talk about this exciting mini-project that we have planned where you can combine all the knowledge and practice you have in using HTML, CSS, the skills you learned in the Duke Learn to Program environment, and creating interactive web pages. To make a simple website that allows you to filter different images. Some of you may have a smart phone. You may have seen apps like Snapchat or Instagram where you can upload images and create filters that make them look different. We've already seen that in some of our previous videos. And now we're going to give you an opportunity to combine these skills and practices you have by making a website on Code Pen from scratch. And when you make that website, you're going to allow the user to upload an image. And then to filter it different ways. Let me run through a simple example of how that would work. Here I have what could be your final version, although we're going to ask you to create your own CSS, so that it won't be styled as mine is in this unexciting wheat color. If I choose a file to upload, by clicking my Choose File button, then navigating to, say, the brown horse image, now I see my brown horse. And if I click red, you can see the button stays clicked, now the horse is red. I can reset the previous image and then I'll see what I uploaded before, and now I'll make that image grayscale. This is what we hope that you'll be able to do as a basic mini-project, create a website, in Code Pen, by creating the HTML and the JavaScript that allows the user to choose a file, upload the image, and it can be as exciting as the entire universe. And then, make two filters. One that turns that image red and another that turns the image into a grayscale version of what you started with. You can also reset the image back to its original version. That's what we'd like you to do for the basic mini-project website. And of course you can use different features of CSS to style the webpage as you'd like. As a challenge, what we'd like to do is to consider adding some more filters. Let me show you what the final web page looks like. On one hand, it looks similar, but I have different filters. I have a rainbow filter where, if I choose an image to upload, what I'll do with the small lion and the rainbow filter is to create a rainbow background. You might not be able to get the lion to shine through completely. And you'll have to do some research to find out what the colors of red, orange, yellow, green, blue, indigo, and violet are, the RGB values, so that instead of just red, you'll actually create stripes that way. We also would like you to use a blur image. You can see here that I've blurred the lion using some techniques that we've discussed in the Duke Learn to Program Environment. Finally, you might notice that, as I click these filters, the dimensions of the image that I uploaded are displayed here. 250 by 188. If I upload a new image, something larger perhaps, like the brown horse, we'll see that when I click red, that image changes. And when the dimensions change. Creating the dimensions and adding them to the webpage is another challenge activity we hope you'll do. These images could be lots of fun and rather than just limit yourself to four, you can make even more. I think it's going to be pretty exciting and I'm looking forward to seeing what you all do in this mini-project.
