Week 3: Interactive media websites (Krom)

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.

https://neave.com/

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.

Week 4: javascript exercise (Lu & Syed) Ellen

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”.

Week 4- Javascript Exercise 1 (Leon & Nimrah) – Jo

My link: http://imanas.shanghai.nyu.edu/~ej807/js-exercise-1/index.html

First off, I had a pretty difficult time starting this assignment because I honestly did not know where to begin. To be clear, I did not understand which information would be put into the html section and which would be put into the javascript tab. At this point, I did not clearly even understand the distinction between class and id either to be honest and I had trouble taking in all the information from lecture too. So, I met up with Leon and it definitely helped a lot but it was still a little hard to grasp and I forgot the things I was told by Sunday. Therefore, I made another appointment with Jiwon for today(Tuesday). Finally, I understood what was going on and I wondered why I had struggled initially.
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.

Week 4: JavaScript Exercise 1 (Leon and Nimrah)

By Salomon Ruiz

Instructors: Leon and Nimrah

Link to my website: http://imanas.shanghai.nyu.edu/~srh450/js-exercise-1/index.html

JavaScript Exercise

For this exercise, first I created alerts when clicking each of the kittens pictures. For each image I wrote a different message. Then I created a button with the title “Kittens” and started adding different functions on an external JavaScript sheet, such as changing the colors of the paragraphs, the size and the content. I decided to change the title and its size when clicking this button. I also made the different sentences turn into different colors when clicking the button. Moreover, I made the second image of a cat change for another cat as well. Finally, I added a button (puppies) to open a pop up window showing the image of some puppies when clicked. I created a simple html page for this. Thanks to this exercise, now I understand better how to add DOM’s and BOM’s. However I would like to learn how to reset the original content when clicking the button again for example. Also how to style the buttons as the predetermined buttons doesn’t look very god.

 

 

 

Week 3: JavaScript Excercise (Chen)

Link: https://imanas.shanghai.nyu.edu/~cjp484/jspractice/

Attached is the link to the practice webpage that has been modified with JavaScript. Working with JavaScript has been challenging. When I first started to modify the HTML file, I had issues getting the buttons to activate. I later discovered this was because I did not include the “()” after the words. Once I included that, the words became blue and the code started to function. However, I continued to have issues with getting the buttons to perform the tasks they are supposed to do. Each button would only link to one command rather than their separate ones. Although challenging, I look forward to working with JavaScript in the future on my comic project in order to gain a better understanding of it! 

Week 4: Javascript Mini Exercise (Leon & Nimrah)-Kaitlin

This is the link to my Javascript exercise: http://imanas.shanghai.nyu.edu/~kp2184/js%20exercise/

 

The fist task for this assignment was to make something pop up in a different browser. For this pop, I chose to use the function “alert” as depicted below. When you click the “Press me!” button on the top left corner of the webpage, the alert will pop up and say “ComLab is Cool!” However, this process took some time for me to get the code right because the linking of the Javascript page in the beginning of the process was incorrect. So, in class, I learned to use <script></script> placed within the <body></body> and insert the functions I wanted within the <script></script> however, this process did not work for me. So, I went to Jiwon who taught me a easier method to link the page. Just insert <script>javascript/script.js</script> at the end of the HTML page outside of the </body> to link the external script with the HTML page and you can just simply insert the functions you want throughout the body.

 

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.