Elizabeth Adams
Published © GPL3+

Web Form Activity Logger

Create a simple web form that tracks your activity and sends the data to a dashboard.

IntermediateFull instructions provided1 hour652
Web Form Activity Logger

Things used in this project

Software apps and online services

Initial State
Initial State
Netlify
CodePen

Story

Read more

Code

HTML Code

HTML
<div class="container">
 <br>
 <h5>Personal Activity Logger</h5>
 <hr>
 <form name="pal" action="ENTER API ENDPOINTS HERE" method="POST">

  <div class="row">
   <div class="six columns">
    <label for="weight">Weight</label>
    <input id="weight" name="weight" type="number" step="0.1" placeholder="lbs">
   </div>
   <div class="six columns">
    <label for="exercise">Exercise</label>
    <select id="exercise" name="exercise">
            <option value="">activity</option>
        <option>Weights</option>
        <option>Running</option>
        <option>Cardio</option>
       <option>Yoga</option>
        </select>

    <input id="exercisedetail" name="exercisedetail" type="text" placeholder="minutes">
   </div>
  </div>
  <div class="row">
   <div class="six columns">
    <label for="meat">Meat</label>
    <select id="meat" name="meat">
      <option value="">type</option>
      <option>Chicken</option>
      <option>Pork</option>
      <option>Beef</option>
      <option>Fish</option>
    </select>
   </div>
   <div class="six columns">
    <label for="junk">Junk</label>
    <input id="junk" name="junk" type="text" placeholder="chips, chocolate, etc">
   </div>
  </div>
  <div class="row">
   <div class="six columns">
    <label>Beer</label>
    <select id="beersize" name="beersize">
      <option value="">size</option>
      <option>12 oz</option>
      <option>16 oz</option>
      <option>24 oz</option>
    </select>
    <input id="beerstrength" name="beerstrength" type="number" step="0.1" placeholder="abv %">
   </div>
   <div class="six columns">
    <label>Coffee</label>
    <select id="coffeesize" name="coffeesize">
      <option value="">size</option>
      <option>Normal</option>
      <option>Large</option>
    </select>

    <select id="coffee" name="coffee">
      <option value="">type</option>
      <option>Americano</option>
      <option>Decaf</option>
      <option>Espresso</option>
    </select>
   </div>
  </div>
  <div class="row">

   <div class="six columns">
    <label>Where am I?</label>
    <input type="button" value="Get lat-long" onclick="getLocation()"><br>
   </div>
   <div class="six columns">
    <label for="position">Location</label>
    <input id="position" name="position" type="text">
   </div>

  </div>
  <p id="loc"></p>
  <hr>
  <div id="send">
   <input type="submit" value="submit" class="button-primary"></input>
  </div>
 </form>
</div>

<div class="container">
<iframe width="900" height="725"
src="ENTER EMBED SHARE HERE">
</iframe>
</div>

CSS Code

CSS
body {
  background-color: #ffe6e6;
}

input {
 text-align: center;
}

div {
 text-align: center;
}

JavaScript Code

JavaScript
var options = {
 enableHighAccuracy: true,
 timeout: 5000,
 maximumAge: 0
};

function getLocation() {
 navigator.geolocation.getCurrentPosition(latlong, error, options);
}

function error() {
 loc.innerHTML = "Geolocation is not supported by this browser.";
}

function latlong(pos) {
 document.getElementById("position").value =
  pos.coords.latitude + "," + pos.coords.longitude;
}

document.getElementById("send").addEventListener(
 "click",
 (function(clicked) {
  return function() {
   if (!clicked) {
    var last = this.innerHTML;
    if (document.pal.onsubmit && !document.pal.onsubmit()) {
     return;
    }
    document.pal.submit();
    this.innerHTML = '<input type="button" value="Logged :)"></input>';
    pal.reset();
    clicked = true;
    setTimeout(
     function() {
      this.innerHTML = last;
      clicked = false;
     }.bind(this),
     2000
    );
   }
  };
 })(false),
 this
);

Credits

Elizabeth Adams
16 projects • 81 followers
DIY, Tech, Data

Comments

Related channels and tags
  • Health & Medical Devices
  • Health & Medical Devices
  • Initial State
  • Internet of Things
  • Internet of Things