Kilokem/BroCodeJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RearangeClockMiniProjectAndOthers

Browse Source
This commit is contained in:
Kilokem
2024-10-10 18:01:24 +02:00
parent 182c614783
commit dacbb89950
22 changed files with 232 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Practice/ArrysAndThings/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tittle</title>
</head>
<body>
<h1>For every output check out the console!!!</h1>
<script src="script.js"></script>
</body>
</html>

111
Practice/ArrysAndThings/script.js Normal file
View File

@ -0,0 +1,111 @@
//DESTRUCTING
const colors = ["red", "blue", "green", "black", "white"];
console.log(colors);
//swap
[colors[0], colors[2]] = [colors[2], colors[0]];
console.log(colors);
const [firstn, secondn, thirdn, ...restn] = colors;
console.log(firstn);
console.log(secondn);
console.log(thirdn);
console.log(restn);
const person1 = {
first : "Sponge",
last : "Squarepants",
age : 30,
job : "FryCook"
};
const person2 = {
first : "Patrick",
last : "Star",
age : 35,
};
const {first, last, age, job = "Unemployed"} = person2;
console.log(first);
console.log(last);
console.log(age);
console.log(job);
function DisplayPerson({first, last, age, job = "Unemployed"}){
console.log(`${first} ${last} age: ${age} is currently ${job}`);
}
DisplayPerson(person1);
DisplayPerson(person2);
//NESTED OBJECTS
const persona = {
fullName : "Spongebob Squarepants",
age : 30,
isStudent : true,
hobbies : ["Karate", "Danceing", "Cooking"],
address : {
street : "Some st",
city : "Bikkini bottom",
country : "In Water"
}
}
console.log(persona.fullName);
console.log(persona.age);
console.log(persona.isStudent);
console.log(persona.hobbies[0]);
console.log(persona.hobbies[1]);
console.log(persona.hobbies[2]);
console.log(persona.address.city);
persona.hobbies.forEach(element => {
console.log(element)
});
for(const item in persona.address){
console.log(persona.address[item])
}
class Person{
constructor(name, age, ...adres){
this.name = name;
this.age = age;
this.address = new Address(...adres);
}
}
class Address{
constructor(street, city, country){
this.street = street;
this.city = city;
this.country = country;
}
}
const p = new Person("Spongebob", 32, "sth st.", "Bikini bottm", "In tha ater");
console.log(p)
//SORTING
colors.sort();
console.log(colors)
const nums = [1,2,6,8,4,41,2,5,6,10,2,0,1,2,5,7,8,9,3,3,2,5,4,25,74,85,25,36,66,41,23,36]
console.log(nums.sort())
console.log(nums.sort((a, b) => a - b))
console.log(nums.sort((a, b) => b - a))
const people = [{name: "Sponge", age: 25, gpa: 5.2},
{name: "Patrick", age: 35, gpa: 3.5},
{name: "Sandy", age: 32, gpa: 4.7},
{name: "Sqidwards", age: 32, gpa: 14.7}];
console.log(people.sort((a, b) => a.age - b.age))
console.log(people.sort((a, b) => a.gpa - b.gpa))
console.log(people.sort().name)

65
Practice/Basics/index.html Normal file
View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sh*t</title>
</head>
<body>
<div>
<input type="button" id="allertask" value="AllertAsk, Then Console Repeare">
</div>
<div>
<h1>Welcome!</h1>
<label for="" id="">Username</label>
<input type="text" name="mytext" id="mytext"><br>
<input type="button" id="submit" value="submit"><br>
<p id="welc">Output shall be here!!!</p>
</div>
<div>
<h1>a + b</h1>
<label for="numa">Value a: </label>
<input type="text" name="" id="numa">
<label for="numb">Value b: </label>
<input type="text" name="" id="numb">
<input type="button" id="numcalc" value="submit"><br>
<p id="calcout">Output shall be here!!!</p>
</div>
<div>
<h1>Circumference of a circle!</h1>
<label for="numrad">radius (cm): </label>
<input type="text" name="" id="numrad">
<input type="button" id="circumcal" value="submit"><br>
<p id="circumcalout">Output shall be here!!!</p>
</div>
<div>
<h1>Counter:</h1>
<label for="" id="counterlab" style="font-size: 5em;">0</label><br>
<input type="button" id="countdecrease" value="-----">
<input type="button" id="countreset" value="RESET">
<input type="button" id="countincrease" value="+++++">
</div>
<div>
<h1>MATH!!!!</h1>
<input type="button" id="gimmeapie" value="GIMME PIEEE">
<input type="button" id="mathefloor" value="Floor PIE">
<input type="button" id="matheceil" value="Ceil PIE">
<input type="button" id="mathetrunc" value="Trunc PIE">
<input type="button" id="mathepower" value="Power of 2 PIE">
<input type="button" id="matheroot" value="Square root of 2 PIE">
<input type="button" id="mathelog" value="Log PIE">
<br><label id="mathouput"></label>
</div>
<div>
<h1>RANDOMISE</h1>
<input type="button" id="gimerandom" value="RANDOMISE!">
<input type="button" id="rollthedice" value="DICE!">
<input type="button" id="biggerrandom" value="BIGER random!!">
<br><label id="randomoutput"></label>
</div>
<script src="script.js"></script>
</body>
</html>

82
Practice/Basics/script.js Normal file
View File

@ -0,0 +1,82 @@
document.addEventListener("DOMContentLoaded", function() {
const PI = 3.14;
let y = 10, x = 5;
x = 100;
console.log(x);
document.getElementById("allertask").onclick = function(){
let username = window.prompt("Whats your name?");
console.log(username);
};
document.getElementById("submit").onclick = function(){ //simple input output
let text = document.getElementById("mytext").value;
console.log(text);
document.getElementById("welc").textContent = `Helllo ${text}`;
};
document.getElementById("numcalc").onclick = function(){ //Data conversion
let a = document.getElementById("numa").value;
let b = document.getElementById("numb").value;
document.getElementById("calcout").textContent = Number(a) + Number(b) +" Type of input: "+ typeof(a) + " Type of converion: " + typeof(Number(a));
//Other conversons:
String(a);
Boolean(a); //When empty string is given it will turn false every other case it will be true
Number(a);
}
document.getElementById("circumcal").onclick = function(){ //Just for constant Values
document.getElementById("circumcalout").textContent = "The circumference of a circle is: " + 2 * PI * Number(document.getElementById("numrad").value) + "cm";
};
document.getElementById("countdecrease").onclick = function(){ //Counter thingy
document.getElementById("counterlab").textContent = Number(document.getElementById("counterlab").textContent) - 1;
};
document.getElementById("countincrease").onclick = function(){
document.getElementById("counterlab").textContent = Number(document.getElementById("counterlab").textContent) + 1;
};
document.getElementById("countreset").onclick = function(){
document.getElementById("counterlab").textContent = 0;
}
document.getElementById("gimmeapie").onclick = function(){ //Most of the math I'll need!
document.getElementById("mathouput").textContent = Math.PI;
};
document.getElementById("mathefloor").onclick = function(){
document.getElementById("mathouput").textContent = Math.floor(Math.PI);
};
document.getElementById("matheceil").onclick = function(){
document.getElementById("mathouput").textContent = Math.ceil(Math.PI);
};
document.getElementById("mathetrunc").onclick = function(){
document.getElementById("mathouput").textContent = Math.trunc(Math.PI);
};
document.getElementById("mathepower").onclick = function(){
document.getElementById("mathouput").textContent = Math.pow(Math.PI, 2);
};
document.getElementById("matheroot").onclick = function(){
document.getElementById("mathouput").textContent = Math.sqrt(Math.PI);
};
document.getElementById("mathelog").onclick = function(){
document.getElementById("mathouput").textContent = Math.log(Math.PI);
};
document.getElementById("gimerandom").onclick = function(){
document.getElementById("randomoutput").textContent = Math.random();
};
document.getElementById("rollthedice").onclick = function(){
document.getElementById("randomoutput").textContent = Math.trunc(Math.random()*6) + 1;
};
document.getElementById("biggerrandom").onclick = function(){
let max = 100, min = 50;
document.getElementById("randomoutput").textContent = Math.trunc(Math.random()*(max-min)) + min;
};
});

80
Practice/ConditionalConquest/index.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Another Junkie site!</title>
</head>
<body>
<div>
<h1>Which one is bigger?</h1>
<label for="">Number a: </label>
<input type="text" id="numberaa">
<label for="">Number b: </label>
<input type="text" id="numberba">
<input type="button" value="Curiculum" id="TheAnsweer">
<p id="answera">The stick of TRUTH</p>
</div>
<div>
<h1 id="thevalueoftruth">CHECKED!</h1>
<label for="theboxoftruth">Checkbox: </label>
<input type="checkbox" checked id="theboxoftruth">
</div>
<div>
<h1>Radio</h1>
<label for="cardiradio">Card1</label>
<input type="radio" name="rad1" id="cardiradio"><label for="cardiradio" id="cardiradiolab"></label><br>
<label for="cardtradio">Card2</label>
<input type="radio" name="rad1" id="cardtradio"><label for="cardtradio" id="cardtradiolab"></label><br>
<label for="cardhradio">Card3</label>
<input type="radio" name="rad1" id="cardhradio"><label for="cardhradio" id="cardhradiolab"></label><br>
<input type="button" value="Submit!" id="radiosubmitter">
</div>
<div></div>
<h1>Ternary operations</h1>
<label for="cardiradio">Card1</label>
<input type="radio" name="rad1" id="cardiradiott" onchange=RadioChanged()><br>
<label for="cardtradio">Card2</label>
<input type="radio" name="rad1" id="cardiradiott2" onchange=RadioChanged()><br>
<label for="cardhradio">Card3</label>
<input type="radio" name="rad1" id="cardiradiott3" onchange=RadioChanged()><br>
<label for="" id="checkedone"></label><br>
</div>
<div>
<h1>Days of the week</h1>
<label for="week-slider">Select a day of the week:</label>
<input type="range" name="week-slider" min="0" max="6" step="1" value="0" id="daysliderer">
<h2 id="daysoftheweek"></h2>
</div>
<div>
<h1>String manipulation</h1>
<label for="textimput">Some string: </label>
<input type="text" name="textimput" id="themodifierinputtext" value="Alapszöveg!">
<p id="modifiedoutput"></p>
</div>
<div>
<h1>MethodChaining</h1>
<input type="button" value="BEGIN THE QUESTIONING!!!" id="MethodChaining">
<p id="capitalisedletter">Your name with capital first letter: </p>
</div>
<div>
<h1>PIRAMIDTIME!!!!</h1>
<input type="button" value="PIRAMIDTIME!" id="beginpiramid">
<p id="piramidtime"></p>
</div>
<div>
<h1>NUMBER Guesser!</h1>
<p>Guess the number between 10 and 25!</p>
<input type="button" value="Begin!" id="Guesserbeginer">
</div>
<script src="script.js"></script>
</body>
</html>

152
Practice/ConditionalConquest/script.js Normal file
View File

@ -0,0 +1,152 @@
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("TheAnsweer").onclick = function(){
let a = Number(document.getElementById("numberaa").textContent);
let b = Number(document.getElementById("numberba").textContent);
if(a > b){
document.getElementById("answera").textContent = "Number a is bigger!!!!";
}else{
document.getElementById("answera").textContent = "Number b is bigger!!!!";
}
};
document.getElementById("theboxoftruth").onchange = function(){
let a = document.getElementById("theboxoftruth").checked;
if(a == true){
document.getElementById("thevalueoftruth").textContent = "CHECKED!";
}else{
document.getElementById("thevalueoftruth").textContent = "UNCHECKED!";
}
};
document.getElementById("radiosubmitter").onclick = function(){
document.getElementById("cardiradiolab").textContent = document.getElementById("cardiradio").checked;
document.getElementById("cardtradiolab").textContent = document.getElementById("cardtradio").checked;
document.getElementById("cardhradiolab").textContent = document.getElementById("cardhradio").checked;
};
document.getElementById("daysliderer").onchange = function(){ //The switch
let day = "asd";
switch(Number(document.getElementById("daysliderer").value)){
case 0:
day = "Monday";
break;
case 1:
day = "Tuesday";
break
case 2:
day = "Wednesday";
break
case 3:
day = "Thursday";
break
case 4:
day = "Friday";
break
case 5:
day = "Saturday";
break
case 6:
day = "Sunday";
break
}
document.getElementById("daysoftheweek").textContent = day;
};
document.getElementById("themodifierinputtext").onchange = function(){ //Text mods text.trim() will reomve all the widespaces before and after the string
let text = document.getElementById("themodifierinputtext").value;
let out = document.getElementById("modifiedoutput");
if(Boolean(text)){
out.innerHTML = "The first letter: " + text.charAt(0) + "<br>";
out.innerHTML += "The last letter: " + text.charAt(text.length - 1) + "<br>";
out.innerHTML += "First location of the letter 's': " + text.indexOf('s') + "<br>";
out.innerHTML += "Last location of the letter 's': " + text.lastIndexOf('s') + "<br>";
out.innerHTML += "Uppercase: " + text.toUpperCase() + "<br>";
out.innerHTML += "Lovercase: " + text.toLowerCase() + "<br>";
out.innerHTML += "Repeate: " + text.repeat(3) + "<br>";
out.innerHTML += "Does it starts with 'Awesome': " + text.startsWith("Awesome") + "<br>";
out.innerHTML += "Does it ends with 'me': " + text.startsWith("me") + "<br>";
out.innerHTML += "Replace letter 'a' with 'o': " + text.replaceAll("a", "o") + "<br>";
out.innerHTML += "Fill till 15 with 'o': " + text.padStart(15, "o") + "<br>";
out.innerHTML += "Fill till 15 with 'o': " + text.padEnd(15, "o") + "<br>";
out.innerHTML += "Slice: " + text.slice(0, 3) + "<br>";
}else{
out.innerHTML = "";
}
};
document.getElementById("MethodChaining").onclick = function(){ //Method chaining
let name = null;
while (name === "" || name === null) { // Strict operators: === and !== compares the value and the type while single == and != just compares the value
name = window.prompt("Please enter your gorgeous name!! THERES NO ESCAPE!");
}
name = name.trim();
document.getElementById("capitalisedletter").innerHTML += name.charAt(0).toUpperCase() + name.slice(1)
};
document.getElementById("beginpiramid").onclick = function() {
let out = document.getElementById("piramidtime");
if(out.innerHTML === ""){
for (let i = 0; i < 30; i++) {
for(let j = i; j < 15; j++){
out.innerHTML += "V";
for (let ii = 0; ii < i; ii++) {
out.innerHTML += "A";
}
}
out.innerHTML += "<br/>";
}
}else out.innerHTML = "";
};
document.getElementById("Guesserbeginer").onclick = function(){
const min = 10, max = 24;
random = Math.trunc(Math.random()*(max-min)) + min
do {
answer = window.prompt("Guess the number between 10 and 25!")
} while (random !== Number(answer) && answer !== "" && answer !== null);
random === Number(answer) ? alert("You guessed it!!!") : null;
};
});
function RadioChanged(){ //ternary operator statement ? true : false
document.getElementById("checkedone").textContent =
document.getElementById("cardiradiott").checked ? "Card1" :
document.getElementById("cardiradiott2").checked ? "Card2" :
document.getElementById("cardiradiott3").checked ? "Card3" :
"Not this!";
};
//Messing with lists
let fruits = ["Apple", "Preal", "Plum", "Banana", "Orange"];
console.log(fruits);
console.log(fruits[2]);
fruits[0] = "Coconut";
fruits.push("Apple");
console.log(fruits);
fruits.pop();
console.log(fruits.length);
console.log(fruits);
for (let index = 0; index < fruits.length; index++) {
console.error("Fake warning!!! " + fruits[index]);
}
for(let item of fruits){
console.log(item);
}
fruits.sort();
console.log(fruits);
fruits.sort().reverse();
console.log(fruits);
//https://youtu.be/lfmg-EJ8gm4?si=I0Ugyw-qkk3VX8Rk&t=7429

BIN
Practice/FunctionalFun/IMG/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 556 KiB

BIN
Practice/FunctionalFun/IMG/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 460 KiB

BIN
Practice/FunctionalFun/IMG/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
Practice/FunctionalFun/IMG/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB

BIN
Practice/FunctionalFun/IMG/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
Practice/FunctionalFun/IMG/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

42
Practice/FunctionalFun/index.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#formimage {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 10px;
display: inline-block;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s;
}
#formimage:hover {
transform: scale(1.1);
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
</style>
<body>
<label for="" id="theArray"></label>
<p id="outputter"></p>
<div>
<h1>Roll the dice!</h1>
<label for="">Dice Roller:</label>
<input type="number" value="1" id="numberofimages">
<input type="button" value="Roll Dice!" id="dicerollerimageloader">
<div id="diceimages" class="container"></div>
</div>
<script src="script.js"></script>
</body>
</html>

119
Practice/FunctionalFun/script.js Normal file
View File

@ -0,0 +1,119 @@
document.addEventListener("DOMContentLoaded", function(){
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 11, 12, 34, 10, 4, 656, 234, 31, 1, 2, 3, 43, 1, 10,23, 42, 12];
document.getElementById("theArray").textContent = "The array we are working on: " + numbers;
let out = document.getElementById("outputter");
out.innerHTML += "Maximum of the array: " + Math.max(...numbers) + "<br/>"; //The spread operator!!!!! With ... you can "unpack" a list and call the function with the parameters of single elements, not with the list
out.innerHTML += "Minimum of the array: " + Math.min(...numbers) + "<br/><br/>";
let text = "This is a complex text with words!";
let textarray = [...text];
out.innerHTML += "The text I'll use for an array: " + text + "<br/>";
out.innerHTML += "The text array: " + textarray + "<br/>";
out.innerHTML += "The text with dashes " + textarray.join("-") + "<br/><br/>";
let fruits = ["Apple", "Preal", "Plum", "Banana", "Orange"];
let vegetables = ["Carrot", "pepper", "Celery", "Potatos"];
out.innerHTML += "Fruit list: " + fruits + "<br/>";
out.innerHTML += "Fruit list: " + vegetables + "<br/>";
out.innerHTML += "Combined list: " + [...vegetables, ...fruits, "pearl"] + "<br/><br/>";
function mergedfruit(...elements) { //Get varying amount of elements and merge it with the "spread out" operator or !! rest operator !!
out.innerHTML += "Collection: " + elements + "<br/>";
}
mergedfruit("sth1", "sth2", "sth3");
function summariser(...numbers){
let sum = 0;
for(let item in numbers){
sum += Number(item);
}
return sum;
}
out.innerHTML += "Some Sum: " + summariser(1,2,3,4,5,6,7,8) + "<br/>";
document.getElementById("dicerollerimageloader").onclick = function(){ //Imageloader
const res = document.getElementById("diceimages");
const imagenumber = document.getElementById("numberofimages").value;
let images = [];
for(i = 0; i < imagenumber; i++){
let rand = Math.floor(Math.random() * 6)+1;
images.push(`<img src="./IMG/${rand}.jpg" id="formimage">`);
}
res.innerHTML = images.join('');
}
});
//https://youtu.be/lfmg-EJ8gm4?si=78bU7V4mL7MVoYw_&t=14391
//Callback functions!!!
function sum(callback, a, b) {
let suma = a + b;
callback(suma);
}
function summa(b, a) {
return b + a
}
function displaynum(num) {
console.log("The number: ", num);
}
function displaytxt(num) {
console.log("The Text: ", num);
}
sum(displaynum, 5, 8);
sum(displaytxt, "alma", "fa");
sum(console.log, 5, 7 )
let numberok = [1, 2, 3, 4, 5]
numberok.forEach(displaynum) //!!! <array>.forEach() METHOD!!!!!!
let numbbb = numberok.map(doubler); //map()
console.log(numbbb);
function doubler(params) {
return params**2;
}
let nummb = numberok.filter(ifeven) //filterer()
console.log(nummb);
function ifeven(n){
return n % 2 === 0;
}
let total = numberok.reduce(summa) //reduce()
console.log(total)
//https://youtu.be/lfmg-EJ8gm4?feature=shared&t=17107
//Funcion Expressions
const hello = function(){
console.log("HELLO");
}
hello();
setTimeout(function(){
console.log("HOLA");
}, 3000);
//Arrow functions
const squaros = numberok.map((element) => Math.pow(element, 2));

12
Practice/ObjectiveMadness/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>For every output check out the console!!!</h1>
<script src="script.js"></script>
</body>
</html>

164
Practice/ObjectiveMadness/script.js Normal file
View File

@ -0,0 +1,164 @@
//my first objectsű
const person = {
firstname: "Spongebob",
lastname: "Squarepants",
age: 30,
isemployed: true,
sayHello: function(){
console.log("HELOOOOOOO Im sponge!")
},
sayBye : () => console.log("BBBBYYEEEEEEEEEE!!!")
};
console.log(person.age);
console.log(person.firstname);
console.log(person.lastname);
person.sayHello();
person.sayBye();
//The "this" keyword!!!
const person2 = {
firstname: "Spongebob",
lastname: "Squarepants",
age: 30,
isemployed: true,
sayHello: function(){
console.log(`HELOOOOOOO I am ${this.firstname}!`)
},
sayBye : () => console.log(`BBBBYYEEEEEEEEEE I was ${this.firstname}`), // "this" CANT BE USED WITH ARROW FUNCTIONT!!!!
sayBye1 : () => console.log(`BBBBYYEEEEEEEEEE I was ${person2.firstname}`),
sayBye2 : () => console.log(`BBBBYYEEEEEEEEEE I was ${firstname}`), //WRONG!!!!!!!!
};
person2.sayHello();
person2.sayBye();
person2.sayBye1();
//person2.sayBye2();
function car(make, model, year, color){
this.make = make,
this.model = model,
this.year = year,
this.color = color,
this.drive = function(){
console.log(`You drive a ${this.make}!!`)
}
};
const car1 = new car("Tesla", "Y", 2015, "black");
const car2 = new car("Ford", "Mustang", 2020, "red");
console.log(car1.color);
const carList = []; //ObjectArray
carList.push(car1);
carList.push(car2);
console.log(carList);
carList[0].drive();
//CLASSES!!!!!!!!!!
class Products{
static tax = 1.27;
constructor(name, price){
this.name = name;
this.price = price;
}
displayProduct(){
console.log(`Product name: ${this.name}`);
}
displayPrice(){
console.log(`Theprice: ${this.price}`);
}
calculateTotal(){
console.log(`The taxed price will be: ${this.price * Products.tax}`);
}
}
const shirt = new Products("Shirt", 19.99);
const pants = new Products("Pants", 22.50);
const underwear = new Products("Underwear", 122.50);
underwear.displayProduct();
underwear.displayPrice();
underwear.calculateTotal();
//https://youtu.be/lfmg-EJ8gm4?si=KJ_EBH2FxCEtonyR&t=19910
//INHERITANCE
class Animals{
alive = true
constructor(name, age){
this.name = name;
this.age = age;
}
eat(){
console.log(`This ${this.name} is eating`);
}
sleep(){
console.log(`This ${this.name} is sleeping`);
}
move(){
console.log(`The ${this.name} is mowing with ${this.speed} km/h!!`)
}
}
class Rabbit extends Animals{
constructor(name, age, speed){
super(name, age);
this.speed = speed;
}
run(){
console.log(`This ${this.name} is running`);
}
set sname(newName){
this._name = newName
}
get _name(){
return this._name
}
}
class Fish extends Animals{
constructor(name, age, speed){
super(name, age);
this.speed = speed;
}
swim() {
console.log(`This ${this.name} is swimming like a rabbit, hopping through the water!`);
}
}
class Hawk extends Animals{
constructor(name, age, speed){
super(name, age); //BEFORE constructing the child we NEED to construct the parent with the super() function!!!
this.speed = speed;
}
}
let fish = new Fish("izé", 4, 25);
const rabbit = new Rabbit("nyuszi",5 ,23 );
const hawk = new Hawk("Man", 5, 80);
console.log(fish.alive)
fish.eat();
rabbit.sleep();
rabbit.run();
hawk.sleep();
console.log(hawk.speed);
rabbit.move();
fish.move();
hawk.move();

12
Practice/TimesDatesTimers/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>For every output check out the console!!!</h1>
<script src="script.js"></script>
</body>
</html>

45
Practice/TimesDatesTimers/script.js Normal file
View File

@ -0,0 +1,45 @@
//DATE OBJECTS
//Date(year, month, day, hours, minutes, seconds, milliseconds)
const today = new Date();
console.log(today);
console.log(today.toLocaleDateString());
console.log(today.toLocaleTimeString());
console.log(today.toDateString());
console.log(today.toTimeString());
console.log(today.getTime());
//CLOSURES by using closures we can reuse a function without having to create a new one. And with this we an store variables safely.
function createCounter(){
let count = 0;
function increment(){
count++;
console.log(count);
}
function getCount(){
return count;
}
return {increment};
}
counter = createCounter();
counter.increment();
counter.increment();
counter.increment();
//SETTIMEOUT Note this function is not too precise!
function hello(){
console.log("HOLA");
}
setTimeout(hello, 3000); //It will delay the function by 3 seconds
setTimeout( function(){console.log("HOLA")}, 3000);
setTimeout(() => window.alert("HOLA"), 3000);
console.log("HOLA");