One of the most intriguing sites with interactive media is http://weavesilk.com/
This website just like many others of its kind allows interactiveness to seep into the user’s experience. After creating their own custom picture, the user can then save their picture. Although this website and its concept might seem simple, it still manages to give the user a sense of ownership and originality into the things that they make, which in my opinion is the most important for an interactive website.
This website is the previous website and more. It is a collection of various small interaction-based arts and games that allow the user to indulge in various different activities. This gives me a feeling of a gallery, every piece an art in its own way.
For this assignment, I decide to use three “button” onclick function.
Here is the link: http://imanas.shanghai.nyu.edu/~xy812/week4/javapr
Here are the changes I make to the code:
I put a “Click me!” button. When the user clicks on the button, an alert will appear.
I put a “Switch out!” button. When the user clicks on the button, the color of the title will change to yellow.
I put a “Bored?” button. When the user clicks on the button, the script of the words in the “navigation” category will become “Times New Roman”.
My link: http://imanas.shanghai.nyu.edu/~ej807/js-exercise-1/index.html
My first step was to figure out which event to wait for. I decided to change the header background as well as the text content with an onclick button. I proceeded to create a new function and wrote the instructions inside of that function and gave that function name as value of the event. I changed the background color to blue as well as the text to “AH. CUTENESS OVERLOAD. I CRI.” I did the same event for changing the image and created a new function as well. I changed the first image to the fourth image. My final step was to create a pop-up window on the click of the button. I used the button tag to create the event followed by the script tag with the function inside. I created an additional html file titled bom.html and calling it with window.open in order for this file to open when the button was clicked. Lastly, I added the width and height. Below are screenshots of the steps I took to complete this homework.
Here is the link:
By Salomon Ruiz
Instructors: Leon and Nimrah
Link to my website: http://imanas.shanghai.nyu.edu/~srh450/js-exercise-1/index.html
Documented by: Casey Pan
Topic: JaveScript Website
So, the next task was to switch out a piece of HTML content. For this task, I chose to use the button with the “onclick” function once again. However, instead of an alert, when “change image” is clicked the original kitten image will be switched out for a puppy image. Initially, I was unable to get this process to work, however I figured out what the problem was. On the actual HTML, after the <button onclick=”clickFunction”>Change Image</button>, I forgot to place “()” after “clickFunction” so the code was unable to work. The current code looks like this <button onclick=”clickFunction()”>Change Image</button>. After this change, the onclick function was properly activated and linked to the script.js page so the image could actually change property when the button is pressed.
The last task was to make something change concerning the styling aspect of the page. For this task, I chose to change the background color of the header. Once again, this was not very successful in the beginning, however with the help of my professor, I was able to get it right. So I learned that in order to change the style of something on the webpage, I need to use “.style.backgrounfColor” after the getElementById is stated. The “.backgroundColor” can be switched out to other features such as font size or font-family, however the key word id “.style” for a visual feature on the webpage to change.
This was a long, stressful, and tedious process, but I think I am starting to sort of get the hang of it.