Are you new to JavaScript and looking for some exciting projects to hone your skills? You’ve come to the right place! In this comprehensive guide, we’ll explore 15 engaging JavaScript projects perfect for beginners. These projects will not only help you practice your coding skills but also allow you to create useful and interactive web applications. Let’s dive in!<\/p>\n
1. Interactive To-Do List<\/h2>\n
Creating a to-do list is a classic beginner project that helps you understand the basics of DOM manipulation and event handling. With this project, you’ll learn how to:<\/p>\n
- \n
- Add and remove items from a list<\/li>\n
- Mark items as complete<\/li>\n
- Store data in the browser’s local storage<\/li>\n<\/ul>\n
Here’s a simple example of how you might start your to-do list project:<\/p>\n
<!-- HTML -->\n<input type=\"text\" id=\"taskInput\" placeholder=\"Enter a new task\">\n<button onclick=\"addTask()\">Add Task<\/button>\n<ul id=\"taskList\"><\/ul>\n\n<!-- JavaScript -->\n<script>\nfunction addTask() {\n var input = document.getElementById(\"taskInput\");\n var task = input.value;\n if (task !== \"\") {\n var li = document.createElement(\"li\");\n li.textContent = task;\n document.getElementById(\"taskList\").appendChild(li);\n input.value = \"\";\n }\n}\n<\/script>\n<\/code><\/pre>\n2. Simple Calculator<\/h2>\n
Building a calculator is an excellent way to practice working with user input, arithmetic operations, and displaying results. You can start with basic operations like addition, subtraction, multiplication, and division, then gradually add more complex features like:<\/p>\n
- \n
- Percentage calculations<\/li>\n
- Square root and exponents<\/li>\n
- Memory functions<\/li>\n<\/ul>\n
Here’s a basic structure to get you started:<\/p>\n
<!-- HTML -->\n<input type=\"text\" id=\"display\" readonly>\n<br>\n<button onclick=\"appendToDisplay('7')\">7<\/button>\n<button onclick=\"appendToDisplay('8')\">8<\/button>\n<button onclick=\"appendToDisplay('9')\">9<\/button>\n<button onclick=\"appendToDisplay('+')\">+<\/button>\n<!-- Add more buttons for other numbers and operations -->\n<button onclick=\"calculate()\">=<\/button>\n\n<!-- JavaScript -->\n<script>\nfunction appendToDisplay(value) {\n document.getElementById(\"display\").value += value;\n}\n\nfunction calculate() {\n var display = document.getElementById(\"display\");\n try {\n display.value = eval(display.value);\n } catch (error) {\n display.value = \"Error\";\n }\n}\n<\/script>\n<\/code><\/pre>\n3. Random Quote Generator<\/h2>\n
A random quote generator is a fun project that introduces you to working with arrays and random number generation. You’ll learn how to:<\/p>\n
- \n
- Store and access data in arrays<\/li>\n
- Generate random numbers<\/li>\n
- Update the DOM with new content<\/li>\n<\/ul>\n
Here’s a simple implementation:<\/p>\n
<!-- HTML -->\n<div id=\"quoteDisplay\"><\/div>\n<button onclick=\"newQuote()\">New Quote<\/button>\n\n<!-- JavaScript -->\n<script>\nvar quotes = [\n \"Be the change you wish to see in the world. - Mahatma Gandhi\",\n \"Stay hungry, stay foolish. - Steve Jobs\",\n \"The only way to do great work is to love what you do. - Steve Jobs\"\n];\n\nfunction newQuote() {\n var randomNumber = Math.floor(Math.random() * quotes.length);\n document.getElementById(\"quoteDisplay\").innerHTML = quotes[randomNumber];\n}\n<\/script>\n<\/code><\/pre>\n4. Countdown Timer<\/h2>\n
Creating a countdown timer helps you understand how to work with dates and times in JavaScript. This project will teach you about:<\/p>\n
- \n
- The Date object<\/li>\n
- setInterval() and clearInterval() functions<\/li>\n
- Formatting time display<\/li>\n<\/ul>\n
Here’s a basic countdown timer:<\/p>\n
<!-- HTML -->\n<input type=\"datetime-local\" id=\"endTime\">\n<button onclick=\"startTimer()\">Start Countdown<\/button>\n<div id=\"timer\"><\/div>\n\n<!-- JavaScript -->\n<script>\nvar countdownTimer;\n\nfunction startTimer() {\n var endTime = new Date(document.getElementById(\"endTime\").value).getTime();\n \n countdownTimer = setInterval(function() {\n var now = new Date().getTime();\n var distance = endTime - now;\n \n var days = Math.floor(distance \/ (1000 * 60 * 60 * 24));\n var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n var minutes = Math.floor((distance % (1000 * 60 * 60)) \/ (1000 * 60));\n var seconds = Math.floor((distance % (1000 * 60)) \/ 1000);\n \n document.getElementById(\"timer\").innerHTML = days + \"d \" + hours + \"h \" + minutes + \"m \" + seconds + \"s \";\n \n if (distance < 0) {\n clearInterval(countdownTimer);\n document.getElementById(\"timer\").innerHTML = \"EXPIRED\";\n }\n }, 1000);\n}\n<\/script>\n<\/code><\/pre>\n5. Weather App<\/h2>\n
Building a weather app introduces you to working with APIs and asynchronous JavaScript. You’ll learn about:<\/p>\n
- \n
- Making HTTP requests using fetch()<\/li>\n
- Parsing JSON data<\/li>\n
- Updating the UI based on API responses<\/li>\n<\/ul>\n
Here’s a simple weather app using the OpenWeatherMap API:<\/p>\n
<!-- HTML -->\n<input type=\"text\" id=\"cityInput\" placeholder=\"Enter city name\">\n<button onclick=\"getWeather()\">Get Weather<\/button>\n<div id=\"weatherInfo\"><\/div>\n\n<!-- JavaScript -->\n<script>\nconst apiKey = \"YOUR_API_KEY\"; \/\/ Replace with your OpenWeatherMap API key\n\nasync function getWeather() {\n const city = document.getElementById(\"cityInput\").value;\n const apiUrl = `https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}&appid=${apiKey}&units=metric`;\n\n try {\n const response = await fetch(apiUrl);\n const data = await response.json();\n \n const weatherInfo = `\n <h2>Weather in ${data.name}<\/h2>\n <p>Temperature: ${data.main.temp}°C<\/p>\n <p>Description: ${data.weather[0].description}<\/p>\n <p>Humidity: ${data.main.humidity}%<\/p>\n `;\n \n document.getElementById(\"weatherInfo\").innerHTML = weatherInfo;\n } catch (error) {\n console.error(\"Error fetching weather data:\", error);\n document.getElementById(\"weatherInfo\").innerHTML = \"Error fetching weather data\";\n }\n}\n<\/script>\n<\/code><\/pre>\n6. Tic-Tac-Toe Game<\/h2>\n
Creating a Tic-Tac-Toe game is an excellent way to practice working with 2D arrays, game logic, and turn-based systems. This project will help you learn about:<\/p>\n
- \n
- Manipulating 2D arrays<\/li>\n
- Implementing game rules and win conditions<\/li>\n
- Managing player turns<\/li>\n<\/ul>\n
Here’s a basic implementation of Tic-Tac-Toe:<\/p>\n
<!-- HTML -->\n<div id=\"board\"><\/div>\n<p id=\"status\"><\/p>\n\n<!-- JavaScript -->\n<script>\nlet currentPlayer = \"X\";\nlet board = [\"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"];\n\nfunction createBoard() {\n const boardElement = document.getElementById(\"board\");\n for (let i = 0; i < 9; i++) {\n const cell = document.createElement(\"div\");\n cell.classList.add(\"cell\");\n cell.addEventListener(\"click\", () => makeMove(i));\n boardElement.appendChild(cell);\n }\n}\n\nfunction makeMove(index) {\n if (board[index] === \"\") {\n board[index] = currentPlayer;\n updateBoard();\n if (checkWin()) {\n document.getElementById(\"status\").textContent = `${currentPlayer} wins!`;\n } else if (board.every(cell => cell !== \"\")) {\n document.getElementById(\"status\").textContent = \"It's a draw!\";\n } else {\n currentPlayer = currentPlayer === \"X\" ? \"O\" : \"X\";\n document.getElementById(\"status\").textContent = `${currentPlayer}'s turn`;\n }\n }\n}\n\nfunction updateBoard() {\n const cells = document.getElementsByClassName(\"cell\");\n for (let i = 0; i < 9; i++) {\n cells[i].textContent = board[i];\n }\n}\n\nfunction checkWin() {\n const winConditions = [\n [0, 1, 2], [3, 4, 5], [6, 7, 8], \/\/ Rows\n [0, 3, 6], [1, 4, 7], [2, 5, 8], \/\/ Columns\n [0, 4, 8], [2, 4, 6] \/\/ Diagonals\n ];\n\n return winConditions.some(condition => {\n return condition.every(index => board[index] === currentPlayer);\n });\n}\n\ncreateBoard();\n<\/script>\n<\/code><\/pre>\n7. Memory Card Game<\/h2>\n
A memory card game is a fun project that helps you practice working with arrays, randomization, and game state management. You’ll learn about:<\/p>\n
- \n
- Shuffling arrays<\/li>\n
- Implementing game logic<\/li>\n
- Managing timeouts for card flipping<\/li>\n<\/ul>\n
Here’s a simple implementation of a memory card game:<\/p>\n
<!-- HTML -->\n<div id=\"game-board\"><\/div>\n\n<!-- JavaScript -->\n<script>\nconst cards = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];\nlet gameBoard = [...cards, ...cards];\nlet flippedCards = [];\nlet matchedPairs = 0;\n\nfunction shuffleArray(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n}\n\nfunction createBoard() {\n shuffleArray(gameBoard);\n const gameBoardElement = document.getElementById(\"game-board\");\n gameBoard.forEach((card, index) => {\n const cardElement = document.createElement(\"div\");\n cardElement.classList.add(\"card\");\n cardElement.dataset.cardValue = card;\n cardElement.dataset.index = index;\n cardElement.addEventListener(\"click\", flipCard);\n gameBoardElement.appendChild(cardElement);\n });\n}\n\nfunction flipCard() {\n if (flippedCards.length < 2 && !this.classList.contains(\"flipped\")) {\n this.classList.add(\"flipped\");\n this.textContent = this.dataset.cardValue;\n flippedCards.push(this);\n\n if (flippedCards.length === 2) {\n setTimeout(checkMatch, 1000);\n }\n }\n}\n\nfunction checkMatch() {\n const [card1, card2] = flippedCards;\n if (card1.dataset.cardValue === card2.dataset.cardValue) {\n card1.removeEventListener(\"click\", flipCard);\n card2.removeEventListener(\"click\", flipCard);\n matchedPairs++;\n if (matchedPairs === cards.length) {\n alert(\"Congratulations! You won!\");\n }\n } else {\n card1.classList.remove(\"flipped\");\n card2.classList.remove(\"flipped\");\n card1.textContent = \"\";\n card2.textContent = \"\";\n }\n flippedCards = [];\n}\n\ncreateBoard();\n<\/script>\n<\/code><\/pre>\n8. Hangman Game<\/h2>\n
Creating a Hangman game helps you practice working with strings, arrays, and conditional logic. This project will teach you about:<\/p>\n
- \n
- String manipulation<\/li>\n
- Array methods<\/li>\n
- Game state management<\/li>\n<\/ul>\n
Here’s a basic implementation of a Hangman game:<\/p>\n
<!-- HTML -->\n<div id=\"word-display\"><\/div>\n<div id=\"guesses\"><\/div>\n<input type=\"text\" id=\"guess-input\" maxlength=\"1\">\n<button onclick=\"makeGuess()\">Guess<\/button>\n<p id=\"message\"><\/p>\n\n<!-- JavaScript -->\n<script>\nconst words = [\"javascript\", \"html\", \"css\", \"python\", \"react\", \"nodejs\"];\nlet selectedWord = words[Math.floor(Math.random() * words.length)];\nlet guessedLetters = [];\nlet remainingGuesses = 6;\n\nfunction updateWordDisplay() {\n const wordDisplay = document.getElementById(\"word-display\");\n wordDisplay.textContent = selectedWord\n .split(\"\")\n .map(letter => guessedLetters.includes(letter) ? letter : \"_\")\n .join(\" \");\n}\n\nfunction updateGuesses() {\n const guessesElement = document.getElementById(\"guesses\");\n guessesElement.textContent = `Guessed letters: ${guessedLetters.join(\", \")}`;\n}\n\nfunction makeGuess() {\n const guessInput = document.getElementById(\"guess-input\");\n const guess = guessInput.value.toLowerCase();\n guessInput.value = \"\";\n\n if (guessedLetters.includes(guess)) {\n document.getElementById(\"message\").textContent = \"You already guessed that letter!\";\n return;\n }\n\n guessedLetters.push(guess);\n\n if (selectedWord.includes(guess)) {\n updateWordDisplay();\n if (!document.getElementById(\"word-display\").textContent.includes(\"_\")) {\n document.getElementById(\"message\").textContent = \"Congratulations! You won!\";\n }\n } else {\n remainingGuesses--;\n if (remainingGuesses === 0) {\n document.getElementById(\"message\").textContent = `Game over! The word was ${selectedWord}.`;\n } else {\n document.getElementById(\"message\").textContent = `Wrong guess! ${remainingGuesses} guesses left.`;\n }\n }\n\n updateGuesses();\n}\n\nupdateWordDisplay();\nupdateGuesses();\n<\/script>\n<\/code><\/pre>\n9. Pomodoro Timer<\/h2>\n
A Pomodoro timer is a productivity tool that helps users manage their work and break times. Building this project will help you learn about:<\/p>\n
- \n
- Working with time intervals<\/li>\n
- State management<\/li>\n
- Audio playback in the browser<\/li>\n<\/ul>\n
Here’s a simple implementation of a Pomodoro timer:<\/p>\n
<!-- HTML -->\n<div id=\"timer\">25:00<\/div>\n<button onclick=\"startTimer()\">Start<\/button>\n<button onclick=\"pauseTimer()\">Pause<\/button>\n<button onclick=\"resetTimer()\">Reset<\/button>\n<p id=\"status\">Work Time<\/p>\n\n<!-- JavaScript -->\n<script>\nlet timer;\nlet timeLeft = 25 * 60; \/\/ 25 minutes in seconds\nlet isWorking = true;\nlet isPaused = true;\n\nfunction updateDisplay() {\n const minutes = Math.floor(timeLeft \/ 60);\n const seconds = timeLeft % 60;\n document.getElementById(\"timer\").textContent = \n `${minutes.toString().padStart(2, \"0\")}:${seconds.toString().padStart(2, \"0\")}`;\n}\n\nfunction startTimer() {\n if (isPaused) {\n isPaused = false;\n timer = setInterval(() => {\n timeLeft--;\n updateDisplay();\n if (timeLeft === 0) {\n clearInterval(timer);\n if (isWorking) {\n timeLeft = 5 * 60; \/\/ 5 minute break\n isWorking = false;\n document.getElementById(\"status\").textContent = \"Break Time\";\n } else {\n timeLeft = 25 * 60; \/\/ 25 minute work session\n isWorking = true;\n document.getElementById(\"status\").textContent = \"Work Time\";\n }\n updateDisplay();\n new Audio(\"https:\/\/actions.google.com\/sounds\/v1\/alarms\/beep_short.ogg\").play();\n }\n }, 1000);\n }\n}\n\nfunction pauseTimer() {\n clearInterval(timer);\n isPaused = true;\n}\n\nfunction resetTimer() {\n clearInterval(timer);\n isPaused = true;\n isWorking = true;\n timeLeft = 25 * 60;\n updateDisplay();\n document.getElementById(\"status\").textContent = \"Work Time\";\n}\n\nupdateDisplay();\n<\/script>\n<\/code><\/pre>\n10. Image Slider<\/h2>\n
An image slider is a common web component that allows users to browse through a collection of images. This project will help you learn about:<\/p>\n
- \n
- DOM manipulation<\/li>\n
- Working with arrays of objects<\/li>\n
- Implementing smooth transitions<\/li>\n<\/ul>\n
Here’s a basic implementation of an image slider:<\/p>\n
<!-- HTML -->\n<div id=\"slider-container\">\n <img id=\"slider-image\" src=\"\" alt=\"Slider Image\">\n <button onclick=\"prevImage()\">Previous<\/button>\n <button onclick=\"nextImage()\">Next<\/button>\n<\/div>\n\n<!-- JavaScript -->\n<script>\nconst images = [\n { src: \"https:\/\/example.com\/image1.jpg\", alt: \"Image 1\" },\n { src: \"https:\/\/example.com\/image2.jpg\", alt: \"Image 2\" },\n { src: \"https:\/\/example.com\/image3.jpg\", alt: \"Image 3\" },\n { src: \"https:\/\/example.com\/image4.jpg\", alt: \"Image 4\" },\n { src: \"https:\/\/example.com\/image5.jpg\", alt: \"Image 5\" }\n];\n\nlet currentImageIndex = 0;\n\nfunction updateImage() {\n const sliderImage = document.getElementById(\"slider-image\");\n sliderImage.src = images[currentImageIndex].src;\n sliderImage.alt = images[currentImageIndex].alt;\n}\n\nfunction nextImage() {\n currentImageIndex = (currentImageIndex + 1) % images.length;\n updateImage();\n}\n\nfunction prevImage() {\n currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;\n updateImage();\n}\n\nupdateImage();\n<\/script>\n<\/code><\/pre>\n11. Quiz App<\/h2>\n
Building a quiz app is an excellent way to practice working with objects, arrays, and user input validation. This project will help you learn about:<\/p>\n
- \n
- Storing and accessing complex data structures<\/li>\n
- Implementing scoring systems<\/li>\n
- Managing quiz state and progression<\/li>\n<\/ul>\n
Here’s a simple implementation of a quiz app:<\/p>\n
<!-- HTML -->\n<div id=\"quiz-container\">\n <h2 id=\"question\"><\/h2>\n <div id=\"choices\"><\/div>\n <button onclick=\"submitAnswer()\">Submit<\/button>\n<\/div>\n<p id=\"score\"><\/p>\n\n<!-- JavaScript -->\n<script>\nconst quizData = [\n {\n question: \"What is the capital of France?\",\n choices: [\"London\", \"Berlin\", \"Paris\", \"Madrid\"],\n correctAnswer: 2\n },\n {\n question: \"Which planet is known as the Red Planet?\",\n choices: [\"Venus\", \"Mars\", \"Jupiter\", \"Saturn\"],\n correctAnswer: 1\n },\n {\n question: \"What is the largest mammal?\",\n choices: [\"Elephant\", \"Blue Whale\", \"Giraffe\", \"Hippopotamus\"],\n correctAnswer: 1\n }\n];\n\nlet currentQuestionIndex = 0;\nlet score = 0;\n\nfunction loadQuestion() {\n const currentQuestion = quizData[currentQuestionIndex];\n document.getElementById(\"question\").textContent = currentQuestion.question;\n\n const choicesContainer = document.getElementById(\"choices\");\n choicesContainer.innerHTML = \"\";\n\n currentQuestion.choices.forEach((choice, index) => {\n const button = document.createElement(\"button\");\n button.textContent = choice;\n button.onclick = () => selectChoice(index);\n choicesContainer.appendChild(button);\n });\n}\n\nfunction selectChoice(choiceIndex) {\n const buttons = document.getElementById(\"choices\").getElementsByTagName(\"button\");\n for (let button of buttons) {\n button.classList.remove(\"selected\");\n }\n buttons[choiceIndex].classList.add(\"selected\");\n}\n\nfunction submitAnswer() {\n const selectedButton = document.querySelector(\"#choices button.selected\");\n if (!selectedButton) {\n alert(\"Please select an answer!\");\n return;\n }\n\n const selectedAnswer = Array.from(selectedButton.parentNode.children).indexOf(selectedButton);\n if (selectedAnswer === quizData[currentQuestionIndex].correctAnswer) {\n score++;\n }\n\n currentQuestionIndex++;\n\n if (currentQuestionIndex < quizData.length) {\n loadQuestion();\n } else {\n finishQuiz();\n }\n}\n\nfunction finishQuiz() {\n document.getElementById(\"quiz-container\").style.display = \"none\";\n document.getElementById(\"score\").textContent = `You scored ${score} out of ${quizData.length}!`;\n}\n\nloadQuestion();\n<\/script>\n<\/code><\/pre>\n12. Budget Tracker<\/h2>\n
A budget tracker is a practical project that helps users manage their finances. Building this app will teach you about:<\/p>\n
- \n
- Working with forms and user input<\/li>\n
- Performing calculations<\/li>\n
- Data visualization (optional)<\/li>\n<\/ul>\n
Here’s a simple implementation of a budget tracker:<\/p>\n
<!-- HTML -->\n<h2>Budget Tracker<\/h2>\n<form id=\"transaction-form\">\n <input type=\"text\" id=\"description\" placeholder=\"Description\" required>\n <input type=\"number\" id=\"amount\" placeholder=\"Amount\" required>\n <select id=\"type\">\n <option value=\"income\">Income<\/option>\n <option value=\"expense\">Expense<\/option>\n <\/select>\n <button type=\"submit\">Add Transaction<\/button>\n<\/form>\n<div id=\"balance\"><\/div>\n<div id=\"transaction-list\"><\/div>\n\n<!-- JavaScript -->\n<script>\nlet transactions = [];\n\ndocument.getElementById(\"transaction-form\").addEventListener(\"submit\", function(e) {\n e.preventDefault();\n \n const description = document.getElementById(\"description\").value;\n const amount = parseFloat(document.getElementById(\"amount\").value);\n const type = document.getElementById(\"type\").value;\n\n transactions.push({ description, amount, type });\n updateTransactionList();\n updateBalance();\n this.reset();\n});\n\nfunction updateTransactionList() {\n const transactionList = document.getElementById(\"transaction-list\");\n transactionList.innerHTML = \"\";\n \n transactions.forEach((transaction, index) => {\n const li = document.createElement(\"li\");\n li.textContent = `${transaction.description}: ${transaction.type === \"income\" ? \"+\" : \"-\"}$${transaction.amount}`;\n \n const deleteButton = document.createElement(\"button\");\n deleteButton.textContent = \"Delete\";\n deleteButton.onclick = () => deleteTransaction(index);\n \n li.appendChild(deleteButton);\n transactionList.appendChild(li);\n });\n}\n\nfunction updateBalance() {\n const balance = transactions.reduce((total, transaction) => {\n return transaction.type === \"income\" ? total + transaction.amount : total - transaction.amount;\n }, 0);\n \n document.getElementById(\"balance\").textContent = `Balance: $${balance.toFixed(2)}`;\n}\n\nfunction deleteTransaction(index) {\n transactions.splice(index, 1);\n updateTransactionList();\n updateBalance();\n}\n\nupdateBalance();\n<\/script>\n<\/code><\/pre>\n13. Rock Paper Scissors Game<\/h2>\n
The classic Rock<\/p>\n<\/article>\n
<\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
Are you new to JavaScript and looking for some exciting projects to hone your skills? You’ve come to the right…<\/p>\n","protected":false},"author":1,"featured_media":7197,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-7200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-problem-solving"],"_links":{"self":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts\/7200"}],"collection":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/comments?post=7200"}],"version-history":[{"count":0,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts\/7200\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/media\/7197"}],"wp:attachment":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/media?parent=7200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/categories?post=7200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/tags?post=7200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}