proyect done Josep Romero

.gitignore

@@ -0,0 +1 @@
+node_modules

Javascript/main.js

@@ -0,0 +1,7 @@
+
+import './module-b'
+import './module-a'
+
+
+import '../assets/main.scss'
+

Javascript/module-a.js

@@ -0,0 +1,18 @@
+class Button{
+    constructor (name){
+        this.name = name
+    }
+}
+const button1 = new Button(".png small")
+const button2 = new Button(".png large")
+const button3 = new Button(".jpg")
+
+document.addEventListener("DOMContentLoaded", ()=>{
+        document.getElementById("btn-container").innerHTML+=`<button class="btn" id="btn1">${button1.name}</button>`
+        document.getElementById("btn-container").innerHTML+=`<button class="btn" id="btn2">${button2.name}</button>`
+        document.getElementById("btn-container").innerHTML+=`<button class="btn" id="btn3">${button3.name}</button>`
+})
+
+
+
+

Javascript/module-b.js

@@ -0,0 +1,10 @@
+$(document).on("click",function(e){
+    if(e.target.id === "btn1"){
+        $("#img1").toggleClass("is__hidden");
+    }
+    else if(e.target.id === "btn2"){
+        $("#img2").toggleClass("is__hidden");
+    }
+
+})
+

assets/_colors.scss

@@ -0,0 +1,4 @@
+.btn{
+    background-color: rgba(0, 0, 0, 0.459);
+    color: whitesmoke;
+}

assets/_spacing.scss

@@ -0,0 +1,24 @@
+.btn{
+    margin: 4rem;
+    width: 5rem;
+    height: 3rem;
+    cursor: pointer;
+}
+
+body{
+    background-image: url("./Images/942057.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.img__container{
+    display: flex;
+    flex-direction: row;
+    height: 30rem;
+}
+
+.is__hidden{
+    display: none;
+}
+

assets/_text.scss

@@ -0,0 +1,10 @@
+body{
+    color: white;
+    background-color: yellowgreen;
+    margin: auto;
+    width: 50rem;
+}
+
+div{
+    margin-top: 5rem;
+}

assets/main.scss

@@ -0,0 +1,3 @@
+@forward  'colors';
+@forward   'text';
+@forward 'spacing';