The basics of HTML (it’s pretty cool)

July 26, 2020August 2, 2020 by Elizabeth, posted in Something Cool

Sup peoples!

Soooo, you’ve decided to learn some HTML (aka HyperText Markup Language), huh. How cool is that. VERY MUCH c00l. What is HTML, you may be wondering. Basically, it’s the structure of a web page. You know those websites that we ever so often go to as we’re on the google. YUP THOOOOSE! I know.. pretty mind blowing and cool. Okay, so, aside from being the literal skeleton of all web pages (woah), HTML is what lets you (the user) see those images, texts, videos, etc. YOU KNOW WHAT’S EVEN FLIPPING COOLER?? Wait, I need a sec to compose myself, I’m not screaming, I’m just excited.

…

Okay, back to what I was saying. You’re about to learn some HTML basics (aka the first step when creating a website). YOU READY??!! Let’s goo:

What you need:

First offff, you’ll need two programs: an editor and a browser.

Here’s a few examples you can use for an editor:

CodePen

Online website. CodePen is social development environment where you can build and test your code, learn and discover other people’s projects, and more! You can use this as your online editor to start coding! This one already has the editor and the output it will show for the code you put 🙂

Visual Studio Code

Free and open source code editing software! This is the one I use majority of the time and it’s pretty good.

Sublime Text

Sublime Text is one of the best editors, in my opinion. However, I think that after a certain period, you’re going to need to pay to continue using this one.

A browser is used for viewing and testing your website, a few examples for a browser: Google (I recommend using this one), Safari, and Firefox.

HTML Element Anatomy:

quick side note: HTML is made of elements. Majority of the time (not all of the time tho!!) an Html Element consists of two tags (one opening and closing tag).

Here’s a lil diagram to show a paragraph element:

mini breakdown of <p> element (psst it’s the image above hehe) anatomy:

Element name:

This is the name of the element you are using. In our example, we used a <p> element, this would change if you were putting a video, image, header, etc.

Opening tag:

This would have the name of the element, in the example above its p. The name of the element is wrapped in an opening and closing angle bracket.

Element Content:

This is the content of your element. In our example, it’s the text saying: ur cool (which you are very much so btw).

Closing tag:

Although not all elements have a closing tag (such as an image element), in the case of the <p> element there is one. It’s almost exactly like the opening tag EXCEPT it has a forward slash before the element name.

HTML Document Basics To do (to do, to do, to do, to do, to doooo):

To tell the browser that the document you are uploading is a HTML document, start the first line with: <!DOCTYPE html>

To start and end the html document, you wrap all the content with the <html> element.

Inside the <html> document, there are two sections: head section and body section.

About the head section: uses the <head> element. Inside this section, put <meta charset=”utf-8“>, this element indicates and sets the character of your document. Aside from the <title> element which sets the title of your page, another thing I want to mention is that the information put in the head section does not appear to your page’s viewers.

About the body section: uses the <body> element. This part of the html document has all the content you want to show to your website user.

Headings:

There are six different headings. These headings have a lot of different purposes such as for articles, descriptions, titling, and more. Ordered from largest to smallest in size, here are the list of heading elements:

\\ Code:

<h1> This is what the header looks like using h1 </h1>

\\ Output:

This is what the header looks like using h1

\\ Code:

<h2> This is what the header looks like using h2 </h2>

\\ Output:

This is what the header looks like using h2

\\ Code:

<h3> This is what the header looks like using h3 </h3>

\\ Output:

This is what the header looks like using h3

\\ Code:

<h4> This what the header looks like using </h4>

\\ Output:

This is what the header looks like using h4

\\ Code:

<h5> This is what the header looks like using h5 </h5>

\\ Output:

This is what the header looks like using h5

\\ Code:

<h6> This is what the header looks like using h6 </h6>

\\ Output:

This is what the header looks like using h6

Paragraphs:

This element is defined with the <p> tags. This is a paragraph.

\\ Code:

<p> hallo u amazing human </p>

\\ Output:

hallo u amazing human

Divs:

A div (aka division, element, or a container) is the most usable tag in web development and it is used to separate out data in the web page and group elements in your HTML together which can later be styled with CSS. A div can contain any HTML elements, such as links, texts, images, or videos. A div is usually given a unique id to distinguish it from other div elements.

Attributes:

Attributes are used for putting more information for an item and expanding an element’s tag. Attributes are added to the opening tag of an element and include a name and a value. There should be a space between the attribute and element. The attribute name should be followed by an ‘=’ sign. The attribute value should be wrapped by an opening and closing quotation mark.

Lists:

There are ordered lists and unordered lists. Unordered lists are lists where the order of the list doesn’t matter, these types of lists are wrapped in a <ul> element. On the other hand, an ordered list have an order that matters and is wrapped in a <ol> element. After declaring what type of list you want, each item inside the list is wrapped in a <li> (aka list item) element.

unordered list

\\ Code:

\\ Output:

ordered list

\\ Code:

\\ Output:

Image:

IMAGES!! To add an image to a web page you will be using the <img> element. HOWEVER this element is lil bit different because it doesn’t have a separate closing tag. It actually has a self-closing tag. I’ll show what this means in the example below. An <img> element contains these attributes:

src

The src should be set to the image’s source, URL, location, or file name.

alt (aka alternative text)

This is a description for the image. If the photo is not loading properly or the user of your website is visually impaired the alt attribute is a descriptive text that will help in those cases. It also helps with SEO (aka Search Engine Optimization).

Video:

Aside from images, you can also add videos using HTML! To add a video you will need to use the <video> element. There is a closing and opening tag. The attributes for a video are these: src, width, height, and controls (allows for basic video controls like pause, play, and skip).

tip: indentation is great for organization and you should really use it in your code!

Okie dokie 🙂 that’s going to be allll for now peeps! Hope that you found this useful and fun hehe. Now, go make a file on your editor, write some code, experiment, save the file (making it end it .html), and test it out on a browser!

Yours truly,

L.O.A.S.H

PROject Python | Blackjack (#extremely.cool.it’s.kinda.unbelieveable,just.saying)

June 16, 2018June 16, 2018 by Elizabeth, posted in fun, How to...., Interesting stuff, Programming, Project, Something Cool, You can.

Quote of AWESOMENESS: “Thinking is already a conversation” ~ Paul Pangaro

Hey there!

I know it’s been awhile but here I am with another Python project. Today, you will be learning the code for blackjack! Just put it out on your editor, study the code, and explore the game on your terminal. It was quite some challenge getting toward the end of finishing up the game. And, at some point, problems and bugs constantly came up that I didn’t that it would actually get done. BUT, nevertheless, it’s finally hereeee!!

*ahem, drum rollllllllll*

*cricket sounds*

*Umm….. DRUMMM ROLLLL!!!……. please?*

*DRUM ROLLLLLLLLLL (in the background, finally)*

TADA!!!!:

#import the random library from python
from random import *


#Function Definitions 
def deal_from_deck(deck):
    if len(deck)<1:
         create_deck(deck)
         shuffle_deck(deck)
         deal_cards()

def deal_cards(deck):
    return deck.pop(0)

def define_cards(n):
    rank_string = ("ace", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "jack", "queen","king")
    suit_string = ("clubs", "diamonds", "hearts", "spades")
    cards = []

    for suit in range(4):
        for rank in range(13):
            card_string = rank_string[rank] + " of " + suit_string[suit]
            cards.append(card_string)
    return cards[n]

def create_deck(deck):
    for i in range(52):
        deck.append(i)
    return

def shuffle_deck(deck):
    shuffle(deck)
    return

def card_value(n):
    vals = (11, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 10, 10)
    card_vals = []

    for s in range(4):
        for r in range(13):
            card_vals.append(vals[r])
    return card_vals[n]

def card_display(n):
    name = define_cards(n)
    val = card_value(n)
    print (name + " : " + str(val))

def show_cards(hand):
    for card in hand:
        card_display(card)


def hand_val(hand):
    list = []
    for card in hand:
        list.append(card_value(card))
    if sum(list) > 21:
        for i in range(len(list)):
            if list[i] == 11:
                list[i] = 1
    return sum(list)





# Initializing
drawn_hands = 0
player_wins = 0
dealer_win = 0
deck = []
player_hand = []
dealer_hand = []
playing = True


#Processing
create_deck(deck)
shuffle_deck(deck)

for i in range(2):
    card = deal_cards(deck)
    card2 = deal_cards(deck)
    player_hand.append(card)
    dealer_hand.append(card2)


# put in a loop for player hand
print()
print("--------------------")
print("Dealer shows: ")
card_display(dealer_hand[0])
print("--------------------")

while playing == True:
    player_val = hand_val(player_hand)
    print()
    print()
    print("* * * * * * * * * * *")
    print("Your current hand is...")
    show_cards(player_hand)
    print(hand_val(player_hand))
    print("* * * * * * * * * * *")
    print()
    print()
    if player_val < 22:
        response = input("Would you like another card?")
        if response == "yes":
            player_hand.append(deal_cards(deck))
        else:
            playing = False
    else:
        playing = False
        print("sorry you busted")
        print("Thanks for playing")
        exit()

# check if it is higher than 21, if yes then end program, dealer hand wins
show_cards(dealer_hand)

playing = True
while playing == True:
    if hand_val(dealer_hand) < 17:
        dealer_hand.append(deal_cards(deck))
    else:
        playing = False

print()
print()
print("****************")
print("Dealer has:")
print(show_cards(dealer_hand))
print("****************")
print()
print()

if hand_val(dealer_hand) > 21:
    print("The dealer busted")
    show_cards(dealer_hand)
    print("You win!")
    exit()
elif hand_val(dealer_hand) > hand_val(player_hand):
    print("Dealer wins")
    show_cards(dealer_hand)
    exit()
elif hand_val(player_hand) > hand_val(dealer_hand):
    print("You win!")
    show_cards(player_hand)
    exit()
else:
    print("It's a draw")
    exit()

don’t forget to smile & be awesome 🙂

Yours truly,

L.O.A.S.H

PROject Python: Hangman Game!

April 30, 2018April 30, 2018 by Elizabeth, posted in Programming, Something Cool

Quote of AWESOMENESS: “First, solve the problem. Then, write the code.” ~ John Johnson

Yup, I know, this is like the fourth blog in a row that relates to Python. BUT, it’s okay! This one is really fun. The program we will be making today is Hangman. The code is shown below:


import random

def print_game_rules(max_incorrect,word_len):
    print("This game we will be playing hangman!")

def display_figure(bad_guesses):
    gallows = (
        """
            +----------+
            |
            |
            |
            |
            |
        ================
        """,
        """
            +----------+
            |          o
            |
            |
            |
            |
        ================
        """,
        """
            +----------+
            |          o
            |          +---
            |
            |
            |
        ================
        """,
        """
            +----------+
            |          o
            |       ---+---
            |
            |
            |
        ================
        """,
        """
            +----------+
            |          o
            |       ---+---
            |          |
            |
            |
        ================
        """,
        """
            +----------+
            |          o
            |       ---+---
            |          |
            |         /
            |        /
        ================
        """,
        """
            +----------+
            |          o
            |       ---+---
            |          |
            |         / \
            |        /   \
        ================
        """
    )
    print(gallows[bad_guesses])
    return()

def prompt_for_letter():
    print("")
    player_guess = str(input("Guess a letter in the mystery word: "))
    player_guess = player_guess.strip()
    player_guess = player_guess.lower()
    print("")
    return(player_guess)

animal_words = ("horse", "mall", "desktop", "apple", "earth", "tree", "sun", "can", "love", "dog", "door", "house", "mansion", "beach", "computer", "window", "keyboard", "airplane", "hotel", "cat")
theword = random.choice(animal_words)
word_len = len(theword)
letterguess = word_len * ["_"]
max_incorrect = 6
alphabet = ("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z")
letters_tried = []
number_guesses = 0
letters_correct = 0
incorrect_guesses = 0
###############################
# PROCESSING SECTION
# Branching code: if/else
# Looping code: for-loop, while-loop
###############################

print("This game is hangman.")
while (incorrect_guesses != max_incorrect) and (letters_correct != word_len):
    letter = prompt_for_letter()
    if letter in alphabet:
        if letter in letters_tried:
            print("You already picked", letter)
        else:
            letters_tried.append(letter)
            if theword.find(letter) == -1:
                print("the letter", letter,"is not in the word")
                incorrect_guesses += 1
                print("***********************")
                print(incorrect_guesses)
            else:
                print("the letter", letter,"is in the word")
                for i in range(word_len):
                    if letter == theword[i]:
                        letterguess[i] = letter
                        letters_correct += 1
                    else:
                        pass
    else:
        print("Please guess a single letter in the alphabet.")


    x = ""
    print(x.join(letterguess))
    a = ""
    print("Letters tried so far: ", a.join(letters_tried))
    if incorrect_guesses == max_incorrect:
        print("Sorry, too many incorrect guesses. You are hanged.")
        print("The word was", theword)
    if letters_correct == word_len:
        print("You guessed all the letters in the word!")
        print("The word was", theword)



    display_figure(incorrect_guesses)

Honestly, this was a challenging project at the start and I had quite a few obstacles that were highly annoying but eventually here we are!

Pssst, don’t forget to be awesome today.

Yours truly,

L.O.A.S.H

PROject Python: Making a function

April 17, 2018April 14, 2018 by Elizabeth, posted in Awesome, Create, Education, fun, Interactive, Learn Something Outta This :), Programming, Something Cool

Quote of AWESOMENESS: “The function of leadership is to produce more leaders, not more followers” ~ Ralph Leader

Hiii!

Functions are so useful and cool at the same time and right now I’m going to teach just how to make one!

But, before we go there, what exactly is a function? It’s somewhat like a pre-made command that you get to customize yourself. For example, you wanted to make five circles, imagine you would have to make each circle repeating how big you wanted it to be, the color, locations, and others. But, if you had a function, you would make it so much simpler in just adding the code and copy-pasting the function.

Here’s the code for a function:

[remember: WHITESPACE is very important in Python]

# This hastag is a comment and won't affect the code
# We start making function by defining it with the word def
# The thing written inside the parenthesis is called the argument
# Remember to put the colon then the indentation will be proper, too

def list(alist):
    # Here, I'm setting the variable a to number 0
    a = 0

    # This is a for-loop and the i just stands for index 
    for i in alist:
        if i > 0:
            a += 1
        else:
            pass
    print(a)


# Here is the actual function in action!
# Test section
mylist = [2,-4,5,-16,-20]
mylist2 = [2,6,8,-4]
mylist3 = [-5,-6,-7,-8,10]


list(mylist)
list(mylist2)
list(mylist3)

This is just a simple example of what you can make of a function. Try it out!

Don’t forget to be awesome!

Yours truly,

L.O.A.S.H

Project Python: Advanced Number Guessing Game (#fun)

April 14, 2018 by Elizabeth, posted in Awesome, fun, Interactive, Interesting stuff, Programming

Quote of AWESOMENESS: “Creativity is intelligence having fun” ~ Albert Einstein

Hey, guys!

Back again with another python program.

Awesome isn’t?

Now, this program is an “advanced” version of a guessing number game. So basically, the program gives the user three guesses and the numbers are ranging from 1-10. Through each time the user types in the answer and is wrong, the input would spit out either “too high” or “too low” indicating what the user’s next move should be.

Mix around with it and experiment like maybe adding a wider range of numbers to guess from or maybe adding riddles to guess the number. This code is somewhat the basis of what else can be built with it, so be creative and have fun!

Here’s the code:

import random

range = random.randint(1, 10)

user_guess = 0

guess_counter = 0

print(“This is a guessing game and you will be given three tries to win! \nThe range will be between 1 and 10. \nGood luck!!”)

while guess_counter < 3:

user_guess = input(“What’s your guess?”)

guess_counter += 1

if user_guess.isnumeric():

user_guess = int(user_guess)

if user_guess < range:

print(“too low”)
elif user_guess > range:
print(“too high”)
else:
break

else:
print(“Not a number!”)

if user_guess == range:
print(“Awesome! You won!!”)
else:
print(“The number was actually”, range)
print(“Try again!”)

Have an awesome weekend!

Yours truly,

L.O.A.S.H

Python Basics!!!

February 11, 2018February 11, 2018 by Elizabeth, posted in Awesome, Create, D.I.Y, Learn, Programming

Quote of awesomeness: “It’s harder to read code than to write it.” ~ Joel Spolsky

Let’s learn some basics!

Here are some simple datatypes:

Integers (whole number)
- 1, 2, 3, 4, 5, 6….

Floats (decimals)
- 1.1, 1.2, 1.3, 1.4, 1.5…..

String (anything in “quotation marks”)
- “hello”, “my”, “awesome”, “readers!”

Boolean (I know, sounds kinda funny right)
- these datatypes are values at two constant objects
- a boolean is either True or False (yes, with a capital T and a capital F)

Want to do something cool? Yeah, me too. Okay, once you open up your terminal, type in and press enter. The next that should have happened is that your terminal should have showed this:

>>>

Did you know??!!: #when a hashtag is put in python, this is known as a comment and it doesn’t affect the code

Did you know that we can keep datatypes stored into variables? It works like this. When you write a variable a word or letter, for example, then followed by this is a equal sign you can assign a variable. Let’s try it out on your terminal! Try doing something similar to the following:

>>> x = “helllloooooo thereeee!!!”

When you pressed enter, you must have not seen anything happen but just another >>>. But, it’s okay, here’s the thing. The string I just put with the variable is now stored. So when I put my variable alone this is what happens:

>>> x

Press enter and theeeeen!!

>>> helllloooooo thereeee!!!

TADA! WASN’T THAT SUPER COOL?!?! And, that’s just the very basics of what can be reached with python.

You can even do some math with python. The arithmetics might be slightly different but I’m sure you will get the hang of it soon!:

Multiply (it’s the asterisks sign)
- *
Division (it’s the slash)
- /
Addition (it’s the plus sign)
- +
Subtraction (it’s the minus sign)
- –
Exponentiation (it’s two asterisks)
- **
Modulus (it’s the percentage sign)
- %
- this divides a number with another number and inputs the remainder

Here’s an example of each of these signs and their outputs. You can also test this out on the python which we opened up earlier on the terminal.

multiplication, *

>>> 2 * 9

When we put the equation above, our output would be

>>> 18

division, /

>>> 256 / 2

The output would be:

>>> 128

addition, +

>>> 1000 + 1000

The output would be

>>> 2000

subtraction, –

>>> 500 – 200

The output would be:

>>> 300

exponentiation, **

>>> 4 ** 2

The output would be:

>>> 16

modulus, %

>>> 2 % 5

Would get the output of:

>>> 1

Go on. Try experimenting at your terminal!

!important! : Unlike other programming types, python is very picky with whitespace. Meaning the indentations! Sometimes an error on expected or unexpected indentations may rise here and there but it’s nothing a few backspaces or the tab button can’t handle.

We’ve gotten down with some of the very basics that can be done with programming. With what you’ve learned here so far try exploring and trying this out!

Yours truly,

L.O.A.S.H

L.O.A.S.H’s Guide to (nearly) Everything: How to Make an Arduino Robot Arm

January 22, 2018January 22, 2018 by Elizabeth, posted in Activity, arduino, Awesome, Create, D.I.Y, Interactive, Programming, Project, Something Cool, Technology

Level of hardness: Intermediate

I’m so excited!

This project is just extremely awesome and awe-spiring that I can’t wait for you guys to try it out!

We. Are. Going. To. Make. An. Arduino. Robot. Arm!!!!!! I know, I know super cool. Now, without further ado, let’s jump right into this project.

The following are what you will need to gather:

1x Arduino UNO Board
1x Breadboard
1x USB Cable Type A/B
2x Button
2x 10k-Ohm Resistor
3x Potentiometer
5x LED (A.K.A light-emitting diode, A.K.A miniature looking light bulb-ish)
5x 220 Ohm Resistor
20x Jumper Wires

Step 1:

First, let’s start by putting the potentiometers, the buttons, and the LED’s on our breadboard.

We will be placing 3 potentiometers, 2 buttons, and 5 LED’s. For your reference, the photo above can help. Yes, I did say 5 LED’s but I forgot to place the fifth LED in this photo, but you should put 5.

Here are some important basics to understand about an LED:

Cathode (-, shorter side)

Anode (+, longer side)

Step 2:

RESISTORS. Resistors. resistors.

Place five of your 220 Ohm Resistors on each of the Anodes (+) sides of each of your LED’s and the other end of the resistor to the negative side lane on your breadboard which we will later connect to the GND on your Arduino board. I’ve placed another photo above showing where I’ve placed my 220 Ohm Resistors.

Here, I circled each of the legs (Anode side) which I connected my 220 Ohm Resistors to

Now, take both of your 10k-Ohm Resistors. You will have to place one side of your resistor to only one of the button’s leg. Do this for both buttons. Here is another picture but of the buttons and resistor placing.

We have finished placing all the resistors we will be needing in this project. You guys are doing an awesome job, btw!

Step 3:

This step will be really quick.

All we need to is get two jumper wires, first. Then, connect the Negative lane on your breadboard to your GND on your Arduino, and, the positive lane of on your breadboard to the 5V on your Arduino (you can find this right beside the GND, usually).

0-02-01-6fd074bc2363a5d4f7eeac736e13aa2c95fdaaf5a41a127461e58cbd6de4e417_full.jpg — Here is the overview of everything so far

Done with this step. Great job!

Step 4:

For this step, you will be needing 5 of your jumper wires.

We will be connecting each of the LED’s on the breadboard onto the Arduino UNO board with your jumper wires.

Here is the first LED I connected. We will be connected the other leg (cathode, shorter side) of the LEDs to these numbers on the Arduino in order:

I will also be numbering the LEDs on the next photo so that it will be easier to know which we will be connecting to which.

0-02-01-9ef28dac8b7d5bc5fd62e992e07553b3203f81f692aeb6eb5360a8dcfbb8f082_full.jpg — This shows where I connected my jumper wires to the LEDs

We will connect:

LED 1 to 2 on the Arduino board
LED 2 to 3 on the Arduino board
LED 3 to 4 on the Arduino board
LED 4 to 7 on the Arduino board
LED 5 to 8 on the Arduino board

Step 5:

I know that wiring could be a tedious job but it’s okay because I know you can do it.

Wiring is very important because it connects. It works as that bridge that can help cars go back and forth and connect with other cities. If you have a bulb and a power source you can’t just put it beside each other or clink it together to light the bulb up (even that would be super cool if that’s how easy it was), you need to connect it through wires. So, let’s continue? Yes.

In this step, we will be wiring the buttons and the potentiometers.

Here in this photo I got two jumper wires and connected one end to the remaining unconnected leg of the buttons and connected the other side of the jumper wire to the positive (+) lane on the breadboard

That was easy, wasn’t it?

We are nearly done!

Let’s start wiring the potentiometers now.

For the potentiometer, it’s going to be slightly harder.

In this photo, I’ve connected 3 jumper wires to the right side of the potentiometer then connected the other end of the wire to the Negative lane of the breadboard (A.K.A GND).

And, then, I got 3 more wires and connected it to the left side of my potentiometer then connected the other end to the Positive Lane on the breadboard.

I’ve added the numbers on top of each potentiometer so that it’s easier to understand how to connect it to the Arduino.

As you may see on the picture to your left, I’ve added 3 white jumper wires to each of the middles of the potentiometers because we will connect this to the Arduino Board. Connect potentiometer 1 to the A0 on the Arduino UNO Board | Connect potentiometer 2 to the A1 on the Arduino UNO Board | Connect Potentiometer 3 to the A3 on the Arduino UNO Board.

Step 6:

In this step, grab two more jumper wires and connect both ends of the lanes on each side of the breadboard to each other. I used the black and red wire here.

You will need to connect the Negative lanes on each side to each other and the Positive lane on each side to each other.

Tada! Next step.

Step 7:

Seeeeervoooo Moooootooooors.

We are nearing the last of our steps. KEEP GOING!

We will add the servo motors to our breadboard and I put mine side by side to each other.

I connected three jumper wires each for three of my servos, meaning 9 jumper wires in total.

About servo motors in Arduino:

They usually have 3 plug pins (this is where I connected my jumper wires to)

Take a look at your servo motor. You will probably notice there are three colored wires. Each color represents 3 different things. The colors could actually be different sometimes but, as you see here, my colors are brown, red, and yellow.

The brown is the Ground/Negative (-)
The red is Positive (+) [This wire is usually located at the center of all the three wires]
The yellow is the Signal

Your wires on your servo motors might be different and you might be thinking “WHAT!?!?” but it’s okay (that’s what I thought too) here is how you can compare it to mine to find the similarities:

The Ground/Negative is usually | Black or Brown (in my case, it’s brown)
The Positive is always Red
The Signal can be either | Orange, Yellow, or White (in my case, it’s Yellow)

Better?

Awesome, let’s proceed.

These are what you need to connect with your Servos:

Connect each of the GND/Negative (Black or brown wire) on each of your servo motors to the positive lane on your breadboard (I used a white jumper wire, check the photo above for reference)
Connect each of the Positive (Red wire) on each of your servo motors to the negative lane on your breadboard (I used an orange jumper wire)
Lastly, connect each of the signals (Orange, Yellow, or white wire) of your servo motors to: 5, 6, and, 9 on your Arduino

0-02-01-6dec16957b4bf711bfaab5ca160c05ce4352e7d5c718d7ccc6d0f65f2e468470_full.jpg — I know it’s a bit of a mess. But, there are three wires that you can find colored: 1x black & 2x green. These are the wires that connect to the Arduino

Step 8:

This is our last time! Congratulations!!!

Connect your Arduino to your computer, fire up the Arduino app on your computer, copy paste the code below and press Upload.

Now, the challenge whether you choose to accept it or not is to build your own robot arm out of cardboard or you can check this —-> here which was made by Ryan Chan. Shoutout to him, btw. I hope you enjoyed this! I certainly had an awesome time and I hope you did, too!

You can teach others and share your awesome knowledge on building an arduino robot arm, I give some bragging rights.

Thanks so much for reading!

Yours truly,

L.O.A.S.H

L.O.A.S.H’s Arduino Projects: Controlling Servo Motors with a Joystick

July 4, 2017July 7, 2017 by Elizabeth, posted in Awesome, D.I.Y, Education, fun, How to...., Programming, Project, Something Cool, Technology, You can.

With this project, you will be able to control two servo motors with a joystick with Arduino!

For this project you will need to gather:

Arduino Board

Breadboard

Wires | x13

Servo Motors | x2

Battery

To make this (really cool) project, you will need to:

Step 1: Battery

Connect your external battery to your breadboard.

Step 2: Wiring

Get a piece of wire and connect one end to GND on your Arduino Board and the other end to the negative channel on your breadboard.

Step 3: Servo Motors

Get your two servo motors and 6 wires. Connect the VCC and the GND of the two servos to the VCC and GND on the breadboards inputs. Then, connect your first Servo Signal Connect to the Arduino Digital PMW 3 on your Arduino Board.

In case you aren’t very familiar with the Arduino Digital PMW 3, it looks like the photo below as well as the Digital PMW 5 and the blue wire from the first servo…

Your second Servo Signal Connect should be connected to the Arduino Digital PMW 5.

Step 4: JoyStick

Connect the GND on your Joystick to the GND on the Arduino Board.

Then, connect the +5V on your joystick to the 5V on the Arduino Board.

Then, connect the VRx on your joystick to the A0 on the Arduino Board.

Then, connect the VRy on your joystick to the A1 on the Arduino Board.

The photo below shows where I connected what and where. Just look at the corresponding colors to which wire and the connection.

It also looks something like this….

Step 5: The Code

Open up your Arduino on your computer and copy the code below:

//add the servo library
#include <Servo.h>

//define our servos
Servo servo1;
Servo servo2;

//define joystick pins (Analog)
int joyX = 0;
int joyY = 1;

//variable to read the values from the analog pins
int joyVal;

void setup()

{ //attaches our servos on pins PWM 3-5
servo1.attach(3);
servo2.attach(5); }

void loop()

{ //read the value of joysticks (between 0-1023)
joyVal = analogRead(joyX);
joyVal = map (joyVal, 0, 1023, 0, 180);
servo1.write(joyVal);

joyVal = analogRead(joyY);
joyVal = map(joyVal, 0, 1023, 0, 180);
servo2.write(joyVal);
delay(15); }

Step 6: Verify, Connect and Upload

Once you verify and save the code, you can connect your Arduino board to your computer and upload the code to your board. Tada!

Step 7: Have fun and Experiment

Yay! We’ve finally finished yet another Arduino Project. You guys are so awesome! Now, after playing around with this, you can try to experiment maybe add more things (an example, “lights, perhaps?”).

Wait, if you are having any problems uploading or your project isn’t functioning properly, you should double check your wiring and maybe check which Port your Arduino (on your computer) connected to in the tools. If there is anything else don’t be shy to comment down below!

Yours truly,

L.O.A.S.H

Project Python | Command Line Calender

July 2, 2017 by Elizabeth, posted in Awesome, D.I.Y, How to...., Programming

You can make your own calendar and even add, update and view.

For your python code, copy and paste the following:

from time import sleep, strftime
name = “Libster”calendar = {}
def welcome(): print(“Welcome, ” + name + “!”) print(“Calendar starting…”) sleep(1) print (“Today is “) + strftime( “%A %B %d, %Y”) print (“The time is “) + strftime(“%I:%M:%S”) sleep(1) print(“What would you like to do?”) def start_calendar(): welcome() start = True while start: user_choice = raw_input(“Please choose A to Add, U to Update, V to View, X to Exit. “) user_choice=user_choice.upper() if user_choice == “V”: if len(calendar.keys()) <1: print “Your calendar is empty” else: print calendar elif user_choice == “U”: date = raw_input(“What date? “) update = raw_input(“Enter the update: “) calendar[date] = update print(“Update successful.”) print calendar elif user_choice == “A”: event = raw_input(“Enter event: “) date = raw_input(“Enter date (MM/DD/YYYY): “) if len(date) > 10 or int(date[6:]) < int(strftime(“%Y”)): print(“Invalid date.”) try_again = raw_input(“Try again? Y for Yes, N for No: “) try_again = upper.try_again() if try_again == “Y”: continue else: start = False else: calendar[date] = event print(“Event update successful.”) print calendar elif user_choice == “D”: if calendar.keys(len(date)) < 1: #check this line if fail print(“The calendar is empty.”) else: event = raw_input(“What event?”) for date in calendar.keys(): if event == calendar[date]: del calendar[date] # deletes entire entry, inc date & event print(“Event deleted.”) print calendar else: print(“Incorrect date.”) elif user_choice == “X”: start = False else: print(“Invalid command.”) breakstart_calendar()

Then in the command line, play your python code.

Above, the picture is an example of how it should turn out to be. I added an event, updated that same event and viewed! Don’t forget to try to experiment and maybe make this cooler.

Yours truly,

L.O.A.S.H

JQuery Projects | Essentials for a Login Page

June 13, 2017June 23, 2017 by Elizabeth, posted in Awesome, D.I.Y, Education, Programming, You can.

In this Project, you will be making a login page. I’ve even added in some code so that if you fail to fill in one of the blanks, make the password less than 8 characters or don’t properly write an email with @gmail.com or @yahoo.com at the end, an error would pop up!

Now, this is interesting :D.

For this, you will need one folder containing three files preferably made with Sublime text, like me.

The first file will be named index.html and you will put the following code:

The second file will be named style.css and the code I wrote is the following:

html, body {
margin: 0;
padding: 0;
font-family: ‘Montserrat’, sans-serif; }

body {

background-image: url();

background-size: cover;
background-repeat: no-repeat;
background-color: #140e07;
color: #fff; }

.container {
max-width: 940px; }

/* Header */
.header {
text-align: center;
margin-bottom: 50px; }

.header .container {
padding: 30px 0;
border-bottom: 1px solid #e5e5e5; }

/* Main */
.main {
margin: 80px 0; }

.main h1 {
font-size: 30px;
margin: 0 0 20px 0; }

/* Form */
form input.form-control {
border: 0px;
border-radius: 0px; }

.main .btn {
margin-top: 30px;
color: #fff;
background: rgba(0,240,190,0.25);
border: 0px;
border-radius: 0px; }

.first-name-error,
.last-name-error,
.email-error,
.password-error {
color: #dd4b39;
font-weight: 600; }

/* Footer */
.footer .container {
padding: 20px 0;
border-top: 1px solid #e5e5e5; }

.footer ul {
list-style: none;
padding: 0 20px;
margin-bottom: 80px; }

.footer li {
display: inline;
margin-right: 20px; }

Lastly, on your third file, name it app.js and copy the following code:

var main = function() {
$(‘form’).submit(function() {
var firstName = $(‘#first’).val();
var lastName = $(‘#last’).val();
var email = $(‘#email’).val();
var password = $(‘#password’).val();

if (firstName === “”) {
$(“.first-name-error”).text(“Please enter your first name”)}

else {
$(“.first-name-error”).text(“”)}

if (lastName === “”) {
$(“.last-name-error”).text(“Please enter your last name”)
} else {
$(“.last-name-error”).text(“”)}

if (email === “”) {
$(“.email-error”).text(“Please enter your email address”)
} else if (email === “test@example.com”) {
$(“.email-error”).text(“This email is already taken.”)
} else {
$(“.email-error”).text(“”)}

if (password === “”) {
$(“.password-error”).text(“Please enter your password”)
} else if (password.length < 8) {
$(“.password-error”).text(“Short passwords are easy to guess. Try one with at least 8 characters.”)
} else {
$(“.password-error”).text(“”)}

return false;
});

}

$(document).ready(main);

After saving this, try out your project! It should look something like this….

This is how an error would look like…

Yours truly,

L.O.A.S.H