Public_Projects/Learn_Javascript
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0007 added[Method chaining, if statements, switch statement, checkboxes, radiobuttons]

Browse Source
This commit is contained in:
WickedJack99
2022-08-27 13:29:07 +02:00
parent 17a342a4ed
commit 9d7e7d0968
3 changed files with 100 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
html/checkBox.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<p id="p1">
<label for="myCheckBox">Subscribe</label>
<input type="checkbox" id="myCheckBox"><br>
<button id="myButton">Submit</button>
</p>
<p id="p2">
<label for="visa">Visa</label>
<input type="radio" name="card" id="visa">
<label for="paypal">PayPal</label>
<input type="radio" name="card" id="paypal">
<label for="master">Master</label>
<input type="radio" name="card" id="master"><br>
<button id="payButton">Go to checkout</button>
</p>
<p id="p3">
</p>
<script src="/js/checkBox.js"></script>
</body>
</html>

23
js/checkBox.js Normal file
View File

@@ -0,0 +1,23 @@
document.getElementById("myButton").onclick = function () {
if (document.getElementById("myCheckBox").checked) {
console.log("Channel subscribed");
} else {
console.log("Check the checkbox to subscribe");
}
}
const visaButton = document.getElementById("visa");
const paypalButton = document.getElementById("paypal");
const masterButton = document.getElementById("master");
document.getElementById("payButton").onclick = function () {
if (visaButton.checked) {
console.log("Proceding to checkout with visa");
} else if (paypalButton.checked) {
console.log("Proceding to checkout with paypal");
} else if (masterButton.checked) {
console.log("Proceding to checkout with master");
} else {
console.log("You must select a payment-type");
}
}

45
js/index.js
View File

@@ -226,4 +226,47 @@ console.log(lastName2);
//-------------------------------------------------------------------------------------------------------------- //--------------------------------------------------------------------------------------------------------------
//14.Method chaining //14.Method chaining
//https://youtu.be/8dWL3wF_OMw?t=3554 //Chaining methods...
let userName3 = "bro";
let letter = userName3.charAt(0).toUpperCase().trim();
console.log(letter);
//--------------------------------------------------------------------------------------------------------------
//15.If-statements
//Basic form of decission making, if the condition is true, something is done, else it is not done
let age4 = 21;
if (age4 >= 18) {
console.log("You're an adult!");
} else if (age < 0) {
console.log("You havn't been born yet!");
} else if (age >= 65) {
console.log("You are a senior citizen!");
} else {
console.log("You're a child.");
}
//--------------------------------------------------------------------------------------------------------------
//16.Switch-statement
//Advanced form of decission-making, if case is true, something is done
//examines a value for a match against many case clauses, more efficient, than many else ifs
let grade = "A";
switch (grade) {
case ("A"): {
console.log("Very Good Mr!");
} break;
case ("B"): {
console.log("Good Mr!");
} break;
case ("C"): {
console.log("Could be better.");
} break;
case ("D"): {
console.log("Troll!");
} break;
case ("F"): {
console.log("Idiot!");
} break;
}
//--------------------------------------------------------------------------------------------------------------
//17.