Skip to content

week 10 practice #4

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
farnous wants to merge 1 commit into
base: master
Choose a base branch
from
Open

week 10 practice #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
56 changes: 56 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Week 10 Practice</title>
<script type="text/javascript" src="js/script.js" defer></script>
</head>
<body>
<h1>Week 10 Practice</h1>
<h3>Problem 2:</h3>
<p>
Create a program where a button acts like a counter. Everytime an user clicks on it, it counts up (starting from 0). Make sure you use closures (create two functions, one outer and one inner).
</p>
<button id="counterButton">Click me</button>



<h3>Problem 3:</h3>
<p>
Create a program with a button. When an user clicks on the button, the program executes an alert stating “the user has clicked!”
</p>
<button id="clickAlert">Click me</button>


<h3>Problem 4:</h3>
<p>
Create a form where the user is asked to enter their first and last name. Also, create a reset button, so that when an user clicks reset, the form is reset(their input is deleted).
</p>
<form id="form">
<input type="text" name="firstName" id="firtsName" placeholder="First Name">
<input type="text" name="lastName" id="lastName" placeholder="last Name">

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="" id="jsReset">JSReset</button>

</form>



<h3>Problem 5:</h3>
<p id="demo"></p>

<script>
const addalert = (msg) => {
document.getElementById("demo").innerHTML = msg;
}
try {
addalert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>

</body>
</html>
37 changes: 37 additions & 0 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
//1- Create a JavaScript code with global and local variable. Call your local variable outside of its function. Why do you receive an error?
//this is global variable.
const name = "Fares";

const sayHello = () => {
let printName = "Hello " + name ;
return printName;
};

console.log(sayHello());
//console.log(printName); //printName is not defined // this error because we are using local variable out side the funcuion which mean the variable is not founded


//2- Create a program where a button acts like a counter. Everytime an user clicks on it, it counts up (starting from 0). Make sure you use closures (create two functions, one outer and one inner).
document.querySelector('#counterButton').addEventListener('click', function(e) {
if(this.innerHTML === "Click me"){ this.textContent = 0; }

const addOne = () => {
this.textContent = Number(this.textContent) + 1;
};
addOne();
});



//3- Create a program with a button. When an user clicks on the button, the program executes an alert stating “the user has clicked!”
document.getElementById('clickAlert').addEventListener('click', function(){
alert("the user has clicked!");
})

//4- Create a form where the user is asked to enter their first and last name. Also, create a reset button, so that when an user clicks reset, the form is reset(their input is deleted).
//this can be done by button type if I use it like this type="reset"
//if you want it in javaScript so this is the code
document.getElementById('jsReset').addEventListener('click', function(e){
e.preventDefault();
document.getElementById('form').reset();
})