---
tags: wizardamigos
---

# Notes for the Basic web component workshop

We are building a basic input integer (number input) component.

### [Web Course Playlist](https://youtube.com/playlist?list=PLubqJ-IuY27BQ7sDNZraRYcFWjmU3JABz)
You will learn about:
- the basic setup
- basics of html
- basics of css
- basics of javascript
- pushing code to github
- publishing and requiring components from NPM

--------------------------------------------------------------------------------------------------------------------

## :zap: 1. TERMINAL COMMANDS

# basics
ls # lists all files and folders in your current path
cd .. # goes one level up your path
clear # clears everything from the terminal
pwd # shows your current path (i.e. me/Documents/code/temp/input-integer)
cd some-folder-in-your-path # changes directory to that chosen subfolder
rm -rf some-folder-name # delete a certain subfolder in your current path
rm -rf path-to-folder # delete any folder unrelated of your current  (i.e. me/Documents/code/temp/input-integer)

# commiting and pushing to github
git add -A
git commit -m 'Some message here'
git push

# few more basics
npm start # starts budo server
npm run start # same as just npm start

# press ctrl c to stop budo server

npm run build # runs browserify and creates bundle.js

# logs
git log --oneline -5 # lists last 5 logs, each in one line
git log # lists all logs in an expanded multiline view

# status and diff
git status
git diff #type q (short for quit) to exit the diff view

[](https://i.imgur.com/4eaGAhx.png)

--------------------------------------------------------------------------------------------------------------------

## :honeybee: 2. JAVASCRIPT CODE EXAMPLES

const name1 = 'Nina' // everything inside of the quotes is called a string
const name2 = "Alex" // you can use single or double quotes for strings
const html = `<h1> </h2>` // if you make more complex strings that include bits of code inside, you should not use quotes, but backticks (see image below to know how to find the backticks on your keyboard)


const html2 = `<h3> ${name2} </h3>` // if we want to use variable name2 inside of our html code, we need to wrap the whole html in backticks and javascript code (variable name2) has to be wrapped in dollar, open curly brace, closed curly brace ${}

const x = 'Hello'
const y = 'World'
const z = `${x} ${y}` // returns 'Hello World'; because we are using variables, we need to wrap the new string in backticks ` again and then each variable also in ${}

[](https://i.imgur.com/3EMM2zL.png)

--------------------------------------------------------------------------------------------------------------------

## :bug: 3. DEBUGGING

In computer technology, a bug is a coding error in a computer program.

if something doesn't seem to work the way you expect it, open developer tools and click the console tab to see if there is an error message. Then you can start your debugging process (figuring out why your code doesn't work and fixing it)

#### right click and select inspect

#### click console tab and search for error message

--------------------------------------------------------------------------------------------------------------------

## :seedling: 4. COMPONENT CODE

### :sunflower: VERSION 1 (https://youtu.be/I-vLUcGkXTs)

---
#### src/index.js (inputInteger component)

module.exports = inputInteger

function inputInterger () {
  const el = 'I am a string'
  return el // el is a string !!!!!!!!!!!!
}

---
#### demo/demo.js

const inputInteger = require('..')

const x = inputInteger() // x is a string because inputInteger returns an element that is a string

document.body.innerHTML = `<h1> ${x} </h1>` // we have to add the string to the html and set document.bodyinnerHTML to this html string (in order to make it a dom element = make it visible in the browser)

Because x is in this example a string (returned by inputInteger module), we can only use it in a HTML string and set document.body.innerHTML to the html string (`<h1> ${x} </h1>`) and this way make it a dom element

---
#### index.html

[](https://i.imgur.com/qrCj4w2.png)

---
#### package.json
[](https://i.imgur.com/Cl7hyuz.png)

--------------------------------------------------------------------------------------------------------------------

### :sunflower: VERSION 2 (https://youtu.be/MgzIp-j3Mrc)

---
#### src/index.js (inputInteger component)

module.exports = inputInteger

function inputInteger() {
    const el = document.createElement('div') 
    const shadow = el.attachShadow({ mode: 'closed' })
    shadow.innerHTML = 
    `
        <input></input>
    `
    return el // el is a dom element !!!!!!!!!!!!
}

---
#### demo/demo.js

const inputInteger = require('..')

const x = inputInteger() // x is now a dom element, because inputInteger returns a dom element (not a string as in version 1 above)

document.body.append(x)

Because x is in this example a dom element (returned by inputInteger module), we can only append it to document.body

---
#### index.html
[](https://i.imgur.com/qrCj4w2.png)

---
#### package.json

[](https://i.imgur.com/Cl7hyuz.png)

---

### :sunflower: VERSION 3 (https://youtu.be/fT9IxLuLkMQ)

#### index.js

[](https://i.imgur.com/fgu9fIp.png)

---
### :sunflower: VERSION 4 (https://www.youtube.com/watch?v=KkBTF7e7Z2c)

#### demo/demo.js
[](https://i.imgur.com/Km43oK1.png)

---
#### src/index.js inputInteger function
[](https://i.imgur.com/2y9OQOW.png)

### src/index.js handlers
[](https://i.imgur.com/tg6XqQ2.png)

---

## :gift: NEXT - coming soon

### Certificate
for everyone who has **successfully finished the workshop (ping @ninabreznik or @serapath in the Discord chat to review your work and issue a certificate)

### New advanced-web-component-workshop
starting mid August