diff --git a/.gitignore b/.gitignore index 40b878d..8617652 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ -node_modules/ \ No newline at end of file +node_modules/ +dist/ +.vscode/ diff --git a/.vscode/settings.json b/.vscode/settings.json index 6b665aa..4c7ff40 100644 --- 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 index e829176..775003a 100644 --- 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/.js ``` + diff --git a/dist/index.js b/dist/index.js index b3d6ed1..3918c74 100644 --- 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 new file mode 100644 index 0000000..86051c4 --- /dev/null +++ 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 index 8fd5224..80423cc 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,56 @@ - - - - - - - Document - - - - + + + + + + Calculator + + + + +

Project
Calculator TS

+
+
+
+
+
3+6
+
+
+ ( +
+
+ ) +
+
COS
+
SIN
+
TAN
+
7
+
8
+
9
+
/
+
C
+
4
+
5
+
6
+
x
+
=
+
1
+
2
+
3
+
-
+
+/-
+
0
+
.
+
+
+
+
+
- + + + - \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..f41286b --- /dev/null +++ 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 new file mode 100644 index 0000000..047cc25 --- /dev/null +++ b/index.ts @@ -0,0 +1,8 @@ + +// let varNumb = document.getElementById('ids') + +// varNumb?.addEventListener('click', () => { +// console.log('ok') +// }) + +//addition buttons function ===> \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8b9ecd1..4b85238 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,4 +34,4 @@ "dev": true } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index 5e76502..ccf2708 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,11 @@ "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": "", @@ -13,4 +14,4 @@ "devDependencies": { "typescript": "^4.8.4" } -} +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 547c72d..1cabe3d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1 +1,2 @@ -const compt:string = "55" \ No newline at end of file +const compt:string = "55" +const compt2:string = "5555" \ No newline at end of file diff --git a/src/multiplication.ts b/src/multiplication.ts new file mode 100644 index 0000000..9deb5f3 --- /dev/null +++ b/src/multiplication.ts @@ -0,0 +1,36 @@ +const inputA = document.getElementById('numberA') +const inputB = document.getElementById('numberB') +let numberA: number +let numberB: number +const button = document.querySelector('.button-multiplication') +const showResult = 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 index e69de29..ee1ccde 100644 --- 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; + } +} diff --git a/tsconfig.json b/tsconfig.json index 32b1954..ccf5278 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,9 +1,10 @@ { "compilerOptions": { "outDir": "dist", - "target": "ES2015", + "target": "ES2022", "noEmitOnError": false, "strict": true }, - "files": ["src/index.ts"] + "include": ["src/multiplication.ts"] + }