├── 1-the-console ├── 01-setting-up.js ├── 02-the-console.js ├── 03-letter-tree.js ├── 04-secret-recipe.js └── 05-receipt.js ├── 2-variables ├── 06-variables.js ├── 07-data-types.js ├── 08-temperature.js ├── 09-bmi.js └── 10-planet-weight.js ├── 3-conditionals ├── 11-coin-flip.js ├── 12-good-morning.js ├── 13-good-afternoon.js ├── 14-ph-levels.js ├── 15-magic-8-ball.js ├── 16-air-quality-index.js └── 17-rock-paper-scissors.js ├── 4-loops ├── 18-duck-duck-goose.js ├── 19-lucky-number.js ├── 20-not-tell-lies.js ├── 21-even-the-odds.js └── 22-based-numbers.js ├── 5-arrays ├── 23-five-boroughs.js ├── 24-grocery-trip.js ├── 25-times-tables.js ├── 26-music-playlist.js ├── 27-wheres-waldo.js └── 28-dna.js ├── 6-functions ├── 29-greetings.js ├── 30-blast-off.js ├── 31-e-mc-2.js ├── 32-clout.js └── 33-palindrome.js ├── 7-objects ├── 34-pizza-party.js ├── 35-dream-car.js ├── 36-pokemon.js ├── 37-animal-farm.js └── 38-round-trip.js ├── 8-trifecta ├── 39-green-light-go │ ├── index.html │ ├── script.js │ └── styles.css ├── 41-hotline-bling │ ├── index.html │ ├── script.js │ └── styles.css ├── 42-mood-ring │ ├── index.html │ ├── script.js │ └── styles.css ├── 43-chill-pill │ ├── index.html │ ├── script.js │ └── styles.css └── 44-cap-that │ ├── index.html │ ├── script.js │ └── styles.css └── README.md /1-the-console/01-setting-up.js: -------------------------------------------------------------------------------- 1 | // Setting Up 🔧 2 | // Codédex 3 | 4 | console.log("Hello internet!"); 5 | -------------------------------------------------------------------------------- /1-the-console/02-the-console.js: -------------------------------------------------------------------------------- 1 | // The Console 💻 2 | // Codédex 3 | 4 | console.log("My favorite food is lamb over rice!"); 5 | -------------------------------------------------------------------------------- /1-the-console/03-letter-tree.js: -------------------------------------------------------------------------------- 1 | // Letter Tree 🌲 2 | // Codédex 3 | 4 | console.log(" a "); 5 | console.log(" b c "); 6 | console.log(" d e f "); 7 | console.log("g h i j"); 8 | console.log(" k "); 9 | -------------------------------------------------------------------------------- /1-the-console/04-secret-recipe.js: -------------------------------------------------------------------------------- 1 | // Secret Recipe 🥤 2 | // Codédex 3 | 4 | // Homemade Coca-Cola 5 | 6 | console.log("Ingredients:"); 7 | console.log("1 quart water (4 cups)"); 8 | console.log("2 tablespoons caramel color (for color)"); 9 | console.log("1 teaspoon vanilla extract"); 10 | console.log("1 teaspoon lime juice"); 11 | console.log("1 tablespoon citric acid"); 12 | console.log("1 teaspoon caffeine (optional)"); 13 | console.log("1 teaspoon orange oil"); 14 | console.log("1 teaspoon lemon oil"); 15 | console.log("1 teaspoon cinnamon oil"); 16 | console.log("1/2 teaspoon nutmeg oil"); 17 | console.log("1/4 teaspoon coriander oil"); 18 | console.log("1/4 teaspoon neroli oil"); 19 | console.log("2 tablespoons sugar (or to taste)"); 20 | console.log("Carbonated water (for fizz)"); 21 | 22 | console.log("Instructions:"); 23 | console.log("1. In a large saucepan, heat 1 quart of water over medium heat."); 24 | console.log("2. Add the caramel color, vanilla extract, and lime juice to the water."); 25 | console.log("3. Stir in the citric acid and sugar until completely dissolved."); 26 | console.log("4. In a separate small bowl, mix the orange, lemon, cinnamon, nutmeg, coriander, and neroli oils."); 27 | console.log("5. Slowly add the oil mixture to the saucepan, stirring constantly to blend the flavors."); 28 | console.log("6. If using, add the caffeine and stir until fully dissolved."); 29 | console.log("7. Remove the mixture from heat and let it cool to room temperature."); 30 | console.log("8. Once cooled, mix the syrup with carbonated water in a ratio of about 1 part syrup to 5 parts carbonated water (adjust to taste)."); 31 | console.log("9. Serve chilled over ice for a refreshing Coca-Cola experience."); 32 | 33 | /* 34 | Secret Ingredient (DO NOT TELL ANYONE 🤐) 35 | A tiny dash of kola nut extract gives an authentic cola flavor, just like the original recipe. 36 | */ 37 | 38 | -------------------------------------------------------------------------------- /1-the-console/05-receipt.js: -------------------------------------------------------------------------------- 1 | // Receipt 🧾 2 | // Codédex 3 | 4 | console.log("================================="); 5 | console.log(" Sushi Yashin "); 6 | console.log(" Brooklyn, NY 11215 "); 7 | console.log("---------------------------------"); 8 | console.log("Server: Taylor "); 9 | console.log("---------------------------------"); 10 | console.log("Order #: 51354 Dine In"); 11 | console.log("Table: B4 Guests: 2"); 12 | console.log("---------------------------------"); 13 | console.log("1 🍣 Omakase 10 pcs 58.00"); 14 | console.log("1 🍱 Bento Box 16.50"); 15 | console.log("1 🥣 Miso Soup 3.75"); 16 | console.log("1 🍶 Hot Sake Small 4.50"); 17 | console.log("1 🍦 Ice Cream (Green Tea) 3.50"); 18 | console.log(" "); 19 | console.log("SUB TOTAL: 86.25"); 20 | console.log("TAXES: 7.68"); 21 | console.log(" ========"); 22 | console.log("TOTAL $93.93"); 23 | console.log("٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭"); 24 | console.log("Thank you. See you soon :) "); 25 | console.log("18% Gratuity = $16.91 "); 26 | console.log("20% Gratuity = $18.79 "); 27 | console.log("22% Gratuity = $20.66 "); 28 | console.log(" "); 29 | console.log("٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭٭"); 30 | console.log(" "); 31 | console.log(" "); 32 | console.log(" "); 33 | console.log(" "); 34 | console.log("================================="); 35 | -------------------------------------------------------------------------------- /2-variables/06-variables.js: -------------------------------------------------------------------------------- 1 | // Let & Const 📦 2 | // Codédex 3 | 4 | const firstName = "Jane"; 5 | const favoriteColor = "Purple 💜"; 6 | 7 | let currentLocation = "New York 🗽"; 8 | let mood = "Chill"; 9 | 10 | console.log("My Profile: "); 11 | console.log(firstName); 12 | console.log(favoriteColor); 13 | console.log(currentLocation); 14 | console.log(mood); 15 | 16 | currentLocation = "Chicago 🌬️"; 17 | mood = "Thrilled"; 18 | console.log(currentLocation); 19 | console.log(mood); 20 | -------------------------------------------------------------------------------- /2-variables/07-data-types.js: -------------------------------------------------------------------------------- 1 | // Data Types 📦 2 | // Codédex 3 | 4 | const companyName = "Niteowl, Inc."; 5 | const foundingYear = 2022; 6 | let isActive = true; 7 | let fundingAmount = undefined; 8 | 9 | console.log(companyName); 10 | console.log(foundingYear); 11 | console.log(isActive); 12 | console.log(fundingAmount); 13 | -------------------------------------------------------------------------------- /2-variables/08-temperature.js: -------------------------------------------------------------------------------- 1 | // Temperature 🌡 2 | // Codédex 3 | 4 | let temp_f = 56; 5 | let temp_c = (temp_f - 32) / 1.8; 6 | 7 | console.log(temp_c); 8 | -------------------------------------------------------------------------------- /2-variables/09-bmi.js: -------------------------------------------------------------------------------- 1 | // BMI 🏋️‍♀️ 2 | // Codédex 3 | 4 | let weight = 92.3; 5 | let height = 1.86; 6 | 7 | let bmi = weight / (height**2); 8 | 9 | console.log(bmi); 10 | -------------------------------------------------------------------------------- /2-variables/10-planet-weight.js: -------------------------------------------------------------------------------- 1 | // Planet Weight 🧑‍🚀 2 | // Codédex 3 | 4 | const earthWeight = 210; 5 | const marsWeight = earthWeight * 0.38; 6 | 7 | console.log("Your weight on Earth is " + earthWeight + " pounds."); 8 | console.log("Your weight on Mars is " + marsWeight + " pounds."); 9 | -------------------------------------------------------------------------------- /3-conditionals/11-coin-flip.js: -------------------------------------------------------------------------------- 1 | // 🪙 Coin Flip 2 | // Codédex 3 | 4 | let num = Math.random(); 5 | 6 | if (num > 0.5) { 7 | console.log("Heads"); 8 | } else { 9 | console.log("Tails"); 10 | } 11 | 12 | // Solution from Bonus Article 13 | // num > 0.5 ? console.log("Heads") : console.log("Tails"); 14 | -------------------------------------------------------------------------------- /3-conditionals/12-good-morning.js: -------------------------------------------------------------------------------- 1 | // Good Morning 🌞 2 | // Codédex 3 | 4 | let hour = 4; 5 | 6 | if (hour < 12) { 7 | console.log("Good morning 🌞"); 8 | } -------------------------------------------------------------------------------- /3-conditionals/13-good-afternoon.js: -------------------------------------------------------------------------------- 1 | // Good Afternoon ☁️ 2 | // Codédex 3 | 4 | let hour = 4; 5 | 6 | if (hour < 12) { 7 | console.log("Good morning 🌞"); 8 | } else { 9 | console.log("Good afternoon ☁️"); 10 | } -------------------------------------------------------------------------------- /3-conditionals/14-ph-levels.js: -------------------------------------------------------------------------------- 1 | // pH Levels 🧪 2 | // Codédex 3 | 4 | const ph = 4; 5 | 6 | if (ph > 7) { 7 | console.log("Basic"); 8 | } else if (ph < 7) { 9 | console.log("Acidic"); 10 | } else { 11 | console.log("Neutral"); 12 | } -------------------------------------------------------------------------------- /3-conditionals/15-magic-8-ball.js: -------------------------------------------------------------------------------- 1 | // Magic 8 Ball 🎱 2 | // Codédex 3 | 4 | const question = "Put question string here"; 5 | 6 | const randomNumber = Math.floor(Math.random() * 9) + 1; 7 | 8 | let answer = ""; 9 | 10 | if (randomNumber === 1){ 11 | answer = 'Yes - definitely'; 12 | } else if (randomNumber === 2) { 13 | answer = 'It is decidedly so'; 14 | } else if (randomNumber === 3) { 15 | answer = 'Without a doubt'; 16 | } else if (randomNumber === 4) { 17 | answer = 'Reply hazy, try again'; 18 | } else if (randomNumber === 5) { 19 | answer = 'Ask again later'; 20 | } else if (randomNumber === 6) { 21 | answer = 'Better not tell you now'; 22 | } else if (randomNumber === 7) { 23 | answer = 'My sources say no'; 24 | } else if (randomNumber === 8) { 25 | answer = 'Outlook not so good'; 26 | } else if (randomNumber === 9) { 27 | answer = 'Very doubtful'; 28 | } else { 29 | answer = 'Error'; 30 | } 31 | 32 | console.log("Question: ", question); 33 | console.log("Answer: ", answer); 34 | 35 | -------------------------------------------------------------------------------- /3-conditionals/16-air-quality-index.js: -------------------------------------------------------------------------------- 1 | // Air Quality Index 💨 2 | // Codédex 3 | 4 | const aqi = 45; 5 | 6 | if (aqi >= 0 && aqi <= 50) { 7 | console.log("Good"); 8 | } else if (aqi >= 51 && aqi <= 100) { 9 | console.log("Moderate"); 10 | } else if (aqi >= 101 && aqi <= 150) { 11 | console.log("Unhealthy (Sensitive Groups)"); 12 | } else if (aqi >= 151 && aqi <= 200) { 13 | console.log("Unhealthy"); 14 | } else if (aqi >= 201 && aqi <= 300) { 15 | console.log("Very Unhealthy"); 16 | } else { 17 | console.log("Hazardous"); 18 | } 19 | -------------------------------------------------------------------------------- /3-conditionals/17-rock-paper-scissors.js: -------------------------------------------------------------------------------- 1 | // Rock Paper Scissors 🫲 2 | // Codédex 3 | 4 | // 0 = Rock 5 | // 1 = Paper 6 | // 2 = Scissors 7 | 8 | const player = 2; 9 | const computer = Math.floor(Math.random() * 3); 10 | 11 | if (player === 0) { 12 | if (computer === 0) { 13 | console.log("Draw"); 14 | } else if (computer === 1) { 15 | console.log("The computer won!"); 16 | } else if (computer === 2) { 17 | console.log("The player won!"); 18 | } else { 19 | console.log("An error occurred"); 20 | } 21 | } else if (player === 1) { 22 | if (computer === 0) { 23 | console.log("The player won!"); 24 | } else if (computer === 1) { 25 | console.log("Draw"); 26 | } else if (computer === 2) { 27 | console.log("The computer won!"); 28 | } else { 29 | console.log("An error occurred"); 30 | } 31 | } else if (player === 2) { 32 | if (computer === 0) { 33 | console.log("The computer won!"); 34 | } else if (computer === 1) { 35 | console.log("The player won!"); 36 | } else if (computer === 2) { 37 | console.log("Draw"); 38 | } else { 39 | console.log("An error occurred"); 40 | } 41 | } else { 42 | console.log("An error occurred"); 43 | } 44 | -------------------------------------------------------------------------------- /4-loops/18-duck-duck-goose.js: -------------------------------------------------------------------------------- 1 | // Duck Duck Goose 🦆 2 | // Codédex 3 | 4 | let randomNumber = Math.floor(Math.random() * 10); 5 | 6 | while (randomNumber !== 7) { 7 | console.log("Duck 🦆"); 8 | randomNumber = Math.floor(Math.random() * 10); 9 | } 10 | 11 | console.log("Goose! 🦢"); 12 | -------------------------------------------------------------------------------- /4-loops/19-lucky-number.js: -------------------------------------------------------------------------------- 1 | // Lucky Number 🍀 2 | // Codédex 3 | 4 | const luckyNumber = 7; 5 | 6 | let guess = Math.floor(Math.random() * 10) + 1; 7 | 8 | while (guess !== luckyNumber) { 9 | console.log(`Nope, it isn't ${guess}`); 10 | guess = Math.floor(Math.random() * 10) + 1; 11 | } 12 | 13 | console.log(`My lucky number is ${luckyNumber}!`); -------------------------------------------------------------------------------- /4-loops/20-not-tell-lies.js: -------------------------------------------------------------------------------- 1 | // Not Tell Lies 🪶 2 | // Codédex 3 | 4 | for (let i = 0; i < 100; i++) { 5 | console.log("I Must Not Tell Lies"); 6 | } -------------------------------------------------------------------------------- /4-loops/21-even-the-odds.js: -------------------------------------------------------------------------------- 1 | // Even The Odds 2️⃣ 2 | // Codédex 3 | 4 | for (let i = 1; i <= 50; i++) { 5 | if (i % 2 === 1) { 6 | continue; 7 | } else if (i === 42) { 8 | console.log(i); 9 | break; 10 | } else { 11 | console.log(i); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /4-loops/22-based-numbers.js: -------------------------------------------------------------------------------- 1 | // Based Numbers ⫴ 2 | // Codédex 3 | 4 | const myNumber = 30; 5 | let binary = ""; 6 | 7 | // With for loop 8 | for (let i = myNumber; i >= 1 ; i = Math.floor(i/2)) { 9 | if (i % 2 == 0) { 10 | binary = "0" + binary; 11 | } else { 12 | binary = "1" + binary; 13 | } 14 | } 15 | console.log('With for loop: ' + binary); 16 | 17 | // With while loop 18 | let i = myNumber; 19 | binary = ""; 20 | while (i >= 1) { 21 | if (i % 2 == 0) { 22 | binary = "0" + binary; 23 | } else { 24 | binary = "1" + binary; 25 | } 26 | 27 | i = Math.floor(i/2); 28 | } 29 | 30 | console.log('With while loop: ' + binary); 31 | -------------------------------------------------------------------------------- /5-arrays/23-five-boroughs.js: -------------------------------------------------------------------------------- 1 | // Five Boroughs 🗽 2 | // Codédex 3 | 4 | let myDestinations = [ 5 | "🗽 Manhattan - Washington Square Park", 6 | "🏟️ The Bronx - Yankee Stadium", 7 | "🎡 Brooklyn - Coney Island", 8 | "🧧 Queens - Flushing", 9 | "🌉 Staten Island - Historic Richmond Town" 10 | ]; 11 | 12 | console.log(myDestinations); 13 | -------------------------------------------------------------------------------- /5-arrays/24-grocery-trip.js: -------------------------------------------------------------------------------- 1 | // Grocery Trip 🛒 2 | // Codédex 3 | 4 | let groceryList = ["🥛 Milk", "🥑 Avocado", "🥚 Eggs ", "🍞 Bread"]; 5 | 6 | groceryList[2] = "🧈 Butter"; 7 | 8 | groceryList[4] = "🧼 Laundry Soap"; 9 | 10 | console.log(groceryList); 11 | -------------------------------------------------------------------------------- /5-arrays/25-times-tables.js: -------------------------------------------------------------------------------- 1 | // Times Tables ❌ 2 | // Codédex 3 | 4 | const multiple = 5; 5 | const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 6 | 7 | for(let i = 0; i < numbers.length; i++){ 8 | console.log(multiple + " x " + numbers[i] + " = " + multiple * numbers[i]); 9 | } 10 | -------------------------------------------------------------------------------- /5-arrays/26-music-playlist.js: -------------------------------------------------------------------------------- 1 | // Music Playlist 🎵 2 | // Codédex 3 | 4 | const musicPlaylist = [ 5 | "Tom Sawyer", 6 | "Sabotage", 7 | "I Wanna Dance With Somebody", 8 | "Don't Speak", 9 | "Bulls On Parade", 10 | "Thriller", 11 | "The Breaks", 12 | "Brick", 13 | "Aeroplane Over the Sea", 14 | "Tubthumping" 15 | ]; 16 | 17 | // Remove first element 18 | musicPlaylist.shift(); 19 | 20 | // Remove last element 21 | musicPlaylist.pop(); 22 | 23 | // Add to end of array 24 | musicPlaylist.push("Blue (Da Ba Dee)"); 25 | 26 | // Add to start of array 27 | musicPlaylist.unshift("Gangnam Style", "Harlem Shake"); 28 | 29 | console.log(musicPlaylist); 30 | -------------------------------------------------------------------------------- /5-arrays/27-wheres-waldo.js: -------------------------------------------------------------------------------- 1 | // Where's Waldo 🔍 2 | // Codédex 3 | 4 | const characters = ["The Wally Watchers", "Wilma", "Fritz", "Wizard Whitebeard", "Odlaw", "Waldo", "Woof"]; 5 | 6 | if (characters.includes("Waldo")) { 7 | const waldoIndex = characters.indexOf("Waldo"); 8 | console.log("Found Waldo at index " + waldoIndex); 9 | } else { 10 | console.log("Not Found"); 11 | } -------------------------------------------------------------------------------- /5-arrays/28-dna.js: -------------------------------------------------------------------------------- 1 | // DNA 🧬 2 | // Codédex 3 | 4 | const dnaPieces = ["A", "C", "G", "T"]; 5 | 6 | const myDNA = []; 7 | 8 | for (let i = 0; i < 24; i++) { 9 | const pieceOne = Math.floor(Math.random() * dnaPieces.length); 10 | const pieceTwo = Math.floor(Math.random() * dnaPieces.length); 11 | const pieceThree = Math.floor(Math.random() * dnaPieces.length); 12 | 13 | myDNA.push(dnaPieces[pieceOne] + dnaPieces[pieceTwo] + dnaPieces[pieceThree]); 14 | } 15 | 16 | console.log(myDNA); -------------------------------------------------------------------------------- /6-functions/29-greetings.js: -------------------------------------------------------------------------------- 1 | // Greetings 👋 2 | // Codédex 3 | 4 | function greetings() { 5 | for (let i = 1; i <= 3; i++) { 6 | console.log(i); 7 | } 8 | console.log("Hello, everyone!"); 9 | } 10 | 11 | greetings(); -------------------------------------------------------------------------------- /6-functions/30-blast-off.js: -------------------------------------------------------------------------------- 1 | // Blast Off 🚀 2 | // Codédex 3 | 4 | function countdown() { 5 | for (let i = 10; i > 0; i--) { 6 | console.log(i); 7 | } 8 | 9 | return "Blast Off! 🚀"; 10 | } 11 | 12 | console.log(countdown()); 13 | -------------------------------------------------------------------------------- /6-functions/31-e-mc-2.js: -------------------------------------------------------------------------------- 1 | // E = mc² 🌌 2 | // Codédex 3 | 4 | function relativityTheory(mass) { 5 | const speedOfLight = 3e8; 6 | 7 | const energy = mass * speedOfLight ** 2; 8 | 9 | return energy; 10 | } 11 | 12 | relativityTheory(123.4); -------------------------------------------------------------------------------- /6-functions/32-clout.js: -------------------------------------------------------------------------------- 1 | // Clout 😎 2 | // Codédex 3 | 4 | const recentTikTokViews = [1932, 2300, 453, 5222, 6733, 7402, 8334]; 5 | const recentInstagramViews = [936, 2576, 453, 7013, 5489, 7402, 3921]; 6 | const recentYouTubeViews = [2300, 453, 5222, 989, 6733, 7402, 2789]; 7 | 8 | function mean(viewsArray) { 9 | let totalViews = 0; 10 | 11 | for(let i = 0; i < viewsArray.length; i++) { 12 | totalViews += viewsArray[i]; 13 | } 14 | 15 | return totalViews / viewsArray.length; 16 | } 17 | 18 | function median(viewsArray) { 19 | const sortedStats = viewsArray.sort(function(a, b) { return a - b; }); 20 | const middleIndex = Math.floor(viewsArray.length / 2); 21 | 22 | return sortedStats[middleIndex]; 23 | } 24 | 25 | // TikTok 26 | console.log("TikTok"); 27 | console.log("Mean:", mean(recentTikTokViews)); 28 | console.log("Median:", median(recentTikTokViews)); 29 | console.log(); 30 | 31 | // Instagram 32 | console.log("Instagram"); 33 | console.log("Mean:", mean(recentInstagramViews)); 34 | console.log("Median:", median(recentInstagramViews)); 35 | console.log(); 36 | 37 | // YouTube 38 | console.log("YouTube"); 39 | console.log("Mean:", mean(recentYouTubeViews)); 40 | console.log("Median:", median(recentYouTubeViews)); 41 | console.log(); 42 | -------------------------------------------------------------------------------- /6-functions/33-palindrome.js: -------------------------------------------------------------------------------- 1 | // Palindrome ↔️ 2 | // Codédex 3 | 4 | function isPalindrome(word) { 5 | let reversedWord = ""; 6 | 7 | let lowerCaseWord = word.toLowerCase(); 8 | 9 | for (let i = lowerCaseWord.length - 1; i >= 0; i--) { 10 | reversedWord += lowerCaseWord[i]; 11 | } 12 | 13 | return reversedWord === lowerCaseWord; 14 | } 15 | 16 | console.log(isPalindrome("Racecar")); 17 | -------------------------------------------------------------------------------- /7-objects/34-pizza-party.js: -------------------------------------------------------------------------------- 1 | // Pizza Party 🍕 2 | // Codédex 3 | 4 | // Pizza 1 5 | 6 | const pizzaTopping = "Cheese 🧀"; 7 | const pizzaType = "Pan"; 8 | const pizzaSlices = 8; 9 | const pizzaPrice = 12.99; 10 | 11 | // Pizza 2 12 | 13 | const pizza = { 14 | topping: "Pepperoni 🍕", 15 | type: "Hand-tossed", 16 | slices: 12, 17 | price: 14.99 18 | }; 19 | 20 | console.log(pizza); 21 | -------------------------------------------------------------------------------- /7-objects/35-dream-car.js: -------------------------------------------------------------------------------- 1 | // Dream Car 🚗 2 | // Codédex 3 | 4 | const car = { 5 | model: "Tesla", 6 | year: 2023, 7 | color: "red", 8 | used: true 9 | }; 10 | 11 | if (car.used) { 12 | console.log("I want a " + car.color + " " + car.year + " " + car.model + " that is used."); 13 | } else { 14 | console.log("I want a " + car.color + " " + car.year + " " + car.model + " that is new."); 15 | } 16 | -------------------------------------------------------------------------------- /7-objects/36-pokemon.js: -------------------------------------------------------------------------------- 1 | // Pokémon 📟 2 | // Codédex 3 | 4 | const pokemon = { 5 | name: "Pikachu", 6 | type: "Electric ⚡️", 7 | level: 25, 8 | }; 9 | 10 | pokemon.isCaught = false; 11 | 12 | console.log(pokemon); 13 | 14 | pokemon.isCaught = true; 15 | pokemon.name = "Pikapal"; 16 | 17 | console.log(pokemon); 18 | -------------------------------------------------------------------------------- /7-objects/37-animal-farm.js: -------------------------------------------------------------------------------- 1 | // Animal Farm 🐑 2 | // Codédex 3 | 4 | const pig = { 5 | name: "Napoleon", 6 | type: "pig", 7 | age: 63, 8 | makeSound() { 9 | console.log(pig.name + " is a " + pig.age + " year old " + pig.type + " that goes oink!"); 10 | } 11 | }; 12 | 13 | const sheep = { 14 | name: "Mob", 15 | type: "sheep", 16 | age: 42, 17 | makeSound() { 18 | console.log(sheep.name + " is a " + sheep.age + " year old " + sheep.type + " that goes baaaah!"); 19 | } 20 | }; 21 | 22 | const dog = { 23 | name: "Balto", 24 | type: "dog", 25 | age: 12, 26 | makeSound() { 27 | console.log(dog.name + " is a " + dog.age + " year old " + dog.type + " that goes woof!"); 28 | } 29 | }; 30 | 31 | pig.makeSound(); 32 | sheep.makeSound(); 33 | dog.makeSound(); 34 | -------------------------------------------------------------------------------- /7-objects/38-round-trip.js: -------------------------------------------------------------------------------- 1 | // Round Trip ✈️ 2 | // Codédex 3 | 4 | const departTripTicket = { 5 | name: "Brandon", 6 | from: "Pittsburgh, PA", 7 | to: "Augsburg, Germany", 8 | businessClass: false, 9 | upgrade() { 10 | if (this.businessClass) { 11 | console.log("Your ticket is already business class!"); 12 | } else { 13 | this.businessClass = true; 14 | console.log("Ticket upgraded to business class!"); 15 | } 16 | }, 17 | leaveTime: 12, 18 | arriveTime: 23, 19 | flightTime() { 20 | let flightTime = this.arriveTime - this.leaveTime; 21 | if (flightTime < 0) { 22 | flightTime += 24; 23 | } 24 | console.log(flightTime + " hours"); 25 | } 26 | }; 27 | 28 | const returnTripTicket = { 29 | name: "Brandon", 30 | from: "Augsburg, Germany", 31 | to: "Pittsburgh, PA", 32 | businessClass: true, 33 | upgrade() { 34 | if (this.businessClass) { 35 | console.log("Your ticket is already business class!"); 36 | } else { 37 | this.businessClass = true; 38 | console.log("Ticket upgraded to business class!"); 39 | } 40 | }, 41 | leaveTime: 24, 42 | arriveTime: 4, 43 | flightTime() { 44 | let flightTime = this.arriveTime - this.leaveTime; 45 | if (flightTime < 0) { 46 | flightTime += 24; 47 | } 48 | console.log(flightTime + " hours"); 49 | } 50 | }; 51 | 52 | // Upgrade and check flight times 53 | departTripTicket.upgrade(); 54 | returnTripTicket.upgrade(); 55 | 56 | departTripTicket.flightTime(); 57 | returnTripTicket.flightTime(); 58 | -------------------------------------------------------------------------------- /8-trifecta/39-green-light-go/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Green Light Go! 8 | 9 | 10 | 11 | 12 |

Click Anywhere!

13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /8-trifecta/39-green-light-go/script.js: -------------------------------------------------------------------------------- 1 | // Green Light Go! 🚦 2 | // Codédex 3 | 4 | let lightIndex = 0; 5 | 6 | function changeLight() { 7 | const redLight = document.getElementById("red"); 8 | const yellowLight = document.getElementById("yellow"); 9 | const greenLight = document.getElementById("green"); 10 | 11 | if (lightIndex === 0) { 12 | redLight.style.backgroundColor = "#ff0000"; 13 | yellowLight.style.backgroundColor = ""; 14 | greenLight.style.backgroundColor = ""; 15 | } else if (lightIndex === 1) { 16 | yellowLight.style.backgroundColor = "#ffff00"; 17 | redLight.style.backgroundColor = ""; 18 | greenLight.style.backgroundColor = ""; 19 | } else { 20 | greenLight.style.backgroundColor = "#00ff00"; 21 | redLight.style.backgroundColor = ""; 22 | yellowLight.style.backgroundColor = ""; 23 | } 24 | 25 | lightIndex = (lightIndex + 1) % 3; 26 | } -------------------------------------------------------------------------------- /8-trifecta/39-green-light-go/styles.css: -------------------------------------------------------------------------------- 1 | /* Green Light Go! 🚦 */ 2 | /* Codédex */ 3 | 4 | #traffic-light-div { 5 | border: 7px solid black; 6 | width: 150px; 7 | height: 400px; 8 | background-color: grey; 9 | } 10 | 11 | .light { 12 | border: 3px solid black; 13 | width: 100px; 14 | height: 100px; 15 | margin: 20px auto; 16 | border-radius: 50%; 17 | } -------------------------------------------------------------------------------- /8-trifecta/41-hotline-bling/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hotline Bling 9 | 10 | 11 |
12 |
13 | 14 |

Watch and Learn

15 |
16 |
17 | 18 |

Watch and Learn

19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /8-trifecta/41-hotline-bling/script.js: -------------------------------------------------------------------------------- 1 | // Hotline Bling 💎 2 | // Codédex 3 | 4 | let drakePicTwo = document.getElementById("drake-pic-2"); 5 | let heading = document.getElementById("heading-2"); 6 | 7 | drakePicTwo.src = "https://i.imgur.com/RGbh6zY.png"; 8 | heading.innerText = "Learn By Doing"; -------------------------------------------------------------------------------- /8-trifecta/41-hotline-bling/styles.css: -------------------------------------------------------------------------------- 1 | /* Hotline Bling 💎 */ 2 | /* Codédex */ 3 | 4 | body { 5 | background-color: #d7ba19; 6 | } 7 | 8 | #wrapper { 9 | width: 75%; 10 | margin: auto; 11 | } 12 | 13 | div { 14 | width: 75%; 15 | margin: auto; 16 | } 17 | 18 | h1 { 19 | display: inline; 20 | position: relative; 21 | bottom: 4em; 22 | } -------------------------------------------------------------------------------- /8-trifecta/42-mood-ring/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Mood Ring 10 | 11 | 12 |
13 |
14 |
15 |

How Are You Feeling?

16 | 17 | 18 | -------------------------------------------------------------------------------- /8-trifecta/42-mood-ring/script.js: -------------------------------------------------------------------------------- 1 | // Mood Ring 💍 2 | // Codédex 3 | 4 | const stone = document.getElementById('stone'); 5 | 6 | const randomNumber = Math.floor(Math.random() * 10) + 1; 7 | 8 | if (randomNumber === 1) { 9 | stone.style.backgroundColor = "red"; 10 | } else if (randomNumber === 2) { 11 | stone.style.backgroundColor = "orange"; 12 | } else if (randomNumber === 3) { 13 | stone.style.backgroundColor = "yellow"; 14 | } else if (randomNumber === 4) { 15 | stone.style.backgroundColor = "green"; 16 | } else if (randomNumber === 5) { 17 | stone.style.backgroundColor = "blue"; 18 | } else if (randomNumber === 6) { 19 | stone.style.backgroundColor = "#4169e1"; 20 | } else if (randomNumber === 7) { 21 | stone.style.backgroundColor = "#00008b"; 22 | } else if (randomNumber === 8) { 23 | stone.style.backgroundColor = "purple"; 24 | } else { 25 | stone.style.backgroundColor = "black"; 26 | } 27 | -------------------------------------------------------------------------------- /8-trifecta/42-mood-ring/styles.css: -------------------------------------------------------------------------------- 1 | /* Mood Ring 💍 */ 2 | /* Codédex */ 3 | 4 | body { 5 | text-align: center; 6 | } 7 | 8 | .mood-ring { 9 | width: 150px; 10 | height: 150px; 11 | margin: 20px auto; 12 | border: 15px solid #ccc; 13 | border-radius: 50%; 14 | position: relative; 15 | } 16 | 17 | .stone { 18 | width: 125px; 19 | height: 125px; 20 | background-color: #3498db; /* Default color */ 21 | border-radius: 50%; 22 | position: absolute; 23 | top: 50%; 24 | left: 50%; 25 | transform: translate(-50%, -50%); 26 | transition: background-color 0.5s ease-in-out; 27 | } -------------------------------------------------------------------------------- /8-trifecta/43-chill-pill/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Chill Pill 9 | 10 | 11 |
12 |

Quote Generator

13 |

Relax and Take a Chill Pill

14 |
15 |

16 |
17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /8-trifecta/43-chill-pill/script.js: -------------------------------------------------------------------------------- 1 | // Chill Pill 🧘🏽‍♀️ 2 | // Codédex 3 | 4 | const quoteList = [ 5 | "Some doors only open from the inside. Breath is a way of accessing that door.", 6 | "What has to be taught first, is the breath.", 7 | "Remember the blue sky. It may at times be obscured by clouds, but it is always there.", 8 | "In the midst of movement and chaos, keep stillness inside of you.", 9 | "We can't control the sea, but we can learn how to surf the waves.", 10 | "Feelings come and go like clouds in a windy sky. Conscious breathing is my anchor.", 11 | "To understand the immeasurable, the mind must be extraordinarily quiet, still." 12 | ]; 13 | 14 | const colors = ["#e81416", "#ffa500", "#faeb36", "#79c314", "#487de7", "#4b369d", "#70369d"]; 15 | 16 | let wrapperDiv = document.getElementById("wrapper"); 17 | let quoteText = document.getElementById("quote-text"); 18 | let quoteButton = document.getElementById("quote-button"); 19 | 20 | quoteButton.addEventListener("click", function() { 21 | const randomIndex = Math.floor(Math.random() * quoteList.length); 22 | const randomQuote = quoteList[randomIndex]; 23 | 24 | quoteText.innerText = randomQuote; 25 | wrapperDiv.style.backgroundColor = colors[randomIndex]; 26 | }); -------------------------------------------------------------------------------- /8-trifecta/43-chill-pill/styles.css: -------------------------------------------------------------------------------- 1 | /* Chill Pill 🧘🏽‍♀️ */ 2 | /* Codédex */ 3 | 4 | #wrapper { 5 | border: 2px solid black; 6 | border-radius: 5px; 7 | width: 50%; 8 | margin: 25vh auto; 9 | padding: 10px; 10 | text-align: center; 11 | transition: background-color 0.5s ease-in-out; 12 | } 13 | 14 | #quote-div { 15 | border: 1px solid black; 16 | border-radius: 5px; 17 | width: 75%; 18 | margin: 10px auto; 19 | background-color: #fff; 20 | } -------------------------------------------------------------------------------- /8-trifecta/44-cap-that/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cap That 9 | 10 | 11 |

Welcome to the Meme Machine

12 | 13 |
14 | 15 |

16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /8-trifecta/44-cap-that/script.js: -------------------------------------------------------------------------------- 1 | // Cap That 🤪 2 | // Codédex 3 | 4 | const memeArray = [ 5 | "./images/evil-kermit.png", 6 | "./images/eddie-murphy-thinking.png", 7 | "./images/futurama-fry.png", 8 | "./images/confused-person.png" 9 | ]; 10 | 11 | const captionArray = [ 12 | "I am a level 60 on inferno mode!", 13 | "Voted most likely to change the world.", 14 | "Get this hair off my head!", 15 | "Oooh that must have hurt." 16 | ]; 17 | 18 | const generatorButton = document.getElementById("generator-button"); 19 | const randomMeme = document.getElementById("random-meme"); 20 | const randomCaption = document.getElementById("random-caption"); 21 | 22 | generatorButton.addEventListener("click", function() { 23 | const randomMemeIndex = Math.floor(Math.random() * memeArray.length); 24 | const randomCaptionIndex = Math.floor(Math.random() * captionArray.length); 25 | 26 | randomMeme.src = memeArray[randomMemeIndex]; 27 | randomCaption.innerText = captionArray[randomCaptionIndex]; 28 | }); 29 | -------------------------------------------------------------------------------- /8-trifecta/44-cap-that/styles.css: -------------------------------------------------------------------------------- 1 | /* Cap That 🤪 */ 2 | /* Codédex */ 3 | 4 | body { 5 | text-align: center; 6 | } 7 | 8 | #generator-button { 9 | padding: 10px; 10 | border: 2px solid black; 11 | border-radius: 5px; 12 | font-weight: bolder; 13 | font-size: xx-large; 14 | } 15 | 16 | #meme-wrapper { 17 | border: 4px solid black; 18 | width: 700px; 19 | height: 500px; 20 | padding: 5px; 21 | margin: 15px auto; 22 | } 23 | 24 | #random-meme { 25 | border-radius: 5px; 26 | } 27 | 28 | #random-caption { 29 | margin: 0; 30 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 |

The Origins III: JavaScript 💻

4 | GitHub repo with beginner-friendly problems in JavaScript 5 |
6 |
7 | 8 | Welcome to The Origins III: JavaScript GitHub repo! We are super excited to have you. Here, you will find all the solutions to the Codédex challenges. Feel free to make pull requests to add your own twists on the challenges! 9 | 10 | ### Website: www.codedex.io/javascript 11 | 12 | ## The Console 13 | 14 | - [setting-up.js](./1-the-console/01-setting-up.js) 15 | - [the-console.js](./1-the-console/02-the-console.js) 16 | - [letter-tree.js](./1-the-console/03-letter-tree.js) 17 | - [secret-recipe.js](./1-the-console/04-secret-recipe.js) 18 | - [receipt.js](./1-the-console/05-receipt.js) 19 | 20 | ## Variables 21 | 22 | - [variables.js](./2-variables/06-variables.js) 23 | - [data-types.js](./2-variables/07-data-types.js) 24 | - [temperature.js](./2-variables/08-temperature.js) 25 | - [bmi.js](./2-variables/09-bmi.js) 26 | - [planet-weight.js](./2-variables/10-planet-weight.js) 27 | 28 | ## Conditionals 29 | 30 | - [coin-flip.js](./3-conditionals/11-coin-flip.js) 31 | - [good-morning.js](./3-conditionals/12-good-morning.js) 32 | - [good-afternoon.js](./3-conditionals/13-good-afternoon.js) 33 | - [ph.levels.js](./3-conditionals/14-ph-levels.js) 34 | - [magic-8-ball.js](./3-conditionals/15-magic-8-ball.js) 35 | - [air-quality-index.js](./3-conditionals/16-air-quality-index.js) 36 | - [rock-paper-scissors.js](./3-conditionals/17-rock-paper-scissors.js) 37 | 38 | ## Loops 39 | 40 | - [duck-duck-goose.js](./4-loops/18-duck-duck-goose.js) 41 | - [lucky-number.js](./4-loops/19-lucky-number.js) 42 | - [not-tell-lies.js](./4-loops/20-not-tell-lies.js) 43 | - [even-the-odds.js](./4-loops/21-even-the-odds.js) 44 | - [based-numbers.js](./4-loops/22-based-numbers.js) 45 | 46 | ## Arrays 47 | 48 | - [five-boroughs.js](./5-arrays/23-five-boroughs.js) 49 | - [grocery-trip.js](./5-arrays/24-grocery-trip.js) 50 | - [times-tables.js](./5-arrays/25-times-tables.js) 51 | - [music-playlist.js](./5-arrays/26-music-playlist.js) 52 | - [wheres-waldo.js](./5-arrays/27-wheres-waldo.js) 53 | - [dna.js](./5-arrays/28-dna.js) 54 | 55 | ## Functions 56 | 57 | - [greetings.js](./6-functions/29-greetings.js) 58 | - [blast-off.js](./6-functions/30-blast-off.js) 59 | - [e-mc-2.js](./6-functions/31-e-mc-2.js) 60 | - [clout.js](./6-functions/32-clout.js) 61 | - [palindrome.js](./6-functions/33-palindrome.js) 62 | 63 | ## Objects 64 | 65 | - [pizza-party.js](./7-objects/34-pizza-party.js) 66 | - [dream-car.js](./7-objects/35-dream-car.js) 67 | - [pokemon.js](./7-objects/36-pokemon.js) 68 | - [animal-farm.js](./7-objects/37-animal-farm.js) 69 | - [round-trip.js](./7-objects/38-round-trip.js) 70 | 71 | ## Trifecta 72 | 73 | - [green-light-go](./8-trifecta/39-green-light-go) 74 | - [hotline-bling](./8-trifecta/41-hotline-bling) 75 | - [mood-ring](./8-trifecta/42-mood-ring) 76 | - [chill-pill](./8-trifecta/43-chill-pill) 77 | - [cap-that](./8-trifecta/44-cap-that) 78 | 79 | --- 80 | 81 | Make sure to join the [community](https://www.codedex.io/community) and [Codédex Club](https://www.codedex.io/pricing) for more content! 💖 82 | --------------------------------------------------------------------------------