{"id":567,"date":"2025-05-19T10:50:44","date_gmt":"2025-05-19T10:50:44","guid":{"rendered":"https:\/\/buhave.com\/courses\/?p=567"},"modified":"2025-05-20T12:57:38","modified_gmt":"2025-05-20T12:57:38","slug":"real-world-applications","status":"publish","type":"post","link":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/","title":{"rendered":"Real-World Applications"},"content":{"rendered":"

Build an interactive to-do list
\n<\/span><\/h2>\n

1. HTML Structure<\/h3>\n

The HTML will consist of the basic layout for the to-do list. We\u2019ll need an input field, a button to add new tasks, and a list to display the tasks.<\/p>\n

<!DOCTYPE html><\/em>
\n<html lang=”en”><\/em>
\n<head><\/em>
\n<meta charset=”UTF-8″><\/em>
\n<meta name=”viewport” content=”width=device-width, initial-scale=1.0″><\/em>
\n<title>To-Do List<\/title><\/em>
\n<link rel=”stylesheet” href=”styles.css”><\/em>
\n<\/head><\/em>
\n<body><\/em>
\n<div class=”todo-container”><\/em>
\n<h1>My To-Do List<\/h1><\/em>
\n<input type=”text” id=”taskInput” placeholder=”Enter a new task”><\/em>
\n<button id=”addTaskButton”>Add Task<\/button><\/em>
\n<ul id=”taskList”><\/ul><\/em>
\n<\/div><\/em><\/p>\n

<script src=”script.js”><\/script><\/em>
\n<\/body><\/em>
\n<\/html><\/em><\/p>\n

2. CSS Styling<\/h3>\n

The CSS will style the to-do list, making it visually appealing.<\/p>\n

\/* styles.css *\/<\/em>
\nbody {<\/em>
\nfont-family: Arial, sans-serif;<\/em>
\nbackground-color: #f4f4f9;<\/em>
\ndisplay: flex;<\/em>
\njustify-content: center;<\/em>
\nalign-items: center;<\/em>
\nheight: 100vh;<\/em>
\nmargin: 0;<\/em>
\n}<\/em><\/p>\n

.todo-container {<\/em>
\nbackground-color: #fff;<\/em>
\npadding: 20px;<\/em>
\nbox-shadow: 0 0 10px rgba(0, 0, 0, 0.1);<\/em>
\nborder-radius: 8px;<\/em>
\nwidth: 300px;<\/em>
\n}<\/em><\/p>\n

h1 {<\/em>
\ntext-align: center;<\/em>
\n}<\/em><\/p>\n

input, button {<\/em>
\nwidth: 100%;<\/em>
\npadding: 10px;<\/em>
\nmargin: 5px 0;<\/em>
\nborder: 1px solid #ccc;<\/em>
\nborder-radius: 4px;<\/em>
\n}<\/em><\/p>\n

button {<\/em>
\nbackground-color: #4CAF50;<\/em>
\ncolor: white;<\/em>
\nborder: none;<\/em>
\ncursor: pointer;<\/em>
\n}<\/em><\/p>\n

button:hover {<\/em>
\nbackground-color: #45a049;<\/em>
\n}<\/em><\/p>\n

ul {<\/em>
\nlist-style-type: none;<\/em>
\npadding-left: 0;<\/em>
\n}<\/em><\/p>\n

li {<\/em>
\nbackground-color: #f1f1f1;<\/em>
\nmargin: 5px 0;<\/em>
\npadding: 10px;<\/em>
\nborder-radius: 4px;<\/em>
\ndisplay: flex;<\/em>
\njustify-content: space-between;<\/em>
\nalign-items: center;<\/em>
\n}<\/em><\/p>\n

li.done {<\/em>
\ntext-decoration: line-through;<\/em>
\ncolor: #888;<\/em>
\n}<\/em><\/p>\n

.delete {<\/em>
\nbackground-color: #ff4d4d;<\/em>
\ncolor: white;<\/em>
\nborder: none;<\/em>
\nborder-radius: 4px;<\/em>
\npadding: 5px;<\/em>
\ncursor: pointer;<\/em>
\n}<\/em><\/p>\n

3. JavaScript Functionality<\/h3>\n

Now, let\u2019s implement the functionality to add tasks, mark them as complete, and delete tasks.<\/p>\n

\/\/ script.js<\/em><\/p>\n

\/\/ Get references to DOM elements<\/em>
\nconst taskInput = document.getElementById(‘taskInput’);<\/em>
\nconst addTaskButton = document.getElementById(‘addTaskButton’);<\/em>
\nconst taskList = document.getElementById(‘taskList’);<\/em><\/p>\n

\/\/ Function to create a new task item<\/em>
\nfunction createTask(taskContent) {<\/em>
\n\/\/ Create list item<\/em>
\nconst taskItem = document.createElement(‘li’);<\/em><\/p>\n

\/\/ Create a text node for the task content<\/em>
\nconst taskText = document.createElement(‘span’);<\/em>
\ntaskText.textContent = taskContent;<\/em>
\ntaskItem.appendChild(taskText);<\/em><\/p>\n

\/\/ Create a delete button<\/em>
\nconst deleteButton = document.createElement(‘button’);<\/em>
\ndeleteButton.textContent = ‘Delete’;<\/em>
\ndeleteButton.classList.add(‘delete’);<\/em>
\ntaskItem.appendChild(deleteButton);<\/em><\/p>\n

\/\/ Append the task item to the task list<\/em>
\ntaskList.appendChild(taskItem);<\/em><\/p>\n

\/\/ Mark task as done when clicked<\/em>
\ntaskItem.addEventListener(‘click’, () => {<\/em>
\ntaskItem.classList.toggle(‘done’);<\/em>
\n});<\/em><\/p>\n

\/\/ Delete task when delete button is clicked<\/em>
\ndeleteButton.addEventListener(‘click’, (event) => {<\/em>
\nevent.stopPropagation(); \/\/ Prevent the click event from propagating to taskItem<\/em>
\ntaskList.removeChild(taskItem);<\/em>
\n});<\/em>
\n}<\/em><\/p>\n

\/\/ Add task when the button is clicked<\/em>
\naddTaskButton.addEventListener(‘click’, () => {<\/em>
\nconst taskContent = taskInput.value.trim();<\/em><\/p>\n

if (taskContent) {<\/em>
\ncreateTask(taskContent);<\/em>
\ntaskInput.value = ”; \/\/ Clear the input field<\/em>
\n}<\/em>
\n});<\/em><\/p>\n

\/\/ Optionally, allow the user to press Enter to add a task<\/em>
\ntaskInput.addEventListener(‘keypress’, (event) => {<\/em>
\nif (event.key === ‘Enter’) {<\/em>
\naddTaskButton.click();<\/em>
\n}<\/em>
\n});<\/em><\/p>\n

4. How It Works:<\/h3>\n
    \n
  • HTML: We set up the basic structure for the to-do list, including an input field for entering tasks, a button to add tasks, and a list to display them.<\/li>\n
  • CSS: Provides a simple yet attractive design. Tasks are styled with a background color, padding, and margins. We also added hover effects and styles for completed tasks.<\/li>\n
  • JavaScript: The script manages the core functionality:<\/li>\n
  • Adding tasks: When the “Add Task” button is clicked or Enter is pressed, the task is added to the list.<\/li>\n
  • Marking tasks as complete: Clicking on a task toggles its completion, applying a line-through effect.<\/li>\n
  • Deleting tasks: The “Delete” button beside each task allows the user to remove the task from the list.<\/li>\n<\/ul>\n

    5. Improvement Ideas:<\/h3>\n
      \n
    • Persistent Storage: Save the tasks to localStorage so they persist after refreshing the page.<\/li>\n
    • Editing Tasks: Allow users to edit task content after it has been added.<\/li>\n
    • Styling Enhancements: Add icons or animations to improve the UX.<\/li>\n<\/ul>\n

      Recap:<\/strong><\/p>\n

      You\u2019ve now built a functional interactive to-do list that allows users to:<\/p>\n

        \n
      • Add tasks<\/li>\n
      • Mark tasks as complete<\/li>\n
      • Delete tasks<\/li>\n<\/ul>\n

        This is a great starting point for learning about JavaScript event handling, DOM manipulation, and user interactions.<\/p>\n

        Form Validation<\/h2>\n

        Form validation is an essential process to ensure that the data submitted by the user is in the correct format and meets the expected criteria. It can be done both on the client-side (using JavaScript) and server-side (on the server after the form is submitted). Here, we’ll focus on client-side form validation using JavaScript.<\/p>\n

        1. Basic Form Structure (HTML)<\/h3>\n

        Here is an example of a simple form that asks for the user\u2019s name, email, and password.<\/p>\n

        <!DOCTYPE html><\/em>
        \n<html lang=”en”><\/em>
        \n<head><\/em>
        \n<meta charset=”UTF-8″><\/em>
        \n<meta name=”viewport” content=”width=device-width, initial-scale=1.0″><\/em>
        \n<title>Form Validation<\/title><\/em>
        \n<link rel=”stylesheet” href=”styles.css”><\/em>
        \n<\/head><\/em>
        \n<body><\/em><\/p>\n

        <div class=”form-container”><\/em>
        \n<h2>Sign Up Form<\/h2><\/em>
        \n<form id=”signupForm”><\/em>
        \n<label for=”name”>Name:<\/label><\/em>
        \n<input type=”text” id=”name” name=”name” required><\/em>
        \n<span class=”error” id=”nameError”><\/span><\/em><\/p>\n

        <label for=”email”>Email:<\/label><\/em>
        \n<input type=”email” id=”email” name=”email” required><\/em>
        \n<span class=”error” id=”emailError”><\/span><\/em><\/p>\n

        <label for=”password”>Password:<\/label><\/em>
        \n<input type=”password” id=”password” name=”password” required><\/em>
        \n<span class=”error” id=”passwordError”><\/span><\/em><\/p>\n

        <button type=”submit”>Submit<\/button><\/em>
        \n<\/form><\/em>
        \n<\/div><\/em><\/p>\n

        <script src=”script.js”><\/script><\/em>
        \n<\/body><\/em>
        \n<\/html><\/em><\/p>\n

        2. Basic CSS Styling<\/h3>\n

        We will style the form and error messages to make them more visually distinct.<\/p>\n

        \/* styles.css *\/<\/em>
        \nbody {<\/em>
        \nfont-family: Arial, sans-serif;<\/em>
        \nbackground-color: #f8f9fa;<\/em>
        \ndisplay: flex;<\/em>
        \njustify-content: center;<\/em>
        \nalign-items: center;<\/em>
        \nheight: 100vh;<\/em>
        \nmargin: 0;<\/em>
        \n}<\/em><\/p>\n

        .form-container {<\/em>
        \nbackground-color: #fff;<\/em>
        \npadding: 20px;<\/em>
        \nbox-shadow: 0 0 10px rgba(0, 0, 0, 0.1);<\/em>
        \nwidth: 300px;<\/em>
        \nborder-radius: 8px;<\/em>
        \n}<\/em><\/p>\n

        h2 {<\/em>
        \ntext-align: center;<\/em>
        \n}<\/em><\/p>\n

        label {<\/em>
        \ndisplay: block;<\/em>
        \nmargin: 10px 0 5px;<\/em>
        \n}<\/em><\/p>\n

        input {<\/em>
        \nwidth: 100%;<\/em>
        \npadding: 10px;<\/em>
        \nmargin-bottom: 15px;<\/em>
        \nborder: 1px solid #ccc;<\/em>
        \nborder-radius: 4px;<\/em>
        \n}<\/em><\/p>\n

        button {<\/em>
        \nbackground-color: #4CAF50;<\/em>
        \ncolor: white;<\/em>
        \nwidth: 100%;<\/em>
        \npadding: 10px;<\/em>
        \nborder: none;<\/em>
        \nborder-radius: 4px;<\/em>
        \ncursor: pointer;<\/em>
        \n}<\/em><\/p>\n

        button:hover {<\/em>
        \nbackground-color: #45a049;<\/em>
        \n}<\/em><\/p>\n

        .error {<\/em>
        \ncolor: red;<\/em>
        \nfont-size: 12px;<\/em>
        \n}<\/em><\/p>\n

        3. JavaScript for Form Validation<\/h3>\n

        Now, let\u2019s implement JavaScript to validate the form before submission.<\/p>\n

        \/\/ script.js<\/em><\/p>\n

        \/\/ Get form and input elements<\/em>
        \nconst form = document.getElementById(‘signupForm’);<\/em>
        \nconst nameInput = document.getElementById(‘name’);<\/em>
        \nconst emailInput = document.getElementById(’email’);<\/em>
        \nconst passwordInput = document.getElementById(‘password’);<\/em><\/p>\n

        \/\/ Get error display elements<\/em>
        \nconst nameError = document.getElementById(‘nameError’);<\/em>
        \nconst emailError = document.getElementById(’emailError’);<\/em>
        \nconst passwordError = document.getElementById(‘passwordError’);<\/em><\/p>\n

        \/\/ Validate name<\/em>
        \nfunction validateName() {<\/em>
        \nif (nameInput.value.trim() === ”) {<\/em>
        \nnameError.textContent = ‘Name is required.’;<\/em>
        \nreturn false;<\/em>
        \n} else {<\/em>
        \nnameError.textContent = ”;<\/em>
        \nreturn true;<\/em>
        \n}<\/em>
        \n}<\/em><\/p>\n

        \/\/ Validate email using regular expression (Regex)<\/em>
        \nfunction validateEmail() {<\/em>
        \nconst emailPattern = \/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$\/;<\/em>
        \nif (!emailPattern.test(emailInput.value)) {<\/em>
        \nemailError.textContent = ‘Please enter a valid email address.’;<\/em>
        \nreturn false;<\/em>
        \n} else {<\/em>
        \nemailError.textContent = ”;<\/em>
        \nreturn true;<\/em>
        \n}<\/em>
        \n}<\/em><\/p>\n

        \/\/ Validate password (min 8 characters)<\/em>
        \nfunction validatePassword() {<\/em>
        \nif (passwordInput.value.length < 8) {<\/em>
        \npasswordError.textContent = ‘Password must be at least 8 characters long.’;<\/em>
        \nreturn false;<\/em>
        \n} else {<\/em>
        \npasswordError.textContent = ”;<\/em>
        \nreturn true;<\/em>
        \n}<\/em>
        \n}<\/em><\/p>\n

        \/\/ Form submission handler<\/em>
        \nform.addEventListener(‘submit’, function(event) {<\/em>
        \n\/\/ Prevent form submission if any field is invalid<\/em>
        \nevent.preventDefault();<\/em><\/p>\n

        \/\/ Validate all fields<\/em>
        \nconst isNameValid = validateName();<\/em>
        \nconst isEmailValid = validateEmail();<\/em>
        \nconst isPasswordValid = validatePassword();<\/em><\/p>\n

        \/\/ If all fields are valid, submit the form<\/em>
        \nif (isNameValid && isEmailValid && isPasswordValid) {<\/em>
        \nalert(‘Form submitted successfully!’);<\/em>
        \nform.reset(); \/\/ Reset form fields<\/em>
        \n}<\/em>
        \n});<\/em><\/p>\n

        \/\/ Event listeners for real-time validation<\/em>
        \nnameInput.addEventListener(‘input’, validateName);<\/em>
        \nemailInput.addEventListener(‘input’, validateEmail);<\/em>
        \npasswordInput.addEventListener(‘input’, validatePassword);<\/em><\/p>\n

        4. How the Validation Works:<\/h3>\n

        1. Validate Name:<\/strong><\/p>\n

          \n
        • If the name field is empty, an error message will appear saying “Name is required.”<\/li>\n<\/ul>\n

          2. Validate Email:<\/strong><\/p>\n

            \n
          • Uses a regular expression to ensure the email is in a valid format (e.g., someone@example.com).<\/li>\n<\/ul>\n

            3. Validate Password:<\/strong><\/p>\n

              \n
            • Checks if the password is at least 8 characters long. If not, an error message will prompt the user.<\/li>\n<\/ul>\n

              4. Form Submission:<\/strong><\/p>\n

              When the form is submitted, we prevent its default action (actual submission) using event.preventDefault(). Then, each field is validated, and if any validation fails, the corresponding error message is shown. Only if all fields are valid will the form be submitted (or we show a success alert in this case).<\/p>\n

              5. Additional Validation Tips:<\/h3>\n
                \n
              • Client-Side vs Server-Side Validation: While client-side validation enhances user experience by catching errors before submission, server-side validation is still critical for security, as users can bypass client-side checks.<\/li>\n
              • Real-time Feedback: As seen in this example, real-time validation (while the user is typing) improves user experience by guiding them immediately when they enter incorrect data.<\/li>\n
              • Regex: Regular expressions are powerful for validating emails, phone numbers, and more. You can find more complex patterns for various use cases.<\/li>\n<\/ul>\n

                Recap:<\/strong><\/p>\n

                  \n
                • You\u2019ve now built a simple form validation system that:<\/li>\n
                • Validates user input for Name, Email, and Password.<\/li>\n
                • Provides real-time and on-submit error messages.<\/li>\n
                • Prevents form submission if the data is invalid.<\/li>\n
                • This basic setup can be extended with additional features like:<\/li>\n
                • Confirm password field for matching.<\/li>\n
                • Password strength validation (e.g., include uppercase, numbers).<\/li>\n
                • More complex error handling (e.g., AJAX error responses).<\/li>\n<\/ul>\n

                  Simple Calculator<\/h2>\n

                  A simple calculator allows users to perform basic arithmetic operations like addition, subtraction, multiplication, and division. It takes input from users, processes the operation when buttons are clicked, and displays the result.<\/p>\n

                  1. Basic HTML Structure<\/h3>\n

                  Create the interface:<\/strong> display screen and buttons.<\/p>\n

                  <!DOCTYPE html><\/em>
                  \n<html lang=”en”><\/em>
                  \n<head><\/em>
                  \n<meta charset=”UTF-8″><\/em>
                  \n<meta name=”viewport” content=”width=device-width, initial-scale=1″><\/em>
                  \n<title>Simple Calculator<\/title><\/em>
                  \n<link rel=”stylesheet” href=”style.css”><\/em>
                  \n<\/head><\/em>
                  \n<body><\/em><\/p>\n

                  <div class=”calculator”><\/em>
                  \n<input type=”text” id=”display” disabled><\/em>
                  \n<div class=”buttons”><\/em>
                  \n<button onclick=”clearDisplay()”>C<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘\/’)”>\/<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘*’)”>*<\/button><\/em>
                  \n<button onclick=”deleteLast()”>\u232b<\/button><\/em><\/p>\n

                  <button onclick=”appendCharacter(‘7’)”>7<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘8’)”>8<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘9’)”>9<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘-‘)”>-<\/button><\/em><\/p>\n

                  <button onclick=”appendCharacter(‘4’)”>4<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘5’)”>5<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘6’)”>6<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘+’)”>+<\/button><\/em><\/p>\n

                  <button onclick=”appendCharacter(‘1’)”>1<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘2’)”>2<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘3’)”>3<\/button><\/em>
                  \n<button onclick=”calculate()”>=<\/button><\/em><\/p>\n

                  <button onclick=”appendCharacter(‘0’)” class=”zero”>0<\/button><\/em>
                  \n<button onclick=”appendCharacter(‘.’)”>.<\/button><\/em>
                  \n<\/div><\/em>
                  \n<\/div><\/em><\/p>\n

                  <script src=”script.js”><\/script><\/em>
                  \n<\/body><\/em>
                  \n<\/html><\/em><\/p>\n

                  2. Basic CSS Styling<\/h3>\n

                  Simple styling for layout and visual design.<\/p>\n

                  \/* style.css *\/<\/em>
                  \nbody {<\/em>
                  \ndisplay: flex;<\/em>
                  \njustify-content: center;<\/em>
                  \nalign-items: center;<\/em>
                  \nheight: 100vh;<\/em>
                  \nbackground: #e3f2fd;<\/em>
                  \nmargin: 0;<\/em>
                  \n}<\/em><\/p>\n

                  .calculator {<\/em>
                  \nbackground: #fff;<\/em>
                  \npadding: 20px;<\/em>
                  \nborder-radius: 15px;<\/em>
                  \nbox-shadow: 0 0 10px rgba(0, 0, 0, 0.1);<\/em>
                  \n}<\/em><\/p>\n

                  #display {<\/em>
                  \nwidth: 100%;<\/em>
                  \nheight: 50px;<\/em>
                  \nmargin-bottom: 10px;<\/em>
                  \ntext-align: right;<\/em>
                  \nfont-size: 1.5rem;<\/em>
                  \npadding: 10px;<\/em>
                  \nborder: 1px solid #ccc;<\/em>
                  \nborder-radius: 8px;<\/em>
                  \n}<\/em><\/p>\n

                  .buttons {<\/em>
                  \ndisplay: grid;<\/em>
                  \ngrid-template-columns: repeat(4, 70px);<\/em>
                  \ngap: 10px;<\/em>
                  \n}<\/em><\/p>\n

                  button {<\/em>
                  \npadding: 15px;<\/em>
                  \nfont-size: 1.2rem;<\/em>
                  \nborder: none;<\/em>
                  \nbackground-color: #90caf9;<\/em>
                  \nborder-radius: 8px;<\/em>
                  \ncursor: pointer;<\/em>
                  \n}<\/em><\/p>\n

                  button:hover {<\/em>
                  \nbackground-color: #64b5f6;<\/em>
                  \n}<\/em><\/p>\n

                  .zero {<\/em>
                  \ngrid-column: span 2;<\/em>
                  \n}<\/em><\/p>\n

                  3. JavaScript for Calculator Logic<\/h3>\n

                  The code handles button clicks, operations, and results.<\/p>\n

                  \/\/ script.js<\/em><\/p>\n

                  \/\/ Get the display element<\/em>
                  \nconst display = document.getElementById(‘display’);<\/em><\/p>\n

                  \/\/ Function to append a character (number\/operator)<\/em>
                  \nfunction appendCharacter(character) {<\/em>
                  \ndisplay.value += character;<\/em>
                  \n}<\/em><\/p>\n

                  \/\/ Function to clear the display<\/em>
                  \nfunction clearDisplay() {<\/em>
                  \ndisplay.value = ”;<\/em>
                  \n}<\/em><\/p>\n

                  \/\/ Function to delete the last character<\/em>
                  \nfunction deleteLast() {<\/em>
                  \ndisplay.value = display.value.slice(0, -1);<\/em>
                  \n}<\/em><\/p>\n

                  \/\/ Function to calculate the result<\/em>
                  \nfunction calculate() {<\/em>
                  \ntry {<\/em>
                  \ndisplay.value = eval(display.value);<\/em>
                  \n} catch (error) {<\/em>
                  \nalert(‘Invalid Expression’);<\/em>
                  \n}<\/em>
                  \n}<\/em><\/p>\n

                  4. How This Calculator Works<\/h3>\n
                    \n
                  • Display (input): Shows the current expression or result.<\/li>\n
                  • Button Clicks: Numbers and operators are appended to the display.<\/li>\n
                  • Clear (C): Empties the display completely.<\/li>\n
                  • Backspace (\u232b): Deletes the last character from the display.<\/li>\n
                  • Equals (=): Evaluates the full mathematical expression using eval() and shows the result.<\/li>\n
                  • Error Handling: If the expression is invalid (e.g., wrong syntax), an alert appears.<\/li>\n<\/ul>\n

                    5. Important Notes<\/h3>\n
                      \n
                    • Eval() is easy but not safe for real-world apps (it executes any JavaScript code).<\/li>\n
                    • In production, it’s better to parse and evaluate the expression manually or use a library.<\/li>\n
                    • Always validate input if you extend this calculator!<\/li>\n<\/ul>\n

                      Example:<\/strong><\/p>\n

                        \n
                      • Click 5<\/li>\n
                      • Click +<\/li>\n
                      • Click 7<\/li>\n
                      • Click =<\/li>\n
                      • Output \u2192 12<\/li>\n<\/ul>\n

                        Weather app using API<\/h2>\n

                        A Weather App allows users to input a city name and fetch real-time weather data (like temperature, condition, humidity) from a public API (like OpenWeatherMap) and display it cleanly.<\/p>\n

                        1. Setup: Basic HTML Structure<\/h3>\n

                        Create a simple input field, search button, and an area to show weather information.<\/p>\n

                        <!DOCTYPE html><\/em>
                        \n<html lang=”en”><\/em>
                        \n<head><\/em>
                        \n<meta charset=”UTF-8″><\/em>
                        \n<meta name=”viewport” content=”width=device-width, initial-scale=1″><\/em>
                        \n<title>Weather App<\/title><\/em>
                        \n<link rel=”stylesheet” href=”style.css”><\/em>
                        \n<\/head><\/em>
                        \n<body><\/em><\/p>\n

                        <div class=”weather-app”><\/em>
                        \n<h1>Weather Checker<\/h1><\/em>
                        \n<input type=”text” id=”cityInput” placeholder=”Enter city name”><\/em>
                        \n<button onclick=”getWeather()”>Search<\/button><\/em><\/p>\n

                        <div class=”weather-info” id=”weatherInfo”><\/em>
                        \n<!– Weather results will be inserted here –><\/em>
                        \n<\/div><\/em>
                        \n<\/div><\/em><\/p>\n

                        <script src=”script.js”><\/script><\/em>
                        \n<\/body><\/em>
                        \n<\/html><\/em><\/p>\n

                        2. Basic CSS Styling<\/h3>\n

                        Style the app to make it visually appealing.<\/p>\n

                        \/* style.css *\/<\/em>
                        \nbody {<\/em>
                        \ndisplay: flex;<\/em>
                        \njustify-content: center;<\/em>
                        \nalign-items: center;<\/em>
                        \nmin-height: 100vh;<\/em>
                        \nbackground: linear-gradient(#74ebd5, #ACB6E5);<\/em>
                        \nmargin: 0;<\/em>
                        \nfont-family: Arial, sans-serif;<\/em>
                        \n}<\/em><\/p>\n

                        .weather-app {<\/em>
                        \ntext-align: center;<\/em>
                        \nbackground: #fff;<\/em>
                        \npadding: 30px;<\/em>
                        \nborder-radius: 15px;<\/em>
                        \nbox-shadow: 0 4px 8px rgba(0,0,0,0.1);<\/em>
                        \n}<\/em><\/p>\n

                        input, button {<\/em>
                        \npadding: 10px;<\/em>
                        \nmargin: 10px;<\/em>
                        \nborder: none;<\/em>
                        \nborder-radius: 8px;<\/em>
                        \nfont-size: 1rem;<\/em>
                        \n}<\/em><\/p>\n

                        button {<\/em>
                        \nbackground-color: #4fc3f7;<\/em>
                        \ncolor: #fff;<\/em>
                        \ncursor: pointer;<\/em>
                        \n}<\/em><\/p>\n

                        button:hover {<\/em>
                        \nbackground-color: #039be5;<\/em>
                        \n}<\/em><\/p>\n

                        .weather-info {<\/em>
                        \nmargin-top: 20px;<\/em>
                        \nfont-size: 1.2rem;<\/em>
                        \n}<\/em><\/p>\n

                        3. JavaScript: Fetching Weather Data<\/h3>\n

                        Use JavaScript to connect to the API, fetch weather, and display it.<\/p>\n

                        \/\/ script.js<\/em><\/p>\n

                        const apiKey = ‘YOUR_API_KEY’; \/\/ Replace with your actual OpenWeatherMap API key<\/em><\/p>\n

                        async function getWeather() {<\/em>
                        \nconst city = document.getElementById(‘cityInput’).value;<\/em>
                        \nconst weatherInfo = document.getElementById(‘weatherInfo’);<\/em><\/p>\n

                        if (!city) {<\/em>
                        \nweatherInfo.innerHTML = `<p>Please enter a city name.<\/p>`;<\/em>
                        \nreturn;<\/em>
                        \n}<\/em><\/p>\n

                        const url = `https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}&appid=${apiKey}&units=metric`;<\/em><\/p>\n

                        try {<\/em>
                        \nconst response = await fetch(url);<\/em>
                        \nif (!response.ok) {<\/em>
                        \nthrow new Error(‘City not found’);<\/em>
                        \n}<\/em>
                        \nconst data = await response.json();<\/em><\/p>\n

                        const temperature = data.main.temp;<\/em>
                        \nconst description = data.weather[0].description;<\/em>
                        \nconst humidity = data.main.humidity;<\/em>
                        \nconst windSpeed = data.wind.speed;<\/em><\/p>\n

                        weatherInfo.innerHTML = `<\/em>
                        \n<h2>${data.name}, ${data.sys.country}<\/h2><\/em>
                        \n<p><strong>Temperature:<\/strong> ${temperature} \u00b0C<\/p><\/em>
                        \n<p><strong>Condition:<\/strong> ${description}<\/p><\/em>
                        \n<p><strong>Humidity:<\/strong> ${humidity}%<\/p><\/em>
                        \n<p><strong>Wind Speed:<\/strong> ${windSpeed} m\/s<\/p><\/em>
                        \n`;<\/em>
                        \n} catch (error) {<\/em>
                        \nweatherInfo.innerHTML = `<p>Error: ${error.message}<\/p>`;<\/em>
                        \n}<\/em>
                        \n}<\/em><\/p>\n

                        4. How This App Works<\/h3>\n
                          \n
                        • User Input: User types a city name and clicks “Search.”<\/li>\n
                        • API Request: The app sends a GET request to OpenWeatherMap’s API with the city name and your API key.<\/li>\n
                        • Data Parsing: Receives weather data like temperature, condition, humidity, and wind speed.<\/li>\n
                        • Display: The data is inserted into the HTML dynamically using JavaScript.<\/li>\n
                        • Error Handling: If the city isn’t found or there’s a network error, a user-friendly message is shown.<\/li>\n<\/ul>\n

                          5. Important Points<\/h3>\n
                            \n
                          • API Key: You must sign up at OpenWeatherMap and get a free API key.<\/li>\n
                          • Security: Never expose API keys in production. Use a backend if needed.<\/li>\n<\/ul>\n

                            Enhancements:<\/strong><\/p>\n

                              \n
                            • Add weather icons.<\/li>\n
                            • Add loading spinners.<\/li>\n
                            • Handle edge cases (e.g., empty input, invalid city).<\/li>\n
                            • Convert temperature units (\u00b0C\/\u00b0F toggle).<\/li>\n<\/ul>\n

                              Example Walkthrough:<\/strong><\/p>\n

                                \n
                              • Type “London” \u2192 Click Search<\/li>\n
                              • App fetches data like:<\/li>\n
                              • Temperature: 15\u00b0C<\/li>\n
                              • Condition: Clear sky<\/li>\n
                              • Humidity: 60%<\/li>\n
                              • Wind Speed: 3.5 m\/s<\/li>\n
                              • Data shows instantly inside your web page.<\/li>\n<\/ul>\n

                                DOM-based mini-projects<\/h2>\n

                                There are many steps of DOM-Based Mini-Projects<\/h3>\n

                                1. To-Do List App<\/strong><\/p>\n

                                  \n
                                • Concept: Add, delete, and mark tasks as complete.<\/li>\n
                                • Key DOM skills: createElement, appendChild, removeChild, classList.toggle, event delegation.<\/li>\n
                                • Enhancements: Save tasks in localStorage, filter tasks (all\/active\/completed).<\/li>\n<\/ul>\n

                                  2. Interactive Counter<\/strong><\/p>\n

                                    \n
                                  • Concept: Increase, decrease, or reset a counter value.<\/li>\n
                                  • Key DOM skills: Event listeners (click), text content manipulation (innerText or textContent).<\/li>\n
                                  • Enhancements: Color change based on positive or negative value.<\/li>\n<\/ul>\n

                                    3. Accordion Component<\/strong><\/p>\n

                                      \n
                                    • Concept: Expand and collapse sections when clicked.<\/li>\n
                                    • Key DOM skills: classList.toggle, querySelectorAll, event bubbling.<\/li>\n
                                    • Enhancements: Allow only one section to open at a time (single open accordion).<\/li>\n<\/ul>\n

                                      4. Image Slider\/Carousel<\/strong><\/p>\n

                                        \n
                                      • Concept: Cycle through images manually (next\/prev buttons) or automatically.<\/li>\n
                                      • Key DOM skills: src attribute manipulation, event listeners, setInterval.<\/li>\n
                                      • Enhancements: Add animation transitions, thumbnails preview.<\/li>\n<\/ul>\n

                                        5. Modal Popup<\/strong><\/p>\n

                                          \n
                                        • Concept: Open and close a modal window with a button click.<\/li>\n
                                        • Key DOM skills: classList.add\/remove, addEventListener, keydown events (ESC to close).<\/li>\n
                                        • Enhancements: Click outside the modal to close, trap focus inside modal for accessibility.<\/li>\n<\/ul>\n

                                          6. Live Character Counter<\/strong><\/p>\n

                                            \n
                                          • Concept: Show the number of characters typed into a textarea.<\/li>\n
                                          • Key DOM skills: input event, value property, updating DOM elements live.<\/li>\n
                                          • Enhancements: Warn when reaching a character limit.<\/li>\n<\/ul>\n

                                            7. Password Show\/Hide Toggle<\/strong><\/p>\n

                                              \n
                                            • Concept: Toggle password visibility in an input field.<\/li>\n
                                            • Key DOM skills: type attribute manipulation, addEventListener.<\/li>\n
                                            • Enhancements: Add an eye icon toggle.<\/li>\n<\/ul>\n

                                              8. Theme Switcher (Dark\/Light Mode)<\/strong><\/p>\n

                                                \n
                                              • Concept: Switch website themes dynamically.<\/li>\n
                                              • Key DOM skills: classList.toggle, changing CSS variables via JavaScript.<\/li>\n
                                              • Enhancements: Save user’s choice in localStorage.<\/li>\n<\/ul>\n

                                                9. Form Validation<\/strong><\/p>\n

                                                  \n
                                                • Concept: Validate input fields (e.g., email, password strength) before submission.<\/li>\n
                                                • Key DOM skills: submit event, preventDefault(), input event, dynamic error messages.<\/li>\n
                                                • Enhancements: Real-time validation, highlight valid\/invalid fields.<\/li>\n<\/ul>\n

                                                  10. Drag and Drop List<\/strong><\/p>\n

                                                    \n
                                                  • Concept: Rearrange list items by dragging and dropping.<\/li>\n
                                                  • Key DOM skills: dragstart, dragover, drop, manipulating DOM positions.<\/li>\n
                                                  • Enhancements: Save new order to local storage.<\/li>\n<\/ul>\n

                                                    11. Quiz Application<\/strong><\/p>\n

                                                      \n
                                                    • Concept: Display a series of questions and evaluate answers.<\/li>\n
                                                    • Key DOM skills: Dynamically rendering questions, handling form submissions, scoring.<\/li>\n
                                                    • Enhancements: Timer countdown, high score board.<\/li>\n<\/ul>\n

                                                      12. Random Joke Generator<\/strong><\/p>\n

                                                        \n
                                                      • Concept: Fetch and display a random joke with a button click.<\/li>\n
                                                      • Key DOM skills: fetch API, DOM update with fetched data.<\/li>\n
                                                      • Enhancements: Loading spinner while fetching, error handling.<\/li>\n<\/ul>\n

                                                        13. Countdown Timer<\/strong><\/p>\n

                                                          \n
                                                        • Concept: Countdown to a specific date\/time.<\/li>\n
                                                        • Key DOM skills: setInterval, DOM updates every second.<\/li>\n
                                                        • Enhancements: Display different messages when the countdown ends.<\/li>\n<\/ul>\n

                                                          14. Typing Speed Test<\/strong><\/p>\n

                                                            \n
                                                          • Concept: Measure how fast the user types a given sentence.<\/li>\n
                                                          • Key DOM skills: keydown, timer control, dynamic text checking.<\/li>\n
                                                          • Enhancements: Highlight mistakes, leaderboard system.<\/li>\n<\/ul>\n

                                                            15. Weather App (API Project)<\/strong><\/p>\n

                                                              \n
                                                            • Concept: Enter a city name and display weather info.<\/li>\n
                                                            • Key DOM skills: fetch API, dynamically inserting fetched JSON data.<\/li>\n
                                                            • Enhancements: Add weather icons, error messages for invalid city names.<\/li>\n<\/ul>\n

                                                              Would you like me to also suggest:<\/strong><\/p>\n

                                                                \n
                                                              • A recommended order (easy \u2794 hard)?<\/li>\n
                                                              • Or starter templates for any of these projects?<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                                                                Build an interactive to-do list 1. HTML Structure The HTML will consist of the basic layout for the to-do list. We\u2019ll need an input field, a button to add new tasks, and a list to display the tasks. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″><\/p>\n","protected":false},"author":1,"featured_media":568,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-567","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java-script"],"yoast_head":"\nReal-World Applications -<\/title>\n<meta name=\"description\" content=\"Real-world application refers to using concepts or skills in practical, everyday software development or business scenarios.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Real-World Applications -\" \/>\n<meta property=\"og:description\" content=\"Real-world application refers to using concepts or skills in practical, everyday software development or business scenarios.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/\" \/>\n<meta property=\"og:site_name\" content=\"BUHAVE\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BeYouHave\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/naveedsafdarawan\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T10:50:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-20T12:57:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Real-World-Applications.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Naveed Safdar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Naveed Safdar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/\"},\"author\":{\"name\":\"Naveed Safdar\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\"},\"headline\":\"Real-World Applications\",\"datePublished\":\"2025-05-19T10:50:44+00:00\",\"dateModified\":\"2025-05-20T12:57:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/\"},\"wordCount\":3103,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Real-World-Applications.webp\",\"articleSection\":[\"Java Script Course\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/\",\"name\":\"Real-World Applications -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Real-World-Applications.webp\",\"datePublished\":\"2025-05-19T10:50:44+00:00\",\"dateModified\":\"2025-05-20T12:57:38+00:00\",\"description\":\"Real-world application refers to using concepts or skills in practical, everyday software development or business scenarios.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/#primaryimage\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Real-World-Applications.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Real-World-Applications.webp\",\"width\":1200,\"height\":628,\"caption\":\"Real-World Applications\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/real-world-applications\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Courses\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Java Script Course\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/learn\\\/java-script\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Real-World Applications\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"name\":\"BUHAVE\",\"description\":\"Courses - Learn Online for Free\",\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/buhave.com\\\/courses\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\",\"name\":\"BUHAVE\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"width\":375,\"height\":75,\"caption\":\"BUHAVE\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/BeYouHave\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/buhave\",\"https:\\\/\\\/www.youtube.com\\\/@buhave\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\",\"name\":\"Naveed Safdar\",\"description\":\"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/naveedsafdar\\\/\",\"https:\\\/\\\/www.facebook.com\\\/naveedsafdarawan\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@naveedsafdar\"],\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/author\\\/naveed-safdar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Real-World Applications -","description":"Real-world application refers to using concepts or skills in practical, everyday software development or business scenarios.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/","og_locale":"en_US","og_type":"article","og_title":"Real-World Applications -","og_description":"Real-world application refers to using concepts or skills in practical, everyday software development or business scenarios.","og_url":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/","og_site_name":"BUHAVE","article_publisher":"https:\/\/www.facebook.com\/BeYouHave\/","article_author":"https:\/\/www.facebook.com\/naveedsafdarawan\/","article_published_time":"2025-05-19T10:50:44+00:00","article_modified_time":"2025-05-20T12:57:38+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Real-World-Applications.webp","type":"image\/webp"}],"author":"Naveed Safdar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Naveed Safdar","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/#article","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/"},"author":{"name":"Naveed Safdar","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca"},"headline":"Real-World Applications","datePublished":"2025-05-19T10:50:44+00:00","dateModified":"2025-05-20T12:57:38+00:00","mainEntityOfPage":{"@id":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/"},"wordCount":3103,"commentCount":0,"publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"image":{"@id":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Real-World-Applications.webp","articleSection":["Java Script Course"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/","url":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/","name":"Real-World Applications -","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/#website"},"primaryImageOfPage":{"@id":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/#primaryimage"},"image":{"@id":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Real-World-Applications.webp","datePublished":"2025-05-19T10:50:44+00:00","dateModified":"2025-05-20T12:57:38+00:00","description":"Real-world application refers to using concepts or skills in practical, everyday software development or business scenarios.","breadcrumb":{"@id":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/#primaryimage","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Real-World-Applications.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Real-World-Applications.webp","width":1200,"height":628,"caption":"Real-World Applications"},{"@type":"BreadcrumbList","@id":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Courses","item":"https:\/\/buhave.com\/courses\/"},{"@type":"ListItem","position":2,"name":"Java Script Course","item":"https:\/\/buhave.com\/courses\/learn\/java-script\/"},{"@type":"ListItem","position":3,"name":"Real-World Applications"}]},{"@type":"WebSite","@id":"https:\/\/buhave.com\/courses\/#website","url":"https:\/\/buhave.com\/courses\/","name":"BUHAVE","description":"Courses - Learn Online for Free","publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/buhave.com\/courses\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/buhave.com\/courses\/#organization","name":"BUHAVE","url":"https:\/\/buhave.com\/courses\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","width":375,"height":75,"caption":"BUHAVE"},"image":{"@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BeYouHave\/","https:\/\/www.linkedin.com\/company\/buhave","https:\/\/www.youtube.com\/@buhave"]},{"@type":"Person","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca","name":"Naveed Safdar","description":"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.","sameAs":["https:\/\/www.linkedin.com\/in\/naveedsafdar\/","https:\/\/www.facebook.com\/naveedsafdarawan\/","https:\/\/www.youtube.com\/@naveedsafdar"],"url":"https:\/\/buhave.com\/courses\/author\/naveed-safdar\/"}]}},"_links":{"self":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/comments?post=567"}],"version-history":[{"count":1,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/567\/revisions"}],"predecessor-version":[{"id":756,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/567\/revisions\/756"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media\/568"}],"wp:attachment":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media?parent=567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/categories?post=567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/tags?post=567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}