You are on page 1of 6

Exercise 2-using DOM object

:GENERAL
All javascript code should be placed in an external js file .
All css should be placed in an external css file .
:The click events of the buttons can be added in the html, for example
For example: an input button with the label "Set box color" that when clicked will call
.the "changeBoxColor" function
</ "()input type="button" value="Set box color" onclick="changeBoxColor>

I have attached the Help page that we covered yesterday to give you
an good reference for doing this exercise.(index.html+site.js + site.css)
.Please go over that "Help" example before starting the exercise

Instructions
:Create a web page that looks like that .1

The page will contain an input button with the label " Change Site .2
."background color

When clicking on the button, a prompt pop up will appear with the .3
:text
."Please enter the site back ground color" and with the default color of " yellow "

When the user enters a color and press ok, the site background color will
.be changed according the color that the user typed in the prompt

If the user enter "gray" color in the prompt message he will get an alert
saying:
" please choose another color" "

"Add an input text box. Give it id of "boxColor " and default value of "red .4

Add a div. Give it id of "box1" and inner text of "Box1".The div will have a .5
black border
Around it.(use external css file)
."Add an input button with label "Set box color .6
When the user clicks on that button, the box1 div background will be
:colored according the color in the boxColor text input. For example

"Add an input button with label "Toggle boxclass .7


"When user click on that button the box1 div will get the className "small
Or "big". Each click on that button will toggle between ""small" class and
""big
.Class
The "small" class will have width and height of 40px in it's css properties.
(small square)
The "big" class will have width and height of 400px and border-radius: 200px
in it's css properties (big circle)
:See image
"small"

":big"

" Add an input button with label "Set Box text .8


When user click on that button a prompt pop up will appear with following
text
".Please enter a text for the box's content"

When the user clicks on ok the " Set Box text " button, box1 div innerText
:will be changed according the text given in the prompt

"Add two more buttons: "Add Span" and "Add Div .9


.Click on each button will add a new span/div to the page
.The new div or span will be added to an emptyDiv placed in the html page
(like we did in the last class exercise yesterday-(20.8) )

The new spans or div will have an index inside it according its creation .10
index

!Good luck

You might also like