Javascript
interactive web design
document.getElementById("animalPic").src
Can we change the src attribute of an image tag?
Let's find out!
GET SET UP
Create a Focus 3B project folder.
Task 1
To get started, follow the video and do what the video does.
Watch the video to grasp the concept. It uses document.getElementById which is very similar to document.querySelector
Add this javascript to the script section:
if(animal == "cat"){
document.getElementById("animalSound").innerHTML = "MEOW!"
}
Using your current knowledge, can you get this working. We want the word "MEOW!" to appear under the image if the image is a cat.
Adapt the javascript.
If animalChoice is "cat", the marquee tag behavior is "alternate" instead of "scroll"
Marquee Speed
Do some research.
If the animal is dog, is it possible to make the marquee speed faster?
Super Tricky
Adapt the javascript.
If the animal is a cat then a message MEOW appears on the webpage
else if the animal is a dog then the message WOOF appears on the webpage
else if the animal is a mouse then the message SQUEEK appears on the webpage
else if the animal is a pig then the message OINK appears on the webpage
else if the animal is an elephant then the message BRRRRRR appears on the webpage
else the message ANIMAL NOT AVAILABLE appears on the webpage
Creative opportunity
If you have time, can you include your own adaptations. These could be related to:
- html
- css
- javascript
SUBMISSION
Submit your solution as instructed by your tutor.