Category: javascript

So I want to this call

  <ValidWordList
    :items="answer.WordList"
    :labelText="answer.WordList.length + ' Words'"
  
  /></template>

to return the select string from the items array to run this function after a string is selected

function select(word: string) {
  console.log(word)
  answer.value = word
}

and here is the component

<template>
  <v-select :items="items" return string :label="labelText" ></v-select>
</template>

<script setup lang="ts">
export interface Props {
  items?: string[]
  labelText: string
}

const props = defineProps({
  items: {
    type: Array,
    default: ''
  },
  labelText: {
    type: String,
    default: ' Words'
  }
})
</script>

Honestly, I’m not sure what to do and how to make it work and I tried to add @input and @change and emit it back but nothing seem to work

I need to make user cards where on clicking the follow button it changes color and name and adds 1 to following. I receive such users from API , 12 users, and I need to be able to choose more than 1 user, how can I do it, I can’t figure it out.
thinking to try redux

but I can’t understand how to mark the button to record in the store
That my code where I make a request. then I record it in “user”, and through map, I render all the cards

export const UserList = () => {
  const [users, setUsers] = useState([]);
  const [userId, setUserId] = useState(null);
  const [page, setPage] = useState(2);


  const getUsersFromAPI = async () => {
    const user = await fetchUsers();
    setUsers(user);
  };

  const fetchNextPage = async () => {
    setPage(prevPage => prevPage + 1);
    const usersNext = await nextPageUsers(page, 3);
    setUsers(prevUser => [...prevUser, ...usersNext]);
    if (page === 4) {
      setPage(1);
      await nextPageUsers(page, 3);
      return;
    }

    return usersNext;
  };

  useEffect(() => {
    getUsersFromAPI();
  }, []);

  
# const followind = (id, e) => {
# 
# const userIdx = users.findIndex(user => user.id === id);
# 
# if (userId === id) {
# setUserId(null);
# users[userIdx].followers--;
# 
# return;
#     }
# 
# setUserId(id);
# users[userIdx].followers++;
#   };

  return (
    <div>
      {users && (
        <ul className={css.list}>
          {users.map(user => {
            return (
              <li key={user.id} className={css.containerItem}>
                <div className={css.space}>
                  <button type="button" className={css.imageLogo}></button>
                  <div className={css.upperPart}></div>
                  <div className={css.middleLine}>
                    <img
                      className={css.userFoto}
                      src={user.avatar}
                      alt={user.name}
                    ></img>
                  </div>
                  <div className={css.lowerPart}>
                    <p className={css.ps}> {user.tweets} Tweets</p>

                    <p className={css.ps}>
                      {' '}
                      {user.followers.toLocaleString('en-US')}
                      Followers
                    </p>

                    ***<button
                      id={user.id}
                      className={
                        userId === user.id ? css.btnPress : css.btnFollow
                      }
                      type="button"
                      onClick={e => followind(user.id, e)}
                    >
                      {userId === user.id ? 'Following' : 'Follow'}
                    </button>***
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
      )}
      {page <= 4 && (
        <button type="button" onClick={fetchNextPage}>
          Next
        </button>
      )}
    </div>
  );
};```

I create the syntax for a mermaid mindmap diagram from my data (from an array) using Javascript. The diagram renders beautifully in https://mermaid.live/edit.
I use the mermaid API with “await mermaid.renderAsync”. (code attached).
The problem now is that the first time I call it, the error “Syntax error in graph” appears and in the console the error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'h')
    at cF.run (cytoscape.umd.js

If I now change my theme (e.g. base or neutral or dark), the mindmap is displayed correctly on the second call.
Where is the error here?

code to render the graph:

async function makeGraph(id) {
    let data = localStorage.getItem("mermaidMindMapInput");
    
    var svg = await mermaid.renderAsync("svg_" + id, data);
    var elem = document.getElementById(id);
    elem.innerHTML = svg;
}

html:

<div id="g2"></div>

code to change theme:

   function changeTheme() {
        // Get a reference to the select element
        var themeSelect = document.querySelector("#theme-select");

        // Add an event listener to the select element to change the theme
        console.log(document.querySelector("#theme-select"));
        document
            .querySelector("#theme-select")
            .addEventListener("change", function () {
                // Get the selected theme
                var selectedTheme = event.target.value;

                // Check if the selected theme is different from the current theme
                if (selectedTheme !== currentTheme) {
                    // Update the current theme
                    currentTheme = selectedTheme;

                    // Reinitialize Mermaid with the new theme
                    mermaid.initialize({ startOnLoad: true, theme: currentTheme });

                    var diagrams = document.querySelectorAll(".g2");
                    diagrams.forEach((diagram) => {
                        var svg = diagram.querySelector("svg");
                        if (svg) {
                            diagram.removeChild(svg);
                        }
                    });

                    makeGraph("g2");
                }
            });
    }

This is the result of the MindMap:

Why is that when i open the toggle bar content appears instantly but if i close it transition kciks in?

const Navbar = () => {
const [nav,setNav] = useState(true)

const handleNav = () =>{
    setNav(!nav);
}


return (
    <div>
        <div className='flex justify-between hidden'>
            <img className='w-[140px] mx-3'src={dremslogo} alt='/'></img>
            <ul className='flex'>
                <li className='p-6 py-10 text-xl'>Home</li>
                <li className='p-6 py-10 text-xl'>About</li>
                <li className='p-6 py-10 text-xl'>Features</li>
                <li className='p-6 py-10 text-xl'>Contact</li>
                <li className='p-6 ml-10 py-10 text-xl'>Register</li>
                <li className='p-6 py-10 text-xl'>Log in</li>
            </ul>
        </div>
        <div className='flex justify-between flex-wrap back'>
            <img className='w-[180px] p-5'src={dremslogo} alt='/'></img>
            <div className='p-5 pt-9' onClick={handleNav}>
                {!nav ? <AiOutlineClose className='cursor-pointer' size={35} /> : <AiOutlineMenu className= 'cursor-pointer' size={35}/>}
            </div>
        <ul className={!nav ? 'w-[100%] max-h-screen':
                            'w-[100%] max-h-0 overflow-hidden transition-all duration-500'} 
                        onClick={handleNav}>
            <li className='p-3 px-5 text-xl'>Home</li>
            <li className='p-3 px-5 text-xl'>About</li>
            <li className='p-3 px-5 text-xl'>Features</li>
            <li className='p-3 px-5 text-xl'>Contact</li>
            <li className='p-3 px-5 text-xl'>Register</li>
            <li className='p-3 px-5 text-xl'>Log in</li>
        </ul>
        </div>
    </div>
 
 );

Context: I’m trying to create a navbar with a sub menu that appears and disappears through hovering.

HTML

<nav>
    <div class="logo">
      <img src = 'https://cdn.iconscout.com/icon/free/png-256/creative-68-225308.png'>
    </div>
    <div class="nav-links">
      <ul>
        <li><a href="#">Home</a></li>
        <li class = 'about'>
          <a href="#">About</a>
          <ul class = 'about-submenu'>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Our History</a></li>
            <li><a href="#">Our Vision</a></li>
          </ul>
        </li>
        <li class = 'services'>
          <a href="#">Services</a>
          <ul class = 'svcs-submenu'>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Graphic Design</a></li>
            <li><a href="#">SEO</a></li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    </nav>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(198, 206, 206);
}

.logo img {
  width: 3.5rem;
}

nav ul {
  list-style: none;
}

nav ul a {
  text-decoration: none;
  color: black;
}

nav {
  display: flex;
  justify-content: space-between;
  margin: 2rem 15rem 0 15rem;
}

.nav-links ul {
  display: flex;
  justify-content: space-between;
  gap: 4em;
}

ul.about-submenu {
  position: absolute;
  display: none;
  padding: 15px 15px 0px 15px;
  margin-top: 10px;
  width: 100px;
  background-color: azure;
  border-radius: 10px;
}

ul.svcs-submenu {
  position: absolute;
  display: none;
  padding: 15px 15px 0px 15px;
  margin-top: 10px;
  width: 140px;
  background-color: aqua;
  border-radius: 10px;
}

ul.about-submenu li, ul.svcs-submenu li {
  margin-bottom: 15px;
}

ul.about-submenu li a:hover, ul.svcs-submenu li a:hover {
  color:brown;
}

Vanilla JavaScript

const about = document.querySelector('.about')
const services = document.querySelector('.services')
const abtDrpdwn = document.querySelector('ul.about-submenu')
const svcDrpdwn = document.querySelector('ul.svcs-submenu')

about.addEventListener('mouseenter', () => {
    abtDrpdwn.style.display = 'block'
})

abtDrpdwn.addEventListener('mouseleave', () => {
    abtDrpdwn.style.display = 'none'
})

Action: I tried using mouseenter/mouseover to make the sub-menu appear, and mouseleave to make it disappear.

Result: The sub menu appears when I hover over the nav link. The sub menu disappears when I hover out of the sub menu. However, the sub menu doesn’t disappear when you hover out of the nav link.

Expected Result: The sub menu disappears when you hover out of the nav link and sub menu.

Thank you all in advance!

Let’s say i have this component, in which the users can call getData() function multiple times, how to manage this correctly? as i understand this will cause memory leaks because it’s creating a new subscription each getData() function call. Thanks in advance.

export class AnalyticsComponent {
  constructor(
    private http: HttpClient
  ) { }

  getData() {
    const url = `${environment.apiUrl}/protected`;
    this.http.get(url).pipe(
      map(response => console.log(response)),
      catchError(async error => console.error(error))
    ).subscribe();
  }
}

I have two different lines of code, I’ve found one that works, but I don’t know why. I’d like some insight to React internals to understand the mechanics behind what is going on.

Here’s some context. I have a nested navigator, and I’m implementing a goBack functionality. The goBack functionality necessarily needs to go back in the nested navigator, not the root navigator. For example, if my navigation history is RootA -> NestedA -> NestedB…then going back should go to NestedA, not RootA.

In order to follow DRY principles, I made the goBack functionality a HOC wrapper. This is what it looks like:

export const withBack = (WrappedComponent) => {
    const { colors } = useTheme();
    const navigation = useNavigation();

      return (props) => {
          return <>
            <SafeAreaView style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 1, }}>
                <Appbar.Header style={{ backgroundColor: colors.onSurface, position: 'absolute', backgroundColor: 'transparent' }}>
                    <Appbar.BackAction onPress={() => navigation.goBack()} color='black'/>
                </Appbar.Header>
            </SafeAreaView>
            <SafeAreaView style={{ flex: 1, backgroundColor: colors.onSurface}}>
                <WrappedComponent {...props} />
            </SafeAreaView>
          </>;
        
      }
    }

I am using it in my nested stack navigator like this:

          <Stack.Screen name="Branches"
          component={withBack((props) => <Branches {...props} />)} />

However, doing so causes the back button to go back in root navigator, not the nested one.

Doing this instead gets the desired behavior:

          <Stack.Screen name="Branches"
          component={()=> withBack((props) => <Branches {...props} />)()} />

Can anyone explain to me why these two result in different behavior?

Hi i’m using performance.now() for progress with setInterval i want to cover all the all values that is why using performance.now()

Covered values for between 1 and 2:

1.1995

1.5997000000011177

1.9999000000003726

2.3996000000014903

Note: covered values will decrease as i decrease interval Value from 400 ms

var progressStart = null, intervalId = null;

function timeUpdateCallback() {
       if (progressStart === null) {
          progressStart = performance.now();
        }
        const elapsed = performance.now() - progressStart;
        // const progress = (elapsed / duration) * 100;
        const currentTime = (elapsed / 1000); // Convert to seconds
        return currentTime;
 }

const range = document.getElementById("range");

const rangeWidth = range.offsetWidth;

console.log('rangeWidth',rangeWidth)

// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};

range.addEventListener("input", (e) => {
  const value = +e.target.value;
  const label = e.target.nextElementSibling;
  const rangeWidth = getComputedStyle(e.target).getPropertyValue("width");
  const labelWidth = getComputedStyle(label).getPropertyValue("width");
  // remove px
  const numWidth = +rangeWidth.substring(0, rangeWidth.length - 2);
  console.log('numWidth',numWidth);
  const numLabelWidth = +labelWidth.substring(0, labelWidth.length - 2);
  const max = +e.target.max;
  const min = +e.target.min;
  const left =
    value * (numWidth / max) -
    numLabelWidth / 2 +
    scale(value, min, max, 10, -10);
  label.style.left = `${left}px`;
  label.innerHTML = value;
});

function startProgress(){
  intervalId = setInterval(()=>{
   let p = timeUpdateCallback();
   console.log('p:',p)
  range.value = Math.floor(p * 1000 / rangeWidth);
  console.log(`range.value:`,range.value);
  if(range.value == 100){
    range.value = 0;
  }
  range.dispatchEvent(new Event('input'));
},400);  
}

startProgress();

document.getElementById('stop').addEventListener('click',()=>{
  console.log('stopped at:',range.value);
  clearInterval(intervalId);
})

document.getElementById('start').addEventListener('click',()=>{
  console.log('started at:',range.value);
  startProgress();
})

@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  font-family: "Lato", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

h2 {
  position: absolute;
  top: 10px;
}

.range-container {
  position: relative;
}

input[type="range"] {
  width: 300px;
  margin: 18px 0;
  -webkit-appearance: none;
}

input[type="range"]:focus,input[type="range"]:active {
  outline: none;
  cursor: grabbing !important;
}

input[type="range"] + label {
  background-color: #fff;
  position: absolute;
  top: -25px;
  left: 110px;
  width: 80px;
  padding: 5px 0;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Chrome & Safari */
input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  border-radius: 4px;
  width: 100%;
  height: 10px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 120px;
  width: 2px;
  background: red;
  cursor: grab;
}


input[type="range"]::-webkit-slider-thumb::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: yellow;
  position: absolute;
  top: 30%;
  left: 30;
}

<h2>Custom Range Slider</h2>
    <div class="range-container">
      <input type="range" name="range" step="10" id="range" min="0" max="100" data-red="yellow"/>
      <label for="range">50</label>
    </div>

<button id="stop">Stop</button>
<button id="start">Start</button>

Steps to re-produce:

1. while progress stop the progress check ‘P:’ value in console.log
2. start the progress after sometime ‘:p’ value will differ and slider jumps

My expectation: i’m doing it for timeline cursor progress as shown in below image

I’m creating a Chat app from a user to GPT 3.5 Turbo. But when I send a message, the bot never responds. Help me fix the code please. I spent days on it but it never works. Here is the app.py file(Note: I installed all the nessacary modules, the console installed them successfully):

from flask import Flask, render_template, request
import openai

app = Flask(name)

openai.api_key = 'MY VALID API KEY'

@app.route("/")
def index():
return render_template("index.html")

@app.route("/api", methods=["POST"])
def api():
message = request.json.get("message")

completion = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=[
    {"role": "user", "content": message}
]
)
if completion.choices[0].message!=None:
    return completion.choices[0].message

else :
    return 'Failed to Generate response!'
if name=='main':
app.run()

And here is the index.HTML file:

<!DOCTYPE html> <html> <head> <title>Chat App</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> body { background-color: #f5f5f5; padding-top: 20px; }
  #chat-box {
    max-width: 800px;
    margin: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  #chat-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 10px;
    font-weight: bold;
    text-align: center;
  }

  #message-list {
    height: 400px;
    overflow-y: scroll;
    padding: 10px;
  }

  .user-message {
    background-color: #ffc107;
    color: white;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
  }

  .bot-message {
    background-color: #007bff;
    color: white;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
  }

  input[type="text"] {
    width: 100%;
    border: none;
    border-top: 1px solid #e9ecef;
    padding: 10px;
    font-size: 16px;
    outline: none;
  }

  input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
  }

  .btn-send {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
  }

  .btn-send:hover {
    background-color: #0069d9;
    cursor: pointer;
  }
</style>
</head> <body> <div id="chat-box" class="container"> <div id="chat-header">Chat App</div> <div id="message-list"></div> <form id="message-form" class="d-flex flex-column align-items-center"> <input type="text" id="message" placeholder="Type a message..."> <button type="submit" class="btn btn-send">Send</button> </form> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> $(function() { // When the user submits the message form $("#message-form").submit(function(e) { e.preventDefault(); // add this line to prevent form submission
// Get the user's message
var message = $("#message").val();

// Display the user's message
displayMessage(message, "user-message");

// Send the message to the server
$.ajax({
  url: "/api",
  type: "POST",
  data: { message: message },
  success: function(response) {
    // Display the bot's message
    displayMessage(response, "bot-message");

    // Animate the scroll bar to the bottom of the message list
    $("#message-list").animate({ scrollTop: $("#message-list")[0].scrollHeight }, 1000);
  },
  error: function(error) {
    console.log("Error:", error);
  }
});
});

// Function to display a message in the chat box
function displayMessage(message, className) {
// Create a new message element
var messageElement = $("<div>").addClass(className).text(message);

// Append the message element to the message list
$("#message-list").append(messageElement);
}
});

</script> </body> </html>

I tried debugging it, changing the functions of the javascript but it still doesn’t work!

I need to run javascript code on an ninjaRMM managed device.
I know how to do it using a powershell script,I have problems doing it with a javascript.

When this script is added to the ninjaRMM library and then run on a device, I get errors: syntax error:const; console.log:console is undefined

The above errors are signed with “Microsoft Script Host v5.81 which does support “const” keyword and I still can’t figure out what is in the global namespace on that engine.

Googling has been hopeless: all I can find is info on accessing the Ninja API from a node server.

1. Add simple hello world as new script in library in ninja console Administration=>Scripts:

const msg = “Hello World!!”;
console.log(msg);

2. Open device in the console=>Run=>from library=>my script
3. Script returns with “success”
4. clicking more in the status box yields:
   

output:
Hello World!!

I’ve attached a code snippet. When I first get on this home page the result_data variable is undefined. I have to re-render it for it to have a value. What I’m doing with the result_data variable is rendering the resulting images in a flatlist. I would like the flatlist to have data as soon as a user gets to that page without them having to rerender the page. Is this possible?

 useEffect(() => {
    const fetchRecipes = async () => {
      try {
        // create body for lambda function
        const palette_body = {
          body: {
            recipeCategory: null,
            user_info: { likes, dislikes, survey },
          },
        };

        const response = await fetch(
          `https://25jg62s1m6.execute-api.us-east-1.amazonaws.com/test/kohoquery/palette_analyzer`,
          {
            method: "POST",
            body: JSON.stringify(palette_body),
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        const result_data = await response.json();

        if (typeof result_data.body === "undefined") {
          console.log("No recipes yet");
        } else {
          setResult(JSON.parse(result_data.body));
          console.log("yay!");
        }
        setLoading(false);
      } catch (error) {
        console.log("Error parsing JSON data!!!:", error);
        //setError(error);
        setLoading(false);
      }

I am trying to select an RSA public key stored in a database created with the node-sqlite3 library. The code implemented is the following:

const db = new sqlite3.Database('jwtauth')

    db.serialize(() => {

        db.each("SELECT * FROM jwtauth WHERE username = (?)", payload_data.username, (err, row) => {
            const rsaPubKey = flatted.parse(row.pub)
            const signature = flatted.parse(row.signature)
            flag = rsaPubKey.verify(Buffer.from(JSON.stringify(payload_data)), Buffer(signature))
            if (!flag) {
                res.json({msg : "Failed login"})
            } else {
                res.json({msg : "Successful login"})
            }
            
        })

    })

    db.close()

THe RSA was previously created with the NodeRSA library, and then added to the database.

But I get the following error message:

Server listening on port 3000
/home/user/Desktop/project/server/node_modules/sqlite3/lib/trace.js:27
                    throw err;
                    ^

TypeError: rsaPubKey.verify is not a function
    at Statement.<anonymous> (/home/user/Desktop/project/server/router.js:26:30)
--> in Database#each('SELECT * FROM jwtdata WHERE username = (?)', 'john', [Function])
    at Database.<anonymous> (/home/user/Desktop/project/server/router.js:23:12)
    at /home/user/Desktop/project/server/router.js:21:8
    at Layer.handle [as handle_request] (/home/user/Desktop/project/server/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/user/Desktop/project/server/node_modules/express/lib/router/route.js:144:13)
    at Route.dispatch (/home/user/Desktop/project/server/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/home/user/Desktop/project/server/node_modules/express/lib/router/layer.js:95:5)
    at /home/user/Desktop/project/server/node_modules/express/lib/router/index.js:284:15
    at Function.process_params (/home/user/Desktop/project/server/node_modules/express/lib/router/index.js:346:12)
    at next (/home/user/Desktop/project/server/node_modules/express/lib/router/index.js:280:10) {
  __augmented: true
}

It doesn’t recognize the RSA public key function “verify”. On the other hand, if I use that same function before inserting the RSA public key in the database, the function is recognized.

I am using node-sqlite3 version 4.2.0.

Suppose if I have the following code.

var House = {rooms: 3};
House.switchOffMains = function(){ console.log("Mains switched off"); };

var Constructor = function(){};
Constructor.prototype = House;

var house1 = new Constructor();

var House = Object.create(House);
House.switchOffMains = function() { console.log("Function has been modified"); };

I have tried a similar example to this in my own code and when house1.switchOffMains() is called it logs the message “Mains switched off” rather than the new message made after using Object.create on House. My question is, why does it not modify the function on house1 since its prototype is House?

got error while doing react router dom
error is “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom”

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

My friend and I, who don’t have much experience in Java Script and HTML, created a website that uses the Google API to calculate the carbon emissions released by driving a car a certain distance. This was for a weekend event that has already ended, and now I just want to get the website complete.

We were able to get a Google map up and working so the user can click on two places on the map and have the map gives you the shortest drivable distance. This is stored in a variable called “distance” and the code can be found in mpaStuff.js. The user can also type in the miles per gallon of their vehicle, which is stored in a variable called GasMileageInput, who’s input is taken in from the html file and used in mapStuff.js.

In mapStuff.js is a function called getEmissions(distance, gasMileage) that divides distance by mileage, multiplies by a constant, then returns the value (emissions).

Our problem is that we can’t seem to get “emissions” to transfer to our .html file and show on the screen, in part to our lack of knowledge in the languages. It either shows a blank value or a NaN value. We believe that it’s simply a variable-across-files issue, but we’re not sure. Any help would be greatly helpful, and please let me know if I need to add more clarification to this post.

Link to our Git Repo:
I took out some of the html file that contained our Google API Key, just in case.

Thank you very much!

Josh