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!
HayleeRees
Posted on
My First Webpage
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)