Question

我不确定这是否是问此类问题的合适地点，否则请按正确的方向发送给我！

我正在忙一个项目，但是我不知道如何构建它。我对HTML，CSS，Javascript和PHP具有基本的经验。我想构建一个应用程序，但首先我需要与用户进行测试。因此，我建立了我的想法的第一个原型，我将进一步解释。

JSFiddle

我以前从未使用过JSFiddle，所以希望它能工作。

function properCase(phrase) {
  var regFirstLetter = /\b(\w)/g;
  var regOtherLetters = /\B(\w)/g;
  function capitalize(firstLetters) {
    return firstLetters.toUpperCase();
  }
  function lowercase(otherLetters) {
    return otherLetters.toLowerCase();
  }
  var capitalized = phrase.replace(regFirstLetter, capitalize);
  var proper = capitalized.replace(regOtherLetters, lowercase);

  return proper;
}

body {
  background-image: url("https://i.postimg.cc/QFWTbdNS/background.png");
}

.image-row {
  margin-top: 75% !important;
}

#avatar {
  margin-left: 38%;
}

.icon-row {
  position: absolute;
  top: 200px;
}

img.icon-morphy {
  position: absolute;
  top: 35px;
  width: 30px;
  height: 30px;
  left: 55px;
}

.donut {
  margin-left: 20px;
  width: 80px;
}

img.hoverImages {
  float: left;
  animation-name: float;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1s;
}

@keyframes float {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 10px;
  }
}

.slidecontainer {
  width: 100%;
  /* Width of the outside container */
}


/* The slider itself */

.slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 100%;
  /* Full-width */
  height: 25px;
  /* Specified height */
  background: #d3d3d3;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s;
  /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  visibility: visible;
}


/* Mouse-over effects */

.slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
}


/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

到目前为止，在我的计算机上，我的项目可以按预期运行，但在JSFiddle上却无法运行。由于某种原因，它不使用API。很抱歉，如果代码格式不正确或没有整理整齐。我仍在学习，也非常渴望学习。如果某些事情不对不起，请问我。

想法

该项目的想法是使用Apple Watch衡量用户的运动，食物和睡眠量的应用程序。用于运动的计步器或GPS，用户可以输入食物摄入量，并通过心跳计数器测量睡眠。化身根据用户收到的应用程序输入进行更改。例如，如果用户睡眠良好，则化身通过睁大眼睛来反映这一点。如果用户睡眠不好，虚拟化身也会闭着红眼睛来反映这一点。虚拟化身上方是用于运动，食物摄入和睡眠的仪表。它们反映了用户的水平，如果圆圈被填充，则用户是健康的；如果圆圈为空，则用户是不健康的。

概念

对于我的概念，我正在尝试以下方法。我想用我的用户在手机上测试原型。该应用程序使用HTML，CSS，Javascript，Bootstrap，Ionic和Jquery进行编码。当用户按下运动，食物或睡眠的圆圈时，将打开一个输入叠加，用户可以输入他们花费在运动，睡眠或消耗的卡路里上的时间。确认输入后，虚拟形象会更改为新版本，并且正确的仪表会更新以反映输入。

视觉解释

https://docdro.id/Zaq2SbN

Adobe XD原型

https://xd.adobe.com/view/1b38a873-57a3-4c1d-4ff8-875b026eaba4-6d09/

非常感谢您提供任何帮助！

我如何建立这个项目？

0 个答案: