You created a course website in Assignment 1. Add your Assignment 2 course work to it. Use this as an example. Remember, this could be a portfolio for you to send to potential employers, so while there are no real requirements with styling, spending some time making this look nice and combining your CSCI-115 knowledge could pay off huge in the future.
Make your course website responsive: When the width of the window is less than 1000 pixels, its contents should be a picture that is right justified, something like:
The pic should be a link so that when it is clicked, your nav links appear in a vertically arranged list. See the http://www.cofc.edu homepage for an example of what you need to do. You must figure this out from scratch (WRITE YOUR OWN CODE!) based on what we did in class, and using the onResize/onLoad event handlers, and window.outerWidth property.
Using only what you have learned in class, create a webpage that displays 5 thumbnail (small) images, and then when you click on then, a large version is displayed on the page with a pop-out div that includes a picture of a close-pop-out-div icon in the upper left corner. When the user clicks the icon, the pop out div goes away. (becomes back “hidden”… So, the div is always there, but you are manipulating the hidden attribute). The thumbnail image should "pop" a little when the mouse pointer is over the image and go back to normal when the mouse pointer is no long over the image. It is up to you how the image should "pop" but a couple of ideas would be to make the thumbnail a little larger or make all the thumbnails slightly opaque and when the mouse is over the image there is no "opaqueness".
Using only what you have learned in class, create a webpage that has two divs on it: input and output. Only the input div is editable. On the webpage state: “You are only allowed to enter 50 characters in the input box.”. Above the output div have text that says “Number of characters remaining:” and inside the output div, display the number of characters the user can still enter in the input div. So, at the beginning, the output div would have “50” in it. If the user types in a character in the input div, you should automatically see the output div turn to “49”… If the number of characters left goes to a negative number, change the font color in the output div to red.
Using only what you have learned in class, create a webpage that has two divs on it: input and output. Only the input div is editable. On the webpage state: “You are only allowed to enter 50 characters in the input box.”. Above the output div have text that says “Number of characters remaining” and inside the output div, display the number of characters the user can still enter in the input div, but you must use the images in the imgs folder to display the number.
When the user has entered 50 characters and you are displaying the 0 bumblebee picture, do not allow the user to enter any additional characters.
THIS IS INDIVIDUAL WORK ONLY. Make sure to commit and push your code to GitHub.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent