# JS api questions

**URL:** <https://community.particle.io/t/js-api-questions/23085>\
**Category:** Cloud\
**Created:** [May 22, 2016, 8:06pm UTC](https://community.particle.io/t/js-api-questions/23085 "2016-05-22T20:06:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Broncosis](https://avatars.discourse-cdn.com/v4/letter/b/9d8465/32.png) [@Broncosis](https://community.particle.io/u/Broncosis)\
**Post date:** [May 22, 2016, 8:06pm UTC](https://community.particle.io/t/js-api-questions/23085/1 "2016-05-22T20:06:23Z")

</div>

hello I have a project on the go but I am finding the JS api documentation very lacking  
I have it working for the most part with the older spark.min.js but I want to update to the new particle.min.js

but there is no examples that seem to make much sense for the new one and they are not just a drop in replacement  
granted my programming skills are week but I have some time and I like to tinker

can someone point me in a direction of a repo somewhere or a example of this in use  
with a function so I can see how to put it into practical use

---

<div class="post-metadata">

**Author:** ![rickkas7](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/rickkas7/32/8681_2.png) [@rickkas7](https://community.particle.io/u/rickkas7)\
**Post date:** [May 22, 2016, 8:19pm UTC](https://community.particle.io/t/js-api-questions/23085/2 "2016-05-22T20:19:33Z")

</div>

If you want to do this from a web page in a browser, as opposed to node.js, I previously wrote up a sample that might be helpful:

> [@Web Page Sample Code using Particle API JS](https://community.particle.io/t/web-page-sample-code-using-particle-api-js/21590):
>
> I hadn’t used the Particle API JS from a web page yet, so I made a little circuit and little sample web page to test it out. It worked well for me and I thought others might find it useful for tips and tricks. For example, it shows how to do authentication without storing the username and password in the Javascript code and saving the access token so you don’t need to enter your username and password every time without any server-side code, other than the Particle cloud, of course. Here’s the c…

---

<div class="post-metadata">

**Author:** ![Broncosis](https://avatars.discourse-cdn.com/v4/letter/b/9d8465/32.png) [@Broncosis](https://community.particle.io/u/Broncosis)\
**Post date:** [May 22, 2016, 8:56pm UTC](https://community.particle.io/t/js-api-questions/23085/3 "2016-05-22T20:56:35Z")

</div>

thank you for your reply and I probably need more hand holding but

I can not find where you call your particle.callfunction is at all the jquery is almost unreadable but then again I have never used jqurey

---

<div class="post-metadata">

**Author:** ![Broncosis](https://avatars.discourse-cdn.com/v4/letter/b/9d8465/32.png) [@Broncosis](https://community.particle.io/u/Broncosis)\
**Post date:** [May 22, 2016, 9:04pm UTC](https://community.particle.io/t/js-api-questions/23085/4 "2016-05-22T21:04:41Z")

</div>

ok finally 10 attempts later  
why does the preformed text button not just put the tags in for you rather than tell you indent it all 4 spaces

this is what I have so far that works I get what I want to photon but its using the old spark api not the particle one  
and I would rather use the current version thats not likely to stop working as fast  
and I suspect that a few other bumps I have found might be smoothed out in the newer code

```auto
<pre>
<html>
  <head>
      <title>Spark function buttons Example</title>
  </head>

  <body>
    Zone <select class="form-control" id="zOne">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    Start Hour <select class="form-control" id="startHour">
      <option value="00">12:00</option>
      <option value="01">1:00</option>
      <option value="02">2:00</option>
      <option value="03">3:00</option>
      <option value="04">4:00</option>
      <option value="05">5:00</option>
      <option value="06">6:00</option>
      <option value="07">7:00</option>
      <option value="08">8:00</option>
      <option value="09">9:00</option>
      <option value="10">10:00</option>
      <option value="11">11:00</option>
    </select>
    <select class="form-control" id="amPm1">
      <option value="00">AM</option>
      <option value="12">PM</option>
    </select>
    Start Minute <select class="form-control" id="startMinute">
      <option value="00">00</option>
      <option value="15">15</option>
      <option value="30">30</option>
      <option value="45">45</option>
    </select>

    Stop Hour <select class="form-control" id="stopHour">
      <option value="00">12:00</option>
      <option value="01">1:00</option>
      <option value="02">2:00</option>
      <option value="03">3:00</option>
      <option value="04">4:00</option>
      <option value="05">5:00</option>
      <option value="06">6:00</option>
      <option value="07">7:00</option>
      <option value="08">8:00</option>
      <option value="09">9:00</option>
      <option value="10">10:00</option>
      <option value="11">11:00</option>
    </select>
    <select class="form-control" id="amPm2">
      <option value="0">AM</option>
      <option value="12">PM</option>
    </select>
        Stop Minute <select class="form-control" id="stopMinute">
      <option value="00">00</option>
      <option value="15">15</option>
      <option value="30">30</option>
      <option value="45">45</option>
    </select>

<br>
<script type="text/javascript">
	function checkTotal() {
		document.daysList.total.value = '';
		var sum = 0;
		for (i=0;i<document.daysList.choice.length;i++) {
		  if (document.daysList.choice[i].checked) {
		  	sum = sum + parseInt(document.daysList.choice[i].value);
		  }
		}
		document.daysList.total.value = sum;
	}
</script>

<form name="daysList">
    <input type="checkbox" name="choice" value="1" onchange="checkTotal()" id="day1"/>Sunday
    <input type="checkbox" name="choice" value="2" onchange="checkTotal()" id="day2"/>Monday
    <input type="checkbox" name="choice" value="4" onchange="checkTotal()" id="day3"/>Tuesday
    <input type="checkbox" name="choice" value="8" onchange="checkTotal()" id="day4"/>Wensday
    <input type="checkbox" name="choice" value="16" onchange="checkTotal()" id="day5"/>Thursday
    <input type="checkbox" name="choice" value="32" onchange="checkTotal()" id="day6"/>Friday
    <input type="checkbox" name="choice" value="64" onchange="checkTotal()" id="day7"/>Saterday
    <input type="hidden" size="3" name="total" id="days" value="0">
  </form>
    <button type="button" onclick="sendValues()">Send values</button>

<br>

    <!--
    <input type="text" class="form-control" placeholder="Stop Hour?" id="stopHour">
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 1</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 2</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 3</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 4</button>
    -->

    <script src="http://cdn.jsdelivr.net/sparkjs/1.0.0/spark.min.js"> </script>
    <script type="text/javascript">

      //you can use your accesstoken, or your email/passsword to log in. Uncomment accordingly below.

  var accessToken = "real stuff here";
  var deviceID = "real stuff here";

  var zOne;
  var startHour;
  var startMinute;
  var stopHour;
  var stopMinute;
  var amPm1;
  var combinedTime;
  var amPm2;
  var days;
  var timeCalc;

  function sendValues(){
    amPm1 = document.getElementById('amPm1');
    amPm2 = document.getElementById('amPm2');
    zOne = document.getElementById('zOne');
    days = document.getElementById('days');
    startHour = document.getElementById('startHour');
    startMinute = document.getElementById('startMinute');
    stopHour = document.getElementById('stopHour');
    stopMinute = document.getElementById('stopMinute');
    timeCalc = parseInt(startHour.value,10);
    amPm1 = parseInt(amPm1.value,10);
    amPm1 = timeCalc + amPm1 +'';
    timeCalc = 0;
    timeCalc = parseInt(stopHour.value,10);
    amPm2 = parseInt(amPm2.value,10);
    amPm2 = timeCalc + amPm2 +'';
    combinedTime = amPm1 + '~' + startMinute.value + '~' + amPm2 + '~' + stopMinute.value + '~' + days.value + '~' + zOne.value;
    console.log(combinedTime);

    functionCall('parse', combinedTime);
    //document.write("string sent to photon <br>");
    //document.write(combinedTime);
    //document.write("<br> start hour ~ start min ~ stop hour ~ stop min ~ zone ~ days");
    startHour.value = '';
    startMinute.value = '';
    stopHour.value = '';
    stopMinute.value = '';
    zOne.value = '';
    days.value = '';
  }

  spark.on('login', function(response) {
    console.log(response);
  });

  // callback to be executed by each core
  var callback = function(err, data) {
    if (err) {
      console.log('An error occurred while getting device attrs:', err);
    } else {
      console.log('Device attr retrieved successfully:', data);
    }
  };

  function functionCall(functionName, functionArgument){
    // The function needs to be defined in the firmware uploaded to the
    // the Spark core and registered to the Spark cloud, same thing we do
    // with variables. You pass along the name of the function and the params.
    spark.callFunction(deviceID, functionName, functionArgument, callback);
  }

  // Uncomment a line below depending on your preferred log-in method.
  //spark.login({ username: 'email@example.com', password: 'password' });
  spark.login({ accessToken: accessToken });

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

```

I know this is pretty simple stuff and I plan on making a pretty UI for it as this goes on but it is a project for me  
and while i do plan on sharing it I am making it work for my needs not building a product  
so things can be rough and dirty for a while

once I get this working I am sure others will find my stuff useful but its a good size project that I can keep picking away at and learning and thats what I need

---

<div class="post-metadata">

**Author:** ![ScruffR](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/scruffr/32/6952_2.png) [@ScruffR](https://community.particle.io/u/ScruffR)\
**Post date:** [May 23, 2016, 4:46am UTC](https://community.particle.io/t/js-api-questions/23085/5 "2016-05-23T04:46:32Z")

</div>

> [@Broncosis](#):
>
> why does the preformed text button not just put the tags in for you rather than tell you indent it all 4 spaces

I've reformatted your text.  
The easiest to insert code blocks is by wrapping them into something like this

````plaintext
 ```html
 <!-- here comes your HTML block -->

````

```cpp
// here comes your C++ block

```

```auto
*(These are so called ***grave accents*** - not to be mistaken for single quotes)*
```

---

<div class="post-metadata">

**Author:** ![kh90909](https://avatars.discourse-cdn.com/v4/letter/k/e79b87/32.png) [@kh90909](https://community.particle.io/u/kh90909)\
**Post date:** [May 24, 2016, 12:59am UTC](https://community.particle.io/t/js-api-questions/23085/6 "2016-05-24T00:59:23Z")

</div>

@Broncosis I’m writing a terminal app that uses the new ParticleJS API. The current version of the code is pretty complex, but this smaller early version should hopefully be reasonably easy to follow:

> <https://github.com/kh90909/OakTerm/blob/9cb525cd57c4ecec50abe1ba3ce78a8fb678afd6/index.html>

The current version is [here](https://github.com/kh90909/OakTerm) if you want to see what it’s evolved into.

---

<div class="post-metadata">

**Author:** ![Broncosis](https://avatars.discourse-cdn.com/v4/letter/b/9d8465/32.png) [@Broncosis](https://community.particle.io/u/Broncosis)\
**Post date:** [May 28, 2016, 9:14am UTC](https://community.particle.io/t/js-api-questions/23085/7 "2016-05-28T09:14:41Z")

</div>

thanks for the help I was able to resolve this after talking with a friend for a bit I will post the new code  
in a little bit I need sleep now
