add colours to digits

package.json

@@ -19,7 +19,7 @@
   },
   "config": {
     "customUrl": "http://pug-starter.codetap.io",
-    "githubUrl": "http://github.com/marianzburlea/pug-starter.git",
+    "githubUrl": "http://github.com/marianzburlea/simple-math.git",
     "deployToGithubIo": true,
     "directory": {
       "development": "tmp",
@@ -114,11 +114,10 @@
     "gulp-postcss": "8.0.0",
     "gulp-pug": "4.0.1",
     "gulp-rename": "1.4.0",
-    "gulp-sass": "4.0.2",
+    "gulp-sass": "^4.1.0",
     "gulp-sass-variables": "1.2.0",
     "gulp-sourcemaps": "2.6.5",
     "imagemin-gifsicle": "6.0.1",
-    "imagemin-jpegoptim": "5.0.0",
     "imagemin-jpegtran": "6.0.0",
     "imagemin-optipng": "7.0.0",
     "imagemin-pngquant": "8.0.0",

src/_asset/js/math.js

@@ -1,17 +1,33 @@
-const getRandomNumber = (m = 1) => ~~(Math.random() * 10 * m);
+let numberOfDigits = 1;
+const getRandomNumber = (m = 1) => ~~(Math.random() * Math.pow(10, numberOfDigits) * m);
 let multiplier = 3;
 
 const addNumbersContainer = document.querySelector(".add-numbers");
 const length = 25;
-const a = 2;
+
+const colorList = [
+  '14a6d2',
+  'd49811',
+  '65a20f',
+  'cc1313',
+  '036',
+  '000',
+]
 
 Array.from({ length }).forEach(() => {
   // create a wrapper to hold the assignment and the result
   const row = document.createElement("div");
   row.className = "row";
   const firstNumber = getRandomNumber(multiplier);
   const secondNumber = getRandomNumber(multiplier);
-  row.innerText = `${firstNumber} + ${secondNumber} = `;
+
+  const getColoredText = number => String(number)
+    .split('')
+    .reverse()
+    .map((n, k) => `<span style="color: #${colorList[k]}">${n}</span>`)
+    .reverse()
+    .join('')
+  row.innerHTML = `${getColoredText(firstNumber)} <span style="color: #cc1313">&times;</span> ${getColoredText(secondNumber)} <span style="color: #cc1313">=</span> `;
 
   // add an input to write the solution in
   const input = document.createElement("input");

src/index.pug

@@ -5,21 +5,11 @@ html(lang="en")
     meta(name="viewport", content="width=device-width, initial-scale=1.0")
     meta(http-equiv="X-UA-Compatible", content="ie=edge")
     title Simple Math
-    style.
-      .error { background: #c00; color: #fff}
-      .success { background: #0c0; color: #fff}
-      .input-text { padding: 1rem }
-      input[type=number]::-webkit-inner-spin-button, 
-      input[type=number]::-webkit-outer-spin-button { 
-        -webkit-appearance: none; 
-        margin: 0; 
-      }
-      .row button { padding: 1rem }
-      .row { display: inline-block; margin: 1rem; width: 250px; text-align: right}
+    link(rel="stylesheet", href="style.css")
   body
     h1 Simple math
     h2 Adding Numbers
     .add-numbers
     //- script(src="/asset/js/math.js")
     script
-      include _asset/js/math.js
+      include _asset/js/math.js

src/style.scss

@@ -0,0 +1,38 @@
+.add-numbers {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 1rem;
+}
+
+.row {
+  white-space: nowrap;
+  justify-self: flex-end;
+
+  span {
+    font-size: 2rem;
+  }
+}
+
+.error {
+  background: #c00;
+  color: #fff
+}
+
+.success {
+  background: #0c0;
+  color: #fff
+}
+
+.input-text {
+  padding: 1rem
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.row button {
+  padding: 1rem
+}