Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

app.js

@@ -0,0 +1,106 @@
+    function setValue() {
+        target.value = '0';
+        cash.value = '0';
+    }
+
+    //function to start PB
+    function init() { 
+    width = 0;
+    isTargetReached = false; 
+    document.querySelector(".progress").style.visibility = 'visible';
+    document.querySelector("#progress-arrow").style.visibility = 'visible';
+    document.querySelector(".target").classList.remove('blueBorder');
+    document.querySelector(".target-text").classList.remove('blueShadowText');
+    document.querySelector(".target-text-up").classList.remove('blueShadowText');
+    document.getElementById("info-text").innerHTML = "$" + 0;
+    document.getElementById("target-text-up").innerHTML = "$" + 0;
+    document.getElementById('buttom').style.display = 'none';
+    document.getElementById('targetTitle').style.visibility = 'visible';
+    document.getElementById("myBar").style.width = width + "%";
+    document.getElementById("numBar").style.width = width +"%";
+    document.getElementById("arrowBar").style.width = width + "%";
+    document.getElementById("numBar").innerHTML = "$" + 0;
+	  target = document.getElementById('target');
+	  target.onkeyup = getValueOfInputNumber;
+    target.onchange = getValueOfInputNumber;
+	  cash = document.getElementById( 'cash' );
+    cash.onkeyup = getValueOfInputNumberCash;
+    cash.onchange = getValueOfInputNumberCash;
+    } 
+	//init();
+
+    // value of target
+    var target;
+    var targetValue = targetValue;
+
+      function getValueOfInputNumber() {
+            targetValue = this.value; 
+            document.getElementById("target-text-up").innerHTML = "$" + targetValue;
+        document.getElementById("info-text").innerHTML = "$" + targetValue;
+      }
+
+    //bottom 'add target'
+    function addTarget(){
+      document.getElementById( 'target' ).style.visibility = 'hidden' ;
+      document.getElementById('targetTitle').style.visibility = 'hidden';
+    }
+
+    // value of cash add value
+    var cash;
+    var cashValue;
+      function getValueOfInputNumberCash() {
+            cashValue = this.value; 
+      }
+
+    //bottom 'Add in my Card' with logic
+    var isTargetReached = false; var width = 0; var displayBill=0; var numToReach=0;
+    function move() { 
+            var elem = document.getElementById("myBar");
+            var elemNum = document.getElementById("numBar");
+            var elemArrowBar = document.getElementById("arrowBar");
+            var infoText = document.getElementById("info-text");
+
+            function targetIsReached(){
+             document.querySelector(".progress").style.visibility = 'hidden';
+             document.querySelector("#progress-arrow").style.visibility = 'hidden';
+             document.querySelector(".target").classList.add('blueBorder');
+             document.querySelector(".target-text").classList.add('blueShadowText');
+             document.querySelector(".target-text-up").classList.add('blueShadowText');
+             width = 100;
+             elem.style.width = 100 + "%";
+             displayBill += (+cashValue);
+             elemNum.innerHTML = "$" + displayBill.toFixed(2);
+             numToReach = targetValue - displayBill;
+             infoText.innerHTML = "$" + numToReach.toFixed(2); 
+              isTargetReached=true;    //to block bottom
+            }
+      if (!isTargetReached && +targetValue > +cashValue) {   
+        var frame = (function() {
+            if ( width >= 99.999999 - (100*cashValue/targetValue))  {
+              targetIsReached();
+            } else { 
+            width += (100*cashValue/targetValue);
+            displayBill += (+cashValue);
+            elem.style.width = width + "%";
+            elemNum.style.width = width + 6 +"%"; 
+            elemNum.innerHTML = "$" + displayBill.toFixed(2);
+            elemArrowBar.style.width = width + "%";
+            numToReach = targetValue - displayBill;
+            infoText.innerHTML = "$" + numToReach.toFixed(2);
+          } 
+        })();
+		//frame();
+      } 
+      else if (!isTargetReached) {
+             targetIsReached();
+      } 
+
+    }
+
+	function render() {
+		return '<div class=\"main-containter\"><div id = \"header\"><div class=\"text-head\">Target Indicator Demo</div></div><div class=\"containter\"><div class = \"section left\"></div><div class = \"section reached\"><div class=\"reached-text\">Reached:</div></div><div class = \"section section-progress-bar\"><div class= \"progress-top\"></div><div id = \"myProgress\"><div id=\"myBar\"></div></div><div id = \"progress-arrow\"><div id=\"arrowBar\"></div><div class=\"arrow-up\"></div></div><div class = \"progress num\"><div id=\"numBar\">$0</div></div></div><div class = \"section target\"><div class=\"target-text\">Target</div><div class=\"target-text-up\"id=\"target-text-up\">$</div></div><div class=\"section right\"></div><div class=\"info-buttom\"><img class=\"info-icon\" src=\"info-icon.png\"><div class=\"info-text\">You need <a id=\"info-text\">$</a> more to reach your target.<span></span></div></div></div></div>';
+	}
+
+
+
+

index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+
+    <link type="text/css" rel="stylesheet" href="style.css">
+
+    <title>ProgressBar</title>
+</head>
+
+<body id="body">
+     <div id="mainContent"></div> 
+    <br><br>
+      <div id="targetTitle">target</div>
+    <input type="number" min="0" oninput = "validity.valid||(value='');" id="target" value="0"> <button onclick="resetTarget()" id = "buttomTarget">Add Target</button> 
+      <br><br>
+
+      <div id = "cashTitle">$ cash</div>
+      <input type="number" min = "0" oninput = "validity.valid||(value='');" id="cash" value="0"> <button onclick="move()" id = "buttom"> Add in my card </button>
+      <b></b>
+
+      <br><br>
+      <button onclick="initPage(), setValue()" id = "start"> Refresh </button>
+      <b></b>
+	  <br><br>
+	  Инструкция: <br>1) Вводим значение target в inner под target<br>
+	  2) Нажать на кнопку Add Target<br>
+	  3) Воодим значение сash для добавления его к прогрессбару<br>
+	  4) Для обнуления нажать Refresh<br><br>
+
+	  Я попытался сделать окно компонентой. Курс по react следующий на очереди, после которого смогу делать полноценные компоненты.
+	  <br>На создание этого окна ушло около 6 рабочих дней.
+
+      <script src="app.js"></script>
+	  <script>
+		document.getElementById("mainContent").innerHTML = render();
+
+		function initPage() {
+			init();
+			document.getElementById('buttomTarget').style.visibility = 'visible';
+			document.getElementById('buttom').style.display = 'none';
+			document.getElementById('target').style.visibility = 'visible';
+
+			isTargetReached = false; width = 0; displayBill=0; numToReach=0;
+		}
+
+		function resetTarget() {
+			document.getElementById('buttomTarget').style.visibility = 'hidden';
+			document.getElementById('buttom').style.display = 'initial';
+			document.getElementById( 'target' ).style.visibility = 'hidden' ;
+
+			addTarget();
+		}
+		initPage();
+	  </script>
+</body>
+</html>
+

style.css

@@ -0,0 +1,194 @@
+html{
+    background: white;
+}
+
+div {
+    font-family: Arial;
+    color: #333;
+    text-align: left;
+}
+
+.section {
+    float: left;
+    margin-top: 2%;
+    height: 60%;
+}
+
+.left {
+    background-color: white;
+    width: 10%;
+}
+
+.right{
+    width: 10%;
+}
+
+.reached {
+    background-color: white;
+    width: 20%;
+}
+
+.reached-text{
+    padding: 1.5%;
+    margin-top: 20%;
+    text-indent: 2%;
+    font-weight: bold;
+    color:rgb(90, 90, 90);
+    font-size: 90%;
+}
+
+.section-progress-bar{
+    background-color: white;
+    width: 40%;
+}
+
+.target{
+    border-radius: 8px;
+    height: 50px;
+    width: 61px;
+    background-color: #ccc;
+    background-image: url(buttom.png);
+    background-size: cover;
+    box-shadow: 0 0 2px rgba(0,0,0,0.5);
+}
+
+.blueBorder{
+    box-shadow: 0 0 8px #0489d1;
+}
+
+.target-text,
+.target-text-up {
+    color: white;
+    text-align: center;
+    font-size: 90%;
+    margin-top: 4%;
+}
+
+.target-text-up {
+    margin-top: 9%;
+    font-size: 20px;
+}
+
+.blueShadowText{
+    text-shadow: 0px 0px #0489d1;
+}
+
+.info-buttom{
+    margin-left: 10%;
+}
+
+.info-icon{
+    width: 6%;
+    float:left;
+}
+
+.info-text{
+    padding: 0.9%;
+    float: left;
+    color:rgb(90, 90, 90);
+    font-size: 85%;
+    width: 265px;
+    text-align: justify;
+}
+  /* span ниже для того, чтобы растянуть текст на длину div */
+span{
+    width:100%;
+    display:inline-block;
+}
+
+.progress-top {
+    background-color: white;
+    height: 20%;
+}
+
+.main-containter {
+    width: 410px;
+    height: 150px;
+    margin: auto;
+    margin-top: 100px;
+    border: black;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);
+    background-color: #eee;
+}
+
+.containter {
+    width: 95%;
+    height: 65%;
+    margin: auto;
+    margin-top: 3%;
+    border: #d6d3d3;
+    border-style: solid;
+    border-width: thin;
+    border-radius: 8px;
+    background-color: white;
+}
+
+#header {
+    clear: left;
+    width: 100%;
+    height: 20%;
+    background-color: #4a4949;
+    border-radius: 8px 8px 0 0;
+}
+
+.text-head{
+    padding: 1.5%;
+    text-indent: 2%;
+    color:white;
+    font-size: 90%;
+}
+
+#myProgress, #progress-arrow {
+    width: 96%;
+    background-color: #ddd;
+    height: 20%;
+    border: 3px dotted #ddd;
+}
+
+#progress-arrow{
+    background-color: white;
+    border-color: white;
+}
+
+#myBar {
+    width: 0%;
+    height: 100%;
+    background-color: #0489d1;
+    text-align: center;
+    line-height: 30px;
+    color: white;
+}
+
+#numBar{
+    width: 0%;
+    height: 100%;
+    background-color: white;
+    text-align: right;
+    color: #626262;
+    font-weight: bold;
+    font-size: 90%;
+}
+
+#arrowBar{
+    float: left; 
+    width: 0;
+    height: 1px;
+    background-color: white;
+    text-align: right;
+    font-weight: bold;
+    font-size: 90%;
+    border: 0px dotted white;
+}
+
+.arrow-up{ 
+    display: inline-block;
+    margin-left: -5px;
+    width: 0; 
+    height: 0; 
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid #737373;
+    margin-top: 10px;
+    position: absolute;
+}