Skip to content

W6D1 #552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HananKB99 wants to merge 2 commits into
base: Hanan-Basbous
Choose a base branch
from
Open

W6D1 #552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f71a78
w6d1 added
SaharAl-shurafat1990 Sep 18, 2020
1828b0d
W6D1
Sep 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions W6D1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
div button{
color:blue;
width:25%;
/*background-color: lightblue;*/
}
23 changes: 23 additions & 0 deletions W6D1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="W6D1.css">
</head>
<body>
<script type="text/javascript" src="W6D1.js"></script>

<div>
<header id="head">
Heading for the div
<p>I'm a simple html paragraph and the css can controll my attributes. The JS will make the page interactive</p>
</header>

<button type="button" onclick="Important()">Important</button>
<button type="button" onclick="normal()">normal</button>
<button type="button" onclick="rest()">rest</button>
</div>


</body>
</html>
35 changes: 35 additions & 0 deletions W6D1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// 1. create new HTML file a with a three buttons and div with heading and paragraph inside it.
// a. button1 : Important
// b. button2 : normal
// c. button3 : rest
// 2. create a new JS file and link between the js and HTML
// 3. create a new css file and change the styles of the buttons and div with it's content
// 4. add Interaction for the buttons as the following:
// when the Important button clicked! change the background color to red and text to white and heading to dark red
// when the normal button clicked! change the background color to lightblue and text to white and heading to dark blue
// when the rest button clicked! change the background white and the text to dark

function Important(){
document.body.style.backgroundColor = "red";
document.body.style.color = "white";
document.getElementById("head").style.backgroundColor = "darkred";

}

function normal(){
document.body.style.backgroundColor = "lightblue";
document.body.style.color = "white";
document.getElementById("head").style.backgroundColor = "darkblue";
}

function rest(){
document.body.style.backgroundColor = "white";
document.body.style.color = "black";
document.getElementById("head").style.backgroundColor = "white";

}


// you can use this code for the div content:
// Heading for the div
// I'm a simple html paragraph and the css can controll my attributes. The JS will make the page interactive