BABY STEPS TO GET YOUR LIFE TOGETHER (a surprise)

Hey, my peoples! I did a video version of the blog I wrote on the first steps to GETTING YOUR LIFE TOGETHER. I hope this helps and I hope you enjoyyy! šŸ™‚

 

 

ā¤

Love,

L.O.A.S.H


Ā© Elizabeth Anne Villoria

L.O.A.S.H’S GUIDE TO GETTING YOUR LIFE TOGETHER: GOAL SETTING šŸ“…

Quote of (true)Ā AWESOMENESS:Ā ā€œIf you set goals and go after them will all the determination you can muster, your gifts will take you places that will amaze you.ā€ – Les Brown

Hope your holidays are going well!

Goal setting is essential when you are building your path to the creation of your awesome new life. We all try to set goals here and there but sometimes we don’t properly know how or what exactly to write down. Then, we often end up not executing any of it. We need to break this vicious cycle. You with me? Great. Let’s do it.

This blog, if you aren’t yet aware, is going to be your guide to create your game plan, sprinkled with awesomeness. Yup, basically, that’s it.

First things first, to make a clearer image of what you are exactly planning for, here is a list of some of the areas of your life in which you may want to improve in and grow:

  • Education
  • CareerĀ 
  • Home Life
  • FinancialĀ 
  • Social Life
  • Community
  • SpiritualĀ 
  • Health

Use this list as your guide. Once you have your goals for these areas in your life, it’s a good idea to break them into the next week, next month, end of the year, the next 2 years, and even in the next 5 years. Before organizing it further, just jot down all the goals that pop into your mind at first that you want to accomplish. It might be a bit messy but it’s okay just keep writing everything first.Ā 

Once you complete jotting down everything, rewrite each of your goals but this time add a specific time frame and details of the goal. Here’s an example:

  • You’d start with something like a vague goal, saying: Get a good education
  • Then you’d change it into a better goal, saying: Graduate (with a specific degree) in (a specific course in college), with honors by 2028

Take a breath, you’re doing amazing!

Here are the ways you can separate your goals by the time:

Short term goals: accomplishments done in less than a year

Midterm goals: accomplishments done in 1-5 years

Long-term goals: accomplishments done in 5-10 years

Remember: Time frames are very important

OKAY, now that you’ve gotten your goals written down and organized with its time frame and extra details, the work is not yet done! You need to always remember to check in regularly with yourself. Reflect on your goals. Check in with your feelings and values. Ask yourself, “Do these goals align with your passions?”.

When you are faced with an obstacle, take a step back, process everything, and then plan the next steps to take.Ā Don’t linger on with your solutions.Ā When you find what you are going to do, take actionĀ immediately.Ā Make the changes right then and there. Make sure to rewrite goals in order for it to align with your deeds.

IMPOR34N3: time management

Fortunately, I have a whole blog dedicated to guiding you to kick ass and help you with time management. Yay!!!Ā 

As you are on your journey remember that you should focus on what matters. Focus on your values and on the outcomes. Do less. Buy less. Slow Down. Handle it now, stop waiting for the perfect time, place, or saying next time. Remember people.Ā 

It’s soon to be New Years! New beginnings! You got this.

 

 

– You are a badass –

Yours truly,

L.O.A.S.H


Ā© Elizabeth Anne Villoria

Ā 

 

 

 

 

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

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

 


Ā Ā© Elizabeth Anne Villoria

L.O.A.S.H’s Guide to (nearly) Everything: Arduino Color Lamp Mixer!

Quote of awesomeness:Ā ā€œIs not about creating an object. It is about creating a perspective.” ~ Albert Paley

Level of hardness: intermediate (You can do this!)

Heyyy!!!! Here’s another Arduino project for you!

For this project, you will need the following:

  • 1x Arduino UNO Board
  • 1x USB Cable Type A/B
  • 1x Breadboard
  • 1x RGB LEDĀ 
  • 3x 220-Ohm Resistor
  • 3x 10k-Ohm Resistor
  • 3x Photoresistors
  • 13x Jumper Wires

 

Step 1:

0-02-01-25a0a6f9debabdd212fbc3c05acd2fcf5f1c439705c879adf26fea2d27db35df_full.jpg

The first step is two connect your breadboard to your ArduinoĀ and it should look something like the photo above. Then, add your RGB LED to yourĀ breadboard.Ā 

Step 2:

0-02-01-ce8d12da04188f7a9054ea5aa04a72e5ac576232bc208167812c08ec3ba18cfe_full

 

Next, you need to grab another wire and connect the other positive lane of the breadboard to the negative lane on the other side of the breadboard.

 

Step 3:

0-02-01-9bde85f3c5437a50c6a476f15138e6c5858ce46a700364835db6ee8e53447d2f_full

In this step, we will be placing the three 220-Ohm Resistors to three of the legs of the RGB LED. You will only beĀ placing the resistors on the R, G and B of the RGB LED, this will leave you with one leg unconnected.

 

Step 4:

0-02-01-dbc63a13ab6f50466eb8dd3465af30d65b8f5e7967920a87645ee225ffaa44ea_full.jpg

For this step, you will be needing four wires. Remember I told you that you were left with one leg of the RGB LED which isn’t connected? Well, it’s time to connect it now! Place one end of the wire to the remaining legĀ of the RGB LED then place the other end to the negative lane of the board. In the photo, the wire which I used for this connection is white.

0-02-01-61ac8f02b55daa224f1962b3e828047ead0580414fcee62ded86ee5ad453523a_full.jpg

With the other three wires, connect it to each of the 220-ohm resistors. Then, connect the other end of the wires to the Arduino 9, 19, and 11.

 

Step 5:

0-02-01-9f2cb7be6b6ebbcc06aaf7b34dfd409e332e34965665efa0386c1a48cf6d16fb_full.jpg

Let’s place the photo-resistors on the breadboard so that they cross the center divide from one side to the other.Ā 

 

Step 6:

0-02-01-c45f2f455156cfbfb4d1aee3c77926f4c5d55503f0796170018956fc0281a57a_full.jpg

Now, connect the 10k-Ohm resistors to one side of the photo-resistors and the other side to the negative lane of the breadboard.

 

Step 7:

0-02-01-3e1c74c9aa8f84a2158daa0ca5b528a6e2785236e0f532f18c1820533a1aa4a9_full.jpg

Taking three other wires, connect it between the photo-resistor and the 10k-Ohm resistor then connect the other end to the Analog In pins 0, 1, and 2 on the Arduino.

 

Step 8:

0-02-01-b946dc989126c65408412e7a570d06c10c28d9cfba450fc3cdc3bf12acca7b91_full.jpg

Going on the other side of the photo-resistor, connect each leg to the positive lane of the Arduino with three wires.

0-02-01-1733d59664a66910bba653033a94e1427937448a2a20dee06bab915fa06fac0f_full.jpg

Your result should look something like this!

 

Step 9:

This is the final step! Connect your Arduino to your computer, fire up your Arduino and copy paste in the following code:

const int greenLEDPin = 9;
const int redLEDPin = 11;
const int blueLEDPin = 10;

const int redSensorPin = A0;
const int greenSensorPin = A1;
const int blueSensorPin = A2;

int redValue = 0;
int greenValue = 0;
int blueValue = 0;

int redSensorValue = 0;
int greenSensorValue = 0;
int blueSensorValue = 0;

void setup() {
Serial.begin(9600);

pinMode(greenLEDPin, OUTPUT);
pinMode(redLEDPin, OUTPUT);
pinMode(blueLEDPin, OUTPUT);

}

void loop() {
redSensorValue = analogRead(redSensorPin);
delay(5);
greenSensorValue = analogRead(greenSensorPin);
delay(5);
blueSensorValue = analogRead(blueSensorPin);

Serial.print(“Raw Sensor Value \t Red: “);
Serial.print(redSensorValue);
Serial.print(“\t Green: “);
Serial.print(greenSensorValue);
Serial.print(“\t Blue: “);
Serial.print(blueSensorValue);

redValue = redSensorValue/4;
greenValue = greenSensorValue/4;
blueValue = blueSensorValue/4;

Serial.print(“Mapped Sensor Values \t Red: “);
Serial.print(redValue);
Serial.print(“\t Green: “);
Serial.print(greenValue);
Serial.print(“\t Blue: “);
Serial.println(blueValue);

analogWrite(redLEDPin, redValue);
analogWrite(greenLEDPin, greenValue);
analogWrite(blueLEDPin, blueValue);
}

 

Then watch as your RGD LED comes to life! It should change, mix and fade in different colours as the light around it changes, too! Awesome, right?? Yeah, it totally is.

Yours truly,

L.O.A.S.H

 


Ā Ā© Elizabeth Anne VilloriaĀ 

 

Mexico and the Dead Zone *DUN DUN DUN*

The situation occurring in Mexico’s dead zone hasn’t improved, in fact, it has gotten worse.Ā 

What is a dead zone? It’s an area in an ocean or big lake, found in lots of placesĀ around the world, withĀ hypoxia, in other words, oxygen depletion. When there is oxygen depletion, the area affected by this problem causes the instability to support marine life. When there are too much growth and bloom of algae it chokes the water and makes it not possible for marine like to survive with the inadequate amount of oxygen.Ā But, how does nature suddenly start blooming and getting all these nutrients enough to keep spreading this hypoxia? Well, it doesn’t work alone. It’s also our fault because one way or another theĀ nitrates and phosphorus that our farmers use in farming eventually seeps into our water systems and into the ocean which makes the algae flourish and grow and bloom and other things that shouldn’t happen because it (LITERALLY) chokes the ocean and the marine life below it.

Since we covered the basics and everything you will probably need to know about hypoxia and dead zones, we can now focus on a specific ā€˜dead zone’ and that is in the Gulf of Mexico.

On April 20, 2010, one of the biggest oil spills in theĀ BPĀ (British Petroleum) and American records andĀ history occurredĀ in the Gulf of Mexico. It happened just a day after they sealed the 70-kilometer deep hole with concreteĀ followed by a metal valve used to stop the flow of oil entering the ocean. While the men were doing their inspection of the day old concrete, they noticed that oil and gas have actually been spilling out into the water through the faulty concrete and failed valve.

87 days past before they finally sealed the oil spill whichĀ already gave out 5,000 gallons of oil per day! Let’s do the math here: It would be an estimate of 5,000 x 57 which equals to 435, 000 gallons. HOLY MACARONI. Imagine how much has spread already? Especially since the oil spill was close to the dead zone, which made a few people worry things would get much worse. Honestly, a LARGE oil spill next to a DEAD ZONE. Nah-uh not a good combination nor timing. Won’t it affect the surviving animals living in the area? Think about it. The people in the restaurants were worried about the food they’ve been serving thinking it might affect the people, but they trusted it was all in good hands.

The oil soon mixed and glued itself toĀ the plankton and other bacteria i

n the ocean which caused marine snowĀ to sink to the bottom. What if small creatures and animals start eating this. These areĀ some of the worries fishermen had when catching the food. But, fortunately, due to the natural oil seeps, theĀ flora and faunaĀ of the oceanĀ have adapted to the oily marine snow. Yes, there are actually natural oils that seep from the earth. Th- WAIT, what is marine snow you wonder? It looks like the picture below —>

How dangerous it would have been to be the person underwater checking out the valves and the fear of it not properly functioning. There have been many oil spills through history. One after another there has news flashes saying ā€œNow this one is the biggest oil spill..ā€ It just keeps getting bigger. Luckily, they got to shut out the rest of the oil spill, even though it was after 87 days.Ā 

According toĀ National Wildlife Federation, below are the lists of affected animals near the Gulf of Mexico:

Dolphins and Whales

  • Nearly all of the 21 species of dolphins and whales that live in the northern Gulf have demonstrable, quantifiable injuries.
  • The number of bottlenose dolphins in Barataria Bay and the Mississippi Sound – two places particularly affected by oil – are projected to decline by half. Multiple studies have determined that the injuries to bottlenose dolphins were caused by oil from the disaster.
  • It is estimated that it will take approximately one hundred years for the spinner dolphin population to recover.
  • There are only a few dozen Bryde’s whales in the Gulf. Nearly half this population was exposed to oil, and nearly a quarter of these whales were likely killed. The long-term survival of this population is in doubt.

Sea Turtles

  • Scientists estimate that as many as 167,000 sea turtles of all ages were killed during the disaster.
  • In 2010, the once-remarkable recovery of the endangered Kemp’s Ridley sea turtle halted abruptly. Scientists remain concerned about this species of sea turtle, which is known to congregate and feed in areas that were oiled off the Louisiana coast.
  • Heavy oil affected nearly a quarter of the Sargassum – a type of floating seaweed – in the northern Gulf. Sargassum is an important habitat for juvenile sea turtles.

Fish

  • Studies have determined that oil is particularly toxic for many species of larval fish, causing deformation and death. The federal study estimates that the disaster directly killed between two and five million larval fish.
  • At this time, the data does not indicate that the oil spill caused significant decreases in populations of commercially harvested fish species.
  • However, a number of species of fish have documented oil spill injuries. For example in 2011, some red snapper and other fish caught in oiled areas had unusual lesions, rotting fins, or oil in their livers. Oil spill impacts have been documented in fish species such as southern flounder, redfish, and kill fish.

Birds

  • At least 93 species of bird were exposed to oil. The resulting loss of birds is expected to have meaningful effects on food webs of the northern Gulf of Mexico.
  • Species particularly affected include brown and white pelicans, laughing gulls, Audubon’s shearwaters, northern gannets, clapper rails, black skimmers, white ibis, double-crested cormorants, common loons, and several species of tern.

The Gulf Floor

  • Scientists estimate the habitats on the bottom of the Gulf could take anywhere from multiple decades to hundreds of years to fully recover.
  • A significant portion of the Gulf floor was affected by oil. The federal study confirmed that at least 770 square miles around the wellhead were affected, while a separate analysis determined that at least 1,200 square miles were affected. Both studies suggested that a significant amount of oil was likely deposited on the ocean floor outside the areas of known damage.
  • Coral colonies in five separate locations in the Gulf – three in deep sea and two in shallower waters – show signs of oil damage.

Ā 

Dolphins, whales, turtles, fish and birds are getting affect by this and they already have lots of other things to worry about such as plastic. Now, here’s the most shocking truth. This 2017 they found out that the dead zone at the Gulf of Mexico is the size of New Jersey! NEW JERSEY. The size is about 8776 square miles.

 

We can stop this. Start gathering solutions people you can do it! Some ways are to stop utilizing the products that help in causing the blooming, like nitrate. Keep thinking creative my awesome readers.

Yours truly,

L.O.A.S.H

 

 

Ā 

 

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

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

0-02-06-3e61517352900af7aca75ae80bd8bb003f5bb9e72a9e9557f75162f83bbd25fa_full.jpg

  • Breadboard

0-02-06-cd66c6b6d65f22179fc1a06c362c44db50bc340f3218d339911b1eb0709a55b8_full.jpg

  • Wires | x13

0-02-06-b48c27591fb83fd36c03c33e241a51a1f619e6b1d07f0de5cb66f1b076e17d8b_full

  • Servo Motors | x2

0-02-06-656ab4f6bc88f237b866d892bdb219fefa5e480bf645f88fc2cbfc55f749f569_full

  • BatteryĀ 

0-02-06-8ac9e32dd7aa2cab229409c610e5218da78fd9469262db96a33691471e1b1a6b_full

 

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

Step 1: Battery

Connect your external battery to your breadboard.

0-02-06-fa93aff5c167975906e799e6193fd5bb7e4fdcd8271bcebacdfc368bc592e900_full Ā 

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.

0-02-06-fb2c30416f0bc5b94c8d3c9d743bffc1439a17d6e5c06e1fe5028219feafe597_full

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.

0-02-06-3daf95e97aa092d7453a4010191438347de1b18e134785dded2454d5d49c5d69_full

Ā 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

0-02-06-24edbd7bb8929ca5eab0480444ddfbfd4030d44cc1b9499de030c0acd518d611_full

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

0-02-06-a98f20a183f18ace8fc31c4260055729730df7fcbc957b428a9d8c2ed68210af_full

Step 4: JoyStick

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

0-02-06-750f14cd78d2d4ccb1571cc4bb98c5cce58194a7654087ed21c9b2f5a411bcaa_full

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.

0-02-06-5542b4f4d9b290f3f778bc26fd3dc21fc12fd4cef7fe95ce67ab70ada427e734_full

It also looks something like this….

Screen Shot 2017-07-03 at 13.40.11

 

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);Ā }

Screen Shot 2017-07-03 at 13.54.02

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!

Screen Shot 2017-07-03 at 13.57.45

 

Yours truly,Ā 

L.O.A.S.H

 

 

Learn Javascript|Magic Eight Ball

For this project, you will be making your own MAGIC EIGHT BALL! If you follow the code below, you will be on the right track. If you notice on the first line of code, there is aĀ var userQuestionĀ where you will be placing your question and then receiving a randomly picked output.

My input—–> var userQuestion = “Am I bored????!!?!?!??!”;

Screen Shot 2017-06-25 at 21.10.24

Screen Shot 2017-06-25 at 21.10.59

My output on console —->

Screen Shot 2017-06-25 at 21.11.07

Haha, well, I was kinda bored which makes this kinda accurate.

Yours truly,

L.O.A.S.H

L.O.A.S.H’s Guide to (nearly) Everything: Restarting Storage on Your Mac (Easy)

We wanted to clear the storage in our Mac Book but deleting all the files in the finder and countlessly searching on the internet didn’t seem to be helping us achieve our goal. If you go to theĀ About this Mac,Ā and select storage, you would see something like the screenshot below:

Ā Screen Shot 2017-06-24 at 09.05.35.png

My mom kept murmuring about that she couldn’t delete her movies and that it was taking up to muchĀ storage space on her computer. I deliberatelyĀ went to her to stop the fuss. In this blog, you will learn how to make your storage space lessened.

Step 1:

Go toĀ System Preferences. Ā Screen Shot 2017-06-24 at 09.22.21.pngĀ <— Looks like this. If you have a hard time looking for it, you can find it the spotlight at the top right area of your computer screen. It looks like a magnifyingĀ glass.Ā Screen Shot 2017-06-24 at 09.24.18.png

Step 2:

When you open up yourĀ System Preferences,Ā go toĀ Startup Disk.Ā I circle on the screenshot below.

Ā Screen Shot 2017-06-24 at 09.25.34

Step 3:

When you are already on your Startup Disk, select theScreen Shot 2017-06-24 at 09.31.12.pngĀ following to make changes. When you click on this, a verification will pop up asking you to put your password of your computer. Put your password and clickĀ Unlock.Screen Shot 2017-06-24 at 09.33.08.png

 

 

 

 

Step 4:

When you are able to make changes, select the system and pressĀ Restart.

Screen Shot 2017-06-24 at 09.35.25.png

First, Select your system.

 

 

 

Screen Shot 2017-06-24 at 09.36.29.png
Then, select Restart.

 

Step 5:

After your computer restarts, you will be asked to sign in to your apple id. And, Tada!

Yours truly,

L.O.A.S.H

JQuery Project | To – Do List: …

Hey, again! Here’s another of my jquery projects but this time we will be making our very own list where we could star, delete and add!

Below is the index.html code:

Screen Shot 2017-06-17 at 21.19.31

Screen Shot 2017-06-17 at 21.19.42Screen Shot 2017-06-17 at 21.19.50

Next, is the style.css code:

Screen Shot 2017-06-17 at 21.21.36Screen Shot 2017-06-17 at 21.32.08Screen Shot 2017-06-17 at 21.32.26Screen Shot 2017-06-17 at 21.32.37Screen Shot 2017-06-17 at 21.32.45

Last but not least, add the following code for your script.js file:

Screen Shot 2017-06-17 at 21.34.35Screen Shot 2017-06-17 at 21.34.47

When you finish with this awesome project, your output should look similar to this:

Screen Shot 2017-06-17 at 21.36.38.png

Thank you!

Yours truly,

L.O.A.S.H

JQuery Projects | Essentials for a Login Page

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:



Screen Shot 2017-06-13 at 14.49.47

Screen Shot 2017-06-13 at 14.49.58

Screen Shot 2017-06-13 at 14.51.13



 

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….

Screen Shot 2017-06-13 at 14.52.38

This is how an error would look like…

Screen Shot 2017-06-13 at 14.53.29

Yours truly,

L.O.A.S.H