Week 4

Week 4 started with more JavaScript. We were working in the JS-INTRO folder which was prepared for us to learn and do more practice with the code. We Added some pictures to the assets folder and added some extra styling to the CSS file. there were three in total; base.css, colour.css and layout.css. I made my pictures’ frames rounded by adding some border-radius to the styling.

In JavaScript, we created two functional buttons: one for changing an image, and one for changing the name of the picture. Both buttons received nice styling with rounded corners and different colours.

Before creating buttons, we did set some variables:

Then, we made a few functions. One for changing an image, the other one for changing the name, and one for dragging and dropping elements on the top of an image. This is, for example, a function that changes images and their names.

For drag and drop an element, we found a couple of .png pictures with transparent backgrounds, for example, a hat and glasses. They were added to the Assets folder and to a JavaScript function. Drag and drop didn’t work perfectly but it worked.

I’m not happy with the final styling but I didn’t have time to change it and it was mainly made for learning JavaScript so the styling is not that important for me. To each piece of code, I added notes to remember and to inform (when needed) what each piece does.

The second small project, which I haven’t finished yet but I enjoyed when we started on it, is a music player. It was created in HTML/CSS with the usability made in JavaScript.

I started with a basic styling. I created the assets folder for music, which I converted to mp3 by using a website created for it, and a cover folder to put the collection of pictures of cover albums. I started with one song to check whether it was displayed and worked.

This is the Javascript, I created so far. It includes a play/pause button and a time slider.

As I couldn’t attend the last session on Thursday, I didn’t progress on this project and it is unfinished. I’ll try to finish it at the beginning of week 5.