In this second lab of the year, we have to write about 3 paragraphs of our smart goals for this school year and make it pop up when you click on its button. These pop ups are also known as an alert boxes within buttons. And last, include a nice picture of ourselves on the webpage. We have to create buttons that includes JavaScript functions that are exceptionally well organized and very easy to follow.
To create this lab, we have to create 3 buttons and to make it look better than the default look, I added a class called "button" with CSS into it, made it larger and match the theme color of my webpage. Then create 3 function for each of the buttons. The function will be call goal1(), goal2(), and goal3(). And within each of the three functions, there will be an alert written in the form:
function goal ()
{
alert ('content of the goal');
}
And within the buttons, I have add the function to the onclick code, so when you click on the button, the alert will pop up to the window. It'll look something like this:
<button type="button" class="button" onclick="goal ()"> Goal </button>
And last I added an image of myself, I really like my design of the circular images from last year so I made a class for the image. I cut in into a square first, then I gave it a class of CSS that changed its border radius so it is a circle.

No comments:
Post a Comment