modified app.4 b00tc4mp#45

BertaAsensio · Feb 13, 2025 · 7b95538 · 7b95538
1 parent 925ca8b
commit 7b95538
Show file tree

Hide file tree

Showing 17 changed files with 544 additions and 0 deletions.
diff --git a/staff/berta-asensio/product/zzz/app.4/index.html b/staff/berta-asensio/product/zzz/app.4/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
+    </head>
+
+    <body>
+        <script src="./view/Component.js"></script>
+        <script src="./view/Anchor.js"></script>
+        <script src="./view/Article.js"></script>
+        <script src="./view/Body.js"></script>
+        <script src="./view/Br.js"></script>
+        <script src="./view/Button.js"></script>
+        <script src="./view/Form.js"></script>
+        <script src="./view/Heading.js"></script>
+        <script src="./view/Image.js"></script>
+        <script src="./view/Input.js"></script>
+        <script src="./view/Label.js"></script>
+
+        <script src="./view/custom/Homepage.js"></script> 
+        <script src="./view/custom/Landing.js"></script>
+        <script src="./view/custom/Login.js"></script>
+        <script src="./view/custom/Register.js"></script>
+
+        <script src="main.js"></script>
+    </body>
+
+</html>
diff --git a/staff/berta-asensio/product/zzz/app.4/main.js b/staff/berta-asensio/product/zzz/app.4/main.js
@@ -0,0 +1,62 @@
+console.clear()
+
+var body = new Body()
+document.body = body.container
+
+body.container.style.backgroundColor = '#FFD033'
+body.container.style.fontFamily = 'nunito'
+
+//LANDING
+var landing = new Landing
+
+landing.addRegisterClickListener(function() {
+    body.remove(landing)
+    body.add(register)
+})
+
+landing.addLoginClickListener(function() {
+    body.remove(landing)
+    body.add(login)
+})
+
+body.add(landing) // Esta línea establece que se abra landing como inicio
+
+//REGISTER
+var register = new Register()
+
+
+register.addRegisterSubmitListener(function() {
+    body.remove(register)
+    body.add(login)
+})
+
+//hago lo mismo con el anchor de return:
+register.addReturnClickListener(function() {
+    body.remove(register)
+    body.add(landing)
+})
+
+//LOGIN
+
+var login = new Login()
+
+login.addLoginSubmitListener(function() {
+    body.remove(login)
+    body.add(home)
+})
+
+login.addReturnClickListener(function() {
+    body.remove(login)
+    body.add(register)
+})
+
+//HOME
+
+var home = new Home()
+
+home.addLogOutClickListener(function() {
+    body.remove(home)
+    body.add(landing)
+})
+
+
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Anchor.js b/staff/berta-asensio/product/zzz/app.4/view/Anchor.js
@@ -0,0 +1,10 @@
+function Anchor() {
+    Component.call(this, 'a')
+}
+
+Anchor.prototype = Object.create(Component.prototype)
+Anchor.prototype.constructor = Anchor
+
+Anchor.prototype.setText = function(text) {
+    this.container.textContent = text
+}
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Article.js b/staff/berta-asensio/product/zzz/app.4/view/Article.js
@@ -0,0 +1,6 @@
+function Article() {
+    Component.call(this, 'article')
+}
+
+Article.prototype = Object.create(Component.prototype)
+Article.prototype.constructor = Article
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Body.js b/staff/berta-asensio/product/zzz/app.4/view/Body.js
@@ -0,0 +1,6 @@
+function Body() {
+    Component.call(this, 'body')
+}
+
+Body.prototype = Object.create(Component.prototype)
+Body.prototype.constructor = Body
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Br.js b/staff/berta-asensio/product/zzz/app.4/view/Br.js
@@ -0,0 +1,6 @@
+function Br() {
+    Component.call(this, 'br')
+}
+
+Br.prototype = Object.create(Component.prototype)
+Br.prototype.constructor = Br
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Button.js b/staff/berta-asensio/product/zzz/app.4/view/Button.js
@@ -0,0 +1,13 @@
+function Button() {
+    Component.call(this, 'button')
+}
+
+Button.prototype = Object.create(Component.prototype)
+Button.prototype.constructor = Button
+
+Button.prototype.setType = function(type) {
+    this.container.type = type
+}
+Button.prototype.setText = function(text) {
+    this.container.textContent = text
+}
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Component.js b/staff/berta-asensio/product/zzz/app.4/view/Component.js
@@ -0,0 +1,15 @@
+function Component(tagName) {
+    this.container = document.createElement(tagName)
+}
+
+Component.prototype.add = function (child) {
+    this.container.appendChild(child.container)
+}
+
+Component.prototype.remove = function (child) {
+    this.container.removeChild(child.container)
+}
+
+Component.prototype.addClickListener = function(listener) {
+    this.container.addEventListener('click', listener)
+}
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Form.js b/staff/berta-asensio/product/zzz/app.4/view/Form.js
@@ -0,0 +1,15 @@
+function Form() {
+    Component.call(this, 'form')
+}
+
+Form.prototype = Object.create(Component.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.addSubmitListener = function(listener) {
+    this.container.addEventListener('submit', listener)
+}
+
+//Creamos este metodo para  llamar aquí a la funcion reset. Luego, en register page llamamos a clear. Así dejamos aquí el DOM
+Form.prototype.clear = function () {
+    this.container.reset()
+}
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Heading.js b/staff/berta-asensio/product/zzz/app.4/view/Heading.js
@@ -0,0 +1,10 @@
+function Heading(level) {
+    Component.call(this, 'h' + level)
+}
+
+Heading.prototype = Object.create(Component.prototype)
+Heading.prototype.constructor = Heading
+
+Heading.prototype.setText = function(text) {
+    this.container.textContent = text
+}
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Image.js b/staff/berta-asensio/product/zzz/app.4/view/Image.js
@@ -0,0 +1,9 @@
+function Image() {
+    Component.call(this, 'img')
+}
+Image.prototype = Object.create(Component.prototype)
+Image.prototype.constructor = Image
+
+Image.prototype.setSrc = function(src) {
+    this.container.src = src
+}
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Input.js b/staff/berta-asensio/product/zzz/app.4/view/Input.js
@@ -0,0 +1,18 @@
+function Input() {
+    Component.call(this, 'input')
+}
+
+Input.prototype = Object.create(Component.prototype)
+Input.prototype.constructor = Input
+
+Input.prototype.setType = function(type) {
+    this.container.type = type
+}
+
+Input.prototype.setPlaceholder = function (placeholder) {
+    this.container.placeholder = placeholder
+}
+
+Input.prototype.getValue = function() {
+    return this.container.value
+}
diff --git a/staff/berta-asensio/product/zzz/app.4/view/Label.js b/staff/berta-asensio/product/zzz/app.4/view/Label.js
@@ -0,0 +1,10 @@
+function Label() {
+    Component.call(this, 'label')
+}
+
+Label.prototype = Object.create(Component.prototype)
+Label.prototype.constructor = Label
+
+Label.prototype.setText = function(text) {
+    this.container.textContent = text
+}
diff --git a/staff/berta-asensio/product/zzz/app.4/view/custom/Homepage.js b/staff/berta-asensio/product/zzz/app.4/view/custom/Homepage.js
@@ -0,0 +1,74 @@
+function Home() {
+    Component.call(this, 'div')
+
+    var logo = new Heading(1)
+    logo.setText('Bee you')
+    this.add(logo)
+
+    //HOME FIRST POST
+
+    var firstPost = new Article()
+    this.add(firstPost)
+
+    var firstPostName = new Heading(3)
+    firstPostName.setText('name1')
+    firstPost.add(firstPostName)
+
+    var squareImg = new Component('div')
+    this.add(squareImg)
+    /*
+    squareImg.style.width = '200px'
+    squareImg.style.height = '200px'
+    squareImg.style.overflow = 'hidden'
+    */
+    var firstPostPicture = new Image()
+    firstPostPicture.setSrc ('https://imgs.search.brave.com/2EcBw2UdTyJRdsx6Gp7xfBHA0A1__0QFLtCgvSXM8HE/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly90aHVt/YnMuZHJlYW1zdGlt/ZS5jb20vYi9jaGlj/YS1lbi1waWNvLWRl/LW1vbnRhJUMzJUIx/YS1taXJhbmRvLWhl/cm1vc2FzLW1vbnRh/JUMzJUIxYXMtYWwt/YXRhcmRlY2VyLWNv/bi1oaWVyYmEtdmVy/ZGUtaGVybW9zby12/YWxsZS1uaWVibGEt/dmVyYW5vLXBhaXNh/amUtbXVqZXItam92/ZW4tMjEyMzQyMDQ4/LmpwZw')
+    /*
+    firstPostPicture.style.width = '50%'
+    firstPostPicture.style.height = '75%'
+    firstPostPicture.style.objectFit = 'cover'
+    firstPostPicture.style.objectPosition = 'top'
+    */
+    firstPost.add(firstPostPicture)
+
+    // HOME SECOND POST
+
+    var secondPost = new Article()
+    this.add(secondPost)
+
+    var secondPostName = new Heading(3)
+    secondPostName.setText('name2')
+    secondPost.add(secondPostName)
+    /*
+    var squareImg2 = new Component('div')
+    this.add(squareImg2)
+
+    squareImg2.style.width = '200px'
+    squareImg2.style.height = '200px'
+    squareImg2.style.overflow = 'hidden'
+    */
+    var secondPostPicture = new Image()
+    secondPostPicture.setSrc ('https://imgs.search.brave.com/IECfcLf6yGbgIjkrA3ODeCopIIl7bBMn9KCd8-fWCn8/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9jZG4u/cGl4YWJheS5jb20v/cGhvdG8vMjAxNi8x/MS8yMy8xNS8xNC9i/ZWFjaC0xODUzNDQy/XzY0MC5qcGc')
+    secondPost.add(secondPostPicture)
+    /*
+    secondPostPicture.style.width = '50%'
+    secondPostPicture.style.height = '75%'
+    secondPostPicture.style.objectFit = 'cover'
+    secondPostPicture.style.objectPosition = 'top'
+    */
+
+    //logout anchor
+
+    var logOutAnchor = new Anchor()
+    logOutAnchor.setText('Logout')
+
+    this.add(logOutAnchor)
+    this.logOutAnchor = logOutAnchor
+}
+
+Home.prototype = Object.create(Component.prototype)
+Home.prototype.constructor = Home
+
+Home.prototype.addLogOutClickListener = function(listener) {
+    this.logOutAnchor.addClickListener(listener)
+}
diff --git a/staff/berta-asensio/product/zzz/app.4/view/custom/Landing.js b/staff/berta-asensio/product/zzz/app.4/view/custom/Landing.js
@@ -0,0 +1,41 @@
+function Landing() {
+    Component.call(this, 'div')
+
+    var logo = new Heading(1)
+    logo.setText('Bee you')
+    this.add(logo)
+
+    //register button
+
+    var registerButton = new Button()
+    registerButton.setText('Register')
+    this.add(registerButton)
+    this.registerButton = registerButton
+
+    // simple text
+
+    var spaceText = document.createTextNode(' ')
+    this.container.appendChild(spaceText)
+    var orText = document.createTextNode('or')
+    this.container.appendChild(orText)
+    var spaceText2 = document.createTextNode(' ')
+    this.container.appendChild(spaceText2)
+
+    //login anchor  
+
+    var loginButton = new Button()
+    loginButton.setText('Login')
+    this.add(loginButton)
+    this.loginButton = loginButton
+}
+
+Landing.prototype = Object.create(Component.prototype)
+Landing.prototype.constructor = Landing
+
+Landing.prototype.addRegisterClickListener = function(listener) {
+    this.registerButton.addClickListener(listener)
+}
+
+Landing.prototype.addLoginClickListener = function(listener) {
+    this.loginButton.addClickListener(listener)
+}