Init

js-cstj · Aug 15, 2020 · 35f0570 · 35f0570
commit 35f0570
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,14 @@
+# https://git-scm.com/docs/gitignore
+# https://help.github.com/articles/ignoring-files
+# Example .gitignore files: https://github.com/github/gitignore
+/bower_components/
+/node_modules/
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+*.css.map
+/.vscode/
diff --git a/README.md b/README.md
@@ -0,0 +1,13 @@
+# application-base
+Application de base pour débuter un projet
+
+## Description
+Description à venir
+
+## Particularités
+
+- Compléter
+
+## Variantes et ajouts possibles
+
+- Compléter
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+	<meta charset="UTF-8"/>
+	<title>Application Javascript</title>
+	<link rel="stylesheet" href="./src/style.css"/>
+	<script type="module">
+		import App from "./src/App.js";
+	</script>
+</head>
+<body>
+	<div id="interface">
+		<header><h1>Application Javascript</h1></header>
+		<footer><span>&copy; 2020</span><strong>Application Javascript</strong></footer>
+		<div class="body" id="app">Le HTML créé par programmation devrait apparaître ici.</div>
+	</div>
+</body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,23 @@
+/**
+ * @module App
+ */
+export default class App {
+	/**
+	 * Méthode principale. Sera appelée après le chargement de la page.
+	 */
+	static main() {
+		console.log("Je suis prêt");
+		var app = document.getElementById("app");
+		// app.innerHTML = "La page est chargée";
+	}
+	/**
+	 * Méthode qui permet d'attendre le chargement de la page avant d'éxécuter le script principal
+	 * @returns undefined Ne retourne rien
+	 */
+	static init() {
+		window.addEventListener("load", () => {
+			this.main();
+		});
+	}
+}
+App.init();
diff --git a/src/style.css b/src/style.css
diff --git a/src/style.scss b/src/style.scss
@@ -0,0 +1,34 @@
+html {
+	height: 100%;
+	font-size: 16px;
+	font-family: arial;
+}
+body {
+	height: 100%;
+	margin: 0;
+}
+#interface {
+	min-height: 100%;
+	display: grid;
+	grid-template-rows: auto 1fr auto;
+	& > header, & > footer {
+		padding: .5em 1em;
+		background-color: #EEE;
+		display: flex;
+		justify-content: space-between;
+	}
+	& > header {
+		order: -1000;
+		h1 {
+			margin: 0;
+		}
+	}
+	& > footer {
+		order: 1000;
+		font-size: smaller;
+	}
+}
+
+#app {
+	padding: 1em;
+}