Add files via upload

KhalilAbuawad · Feb 25, 2020 · e53eae0 · e53eae0
1 parent 9341a7e
commit e53eae0
Show file tree

Hide file tree

Showing 4 changed files with 229 additions and 0 deletions.
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,87 @@
+
+.font {
+    font: 25px  arial, sans-serif;
+    padding-left: 20px;
+}
+
+html, body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.topText {
+    text-align: left;
+    margin-top: 2px;
+    margin-left: 10px;
+    color: gray;
+    font: italic 12px  arial, sans-serif;
+}
+
+.boxText {
+    font: 15px  arial, sans-serif;
+    margin-left: 30px;
+}
+
+#boxRightText {
+    margin-top: 30px;
+}
+
+#graftext {
+    margin-left: 20px;
+}
+
+.input {
+    width: 65px;
+    height: 25px; 
+    margin-left: 30px;
+    margin-bottom: 5px;
+}
+
+.boxleft {
+    width: 200px;
+    height: 180px;
+    float:left;
+    border: black solid thin;
+    box-sizing: border-box;
+}
+
+.boxright{
+    border-style: solid solid solid none;
+    border-width: thin;
+    width: 200px;
+    height: 180px;
+    float:left;
+    box-sizing: border-box;
+}
+
+.button {
+    background: rgba(0, 255, 0, 0.774);
+    border-radius: 10px;
+    width: 78px;
+    height: 38px; 
+    text-align: center;
+    line-height: 35px;
+    justify-content: center;
+    border: black solid thin;
+    margin-left: 30px;
+    cursor: pointer;
+    user-select: none; /* Standard */
+}
+
+::-webkit-input-placeholder { /* Edge */
+    margin-left:10px;
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    margin-left:10px;
+}
+
+::placeholder {
+    margin-left:10px;
+}
+
+:required {
+    background: red;
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+    /> 
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./index.js"></script>
+  </body> 
+</html>
+
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,7 @@
+// src/index.js
+import React from "react";
+import ReactDOM from "react-dom";
+import Skjema from "./skjema.js";
+import './index.css'
+
+ReactDOM.render(<Skjema/>, document.getElementById("root"));
diff --git a/src/skjema.js b/src/skjema.js
@@ -0,0 +1,120 @@
+// skjema.js
+import React, {useState} from "react";
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+
+export default function skjema() {
+
+    //input field data
+    const [input, setInput] = useState('');
+
+    //pie chart data
+    const [pie, setPie] = useState([{
+        name: '7',
+        y: 7
+      }, {
+        name: '8',
+        y: 2
+      }, {
+        name: '3',
+        y: 3
+    }]);
+
+    //options used in piechart
+    const [options, setOptions] = useState({
+        chart: {
+          type: 'pie',
+          margin: [0, 0, 0, 0]
+        },
+        series: [
+          {
+            data: pie // initilize with pie's data
+          }
+        ],
+        credits: {
+            enabled: false
+        },
+        title: false,
+        plotOptions:{
+            pie:{
+                dataLabels:{
+                    distance:-20, // places the label in the center of the pie slice
+                    color:'black',
+                    style:{
+                        textOutline:false
+                    }
+                }
+            }
+        },
+        responsive: {  
+            rules: [{  
+              condition: {  
+                maxWidth: 200  
+              }
+            }]  
+          }
+    });
+
+    const handleChange = event => {
+        const { value } = event.target;
+        setInput(value)
+    }
+
+    const submitForm = () => {
+        var found = false;
+
+        // only 1-9 is allowed to be stored in pie
+        if(input > 0 && input < 10){
+
+            //check for number in pie
+            pie.map(obj => {
+                if(obj.name === input){
+                    found = true;
+                    obj.y += 1;
+                    console.log(obj.y)
+                    obj = {...obj, y:obj.y}
+                }
+            })
+
+            // checks if number was new or not and adds it to pie state accordingly
+            if(found){
+                setPie(pie)
+            }else{
+                setPie(prev => [
+                    ...prev,
+                    {
+                        name:input,
+                        y: 1,
+                    }
+                ])
+            }
+
+            // updates options data
+            setOptions(prev => ({
+                ...prev,
+                series: {
+                    data:pie
+                }
+            }))
+        }
+
+    }
+
+    return (
+        <div>
+            <h1 className="font">Hva er folks favoritt tall?</h1>
+            <div className="boxleft">
+                <div className="topText">skjema</div>
+                <div id="boxRightText" className="boxText">Ditt tall</div>
+                <input className="input" id="inNr" type="text" pattern="[1-9]" placeholder="1-9" value={input} onChange={handleChange} ></input>
+                <div className="button" onClick={submitForm}>Send inn</div>
+            </div>
+            <div className="boxright" >
+                <div className="topText">graf</div>
+                <HighchartsReact containerProps={{ style: { height: "70%" } }} highcharts={Highcharts} options={options} />
+                <div className="boxText" id="graftext">Resultat av avstemning</div>
+            </div>
+        </div>
+    );
+};
+