AlaAtrash · OphelieThomas33 · Jan 15, 2023 · Jan 16, 2023 · Jan 17, 2023 · Jan 13, 2023
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
-node_modules/
+node_modules/
+dist/
+.vscode/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "liveServer.settings.port": 5501
+  "liveServer.settings.port": 5502
 }
diff --git a/README.md b/README.md
@@ -32,7 +32,12 @@ $ npm install
 ```
 $ npx tsc
 $ npx tsc --watch (recompilation automatique)
+```
+
+## Compilation npm
 
+```
+$ npm run build
 
 ```
 
@@ -52,3 +57,4 @@ $ "files": ["src/index.ts", "src/sin_cos.ts"]
 $ Dans un terminal taper la commande suivante:
 $ node ./dist/<name_of_file>.js
 ```
+
diff --git a/dist/index.js b/dist/index.js
@@ -1,2 +1 @@
 "use strict";
-const compt = "55";
diff --git a/dist/multiplication.js b/dist/multiplication.js
@@ -0,0 +1,27 @@
+"use strict";
+const inputA = document.getElementById('numberA');
+const inputB = document.getElementById('numberB');
+let numberA;
+let numberB;
+const button = document.querySelector('.button-multiplication');
+const showResult = document.getElementById('resultat');
+let result = 1;
+const multiplication = (...numbers) => {
+    if (numbers.includes(NaN) || numbers.includes(null)) {
+        showResult.textContent = "Merci de renseigner uniquement des valeurs numériques";
+    }
+    else {
+        console.log("ok ce sont des nombres");
+        for (const number of numbers) {
+            result *= number;
+        }
+        console.log(result);
+        showResult.textContent = "Résultat : " + result.toFixed(2);
+        result = 1;
+    }
+};
+button.addEventListener('click', () => {
+    numberA = parseFloat(inputA.value);
+    numberB = parseFloat(inputB.value);
+    multiplication(numberA, numberB);
+});
diff --git a/index.html b/index.html
@@ -1,16 +1,56 @@
 <!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Calculator</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>Project<br />Calculator TS</h1>
+    <div class="section-calculator">
+      <div class="calculator">
+        <div class="calculator-body">
+          <div class="screen">
+            <div class="result">3+6</div>
+          </div>
+          <div class="key key-opening-parenthesise key-opt" data-value="(">
+            (
+          </div>
+          <div class="key key-closing-parenthesise key-opt" data-value=")">
+            )
+          </div>
+          <div class="key key-cos key-opt" data-value="cos">COS</div>
+          <div class="key key-sin key-opt" data-value="sin">SIN</div>
+          <div class="key key-tan key-opt" data-value="tan">TAN</div>
+          <div class="key key-7 key-blue" data-value="7">7</div>
+          <div class="key key-7 key-blue" data-value="8">8</div>
+          <div class="key key-7 key-blue" data-value="9">9</div>
+          <div class="key key-division" data-value="/">/</div>
+          <div class="key key-C" data-value="c">C</div>
+          <div class="key key-4 key-blue" data-value="4">4</div>
+          <div class="key key-5 key-blue" data-value="5">5</div>
+          <div class="key key-6 key-blue" data-value="6">6</div>
+          <div class="key key-multiplication" data-value="*">x</div>
+          <div class="key key-equal" data-value="=">=</div>
+          <div class="key key-1 key-blue" data-value="1">1</div>
+          <div class="key key-2 key-blue" data-value="2">2</div>
+          <div class="key key-3 key-blue" data-value="3">3</div>
+          <div class="key key-substraction" data-value="-">-</div>
+          <div class="key key-plus-or-minus key-blue" data-value="+/-">+/-</div>
+          <div class="key key-0 key-blue" data-value="0">0</div>
+          <div class="key key-dot key-blue" data-value=".">.</div>
+          <div class="key key-addition" data-value="+">+</div>
+        </div>
+      </div>
+    </div>
     <script type="module" src="dist/index.js"></script>
-</body>
+  </body>
+</html>
+
 
-</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,46 @@
+import * as fs from 'fs';
+import { execSync } from 'child_process';
+import * as path from 'path';
+
+// example file and directory to copy
+//const sourceDirectory = ["./", "./style"];
+const sourceDirectory = ['./'];
+const destinationDirectory = 'dist/';
+
+if (fs.existsSync("./dist")) {
+  fs.rmSync(destinationDirectory, { recursive: true });
+}
+
+if (!fs.existsSync("./dist")) {
+  fs.mkdirSync("./dist");
+}
+
+sourceDirectory.forEach((dir) => {
+  cpyFile(dir, destinationDirectory);
+});
+
+function cpyFile(directory, destination) {
+  fs.readdir(directory, (err, files) => {
+    if (err) {
+      console.error(err);
+      return;
+    }
+
+    files.forEach((file) => {
+      if (path.extname(file) === '.html' || path.extname(file) === '.css') {
+        const sourceFile = path.join(directory, file);
+        let destinationFile = path.join(destination, directory);
+        fs.mkdir(destinationFile, { recursive: true }, (err) => {
+          if (err) throw err;
+        });
+        destinationFile = path.join(destinationFile, file);
+        const readStream = fs.createReadStream(sourceFile);
+        const writeStream = fs.createWriteStream(destinationFile);
+        readStream.pipe(writeStream);
+      }
+    });
+  });
+}
+
+//compile Ts file
+execSync('npx tsc');
diff --git a/index.ts b/index.ts
@@ -0,0 +1,8 @@
+
+// let varNumb = document.getElementById('ids')
+
+// varNumb?.addEventListener('click', () => {
+//   console.log('ok')
+// })
+
+//addition buttons function ===>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,15 +2,16 @@
   "name": "typescript",
   "version": "1.0.0",
   "description": "",
-  "main": "src/index.js",
+  "main": "src/multiplication.js",
   "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "node index.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "typescript": "^4.8.4"
   }
-}
+}
diff --git a/src/index.ts b/src/index.ts
@@ -1 +1,2 @@
-const compt:string = "55"
+const compt:string = "55"
+const compt2:string = "5555"
diff --git a/src/multiplication.ts b/src/multiplication.ts
@@ -0,0 +1,36 @@
+const inputA = <HTMLInputElement>document.getElementById('numberA')
+const inputB = <HTMLInputElement>document.getElementById('numberB')
+let numberA: number
+let numberB: number
+const button = <HTMLButtonElement>document.querySelector('.button-multiplication')
+const showResult = <HTMLParagraphElement>document.getElementById('resultat')
+let result: number = 1
+
+
+const multiplication = (...numbers: any) => {
+
+	if (numbers.includes(NaN) || numbers.includes(null)) {
+		showResult.textContent = "Merci de renseigner uniquement des valeurs numériques"
+
+	}
+	else {
+		console.log("ok ce sont des nombres")
+
+		for (const number of numbers) {	
+			result *= number;
+		}
+		console.log(result)
+		showResult.textContent = "Résultat : " + result.toFixed(2);
+		result = 1
+	}
+
+}
+
+
+button.addEventListener('click', () => {
+	numberA =  parseFloat(inputA.value)
+	numberB = parseFloat(inputB.value)
+	multiplication(numberA, numberB)
+})
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,132 @@
+/*** Reset CSS ***/
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Rubik', sans-serif;
+}
+
+body {
+  background-color: #e8c055;
+  background: linear-gradient(45deg, #e8c055, #e9dab2);
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 1.75rem;
+  color: rgb(246, 246, 246);
+  text-shadow: 0 3px 3px #00000033;
+}
+
+h1 {
+  text-align: center;
+  font-size: 3.6rem;
+  margin-bottom: 2.4rem;
+  line-height: 1.05;
+  text-shadow: 0 6px 6px #00000033;
+}
+
+/*** Calculator element ***/
+.calculator {
+  width: clamp(23rem, 80vw, 50rem);
+  background-color: #404f66;
+  border-radius: 9px;
+}
+
+.calculator-body {
+  display: grid;
+  border-radius: 9px;
+  padding: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  column-gap: 1rem;
+  row-gap: 1rem;
+  box-shadow: 0 16px 16px #00000031;
+}
+
+.calculator-body > div {
+  background-color: #e8c055;
+  grid-column-end: span 1;
+  min-height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  box-shadow: 0 4px 4px #00000033;
+}
+
+.calculator-body .key-opt {
+  height: 2.8rem;
+  margin-top: 1.5rem;
+}
+
+.calculator-body .screen {
+  position: relative;
+  grid-column-end: span 5;
+  justify-content: end;
+  padding-right: 1rem;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+
+.calculator-body .screen::after {
+  position: absolute;
+  z-index: 5;
+  content: '';
+  width: 800px;
+  height: 100px;
+  background: #6699b1;
+  transform: skew(-50deg) translateX(50%);
+}
+.calculator-body .result {
+  position: relative;
+  z-index: 10;
+  letter-spacing: 0.25rem;
+}
+.calculator-body .screen,
+.calculator-body .key-blue {
+  background-color: #709db0;
+}
+
+.calculator-body .key-equal {
+  grid-row-end: span 3;
+}
+
+.calculator-body .key {
+  cursor: pointer;
+  transition: background-color 0.3s ease-out;
+}
+.calculator-body .key:hover {
+  background-color: #c7a549;
+}
+.calculator-body .key-blue:hover {
+  background-color: #5c8191;
+}
+
+/*** Media queries ***/
+@media screen and (max-width: 800px) {
+  body {
+    font-size: 1.5rem;
+  }
+  h1 {
+    font-size: 2.6rem;
+  }
+  .calculator {
+    min-width: 100%;
+  }
+  .calculator-body {
+    padding: 1.5rem;
+  }
+}
+@media screen and (max-width: 500px) {
+  body {
+    font-size: 1rem;
+  }
+  .calculator-body {
+    padding: 1rem;
+  }
+}