Skip to content

Js basics 02 #58

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
AhmadALAhmad1 wants to merge 20 commits into
base: master
Choose a base branch
from
Open

Js basics 02 #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
45cc731
finished form style 1 & style 2
AhmadALAhmad1 Dec 6, 2022
b8d4717
added media query
AhmadALAhmad1 Dec 6, 2022
65688f3
adding info into style1 & style 2
AhmadALAhmad1 Dec 6, 2022
1b11a6c
finished step1
AhmadALAhmad1 Dec 7, 2022
18402f2
changed js file-name
AhmadALAhmad1 Dec 7, 2022
d98db13
finished step2
AhmadALAhmad1 Dec 7, 2022
afb0a30
finished step3
AhmadALAhmad1 Dec 7, 2022
c5388c1
finished step4
AhmadALAhmad1 Dec 7, 2022
75015fa
finished step5
AhmadALAhmad1 Dec 7, 2022
ecdde90
finished step6
AhmadALAhmad1 Dec 7, 2022
7afab1f
finished step7
AhmadALAhmad1 Dec 8, 2022
9569e83
finished step8
AhmadALAhmad1 Dec 8, 2022
94303c4
finihed step1
AhmadALAhmad1 Dec 8, 2022
59e6323
moved js file to inside folder step1
AhmadALAhmad1 Dec 8, 2022
6905c19
finished step2
AhmadALAhmad1 Dec 8, 2022
fc3001a
finished step3
AhmadALAhmad1 Dec 8, 2022
0c9578b
finished step4
AhmadALAhmad1 Dec 9, 2022
090d4ef
finished step5
AhmadALAhmad1 Dec 9, 2022
e7d1929
finished step6
AhmadALAhmad1 Dec 9, 2022
53f9814
finished step6
AhmadALAhmad1 Dec 9, 2022
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
13 changes: 7 additions & 6 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Step 1</title>
<meta charset="UTF-8">
</head>
<body>
</body>
<head>
<title>Step 1</title>
<meta charset="UTF-8" />
</head>
<body>
<script src="Step_1.js"></script>
</body>
</html>
3 changes: 3 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
var x = "Ahmad Al Ahmad";

alert("Hello! My Name is "+x);
13 changes: 7 additions & 6 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Step 2</title>
<meta charset="UTF-8">
</head>
<body>
</body>
<head>
<title>Step 2</title>
<meta charset="UTF-8" />
</head>
<body>
<script src="Step_2.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
let x=prompt("please enter your name:");
let y=prompt("please enter your surname:");
let z=prompt("please enter your city:");
var text ="Name: "+x +"\n" +"surname: "+y +"\n" +"city: "+y;

alert(text);

13 changes: 7 additions & 6 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Step 3</title>
<meta charset="UTF-8">
</head>
<body>
</body>
<head>
<title>Step 3</title>
<meta charset="UTF-8" />
</head>
<body>
<script src="Step_3.js"></script>
</body>
</html>
2 changes: 2 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
let x=prompt("please enter your name: ");
alert("Hello,"+ x);
28 changes: 16 additions & 12 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>Step 4</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="name">name : </label><input type="text" name="name" id="name"/>
<label for="surname">surname : </label><input type="text" name="surname" id="surname"/>
<label for="city">city : </label><input type="text" name="city" id="city"/>
<button name="validate" id="validate">Validate</button>
</form>
</body>
<head>
<title>Step 4</title>
<meta charset="UTF-8" />
</head>
<body>
<form>
<label for="name">name : </label
><input type="text" name="name" id="name" />
<label for="surname">surname : </label
><input type="text" name="surname" id="surname" />
<label for="city">city : </label
><input type="text" name="city" id="city" />
<button name="validate" id="validate">Validate</button>
</form>
<script src="Step_4.js"></script>
</body>
</html>
11 changes: 11 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_4.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
window.onload = function(){
document.getElementById('validate').onclick=function()
{
x=document.getElementById("name").value;
y=document.getElementById("surname").value;
z=document.getElementById("city").value;
alert("name: "+x+"\n"+"surname: "+y+"\n"+"city: "+z);


}
}
25 changes: 14 additions & 11 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>Step 5</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="first_number">first number : </label><input type="text" id="first_number" name="first_number"/><br/>
<label for="second_number">second number : </label><input type="text" id="second_number" name="second_number"/><br/>
<button id="validate" name ="validate">validate</button>
</form>
</body>
<head>
<title>Step 5</title>
<meta charset="UTF-8" />
</head>
<body>
<form>
<label for="first_number">first number : </label
><input type="text" id="first_number" name="first_number" /><br />
<label for="second_number">second number : </label
><input type="text" id="second_number" name="second_number" /><br />
<button id="validate" name="validate">validate</button>
</form>
<script src="Step_5.js"></script>
</body>
</html>
10 changes: 10 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_5.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
window.onload = function(){
document.getElementById('validate').onclick=function()
{
a=document.getElementById("first_number").value;
b=document.getElementById("second_number").value;
alert("Result= "+(a*b));


}
}
25 changes: 14 additions & 11 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_6.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>Step 6</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="first_number">first number : </label><input type="text" id="first_number" name="first_number"/><br/>
<label for="second_number">second number : </label><input type="text" id="second_number" name="second_number"/><br/>
<button id="validate" name ="validate">validate</button>
</form>
</body>
<head>
<title>Step 6</title>
<meta charset="UTF-8" />
</head>
<body>
<form>
<label for="first_number">first number : </label
><input type="text" id="first_number" name="first_number" /><br />
<label for="second_number">second number : </label
><input type="text" id="second_number" name="second_number" /><br />
<button id="validate" name="validate">validate</button>
</form>
<script src="Step_6.js"></script>
</body>
</html>
10 changes: 10 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
window.onload = function(){
document.getElementById('validate').onclick=function()
{
a=document.getElementById("first_number").value;
b=document.getElementById("second_number").value;
alert("Result= "+(a%b));


}
}
25 changes: 14 additions & 11 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_7.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>Step 7</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="shoe_size">shoe size : </label><input type="text" id="shoe_size" name="shoe_size"/><br/>
<label for="year">Birth year : </label><input type="text" id="year" name="year"/><br/>
<button id="validate" name="validate">validate</button>
</form>
</body>
<head>
<title>Step 7</title>
<meta charset="UTF-8" />
</head>
<body>
<form>
<label for="shoe_size">shoe size : </label
><input type="text" id="shoe_size" name="shoe_size" /><br />
<label for="year">Birth year : </label
><input type="text" id="year" name="year" /><br />
<button id="validate" name="validate">validate</button>
</form>
<script src="Step_7.js"></script>
</body>
</html>
13 changes: 13 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_7.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
window.onload = function(){
document.getElementById('validate').onclick=function()
{
a=document.getElementById("shoe_size").value;
b=document.getElementById("year").value;

alert("Shoe size: "+((a*5)+5)*50 +"\n"+ "Birth year: "+((2022-b)+1766));




}
}
22 changes: 12 additions & 10 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_8.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Step 8</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<label for="age">your age : </label><input type="text" id="age" name="age"/><br/>
<button id="validate" name="validate">validate</button>
</form>
</body>
<head>
<title>Step 8</title>
<meta charset="UTF-8" />
</head>
<body>
<form>
<label for="age">your age : </label
><input type="text" id="age" name="age" /><br />
<button id="validate" name="validate">validate</button>
</form>
<script src="Step_8.js"></script>
</body>
</html>
15 changes: 15 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-01/Step_8.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
window.onload = function(){
document.getElementById('validate').onclick=function()
{
a=document.getElementById("age").value;
if(a>18)
{
alert("You are over 18")
}
else
{
alert("you are under 18")
}
}

}
2 changes: 1 addition & 1 deletion 03_Exercises/03_JavaScript/javascript-basics-01/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
## Step 2 : Variables 2

1. Define three variables: `name`, `surname` and `city`.
2. Show them like in the ![](Step_2.png)
2. Show them like in the ![](Step_2file.png)
3. Commit!

## Step 3 : Strings concatenation
Expand Down
1 change: 0 additions & 1 deletion 03_Exercises/03_JavaScript/javascript-basics-02/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
2. Add an event listener to it (use `onMouseOver` or `addEventListener`)
3. Change the image when the mouse is over it
4. Commit

## Step 2

1. Target the input (use `querySelector`)
Expand Down
11 changes: 11 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-02/step 1/Step_1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@

function mouseOver(){


document.querySelector("#image1").style.marginLeft="40%";
}
function mouseOut(){


document.querySelector("#image1").style.margin="0px";
}
10 changes: 8 additions & 2 deletions 03_Exercises/03_JavaScript/javascript-basics-02/step 1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<title>Step 1</title>
</head>
<body>
<img src="images/image1.jpg" id="image1" />
<img
onmouseover="mouseOver()"
onmouseout="mouseOut()"
src="images/image1.jpg"
id="image1"
/>
<script src="Step_1.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-02/step 2/Step_2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
function myfunction() {
document.querySelector("#name").onblur
alert("thank you for participating!");
}
20 changes: 11 additions & 9 deletions 03_Exercises/03_JavaScript/javascript-basics-02/step 2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Step 2</title>
</head>
<body>
<form>
<label for="name">Your name : </label><input type="text" name="name" value="" id="name"/>
</form>
</body>
<head>
<meta charset="utf-8" />
<title>Step 2</title>
</head>
<body>
<form>
<label for="name">Your name : </label
><input type="text" name="name" value="" id="name" onblur="myfunction()" />
</form>
<script src="Step_2.js"></script>
</body>
</html>
5 changes: 5 additions & 0 deletions 03_Exercises/03_JavaScript/javascript-basics-02/step 3/Step_3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
function input(event){
event.preventDefault()
var x = document.getElementById("name").value;
document.getElementById("first").innerHTML = x ;
}
24 changes: 14 additions & 10 deletions 03_Exercises/03_JavaScript/javascript-basics-02/step 3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Step 3</title>
</head>
<body>
<form>
<label for="name">Your name : </label><input type="text" name="name" value="" id="name"/>
</form>
</body>
<head>
<meta charset="utf-8" />
<title>Step 3</title>
</head>
<body>
<form onsubmit="input(event)">
<label for="name">Your name : </label
><input type="text" name="name" value="" id="name" />
</form>
<div id="first"></div>

<script src="Step_3.js"></script>
</body>
</html>
Loading