Practice_6

Author: AdarshTiwari04

Concept_Practicing/Class.js

@@ -0,0 +1,107 @@
+class car {
+  constructor(name, color, topspeed) {
+    // Properties or Attributes
+    this.name = name;
+    this.color = color;
+    this.topspeed = topspeed;
+    this.curr_speed = 0;
+  }
+
+  getcurr_speed() {
+    return this.curr_speed; // This is an example of a getter function in class car and like this you also have setters function in class. There are many getters and setters functions in a class.
+  }
+
+  // Methods or Behaviors
+  drive(speed = 10) {
+    // This is an example of a default argument in a fuction if you don't pass any value to the function ,then it will use this value as a deafult argument to run the function
+    console.log("Just Drove 2 Kilometer!!");
+    this.curr_speed += speed;
+    console.log(`Current Speed: ${this.curr_speed} km/h`);
+  }
+
+  brake() {
+    console.log("Car is now braking...");
+    this.curr_speed -= 10;
+    console.log(`Current Speed: ${this.curr_speed} km/h`);
+  }
+
+  stop() {
+    console.log("Car is now stopped...");
+    this.curr_speed = 0;
+    console.log(`Current Speed: ${this.curr_speed} km/h`);
+  }
+
+  zerotoHundred() {
+    console.log("Car is now at 0 km/h");
+    this.curr_speed = 0;
+    setTimeout(() => {
+      console.log("phew!! That was Fastttt ");
+      this.curr_speed = 100;
+      console.log(`Current Speed: ${this.curr_speed} km/h`);
+    }, 2900);
+  }
+}
+
+const myCar = new car("Tesla", "Red", 100);
+
+const myCar2 = new car("Porsche", "Yellow", 200);
+
+// console.log(myCar.name);
+// console.log(myCar.color);
+// console.log(myCar.topspeed);
+
+// myCar.stop();
+
+// console.log(myCar.curr_speed);
+
+/*
+
+myCar.drive();
+console.log(myCar.curr_speed);
+myCar.drive();
+myCar.drive();
+myCar.drive();
+console.log(myCar.curr_speed);
+
+myCar.brake();
+console.log(myCar.curr_speed);
+myCar.brake();
+myCar.stop();
+console.log(myCar.curr_speed);
+
+*/
+
+// myCar.zerotoHundred();
+// console.log(myCar.curr_speed); // This line does not work Because of it is a synchronized line of code and it will run before the settimeout function can work properly...
+
+console.log(myCar2.name);
+console.log(myCar2.color);
+console.log(myCar2.topspeed);
+
+myCar2.drive(40);
+myCar2.drive(80);
+myCar2.drive();
+console.log(myCar2.curr_speed);
+myCar2.stop();
+
+/*
+
+const nums = [1,2,3,4,5,6,7,8,9,10]
+nums.push(11);// Here this is a method that is used to push a number but we don't defined the class here.(Reason: As we all know that methods are also possible inside of a class)
+console.log(nums);// This means that there is a class array in javascript already we are using its methods without knowing it.
+
+@Short Note:
+@console.log(typeof nums); //!typeof is an operator that returns a string indicating the type of a given operand. It's commonly used to check the data type of a variable or expression.
+
+Examples:-
+
+typeof 42;                 // "number"
+typeof "hello";            // "string"
+typeof true;               // "boolean"
+typeof undefined;          // "undefined"
+typeof { name: "Alice" };  // "object"
+typeof [1, 2, 3];          // "object" (arrays are considered objects)
+typeof null;               // "object" (this is a historical quirk in JavaScript)
+typeof function() {};      // "function"
+
+*/

Concept_Practicing/Class_Array.js

@@ -0,0 +1,23 @@
+//@ Visualisation of the Class Array in a demo class
+
+//! class Array {
+//!   join() { // Method inside the class Array
+//!  This method basically joins the values inside the array with anything you wants.
+//! }
+//!
+//!   push() { // Method inside the class Array
+//!  This method basically push a values into the array at its last position.
+//! }
+//! }
+
+//@ Implementing or Creating a new method inside the Actual class Array or Array Datatype
+
+// Array.prototype.mypush = () => this.length; // ❌ This will not work correctly with arrow functions.
+
+Array.prototype.mypush = function (item) {
+  return (this[this.length] = item); // Here the first this keyword gets you the whole array on the method is being called.
+};
+
+const nums = [1, 2, 3];
+nums.mypush(4); // New Method created by me
+console.log(nums);

Concept_Practicing/Practice_class.js

@@ -0,0 +1,28 @@
+class Bank {
+  constructor(balance) {
+    this.balance = balance;
+  }
+  withdraw(amount) {
+    // Guard Clause
+    if (this.balance >= amount) {
+      this.balance -= amount;
+      console.log(` Amount Withdrawn : ${amount}`);
+      console.log(` The Updated Balance : ${this.balance}`);
+    } else {
+      console.log(" Insufficient Amount ");
+      console.log({ " Balance Amount ": this.balance });
+    }
+  }
+
+  deposit(amount) {
+    this.balance += amount;
+    console.log(` Amount Deposited : ${amount}`);
+    console.log(` The Updated Balance : ${this.balance}`);
+  }
+}
+
+const adarsh = new Bank(100);
+adarsh.withdraw(100);
+// adarsh.deposit(100);
+// adarsh.deposit(100);
+adarsh.withdraw(100);

Concept_Practicing/tempCodeRunnerFile.js

@@ -0,0 +1,2 @@
+adarsh.deposit(100);
+// adarsh.withdraw(100);

Fightning_game/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>replit</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+
+  <body>
+    <div class="title">The solution for Fighting Game</div>
+    <br />
+
+    <div class="menu">
+      <div class="p1Choices">
+        <img
+          alt=""
+          id="p1"
+          src="https://i.gifer.com/origin/00/0019f6845ceaa9347b881ccbe8f5644a_w200.gif"
+        />
+        <button
+          onclick="player1.strike(player1, player2, player1.attackDmg)"
+          id="attack"
+        >
+          Attack
+        </button>
+
+        <button onclick="player1.heal(player1)" id="heal">Heal</button>
+
+        <div id="p1Health">100</div>
+      </div>
+
+      <button id="play">Run simulation</button>
+
+      <div class="p2Choices">
+        <img alt="" id="p2" src="https://i.imgur.com/Z0QCi47.gif" />
+        <button
+          onclick="player2.strike(player2, player1, player2.attackDmg)"
+          id="attack"
+        >
+          Attack
+        </button>
+        <button onclick="player2.heal(player2)" id="heal">Heal</button>
+        <div id="p2Health">100</div>
+      </div>
+    </div>
+    <br />
+
+    <div class="resultContainer">
+      <div id="result"></div>
+      <button onclick="game.reset(p1,p2)">Reset</button>
+    </div>
+
+    <audio id="p1attack" controls style="display: none">
+      <source src="sounds/fastpunch.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="p1heal" controls style="display: none">
+      <source src="sounds/fastheal.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="p2attack" controls style="display: none">
+      <source src="sounds/quickhit.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="p2heal" controls style="display: none">
+      <source src="sounds/quickheal.mp3" type="audio/mpeg" />
+    </audio>
+    <script src="solution.js"></script>
+  </body>
+</html>

Fightning_game/script.js

@@ -0,0 +1,140 @@
+// Things You should know before creating the App
+
+/* 
+
+1. While loop:-
+
+for loops ---> when you KNOW how many times you want to loop
+while loops ----> when you are NOT SURE how many times you want to loop
+
+let nums =0
+
+while(nums<5)
+{
+console.log("Looping")
+num++; // This runs the loop 5 times until the condition ie might 
+}
+
+Examples:
+
+let finished=true
+
+while(finished==true)
+{
+  // code to execute
+  finished=false; // change this to false to stop the loop
+}
+
+2 .addEventListener:-
+
+// DOM :- Document Object Model
+
+let playDiv = document.getElementById('play');
+
+! Method 1:-
+! When the button is clicked, it will execute the code inside the Arrow function
+
+playDiv.onclick = () => {
+  console.log(" Yo Yo ");
+  }
+
+! Method 2:-
+! When the button is clicked, it will execute the function inside the curly braces {}
+
+playDiv.addEventListener('click', function() {
+  console.log(" Yo Yo ");
+});
+
+@ Why you should use .addEventListerner other than .onclick
+
+@1 . addEventListener allows you to attach multiple event handlers to the same element for the same event type.
+@
+!  Using addEventListener
+@ element.addEventListener('click', firstFunction);
+@ element.addEventListener('click', secondFunction); // Both will run when clicked
+@
+!  Using onclick
+@ element.onclick = firstFunction;
+@ element.onclick = secondFunction; // Only secondFunction will run, first is overwritten
+@
+@2. Support for Other Event Types like "mouseover", "keyup", "scroll" than onclick is limited to the click.
+
+
+//** Most Important use of addEventListener is this :- 
+
+* document.addEventListener('keydown', function(e) { //! document.addEventListener is a method used to attach an event listener to the entire HTML document
+*  if (e.key == "q"){
+*    console.log(" You pressed Q!");
+*  }
+*    else
+*   {
+*    console.log("Not Q!");
+*    }
+* }); 
+
+3. <audio> tags
+
+<audio> tags are used to play audio files in HTML
+
+Example : 
+
+<audio id="myAudio" src="audio.mp3"></audio> // Inside the HTML document
+
+let myAudio = document.getElementById("myAudio");// Inside the JavaScript document
+myAudio.play(); // Plays the audio
+
+*/
+
+class Game {
+  constructor(player1Name = "pl1", player2Name = "pl2") {
+    // Flag that indicates if the game is over or not
+    this.theEnd = false;
+
+    this.player1 = {
+      name: player1Name,
+      health: 100,
+    };
+
+    this.player2 = {
+      name: player2Name,
+      health: 100,
+    };
+  }
+
+  //Starts the game and logs out the status of players
+  start() {}
+
+  //Console log the winner of the battle
+  declareWinner() {}
+
+  //If player 1 or player 2 health is below 0
+  //Mark theEnd true, to stop the game
+  checkTheEnd() {}
+
+  //Console log the name and health of both players
+  //Ex: Player 1: 100 | Player 2: 50
+  playerStatus() {}
+
+  //Reset health of player 1 and player 2 to 100
+  //Reset theEnd to false
+  reset() {}
+
+  //Generate a random number between 1 and 10 using Math.random()
+  //Use that number to decrease health from player 2
+  pl1AttackPl2() {}
+
+  //Generate a random number between 1 and 10 using Math.random()
+  //Use that number to decrease health from player 1
+  pl2AttackPl1() {}
+
+  //Generate a random number between 1 and 5 using Math.random()
+  //Use that number to increase health of player 1
+  pl1Heal() {}
+
+  //Generate a random number between 1 and 5 using Math.random()
+  //Use that number to increase health of player 2
+  pl2Heal() {}
+}
+
+// Initialize the class here
+// Call the start function of the game