From 80e0b75d5580abfa9d6d0f098e264799ffc8feb0 Mon Sep 17 00:00:00 2001
From: didier amyot <didier.amyot@gmail.com>
Date: Fri, 20 Oct 2023 18:59:08 -0400
Subject: [PATCH] boom

---
 .gitignore                        |  1 +
 muchomuch/exercice_001/exo1.html  | 96 +++++++++++++++++++++++++++++++
 muchomuch/exercice_001/exo1.js    |  6 ++
 muchomuch/exercice_001/index.html | 25 ++++++++
 muchomuch/exercice_001/script.js  |  4 ++
 5 files changed, 132 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 muchomuch/exercice_001/exo1.html
 create mode 100644 muchomuch/exercice_001/exo1.js
 create mode 100644 muchomuch/exercice_001/index.html
 create mode 100644 muchomuch/exercice_001/script.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..485dee6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea
diff --git a/muchomuch/exercice_001/exo1.html b/muchomuch/exercice_001/exo1.html
new file mode 100644
index 0000000..cfe32a3
--- /dev/null
+++ b/muchomuch/exercice_001/exo1.html
@@ -0,0 +1,96 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>title</title>
+    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
+</head>
+<body>
+<div class="container">
+
+    <div class="columns">
+        <div class="column">
+            <h1 class="title" id="main-title">#main-title</h1>
+        </div>
+    </div>
+
+
+    <div class="columns">
+        <div class="column">
+            <div class="notification is-primary" id="result-box-1">
+                <strong>#result-box-1</strong>
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </div>
+        </div>
+        <div class="column">
+            <div class="notification is-warning" id="result-box-2">
+                <strong>#result-box-2</strong>
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </div>
+        </div>
+        <div class="column">
+            <div class="notification is-primary is-light" id="result-box-3">
+                <strong>#result-box-3</strong>
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </div>
+        </div>
+        <div class="column">
+            <div class="notification is-warning is-light" id="result-box-4">
+                <strong>#result-box-4</strong>
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </div>
+        </div>
+    </div>
+
+    <div class="columns">
+        <div class="column">
+            <label>
+                #input-1
+                <input class="input" placeholder="Text input" type="text" id="input-1">
+            </label>
+        </div>
+        <div class="column">
+            <label>
+                #input-2
+                <input class="input" placeholder="Text input" type="text" id="input-2">
+            </label>
+        </div>
+        <div class="column">
+            <label>
+                #input-3
+                <input class="input" placeholder="Text input" type="text" id="input-3">
+            </label>
+        </div>
+        <div class="column">
+            <label>
+                #input-4
+                <input class="input" placeholder="Text input" type="text" id="input-4">
+            </label>
+        </div>
+    </div>
+
+    <div class="columns">
+        <div class="column">
+            <button type="button" class="button is-primary" id="button-1" onclick="exo1b()" >#button-1</button>
+        </div>
+        <div class="column">
+            <button type="button" class="button is-warning" id="button-2">#button-2</button>
+        </div>
+        <div class="column">
+            <button type="button" class="button is-primary is-light" id="button-3">#button-3</button>
+        </div>
+        <div class="column">
+            <button type="button" class="button is-warning is-light" id="button-4">#button-4</button>
+        </div>
+    </div>
+</div>
+
+
+<script src="exo1.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/muchomuch/exercice_001/exo1.js b/muchomuch/exercice_001/exo1.js
new file mode 100644
index 0000000..8363314
--- /dev/null
+++ b/muchomuch/exercice_001/exo1.js
@@ -0,0 +1,6 @@
+document.getElementById("main-title").innerText = "Input Output";
+
+function exo1b(){
+    let userInput = document.getElementById("input-1").value;
+    document.getElementById("result-box-1").innerText = userInput;
+}
diff --git a/muchomuch/exercice_001/index.html b/muchomuch/exercice_001/index.html
new file mode 100644
index 0000000..420c926
--- /dev/null
+++ b/muchomuch/exercice_001/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>title</title>
+    <script src="script.js"></script>
+</head>
+<body>
+
+<h1><span id="wording"></span></h1>
+
+
+<form>
+    <label>
+        Numéro de téléphone
+        <input type="text" id="telephon-number"/>
+    </label>
+</form>
+
+<button type="button" onclick="sayHello()">Cliquez sur moi!</button>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/muchomuch/exercice_001/script.js b/muchomuch/exercice_001/script.js
new file mode 100644
index 0000000..434a114
--- /dev/null
+++ b/muchomuch/exercice_001/script.js
@@ -0,0 +1,4 @@
+function sayHello(){
+    let output = document.getElementById("telephon-number").value;
+    document.getElementById('wording').innerText = output
+}
\ No newline at end of file