add initial code for social code app; #129

staff/jose-pozo/socialcode/app/components/Component.js

@@ -0,0 +1,59 @@
+class Component {
+    constructor(tagNameOrContainer = 'div') {
+        if (typeof tagNameOrContainer === 'string')
+            this.container = document.createElement(tagNameOrContainer)
+        else if (tagNameOrContainer instanceof HTMLElement || tagNameOrContainer instanceof HTMLDListElement)
+            this.container = tagNameOrContainer
+        else
+            throw new Error('tagNameOrContainer is not a tagName or Container')
+
+        this.children = []
+    }
+
+    add(child) {
+        if (!(child instanceof Component)) throw new error TypeErrror('child is not component')
+
+        this.children.push(child)
+
+        this.container.appendChild(child.container)
+    }
+
+    remove(child) {
+        if (!(child instanceof Component)) throw new TypeError('child is not a component')
+
+        const index = this.children.indexOf(child)
+
+        if (index > -1)
+            this.children.splice(index, 1)
+
+        this.container.removeChild(child.container)
+    }
+
+    setText(text) {
+        this.container.innerText = text
+    }
+
+    setId(id) {
+        this.container.id = id
+    }
+
+    addClass(clazz) {
+        this.container.classList.add(clazz)
+    }
+
+    removeClass(clazz) {
+        this.container.classList.remove(clazz)
+    }
+
+    onClick(listener) {
+        this.container.addEventListener('click', listener)
+    }
+
+    onKeyDown(listener) {
+        this.container.addEventListener('keydown', listener)
+    }
+
+    onKeyUp(listener) {
+        this.container.addEventListener('keyup', listener)
+    }
+}

staff/jose-pozo/socialcode/app/components/core/Button.css

@@ -0,0 +1,6 @@
+.Button {
+    padding: .4rem;
+    background-color: transparent;
+    font-size: 1rem;
+    border: 1px solid var(--first-color);
+}

staff/jose-pozo/socialcode/app/components/core/Button.js

@@ -0,0 +1,11 @@
+class Button extends Component {
+    constructor() {
+        super('button')
+
+        this.addClass('Button')
+    }
+
+    setType(type) {
+        this.container.type = type
+    }
+}

staff/jose-pozo/socialcode/app/components/core/Field.css

@@ -0,0 +1,5 @@
+.Field {
+    display: flex;
+    flex-direction: column;
+    margin: .25rem 0;
+}

staff/jose-pozo/socialcode/app/components/core/Field.js

@@ -0,0 +1,28 @@
+class Field extends Component {
+    constructor(id, type, text) {
+        super('div')
+
+        this.addClass('Field')
+
+        const label = new label
+        label.setText(text)
+        label.setFor(id)
+
+        const input = new input
+        input.setId(id)
+        input.setType(type)
+
+        this.add(label)
+        this.add(input)
+    }
+
+    setPlaceholder(placeholder) {
+        this.children[1].setPlaceholder(placeholder)
+    }
+
+    getValue() {
+        const input = this.children[1]
+
+        return input.getValue()
+    }
+}

staff/jose-pozo/socialcode/app/components/core/Form.css

@@ -0,0 +1,5 @@
+.Form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

staff/jose-pozo/socialcode/app/components/core/Form.js

@@ -0,0 +1,15 @@
+class Form extends Component {
+    constructor() {
+        super('form')
+
+        this.addClass('Form')
+    }
+
+    onSubmit(listener) {
+        this.container.addEventListener('submit', listener)
+    }
+
+    clear() {
+        this.container.reset()
+    }
+}

staff/jose-pozo/socialcode/app/components/core/Heading.js

@@ -0,0 +1,5 @@
+class Heading extends Component {
+    constructor(level) {
+        super('h' + level)
+    }
+}

staff/jose-pozo/socialcode/app/components/core/Image.css

@@ -0,0 +1,3 @@
+.Image {
+    width: 100%;
+}

staff/jose-pozo/socialcode/app/components/core/Image.js

@@ -0,0 +1,15 @@
+class Image extends Component {
+    constructor() {
+        super('img')
+
+        this.addClass('image')
+    }
+
+    setUrl(url) {
+        this.container.src = url
+    }
+
+    setAltText(altText) {
+        this.container.alt = altText
+    }
+}

staff/jose-pozo/socialcode/app/components/core/Input.css

@@ -0,0 +1,6 @@
+.Input {
+    padding: .4rem;
+    background-color: transparent;
+    font-size: 1rem;
+    border: 1px solid var(--first-color);
+}

staff/jose-pozo/socialcode/app/components/core/Input.js

@@ -0,0 +1,19 @@
+class Input extends Compnent {
+    constructor() {
+        super('input')
+
+        this.addClass('Input')
+    }
+
+    setType(type) {
+        this.container.type = type
+    }
+
+    setPlaceholder(placeholder) {
+        this.container.placeholder = placeholder
+    }
+
+    getValue() {
+        return this.container.value
+    }
+}

staff/jose-pozo/socialcode/app/components/core/Label.js

@@ -0,0 +1,9 @@
+class Label extends Component {
+    constructor() {
+        super('label')
+    }
+
+    setFor(id) {
+        this.container.htmlFor = id
+    }
+}

staff/jose-pozo/socialcode/app/components/core/Link.js

@@ -0,0 +1,15 @@
+class Link extends Component {
+    constructor() {
+        super('a')
+
+        this.setUrl('')
+    }
+
+    setUrl(url) {
+        this.container.href = url
+    }
+
+    setTarget(target) {
+        this.container.target = target
+    }
+}

staff/jose-pozo/socialcode/app/components/core/SubmitButton.css

@@ -0,0 +1,3 @@
+.SubmitButton {
+    margin: .5rem 0;
+}

staff/jose-pozo/socialcode/app/components/core/SubmitButton.js

@@ -0,0 +1,10 @@
+class SubmitButton extends Button {
+    constructor(text) {
+        super()
+
+        this.addClass('submitButton')
+
+        this.setType('submit')
+        this.setText(text)
+    }
+}

staff/jose-pozo/socialcode/app/components/library/FormWithFeedback.css

@@ -0,0 +1,11 @@
+.FormWithFeedback {
+    padding: 1rem;
+}
+
+.FormWithFeedback .Feedback {
+    color: tomato;
+}
+
+.FormWithFeedback .Feedback.success {
+    color: greenyellow;
+}

staff/jose-pozo/socialcode/app/components/library/FormWithFeedback.js

@@ -0,0 +1,30 @@
+class FormWithFeedback extends Form {
+    constructor() {
+        super()
+
+        this.addClass('FormWithFeedback')
+
+        const feedbackPanel = new CompositionEvent('p')
+        feedbackPanel.addClass('Feedback')
+
+        this.feedbackPanel = feedbackPanel
+    }
+
+    setFeedback(message, level) {
+        if (level === 'succes')
+            this.feedbackPanel.addClass('succes')
+
+        this.feedbackPanel.setText(message)
+
+        this.add(this.feedbackPanel)
+    }
+
+    clear() {
+        super.clear()
+
+        this.feedbackPanel.setText('')
+        this.feedbackPanel.removeClass('succes')
+
+        this.remove(this.feedbackPanel)
+    }
+}

staff/jose-pozo/socialcode/app/home/index.css

@@ -0,0 +1,30 @@
+.View {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 4rem 0;
+}
+
+.Header {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+    justify-content: right;
+    position: fixed;
+    top: 0;
+    padding: .5rem;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--first-color);
+    background-color: var(--second-color);
+}
+
+.Footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    bottom: 0;
+    padding: .5rem 0;
+    border-top: 1px solid var(--first-color);
+    background-color: var(--second-color);
+}

staff/jose-pozo/socialcode/app/home/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home</title>
+
+    <link rel="stylesheet" href="../global.css">
+
+    <link rel="stylesheet" href="../components/core/Button.css">
+    <link rel="stylesheet" href="../components/core/Image.css">
+
+    <link rel="stylesheet" href="./index.css">
+</head>
+
+<body>
+    <script src="../data.js"></script>
+
+    <script src="../logic.js"></script>
+
+    <script src="../components/Component.js"></script>
+    <script src="../components/core/Button.js"></script>
+    <script src="../components/core/Heading.js"></script>
+    <script src="../components/core/Image.js"></script>
+
+    <script src="./index.js"></script>
+</body>
+
+</html>