06_react/uebungen/u12-14_input-price/src/components/inputs/InputPrice.jsx

@@ -15,7 +15,9 @@ const InputPrice = (props) => {
   const handleChange = (e) => {
     // console.log(`Preis: ${e.target.value}`);
     // console.log('RegEx: ', isValidPrice(e.target.value));
-    setPrice(e.target.value);
+    let value = Number(e.target.value);
+
+    setPrice(value);
   };
 
   return (
@@ -29,10 +31,11 @@ const InputPrice = (props) => {
         <input
           type="number"
           name="price"
-          placeholder="0.00"
+          placeholder={0.0}
           aria-label="Price"
-          className={`form-control input-price ${!isValidPrice(price) ? 'is-invalid' : 'is-valid'}`}
-          step="0.01"
+          className={`form-control input-price 
+            ${!isValidPrice(price) ? 'is-invalid' : 'is-valid'}`}
+          step={0.01}
           value={price}
           onChange={handleChange}
         />

06_react/uebungen/u12-14_input-price/src/styles/05_modules/_inputPrice.scss

@@ -3,4 +3,10 @@
   input {
     text-align: center;
   }
+  .error {
+    border: 2px solid #c00;
+  }
+  .valid {
+    border: 2px solid green;
+  }
 }

06_react/uebungen/u12-14_input-price/vite.config.js

@@ -1,7 +1,15 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  css: {
+    preprocessorOptions: {
+      scss: {
+        quietDeps: true, // Unix
+        silenceDeprecations: ['color-functions', 'global-builtin', 'import', 'legacy-js-api', 'if-function'],
+      },
+    },
+  },
+});