diff --git a/Advance_Tip_Calculator_App/index.html b/Advance_Tip_Calculator_App/index.html new file mode 100644 index 0000000..809087b --- /dev/null +++ b/Advance_Tip_Calculator_App/index.html @@ -0,0 +1,68 @@ + + + + + + + + + + + Tip Calculator + + +
+
+
Bill total
+
+ $ + +
+
+
+
Tip
+
+ % + +
+
+
+
+
People
+
+ + + + 1 + + + +
+
+
+
Total per Person
+
$0.00
+
+
+
+ + + + diff --git a/Advance_Tip_Calculator_App/script.js b/Advance_Tip_Calculator_App/script.js new file mode 100644 index 0000000..718e05b --- /dev/null +++ b/Advance_Tip_Calculator_App/script.js @@ -0,0 +1,83 @@ +/* +🌟 APP: Tip Calculator + +These are the 3 functions you must use πŸ‘‡ +========================================= +calculateBill() +increasePeople() +decreasePeople() + +These functions are hard coded in the HTML. So, you can't change their names. + +These are all the DIV ID's you're gonna need access to πŸ‘‡ +======================================================== +#1 ID πŸ‘‰ 'billTotalInput' = User input for bill total +#2 ID πŸ‘‰ 'tipInput' = User input for tip +#3 ID πŸ‘‰ 'numberOfPeople' = Current number of people you're splitting the bill between +#4 ID πŸ‘‰ 'perPersonTotal' = Total dollar value owed per person +*/ + +// Get global access to all inputs / divs here (you'll need them later 😘) +// bill input, tip input, number of people div, and per person total div + +const BillInput = document.getElementById("billTotalInput"); +const TipInput = document.getElementById("tipInput"); +const NumberOfPeopleDiv = document.getElementById("numberOfPeople"); +const PerPersonTotalDiv = document.getElementById("perPersonTotal"); + +// Get number of people from number of people div + +let NumberOfPeople = Number(NumberOfPeopleDiv.innerText); + +// ** Calculate the total bill per person ** +const calculateBill = () => { + // get bill from user input & convert it into a number + const BillAmount = Number(BillInput.value); + + // get the tip from user & convert it into a percentage (divide by 100) + const TipAmount = Number(TipInput.value) / 100; + + // get the total tip amount + const TotaltipAmount = BillAmount * TipAmount; + + // calculate the total (tip amount + bill) + const Total = BillAmount + TotaltipAmount; + + // calculate the per person total (total divided by number of people) + const PerPersonTotal = Total / NumberOfPeople; + + // update the perPersonTotal on DOM & show it to user + PerPersonTotalDiv.innerText = `$${PerPersonTotal.toFixed(2)}`; +}; + +// ** Splits the bill between more people ** +const increasePeople = () => { + // increment the amount of people + NumberOfPeople += 1; + + // update the DOM with the new number of people + NumberOfPeopleDiv.innerText = NumberOfPeople; + + // calculate the bill based on the new number of people + calculateBill(); +}; + +// ** Splits the bill between fewer people ** +const decreasePeople = () => { + // guard clause + // if amount is 1 or less simply return + // (a.k.a you can't decrease the number of people to 0 or negative!) + if (NumberOfPeople <= 1) { + throw "Hey! You cannot have less than 1 person!"; + return; // exit the function if number of people is already 1 or less. + } + + // decrement the amount of people + NumberOfPeople -= 1; + + // update the DOM with the new number of people + NumberOfPeopleDiv.innerText = NumberOfPeople; + + // calculate the bill based on the new number of people + calculateBill(); +}; diff --git a/Advance_Tip_Calculator_App/style.css b/Advance_Tip_Calculator_App/style.css new file mode 100644 index 0000000..467896c --- /dev/null +++ b/Advance_Tip_Calculator_App/style.css @@ -0,0 +1,98 @@ +* { + font-family: "M PLUS Rounded 1c", Avenir Next, Helvetica, sans-serif; + color: white; +} + +body { + background: #8990ec; +} + +.wrapper { + height: 525px; + width: 360px; + color: white; + background: #272639; + border-radius: 1rem; + padding: 1.2rem; + margin: 100px auto; +} + +#topContainer { + margin-top: 4rem; +} + +.container { + margin-top: 1.4rem; +} + +.title { + font-weight: bold; + margin-bottom: 0.6rem; +} + +.inputContainer { + background: #353959; + border-radius: 1.4rem; + padding: 0 0.8rem; + display: flex; + align-items: center; +} + +#billTotalInput, +#tipInput { + font-size: 1.2rem; + background: none; + border: none; + outline: none; + padding: none; +} + +.buttonContainer { + background: #8990ec; + display: grid; + place-items: center; + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; +} + +.splitButton { + background: none; + border: none; +} + +.controls { + display: flex; + align-items: center; +} + +.splitButton { + font-size: 0.8rem; + font-weight: bold; + display: grid; + place-items: center; +} + +.buttonText { + color: #353959 !important; +} + +.splitAmount { + font-size: 1.6rem; + margin: 0.8rem; +} + +#bottom { + display: flex; + justify-content: space-between; +} + +.totalContainer { + display: flex; + flex-direction: column; + align-items: end; +} + +.total { + font-size: 2rem; +} diff --git a/Advance_Tip_Calculator_App/tempCodeRunnerFile.js b/Advance_Tip_Calculator_App/tempCodeRunnerFile.js new file mode 100644 index 0000000..7df92a6 --- /dev/null +++ b/Advance_Tip_Calculator_App/tempCodeRunnerFile.js @@ -0,0 +1 @@ +const numberOfPeople = numberOfPeopleDiv.innerText; \ No newline at end of file diff --git a/Concept_Practicing/API_Practice.js b/Concept_Practicing/API_Practice.js new file mode 100644 index 0000000..cd6b890 --- /dev/null +++ b/Concept_Practicing/API_Practice.js @@ -0,0 +1,9 @@ +// Here this program show us the asynchronous behaviour of the code. + +console.log(" Run First"); + +fetch("https://github.com/service/https://dog.ceo/api/breeds/image/random") + .then((respone) => respone.json()) + .then((data) => console.log(" Run Second ", data)); + +console.log(" Run Third"); diff --git a/Concept_Practicing/Asynchronous_Programming.js b/Concept_Practicing/Asynchronous_Programming.js new file mode 100644 index 0000000..2dc7315 --- /dev/null +++ b/Concept_Practicing/Asynchronous_Programming.js @@ -0,0 +1,7 @@ +const orderSoup = () => console.log(" Soup is Ready "); + +console.log(" You start the convo with your girlfriend πŸ‘§"); // Here, This line of code runs first !! +setTimeout(() => orderSoup(), 2000); // 1000 ms is 1s in real world. // And Finally this line of code runs!! +console.log(" Still speaking "); //Then, This line of code runs in Second !! + +// Here It is shown that you can start a request before and your response is ready at some point of time Later. diff --git a/Concept_Practicing/Baby_Weather_App.js b/Concept_Practicing/Baby_Weather_App.js new file mode 100644 index 0000000..09e111a --- /dev/null +++ b/Concept_Practicing/Baby_Weather_App.js @@ -0,0 +1,12 @@ +const prompt = require("prompt-sync")(); + +let weather; +console.log("Please tell if it is raining outside or the sky is clear"); + +weather = prompt("Enter weather (rainy/clear): "); + +if (weather == "rainy") { + console.log("Grab your umbrella οΏ½οΏ½οΏ½"); +} else { + console.log("Wear your sunglasses οΏ½οΏ½"); +} diff --git a/Concept_Practicing/Class.js b/Concept_Practicing/Class.js new file mode 100644 index 0000000..c9f5684 --- /dev/null +++ b/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" + +*/ diff --git a/Concept_Practicing/Class_Array.js b/Concept_Practicing/Class_Array.js new file mode 100644 index 0000000..39e3095 --- /dev/null +++ b/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); diff --git a/Concept_Practicing/High_Order_functions.js b/Concept_Practicing/High_Order_functions.js new file mode 100644 index 0000000..9df94c0 --- /dev/null +++ b/Concept_Practicing/High_Order_functions.js @@ -0,0 +1,96 @@ +// const prompt = require("prompt-sync")(); + +// Method 1: + +// const filter = (numbers, greaterThan) => { +// let result = []; +// for (const number of numbers) { +// if (number > greaterThan) { +// result.push(number); +// } +// } +// return result; +// }; + +// const length = prompt(" Enter the length of the Array : "); +// let numbers = Array.from({ length: length }); +// for (const number in numbers) { +// numbers[number] = Number(prompt(`Enter number ${Number(number) + 1}: `)); +// } +// console.log(filter(numbers, 3)); + +// Method 2: +//console.log(numbers.filter((number) => number > 6)); + +// Method 3: + +const actors = [ + { + name: "John Doe", + age: 25, + networth: 100, + movies: ["Inception", "The Dark Knight", "Pulp Fiction"], + }, + { + name: "Jane Smith", + age: 30, + networth: 150, + movies: [ + "The Godfather", + "The Matrix", + "Eternal Sunshine of the Spotless Mind", + ], + }, + { + name: "Michael Brown", + age: 40, + networth: 200, + movies: ["Casablanca", "Psycho", "The Shawshank Redemption"], + }, +]; + +// console.log( +// actors.filter((actor) => actor.age > 30 && actor.name == "Michael Brown") +// ); + +//? .reduce function + +//? const nums = [1, 2, 3, 4]; +//? const result = nums.reduce((a, b) => a + b, 0);// Here in .reduce, we can even pass a functional function also like Sum_array instead + +//? console.log(result); +//? const Sum_array = (a, b) => { +//? return a + b; +//? }; + +//? Here in reduce function, we can pass a functional function also like Sum_array instead but it expects a specific kind of callback function that takes two arguments, the accumulator and the current value. +//? const nums = [1, 2, 3, 4]; +//? const result = nums.reduce(Sum_array); + +//? console.log(result); + +//! const nums = [1, 2, 3, 4]; +//! const result = nums.reduce((a, b) => a + b, 0);// Here in .reduce, we can even pass a functional function also like Sum_array instead + +//! console.log(result); + +//! const Muiltiply = (a, b) => { +//! return a * b; +//! }; + +//! Here in reduce function, we can pass a functional function also like Sum_array instead but it expects a specific kind of callback function that takes two arguments, the accumulator and the current value. +//! const nums = [1, 2, 3, 4]; +//! const result = nums.reduce(Muiltiply); + +//! console.log(result); + +//@ Method 1 ( for networth addition of the object properties ) + +//@ let display_networth = actors.map((actor) => actor.networth); +//@ let result = display_networth.reduce((prev, curr) => prev + curr); + +//@ Method 2 ( for networth addition of the object properties ) + +let result = actors.reduce((prev, curr) => prev + curr.networth, 0); + +console.log(result); diff --git a/Concept_Practicing/Loops_practice.js b/Concept_Practicing/Loops_practice.js new file mode 100644 index 0000000..8b82212 --- /dev/null +++ b/Concept_Practicing/Loops_practice.js @@ -0,0 +1,49 @@ +// const fruits = ["Apple", "banana", "Pears", "Watermelon"]; + +// for (const fruit of fruits) { +// console.log(fruit); // Outputs: Apple, banana, Pears, Watermelon +// } + +const numbers = ["1", "2", "3", "4", "5"]; + +// for (const number of numbers) { +// console.log(parseInt(number) + 1); // Outputs: 2, 3, 4, 5, 6 +// } + +// for (const number of numbers) { +// console.log(number * 2); +// } + +// How to get a new Array with double the value + +// let result = []; + +// for (const number of numbers) { +// result.push(number * 2); +// } + +// console.log(result); // Outputs: [2, 4, 6, 8, 10] + +// const double = (numbers) => { +// let result = []; + +// for (const number of numbers) { +// result.push(number * 2); +// } +// return result; +// }; + +// console.log(double(numbers)); // Outputs: [2, 4, 6, 8, 10] + +// How to get a new Array with Square root of the values + +const double = (numbers) => { + let result = []; + + for (const number of numbers) { + result.push(number ** 2); + } + return result; +}; + +console.log(double(numbers)); // Outputs: [1, 4, 9, 16, 25] diff --git a/Concept_Practicing/Max_number.js b/Concept_Practicing/Max_number.js new file mode 100644 index 0000000..0cdffbc --- /dev/null +++ b/Concept_Practicing/Max_number.js @@ -0,0 +1,21 @@ +const prompt = require("prompt-sync")(); + +const Max_number = (numbers) => { + let result = numbers[0]; + for (const number of numbers) { + if (number > result) { + result = number; + } + } + return { result }; +}; + +let numbers = Array.from({ length: 5 }); + +for (const number in numbers) { + numbers[number] = Number( + prompt(`Enter the ${Number(number) + 1} number of the array: `) + ); +} + +console.log(Max_number(numbers)); diff --git a/Concept_Practicing/Object_function.js b/Concept_Practicing/Object_function.js new file mode 100644 index 0000000..6ef87f1 --- /dev/null +++ b/Concept_Practicing/Object_function.js @@ -0,0 +1,58 @@ +const prompt = require("prompt-sync")(); + +// A Advance Arrow function using multiple arguments,objects,template literals + +// const introduction = (name, shirt, assets, debt) => { +// const person = { +// name: name, +// shirt: shirt, +// assets: assets, +// debt: debt, +// }; +// const intro = `Hello, My name is ${person.name} and I am wearing a ${ +// person.shirt +// } shirt. My net worth is $${person.assets - person.debt}USD.`; +// return intro; +// }; + +// const name = prompt("Enter your name: "); + +// const shirt = prompt("Enter your favorite shirt color: "); + +// const assets = Number(prompt("Enter your current assets: ")); + +// const debt = Number(prompt("Enter your current debt: ")); + +// console.log(introduction(name, shirt, assets, debt)); + +// A Even more Advance Arrow function using multiple arguments,objects,template literals and Methods + +const introduction = (name, shirt, assets, debt) => { + const person = { + name: name, + shirt: shirt, + assets: assets, + debt: debt, + networth: function () { + // Here!! It is a function which calculate the net worth + // this keyword refers to the particular value of the variable in the block scope + return this.assets - this.debt; + }, + }; + const intro = `Hello, My name is ${person.name} and I am wearing a ${ + person.shirt + } shirt. My net worth is $${person.networth()}USD.`; + // Here, person.networth() becomes a method which calculate the net worth + // It is also called differently from normal object calls like person.shirt + return intro; +}; + +const name = prompt("Enter your name: "); + +const shirt = prompt("Enter your favorite shirt color: "); + +const assets = Number(prompt("Enter your current assets: ")); + +const debt = Number(prompt("Enter your current debt: ")); + +console.log(introduction(name, shirt, assets, debt)); diff --git a/Concept_Practicing/Practice_class.js b/Concept_Practicing/Practice_class.js new file mode 100644 index 0000000..eaee8ab --- /dev/null +++ b/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); diff --git a/Concept_Practicing/Promise_Practice.js b/Concept_Practicing/Promise_Practice.js new file mode 100644 index 0000000..7de2285 --- /dev/null +++ b/Concept_Practicing/Promise_Practice.js @@ -0,0 +1,90 @@ +//? Rules for using the async / await + +//? 1. You must create a function to use async functions +//? 2. You must use the word "async" to use async functions +//? 3. You must use the word "await" for all the promises + +const promise = new Promise((resolve, reject) => { + setTimeout(() => { + isReady = [true, false][Math.floor(Math.random() * 2)]; + isReady + ? resolve(" The Soup is Ready !! ") + : reject(" No Soup Today !! "); + }, 2000); +}); + +//! Old Way of writing promises or api calls with .then() method. + +// // console.log(promise); // it only shows Promise {} but to get the data inside the promise you have to use .then() instead. +// promise.then((data) => console.log(data)).catch((err) => console.log(err)); + +// // Here we have to use both .then() and .catch() because otherwise the promise will only get the resovle data and not the reject data if something gets wrong. + +//$ New ES6 way of writing promises or api calls with async and await methods + +// const fetchData = async () => { +// try { +// // const url = "https://jsonplaceholder.typicode.com/users/1"; +// const response = await promise; // or await fetch(url) +// console.log(response); +// } catch (err) { +// console.log(err); +// } +// }; + +// fetchData(); // calling the function to fetch data. + +//@ Advanced or Different way of writing async and await methods + +//@ Note: In this code, we are using async/await to handle promises. It makes the code cleaner and easier to read. But keep in mind that async/await can only be used in async functions, not regular functions. + +// async function fetchData() { +// try { +// const response = await promise; // or await fetch(url) +// console.log(response); +// } catch (err) { +// console.log(err); +// } +// } + +// fetchData(); // calling the function to fetch data. + +//! How to get data from a async function + +let data = { + rating: undefined, + tip: undefined, + pay: undefined, + review: undefined, +}; + +const fetchData = async () => { + try { + const response = await promise; + console.log(response); + data.rating = 5; + data.tip = 0.2; + data.pay = 10; + data.review = 5; + return data; // return the data after setting it in the object. + } catch (err) { + console.log(err); + data.rating = 1; + data.tip = 0; + data.pay = 0; + data.review = 1; + return data; // return the data after setting it in the object. + } +}; + +// Here, fetchData() function is a promise and you can only retrieve data from a promise using two methods : 1. .then() and 2.Async/await() function . +// You cannot console.log fetchData() directly thinking it as a normal function and cannot use await because to use await , you have to first have a async function outside. + +// fetchData().then((value) => console.log(value)); // calling the function to fetch data. + +const display = async () => { + const data = await fetchData(); + console.log(data); +}; + +display(); // calling the function to fetch data and display it. diff --git a/Concept_Practicing/String_loops.js b/Concept_Practicing/String_loops.js new file mode 100644 index 0000000..5a1f7f2 --- /dev/null +++ b/Concept_Practicing/String_loops.js @@ -0,0 +1,37 @@ +const prompt = require("prompt-sync")(); + +// Answer + +// const lettercounter = (phrase) => { +// for (letters of phrase) { +// count += 1; +// } +// }; + +// const phrase = prompt(" Please Enter a String : "); +// let count = 0; +// lettercounter(phrase); + +// console.log(`The phrase "${phrase}" has ${count} characters.`); + +// Fuction to count characters (Method 1) + +// const lettercounter = (phrase) => { +// let result; +// for (letter in phrase) { +// result = Number(letter) + 1; +// } +// return { result }; // Here {result} is a quick trick to print answer as an object. +// }; + +// const phrase = prompt(" Please Enter a String : "); +// console.log(lettercounter(phrase)); + +// Function to count characters (Method 2) + +const lettercounter = (phrase) => { + return { result: phrase.length }; // Here {result} is a quick trick to print answer as an object. +}; + +const phrase = prompt(" Please Enter a String : "); +console.log(lettercounter(phrase)); diff --git a/Concept_Practicing/Sum_Array.js b/Concept_Practicing/Sum_Array.js new file mode 100644 index 0000000..d2cff39 --- /dev/null +++ b/Concept_Practicing/Sum_Array.js @@ -0,0 +1,24 @@ +const prompt = require("prompt-sync")(); + +const sumArray = (numbers) => { + let sum = 0; + + for (const number of numbers) { + sum += number; + } + return { sum }; +}; + +let numbers = Array.from({ length: 5 }); // Create an array of length 5 + +for (const number in numbers) { + numbers[number] = Number( + prompt(`Enter the ${Number(number) + 1} number of the array: `) + ); +} + +// for (let i = 0; i < numbers.length; i++) { +// numbers[i] = Number(prompt(`Enter number ${i + 1}: `)); +// } + +console.log(sumArray(numbers)); diff --git a/Concept_Practicing/Tip_Calculator.js b/Concept_Practicing/Tip_Calculator.js new file mode 100644 index 0000000..35c3d54 --- /dev/null +++ b/Concept_Practicing/Tip_Calculator.js @@ -0,0 +1,11 @@ +const prompt = require("prompt-sync")(); + +function calculateFoodTotal(a, b) { + return `The Total Cost of the food : ${a + Math.floor((a * b) / 100)}`; +} + +let food = Number(prompt("What is the cost of the food? ")); +let tipPercentage = Number(prompt("What will be the tipPercentage? ")); + +const sum = calculateFoodTotal(food, tipPercentage); +console.log(sum); diff --git a/Concept_Practicing/User_Input.js b/Concept_Practicing/User_Input.js new file mode 100644 index 0000000..43fc4c9 --- /dev/null +++ b/Concept_Practicing/User_Input.js @@ -0,0 +1,9 @@ +const prompt = require("prompt-sync")(); + +const food = Number(prompt("What is the cost of the Food? ")); +const tipPercentage = Number(prompt("What will be the Tip Percentage? ") / 100); +const tipamount = food * tipPercentage; +const Total = food + tipamount; + +console.log("Tip Amount:", tipamount); +console.log("Total Amount:", Total); diff --git a/Concept_Practicing/frequency_count.js b/Concept_Practicing/frequency_count.js new file mode 100644 index 0000000..8edfcce --- /dev/null +++ b/Concept_Practicing/frequency_count.js @@ -0,0 +1,41 @@ +const prompt = require("prompt-sync")(); + +// Different way of taking input from the user + +//let numbers = []; + +// for (let i = 0; i < 5; i++) { +// numbers.push(Number(prompt(`Enter number ${i + 1}: `))); +// } + +const frequencies = (numbers) => { + let result = new Array(numbers.length).fill(0); // Trick to fix the length of the Array and Initialize result with 0s + let visited = -1; + for (const i in numbers) { + let count = 1; + for (const j in numbers) { + let k = Number(j) + Number(i) + 1; + if (numbers[Number(i)] == numbers[k]) { + count += 1; + result[k] = visited; + } + } + if (result[Number(i)] != visited) { + result[Number(i)] = count; + } + } + return { result }; +}; + +let numbers = Array.from({ length: 5 }); + +for (const number in numbers) { + numbers[number] = Number( + prompt(`Enter the ${Number(number) + 1} number of the array: `) + ); +} + +console.log( + `The frequency of each number in the array is: `, + frequencies(numbers) +); diff --git a/Concept_Practicing/letterfrequency_count.js b/Concept_Practicing/letterfrequency_count.js new file mode 100644 index 0000000..2ead098 --- /dev/null +++ b/Concept_Practicing/letterfrequency_count.js @@ -0,0 +1,20 @@ +const prompt = require("prompt-sync")(); + +const letterFrequency = (phrase) => { + console.log(phrase); + let frequency = {}; + for (const letter of phrase) { + if (letter in frequency == true) { + // 'in' is used to check the key is present in an object. + // letter is checked in frequency object if any the same name as letter was present in frequency object.It returns in only true or false. + frequency[letter]++; // incremental opertaors + } else { + frequency[letter] = 1; + } + } + return { frequency }; +}; + +const phrase = prompt("Please Enter a String : "); + +console.log(letterFrequency(phrase)); diff --git a/Concept_Practicing/random_practice.js b/Concept_Practicing/random_practice.js new file mode 100644 index 0000000..6f0b513 --- /dev/null +++ b/Concept_Practicing/random_practice.js @@ -0,0 +1,13 @@ +const prompt = require("prompt-sync")(); + +const random_fruits = (fruits) => { + random_Index = Math.floor(Math.random() * fruits.length); + return fruits[random_Index]; +}; + +const fruits = Array.from({ length: 5 }).fill(""); + +fruits.forEach((fruit, index) => { + fruits[index] = prompt(`Enter fruit ${index + 1}: `); +}); +console.log(random_fruits(fruits)); diff --git a/Concept_Practicing/tempCodeRunnerFile.js b/Concept_Practicing/tempCodeRunnerFile.js new file mode 100644 index 0000000..7a6be79 --- /dev/null +++ b/Concept_Practicing/tempCodeRunnerFile.js @@ -0,0 +1,2 @@ +adarsh.deposit(100); +// adarsh.withdraw(100); \ No newline at end of file diff --git a/Concept_Practicing/word_frequency.js b/Concept_Practicing/word_frequency.js new file mode 100644 index 0000000..18d2bc3 --- /dev/null +++ b/Concept_Practicing/word_frequency.js @@ -0,0 +1,70 @@ +const prompt = require("prompt-sync")(); + +// Method 1:- + +const wordfrequency = (phrase) => { + let frequency = {}; + let array = phrase.split(" "); + for (let words of array) { + if (words in frequency) { + frequency[words] += 1; + } else { + frequency[words] = 1; + } + } + return frequency; +}; + +const phrase = prompt("Enter a sentence: "); +console.log(wordfrequency(phrase)); + +// Method 2:- + +// const wordfrequency = (phrase) => { +// phrase += " "; +// let frequency = {}; +// let words = ""; +// for (let letter of phrase) { +// if (letter == " ") { +// if (words in frequency) { +// frequency[words] += 1; +// } else { +// frequency[words] = 1; +// } +// words = ""; +// } else { +// words += letter; +// } +// } +// return frequency; +// }; + +// const phrase = prompt("Enter a sentence: "); +// console.log(wordfrequency(phrase)); + +// Method 3:- + +// const wordfrequency = (phrase) => { +// let frequency = {}; +// let words = ""; +// for (let [index, letter] of [...phrase].entries()) { +// // A string in JavaScript is an iterable object, but it doesn't have an entries() method like arrays do. +// if (index == phrase.length - 1 && letter != " ") { +// words += letter; +// } // Just to add the last letter of the string +// if (letter == " " || index + 1 == phrase.length) { +// if (words in frequency) { +// frequency[words] += 1; +// } else { +// frequency[words] = 1; +// } +// words = ""; +// } else { +// words += letter; +// } +// } +// return frequency; +// }; + +// const phrase = prompt("Enter a sentence: "); +// console.log(wordfrequency(phrase)); diff --git a/Dog API/index.html b/Dog API/index.html new file mode 100644 index 0000000..5f61333 --- /dev/null +++ b/Dog API/index.html @@ -0,0 +1,15 @@ + + + + + + DOG API + + + +
+ +
+ + + diff --git a/Dog API/script.js b/Dog API/script.js new file mode 100644 index 0000000..6f8ae55 --- /dev/null +++ b/Dog API/script.js @@ -0,0 +1,10 @@ +const image = document.getElementById("image-box"); +const button = document.getElementById("Dog-button"); + +button.onclick = () => { + fetch("https://github.com/service/https://dog.ceo/api/breeds/image/random") + .then((response) => response.json()) + .then((json) => { + image.innerHTML = ``; + }); +}; diff --git a/Fightning_game/index.html b/Fightning_game/index.html new file mode 100644 index 0000000..1af1593 --- /dev/null +++ b/Fightning_game/index.html @@ -0,0 +1,68 @@ + + + + + + replit + + + + +
The solution for Fighting Game
+
+ +
+
+ + + + + +
100
+
+ + + +
+ + + +
100
+
+
+
+ +
+
+ +
+ + + + + + + + diff --git a/Fightning_game/script.js b/Fightning_game/script.js new file mode 100644 index 0000000..7618c26 --- /dev/null +++ b/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.