DEV Community: HayleeRees

From General Laborer to Coder

HayleeRees — Mon, 27 Nov 2023 17:36:28 +0000

Well here I am! Started this program on September 11, 2023 and its hard to believe that in 4 short weeks it’ll be done. I graduated high school in 2004 and just wandered for years going from job to job. I had gone to a trade school for the last 2 years of high school for Administrative Office Specialist, but could never find a job in the field. After that I got my STNA certification and started working in nursing homes. Honestly I loved working with the elderly, but the jobs expected in the amount of time given is all but impossible.

Then I got pregnant and couldn’t continue my duties, and life so I moved back home. I did retail/grocery for years, which was awful on the worst days and tolerable on the best. After working in retail/grocery for years I started working at a drug rehab as a psych tech. It felt good to work there, I felt like I was helping people and maybe making a small difference in other people’s lives. Unfortunately life happened again, I was in a bad situation and had to leave the area. So I left the area with my kids and moved to a new town to start over.

First job after moving was a factory job in the area making car parts. It was hot and miserable, that was just the small things. The job was originally supposed to be 3rd shift, but I was told I’d have to stay on 2nd shift. I had young children that needed their mom home in the evenings, so that didn’t last a week. After that I got a job as a chef in a nursing home, which I was absolutely no good at. Then I got a factory job that I didn’t hate, the summers were the worst because of the ovens and it not being air conditioned.

I was there for almost 3 years when covid hit, and completely messed up everything. The factory I worked for printed promotional and things for gatherings. A lot of people got laid off and I was one of them unfortunately, so I stayed home for a while and waited like everyone else. Finally things started to calm down a little and I got a call back, so back to work I went. Work was so slow, most days you couldn’t get 8 hours because there just wasn’t enough work and after a few months I was laid off again. I was called back again after a couple months, but was already looking for better jobs by then.

At this point in time I was no longer looking for jobs other than factory. Prices were going up, and factories usually pay the best and we were already struggling. I went to another factory with better pay, and 40 hour weeks. Life decided to smack me around again I’m sad to say. Due to family issues and the distance of that job from home I had to leave and start job hunting again. I found another job at another factory that I stayed at for a year.

Except for 3 things I really did love this job. They loved to keep us over whenever a product that was due out didn’t get finished, the pay just wasn’t enough, and while I was there I had SEVERE headaches. Come to find out after I quit, the fumes from the various chemicals we worked with were the cause. After that I worked at another factory briefly, until they started implementing mandatory over time every Saturday. At this point in time in my life I am severely burnt out, I have no energy for anything outside of work and taking care of my kids. There was another family emergency, that was worst than the previous. I quit that job and moved on to another one.

I found another factory job that I disliked as much as the others and trudged along. Tired, burnt out, work, home, kids, supper, sleep, and repeat. I couldn’t do it anymore, I was unhappy, struggling to make decent money just to live, tired of having no life, tired of not being able to give my kids a better life. I started looking around on the internet, poking around for jobs I could do from home. Most of those are scams…. I think 99% of them are probably scams, and I didn’t have the money most of them wanted to get started.

Computers, technology, I’ve always loved working on computers, just working with new technologies in general. I was always the person everyone went to when they were having problems with their devices. I decided I wanted to build websites, apps, or help others maintain theirs. I can work from home and be wherever and still work. Now I hadn’t been on an actual computer in YEARS, but I was going to make this happen.

I leaped with the help of my wonderful, supportive girlfriend. She bought me a medium grade laptop and encouraged me to get started. I started researching different coding academies and landed on this one. I started doing the prework, after getting halfway through I decided this was for me and started to apply. Unfortunately, I have not lived the best life and as such my credit is not good. Luckily, I have 2 amazing parents that have been helping me financially on this journey and also encouraged me.

I started my journey into software engineering. It has not been easy, but I’ve put forth my best efforts. I’ve learned so much… HTML, CSS, JavaScript, React, Python, SLQ, Flask…….sometimes it all just bogs down my brain. I’m getting there though!! I’ve made it through Phases 1-3 thus far and am in the last week of Phase 4. So it’s a work in progress still, but in the final stages! I’m excited and anxious, wondering and worrying about what will be next. I’m ready for this new journey in my life.

Python and SQL

HayleeRees — Mon, 06 Nov 2023 17:12:44 +0000

These are all just my notes so far from Python and SQL. All images are from Flatiron and are not my own work. Hope this helps someone!

Python Notes
Interpreter: a program that executes other programs. Python programs require the Python interpreter to be installed so that they can run
Python Shell: an interactive interpreter that can be accessed from the command line
Data Type: a specific kind of data. Python interpreter uses these types to determine which actions can be performed on different data items
Code Block: a collection of code that is interpreted together. Python groups code blocks by indentation level
Function: a named code block that performs a sequence of actions when it is called
Scope: the area in your program where a specific variable can be called

What Python Can Do
*Read and write files
*Listen for network requests and send responses
*Connect to a database to access and update data

Can make all kinds of different applications-not just web applications
*Command line interfaces(CLIs)
*Web servers
*Games
*Web scrapers

print() is the same as console.log()
# is the same as // or /* */
To run an application python filename.py – filename.py is the
relative path
EXAMPLE: python lib/app.py
Typing python in terminal will put you in a sandbox
Exit by typing exit() or pressing ctrl + d
snake_case not camelCase
to install pytest in Pipfile enter pipenv install
then run pipenv shell
run pytest to see the tests pytest -x to see one at a time

Common Data Types
Strings

Python
dog_name = ‘Osiris’
print(f’Say hello to my dog(dog_name}’)
=> Say hello to my dog Osiris

JavaScript
Const dogName = ‘Osiris’
Console.log(Say hello to my dog ${dogName})
=> Say hello to my dog Osiris

‘hello’
=> Hello

‘hello’.upper()
=> HELLO

‘HELLO’.lower()
=> hello

‘hello’.capitalize()
=> Hello

‘hello’ + ‘world’
=> helloworld

‘hello’ * 3
=> hellohellohello

type(‘hello’)
=> will show you what class an object is

dir(‘hello’)
=> list of all the methods that object responds to

Numbers

Intergers are whole numbers = 13
Floats are decimal numbers = 4.5

int(‘1’)
=> 1

int(1.1)
=> 1

float(‘1.1’)
=> 1.1

Will convert an interger to a float when performing math operations

Sequence Types
Lists

[1, 3, 400, 7]
=> [1, 3, 400, 7]

list()
=> []
list_abc = [‘a’, ‘b’, ‘c’]
list_abc[0]
=> a
list_abc[1]
=> b
list_abc[2]
=> c

GIVES YOU THE NUMBER OF OBJECTS
len([1, 3, 400, 7])
=> 4
len([2, 7, 8, 19, 39, 22, 76])
=> 7

SORTS FROM SMALLEST TO LARGEST
sorted([5, 100, 234, 7, 2])
=> [2, 5, 7, 100, 234]

REMOVES THE LARGEST NUMBER IN THE LIST
list_123 = [1, 2, 3, 7, 5, 9, 6]
list_123.pop()
=> 9
print(list_123)
=> [1, 2, 3, 7, 5, 6]

REMOVES SELECTED NUMBER FROM LIST
list_123.remove(7)
print(list_123)
=> [1, 2, 3, 5, 6]

Tuples

(1, 2, 3)
=> (1, 2, 3)
Tuple([1, 2, 3])
=> (1, 2, 3)

Tuples are created with open and close parentheses
tuple() can alse be used to cast lists and other iterable data types to tuples
Tuples are immutable – once a tuple has been created the tuple itself CANNOT be changed
Functions that work ok lists to create new data will still work on tuples – do not contain methods like .pop() and .insert() that would change their content
Most commonly seen when retrieving data from a database – you want to keep an accurate record of what is in the database while your application works with the data – a tuple will protect that information until it is no longer needed.

Sets

set()
=> {}
set([3, 2, 3, ‘a’, ‘b’, ‘a’])
=> {2, 3, ‘a’, ‘b’}

Set is unindexed, unordered, and unchangeable
=> Unindexed – we can’t access elements of the set using square brackets like we do in lists and tuples
=> Unordered – the contents are in a random order
=> Unchangeable – individual elements can’t be changed

Sets have many of the same methods as lists
Can use .pop() and .remove()

Dictionaries

dict(x = 1, y = 2)
=> {‘x’ : 1, ‘y’ : 2}

{‘key1’ : ‘value1’, ‘key2’ : ‘value2’}
=> {‘key1’ : ‘value1’, ‘key2’ : ‘value2’}

my_dict = {‘key1’ : 1, ‘key2’ : 2}
my_dict [‘key2’]
=> 2

Dictionaries are Python’s equivalent of a JavaScript object
Composed of key/value pairs
Each key points to a specific value

print(my_dict[‘key3’])
=> KeyError: ‘key3’

USEFUL METHOD WHEN YOU’RE UNSURE IF A KEY EXISTS – RETURNS NONE INSTEAD OF ERROR
print(my_dict.get(‘key3’))
=> None

CAN’T USE DOT NOTATION TO ACCESS KEYS ON DICTIONARIES – ONLY BRACKET NOTATION
my_dict.key2
=> AttributeError: ‘dict’ object has no attribute ‘key2’

None

None – represents the absence of a value
JavaScript has undefined and null
Can’t create a variable without assigning a value
Must explicitly assign a value of None in you want an empty variable

no_value
=> NameError: name ‘no_value’ is not defined

no_value = None
print(no_value)
=> None

Booleans

Only two values true and false
type(True)
=>
type(false)
=>
not True
=> False
not False
=> True
not 1
=> False
not 0
=> True
not ‘ ‘
=> True
not None
=> True
not [ ]
=> True
not ( )
=> True
not { }
=> True

Not is the operator that reverses the truth of a value, variable, or statement
Operator != asserts that 2 values are not equal

Error Messages

VS CODE

#!usr/bin/env python3
print(hello world)

IN TERMINAL
python lib/a_name_error.py
o File ‘lib/a_name_error.py’,
o Line 3, in
=> Print(hello world)
o NameError: name ‘hello world’ is not defined

Error occurred in file ‘lib/a_name_error.py’
Line of code with error line 3
Scope of error
Type of error NameError:
Reason for error name ‘hello world’ is not defined

Common Errors
Syntax Errors

VS CODE
2 *
IN TERMINAL
=> File ‘’, line 1
o 2 * #
o ^
=> SyntaxError: invalid syntax

There is a missing number – operator must be preceded and followed my a number or variable with a numeric value

Logic Errors

Most difficult – not perceived as errors by Python interpreter
To find will have to go through code line by line
Debugging tools -pdb- helpful for locating logic errors

VS CODE
count = 1
while count < 100
print(‘%i’ % count)
IN TERMINAL
=> 1
=> 1
=> 1
=> 1
=> 1
=> 1
=> 1
=> …
***programmer forgot to increase count during each iteration of the while loop – loop will continue forever

Exceptions

Pop up when the interpreter knows what to do with a piece of code but is unable to complete the action
Difference between other types of errors and exceptions – python interpreter can continue reading the application after and exception, just need to tell it what to expect

Most Common Exceptions
Assertion Error

assert(1 == 2)
=> Traceback (most recent call last):
o File ‘’, line 1, in
=> AssertionError

IndexError and KeyError

IndexError – when you try to access an element at an index past the end of a list
KeyError – relate to dict objects – if a key is referenced but does not exist

list = [0, 1, 2, 3, 4]
dict = {‘a’: 1, ‘b’: 2, ‘c’: 3}

list[10]
=> Traceback (most recent call last):
o File ‘’, line 1 in
=> IndexError: list index out of range

dict[‘d’]
=> Traceback (most recent call last):
o File ‘’, line 1, in
=> KeyError: ‘d’

NameError

flatiron_school
=> Traceback (most recent call last):
o File ‘’, line 1, in
=> NameError: name ‘flatiron_school’ is not defined

Occurs when name is referenced before it’s been defined

TypeError

wrong_type = ‘abc’ + 123
=> Traceback (most recent call last);

Function Syntax
JAVASCRIPT

function keyword identifies this code as a function
myFunction – variable name – used to refer to function from elsewhere in our code
() – where we define our parameter(s)
Param – variable name given to the functions parameter – will be assigned a value when the function is invoked and passed and argument
{} – define the body of the function
console.log – method that will output info to the terminal – different from function’s return value
return – needed when we want our function to return a value when it is called – here it will return a value of whatever the param variable is plus one

JAVASCRIPT
function myFunction(param) {
console.log(‘Running myFunction’)
return param + 1
const myFunctionReturnValue = myFunction(1)
o ‘Running myFunction’
console.log(myFunctionReturnValue)
o 2

Calling the function myFunction with an argument of 1
Reassigning the return value of myFunction to a new variable – myFunctionReturnValue

PYTHON

def instead of function
snake_case instead of camelCase
param still defined in () after method name
NO {} – instead - ():
Must indent all code that is meant to be executed in function return statements work similarly – no semicolon needed after return value
NO closing – new code written at original indentation level

PYTHON

def my_function(param):
    print(‘Running my_function’)
    return param + 1
my_function_return_value = my_function(1)

o Running my_function
o 2
my_function_return_value
o 2

Calling function my_function() – see the output from print() function in terminal followed by return value
Return value – 2 – is saved to variable my_function_return_value **some functions are referred to as methods **methods – special type of function belonging to objects – act upon those objects when called **EXAMPLE list.sort() and dict.get()

Arguments

JAVASCRIPT
function sayHi(name) {
Console.log(Hi there, ${name}!)
}
sayHi()
o Hi there, undefined!

Bugs like these are hard to identify – only found by testing the code and looking for unexpected behavior

PYTHON
def say_hi(name):
print(f’Hi there, {name}’)
say_hi()
o TypeError: say_hi() missing 1 required positional argument:

‘name’
say_hi() was supposed to have name as an argument

Default Arguments

JAVASCRIPT
function sayHi(name = ‘friend’) {
console.log(Hi there, ${name}!)
}
sayHi()
o ‘Hi there, friend!’
sayHi(‘Sunny’)
o ‘Hi there, Sunny!’

PYTHON
def say_hi(name=’Engineer’):
print(f’Hi there, {name}!’)
say_hi()
o “Hi there, Engineer!”
say_hi(‘Sunny’)
o “Hi there, Sunny!”

Return Values

All functions are generally useful for one or both of these
** What return value they have
** What side effects the have (what other parts of the application they change; what they output to the terminal; or what they write to a file; etc)

Writing console.log() or print() is a side effect of a function – different from return value

JAVASCRIPT
function addAndLog(num1, num2) {
console.log(num1 + num2)
}
function addAndReturn(num1, num2) {
return num1 + num2
}
const sum1 = addAndLog(2, 2)
const sum2 = addAndReturn(2, 2)
o sum1 returns undefined because it is logged, not returned
o sum2 returns 4 because it is returned

You use the return keyword to retrieve an output value just like JavaScript

PYTHON
def style_painter():
best_hairstyle = ‘Bob Ross’
return ‘Jean-Michel Basquiat’
return best_hairstyle
print(best_hairstyle)
stylish_painter()
o ‘Jean-Michel Basquiat’

return will disrupt the execution of the function and prevent Python from running any lines of code after return keyword

Pass

Use pass keyword in empty functions until they are ready to be fleshed out
def my_future_function():
pass

Comparison Operators

JAVASCRIPT
‘1’ == 1
=> True
0 == []
=> True
[] == ![]
=> True (??)

PYTHON
‘1’ == 1
=> False
1 == 1
=> True

JAVASCRIPT
[1, 2, 3] === [1, 2, 3]
=> False
In JS 2 arrays are unique objects in memory

PYTHON
[1, 2, 3] == [1, 2, 3]
=> True
1.0 == 1
=> true

Python considers these to have equivalent values
Python will check if an Integer has equivalent value to a Float

PYTHON
True and true
=> true
False and false
=> false
False and true
=> False
True or true
=> True
False or false
=> False
False or true
=> True
not true
=> False
not not true
=> True

^^^Conditional statements in JavaScript VS Python

Falsy Values
Empty lists [ ]
Empty tuples ( )
Empty dictionaries { }
Empty sets set()
Empty strings ‘ ‘ or “ “
0 or 0.0
None
False

SQL
In terminal:
sqlite3 (or no file name) – opens terminal
.quit or ctrl + d – exits terminal
.help – list of commands
.schema – see the structure of the database
.headers on – output the name of each column
.mode column – makes nice columns

In VS Code:
Right click and click Open Database
On bottom left of screen click the down arrow SQLITE EXPLORER
Then click down arrow on filename
Right click on file to select or insert

In terminal to create a table
CREATE TABLE anime (
id INTEGER PRIMARY KEY,
name TEXT,
number_episodes INTEGER);
Alter Table
ALTER TABLE anime ADD COLUMN genre TEXT;
.schema
CREATE TABLE anime (
id INTEGER PRIMARY KEY,
name TEXT,
number_episodes INTEGER,
genre TEXT);
Drop Table
To delete a table
DROP TABLE anime

DATATYPES
NULL – no value
TEXT – any alphanumeric characters you want represented ad plain text
INTEGER – whole number – no letters, special characters, or decimal points
REAL – anything that a plain decimal (1.3 or 2.25)
SQL will store decimal <=15 characters
BLOB – used for holding binary data

Inputting information
INSERT INTO anime (name, number_episodes, genre) VALUES (‘Dr. Stone’, 52, ‘Fantasy’);

Select From
SELECT id, name, number_episodes, genre FROM anime;
OR
SELECT * FROM anime;
SELECT name FROM anime;
OR
SELECT anime.name FROM anime;
Gives just the names
SELECT name, number_episodes FROM anime;
Gives name and number_episodes

Select Where
SELECT * FROM anime WHERE name = ‘Dr. Stone’;
Gives any anime with name of ‘Dr. Stone’
SELECT * FROM anime WHERE number_episodes > 20;
Gives any anime with more than 20 episodes
UPDATING
UPDATE anime SET name = ‘Bleach’ WHERE name = ‘Dr. Stone’;
Changes the name Dr. Stone to Bleach
DELETIING
DELETE FROM anime WHERE id = 10;
Deletes the anime with the id of 10
ORDER BY
SELECT * FROM anime ORDER BY number_episodes;
Gives order smallest to largest
SELECT * FROM anime ORDER BY number_episodes DESC;
Gives order largest to smallest

LIMIT
SELECT * FROM anime ORDER BY number_episodes DESC LIMIT 1;
Gives the first entry with the largest number of episodes
SELECT * FROM anime ORDER BY number_episodes DESC LIMIT 2;
Gives first 2 entries with the largest number of episodes
BETWEEN
SELECT name FROM anime WHERE number_episodes BETWEEN 20 AND 50;
Gives all anime that have 20-50 episodes
NULL
INSERT INTO anime (name, number_episodes, genre) VALUES (NULL, NULL, ‘Action’);
Adds another anime with blank name and number_episodes
To select
SELECT * FROM anime WHERE name IS NULL
COUNT
SELECT COUNT (owner_id) From anime WHERE owner_id = 1;
Shows all owners of the anime with an id of 1
GROUP BY
SELECT genre, COUNT(genre) FROM anime GROUP BY genre
Shows all the genres of anime and how many of each
SELECT genre, owner_id, COUNT(genre) FROM anime GROUP BY genre, owner_id;
Breaks down above by showing more than 1 owner of a genre

Hooks

HayleeRees — Sun, 22 Oct 2023 21:36:42 +0000

Hooks, the bane of my existence. What are they? What do they do? How do you use them? I hope to answer all these questions here. First of all a hook is a function that lets you ‘hook into’ different react features. Think of it as an array with two different values. The first value would be a variable with the state. The second value is a variable with a handler-a function will change the current state. Something that didn’t dawn on me till writing this: values are functions, and functions are values. Here’s an example of what I mean below:

Let me explain what’s going on.
 You are assigning the number 10 to the variable c. So when you console.log(c) it gives you the assigned number: 10.

 In this case you are assigning the answer to the equation to the variable o, NOT THE EQUATION ITSELF. So when you console.log(o) you get 69.

 Here we are actually assigning an entire function to our variable. So this time when you console.log(d) it shows you that function and what it does.

 Now finally in our last one we are assigning d() to the variable e. This time when you
console.log(e) it gives you the string you assigned to the function assigned to d.
With useState you can add React state to functional components, but only ones declared as a function. The hook has state kept inside it, but is accessible from the component where you called the hook. Some Simple rules to follows: always use hooks at the top level of the React component. Don’t call them inside loops, conditions, or nested functions. Hooks must be called in the same order every time a component renders. That’s how React preserves the state of the hooks between many different useState and useEffect calls. You can not call hooks on regular JavaScript functions, only on React components and custom hooks.
To use useState first you must import it from the the React library, then you have to invoke it inside the react component.

Now you can call the set to update the state value or render state freely. Here’s an example:

Here’s what is looks like in browser:

If your variable comes from other data you don’t need state. For instance if you’re changing the theme color from dark to light based on the time of day, that can come from the system data. A toggle is true or false and is triggered when a button is clicked, we don’t need state here either. When we want to store the input from the user or when an event is triggered, that’s when we use state. Form data is also stored in state at least until it’s sent to the database, where it can be retrieved and edited again.
This would be the best first approach to handling multiple states at once:

In browser:

Another way to do this, but is a bit messy is:

This is more complex because we need to spread the existing object and then add the change or you’ll lose it.

Changing state is asynchronous and here’s an example:

In this example I created a function handleOgresCount and I called setOgres with the new value. Doing this made it so the state wasn't updated immediately.

Differences Between textContents, innerText, and innerHTML and When to Use What.

HayleeRees — Mon, 16 Oct 2023 02:44:49 +0000

You would think textContents, innerText, and innerHTML would work the same way in JavaScript. There are so many ways to accomplish the same thing while coding, that this is just another. You would be wrong, all three of these render different output when using them.

Here’s an example of some simple HTML with some inline CSS:

Here is what that looks like opened up in the browser:

As you can see the word ‘emphasized’ is in italics and the word ‘code’ monospaced. For those wondering monospaced means all or most the characters take up the same amount of horizontal space. In a console we set a const to our div and call that const with ‘.innerHTML’:

Using innerHTML shows you everything in the HTML markup contained in a string. This includes elements like spacing, line breaks and formatting. As you can see in the example above we see the tags around the word emphasized making the word italic, we are also shown the 6 spaces between ‘emphasized’ and ‘and’, and lastly we see the tags. You should only use innerHTML when you want to see the HTML markup and what is in the element.

Using innerText returns the string inside the div, it renders the text content of a node and knows about the styling and CSS. In the example above we again set the div to a const and then call it with ‘.innerText’. The return is exactly the same as it appears in the browser. You do not see the spacing oddity or the and tags. Use innerText when you only want to see the element.

TextContent returns content of all elements in the node. Its aware if script and style elements, also formatting like spacing and line breaks. In the example above we set the div to a const and call on it with ‘.textContent’. The return is almost as it appears in the browser with the exception of the spacing. You should use textContent when you want to see what in an element plus any styling.

Some additional notes, in innerHTML if the text inside the element includes ‘&’, ‘<’, or ‘>’ they will be returned as HTML entities ‘&amp’, ‘&lt’ and ‘&gt’. Using innerText sets the content of the tag as plain text, in innerHTML it retrieves and sets the content in HTML format. The difference between innerText and textContent is that innerText is aware of it’s appearance and textContent is not.

My First Webpage

HayleeRees — Sun, 01 Oct 2023 19:56:04 +0000

Finally passed the code challenge in phase 1 at Flatiron School. While studying for the challenge I also had to complete a group project and present it the day after. I worked with two great guys, and together we created a website with a list of our favorite bands. Getting started was probably the hardest part, it was difficult to know where to start. Should we make our own API, get one off a website? Then where do we go from there?
First, and I can not stress this enough, READ THE README!!! I didn’t even know there was a place to go to get premade lists that you could use to build the site. So, we made our own just a short list of five of our favorites with an image, an audio clip, and a brief description and their top three hits. Searching for images to save to the file was easy, just saved the picture to my laptop and moved it over to an assets folder. The description told the reader what genre the band was, a list of the band members, and their top three hits they had.
While working on this another group member was getting the GitHub set up with the basic files necessary index.html, index.js, style.css, and an assets folder for the images and audio clips. After doing all this he added myself and the other group member as collaborators for the project. He created several branches to work on different sections of the website. A HTML branch, CSS branch, Index branch, and the main branch of course. Get familiar with GitHub!! It holds a wealth of knowledge, and a lot of other neat projects other people have worked on.
Next up was the bones of the web page. At the top of every HTML page you have <!DOCTYPE html> and . I assume that the “en” is different if you’re building in another language. Then you have the header and all the different information stored there. The meta tag and the title describing the site. Then we had items attached to the header telling the server where the information was coming from. The script giving the webpage form and depth; the link to jazz it up and look nice with different colors, fonts and styles; and the audio to connect the clips of the different artists.
After the header we just had to give it a very basic body. At the top of body we have a div with an h1 for the title of the webpage. This is the actual visible title you can see, not like the one in the header. After that we placed several different divs with different tags. The different tags and IDs make it easier to place the different objects on the site. We created a place for our images with spots for the name of the band above the picture and the description below.
Then at the bottom of the body we created a form tag. This is different from the divs because we want to be able to give the readers a change to add there own bands and descriptions. So with this form tag we created a spot for the user to enter their own favorite band with and image url and description. After that we closed the form tag and closed out the body and html tags. We had the bones for our website, now time to start fleshing it out. Back to the API we were creating which was giving myself and the another member problems.
SO…. Audio clips are a pain to find. Just 30 second clips of at least popular song from each band we had picked. We found this part very difficult. Searched several different websites, downloaded several ringtone apps all to no avail. I found plenty of site that had sound bites of animal sounds, nature sounds, car engines, machine guns. We just needed short clips of songs, not even the whole thing!
So we ended up having to get a little creative. So instead of finding and downloading the clips we made our own!! We went to a music playing site and recorded the sound with our phones! Primitive I know, but it actually worked out rather well. We recorded a short 30 second clip singing the chorus of the song, then uploaded it the laptop. After the clip was on the laptop it was just a matter of making sure it was trimmed to correct time length and moving it over to the assets folder.
Well we have our database set with the names, images, audio clips, and descriptions. The HTML is all set for us to grab and insert the information were we want it. First you have to do a fetch(). Doing this connects your database to the JS so the system knows what information to insert. Then you have to get the response in json. The line under the fetch should look something like this
.then((resp) => resp.json()) .
This is a promise that the server will give you when its done running.
After that we take our array of data and separate it into objects. An example would be
.then(data => {
data.forEach (band => {.
The forEach expression will place the data we’re pushing to the HTML and repeat the process for each object, in this case our bands. Then we start creating different elements for each item in the band. A h2 element that shows above the picture of the band. Then you set the innerText to the band.name .
For the image tag you set the source. In this case the source was our assets folder. So we copied the relative path to the images and set them to the source. For whatever reason if the images wouldn’t show the name of the band would appear by setting the alt for the image to the band name. The we created a h3 element to house the text for the descriptions of our bands. Then it was just a matter of setting the innerText to that on the database.
Three EventListners were necessary to pass the project, we picked a like button, a submission form, and a mouse hover. You could click the like button an it would show the band’s likes going up. When a user would move their mouse over the page, when it hovered over an image of a band a sound clip would play. Then finally the submission form at the bottom of the page, there a user could add their favorite band to the page. Create EventListners can be fun and a little tricky sometimes, googling for help is a must!!
For the like button first you have to create the button using “const”, then use “let” to let the numberOfLikes to zero. Then you set the innerText for the likeButton by setting equal to the numberOfLikes with the string of “ Likes”. Make sure you put a space before the word “Likes” or the number of likes will be connected to the word “Likes”. Then you have to create the listener for the click. This will make it so that each time the button is clicked the number will to up. To do this you make the innerText set to ++numberOfLikes.
Next to set the sound for the mouse hover. To do this you have to listen for the mouse to enter and exit the image field. When the mouse enters the image field the clip starts and when the mouse leaves it stops. Make a “const” for the audio clip and like an image set the source to the clip in the assets folder. Also like an image we set the alt to the band name and song so if it doesn’t play we still know what it is. After creating the const you attach the EventListeners for mouseenter and mouseleave.
For both of the EventListners thus far we have used “click” as the listener, but forms are a little different. For forms the EventListner is listening for a submit rather than a click. First we create the form by setting it to a “const”. Then we tell it was the form will contain, spots for the new band name, image and a description of the band. Then render it to the HTML the same way the bands we already put on the page are.
There it is!! It’s not pretty, but all the elements necessary to pass the project are there. So our group stopped there. We all had the code challenge to study for, and if we didn’t pass that we didn’t move on to the next phase. I’m happy to say that all members of my group project passed our challenge and made it to phase 2, which was a great relief. After passing we all decided to play around with our code, I decided to create some CSS and make it prettier.
First I decided a picture of the red carpet would be neater than just a plain colored background. So I found a picture that I liked and put it in the assets folder. I then selected the body of the html and set the image for the background to the image I had just found. Then I just had to make sure it was centered and fit the entire page from corner to corner. It wanted to place the picture in a repeating pattern, but I didn’t like how it looked so just made it stretch to fit. Picture was a little more grainy than I would have liked, but not bad.
The images were all different sizes which made it look clunky. I grabbed the images and set the display to block, the max-width to 1000px, auto set the height and margin. Now the images where all the same dimensions, which cleaned them up nicely. Then I center aligned them and add a white double border just to make them pop a little. Now the pictures look good, but the band titles and descriptions are still plain, dull and messy.
So then I set about center aligning the band name and description, changed the font family, the color the size of the font. Playing with colors was fun, they don’t give you very many options though. I actually found this great website https://htmlcolorcodes.com/color-picker/ that gives you the hex number for the shade you pick. So you can sit there and move the cursors around until you find the perfect color. When you finally get to the color you like just copy and paste the hex number and you’ll have the exact color you want. I’m very particular about my colors, I always want just the right shade.
I would have liked to get into the font families more, but was running out of time. I found several that I liked, but couldn’t figure out the correct set of commands to get them set in the code. It’s something I will have to play around with if I hope to get better at it. I love the old English and cursive fonts I just find them so pretty, if not a little hard to read. After finishing the project I found out we could of used an already put together API. I think we could of done more if we would have read everything before just jumping right in.
I think that is probably my biggest take away. Read everything thoroughly before you get started on any project. It is one the things that has caused me the most problems on this journey to better myself. Read everything through before just jumping right in, most of the time you are just making it harder on yourself. Information that would have made your life easier. My other advise would me to check your spelling and camelcasing. The number of times I stared at my screen because something wasn’t working right, and all it turned out to be was I didn’t capitalize the T in innerText!! Happy Coding People!! Good Luck!