Posts

Day # 100: Nubes player

Image
Music is one of my dearest passions. Not only do I listen to music all the time, but I also love making music on my own. I have a music project called “nubes de Altamira”, which consists of ambient pieces that I make to express the nostalgia I feel about my childhood years that I lived in my hometown in Caracas, Venezuela. For today’s project I decided to create a music player using Javascript. To achieve that, I had to study the documentation on the Javascript Audio Object, which is listed in a fantastic and concise way here: https://www.w3schools.com/jsref/dom_obj_audio.asp Reading that information allowed me to configure the controls of my music player. For this project in particular I only listed 3 pieces of nubes de Altamira’s first album, called “el blanco entre los azules”.  This project proved to be quite challenging, but once again, I was working on something very close to my heart, so even when it was surely frustrating, I managed to focus and persist when problems arose....
Post a Comment
Read more

Day # 99: Coffee quantity

Image
I love drinking coffee, but I am aware of the limits to its daily consumption. According to the FDA, the maximum amount of coffee one could have per day is 400mg, which roughly equals to 5 shots of espresso. In order to practice the handling of events of the DOM, I thought of working on a website that counts the amount of coffee you have every day, in order to register and control said consumption. I created six cups of espresso on the DOM and then I also drew a bigger cup which represents the total of your coffee consumption per day. The most challenging part of this project was to control the cups that represent the amount of coffee that is consumed. To achieve that, you need to select from the HTML file the class of cup and then control it with querySelectorAll so you can control the object that includes those cups. function highlightCups(idx) {     if(smallCups[idx].classList.contains('full') &&     !smallCups[idx].nextElementSibling.c...
Post a Comment
Read more

Day # 98: Angry or Happy Mourinho

Image
I decided to have a little fun for today’s website. I am a big fan of José Mourinho, the infamous soccer coach who has gained notoriety thanks to both his indisputable achievements and noteworthy controversies. This website offers you the possibility to choose which type of Mourinho you are, depending on how you are feeling. The joke I was trying to make here is the fact that, even if you choose you are “happy Mourinho”, that sentiment can only last 2 seconds… because Mourinho is always angry! To achieve that I used the Javascript method of timeout. I also had to modify the display property of the image that was not selected to none, that way it doesn’t appear on the website. I hope you have had as much fun as I did when I created this website. Every once in a while I will create these silly websites, just because it is essential a component of pleasure in this type of project.
Post a Comment
Read more

Day # 97: Otter rating

Image
Some websites ask for feedback from their visitors. Especially in the service industry, businesses need to know how their customers evaluate their offer. A common rating system consists of stars: you are rating the service with the amount of stars that you give it. With that in mind, I decided to put a twist on that system and I figured I could use otters as well! The key here is to change the otter icon once it is active and showing some message at the same time. This project also offers to send that rating once it’s finished. This could even be handled on the backend in case the owner of the service needs to collect that data. To change the icon from inactive to active I just changed its background color. And I must say that even when the project was challenging at times, I surely had a lot of fun doing it!  
Post a Comment
Read more

Day # 96: Vocabulapp

Image
I love learning languages and I also love teaching languages. I have always considered them the most fascinating intellectual challenge one can ever undertake. It keeps your mind sharp and it opens doors to new cultures. Since I’m interested in working as an e-learning developer, I decided to create an app for learning purposes. Today’s project is the first iteration of a bigger and more complex vocabulary app. The idea here is to feature a new word with its translation, meaning and pronunciation. That way the user can increase his/her vocabulary on a daily basis. As I said before, this can be considered like a first draft of a bigger project, so I will keep you posted about the progress of such undertaking very soon.
Post a Comment
Read more

Day # 95: Snoop quotes

Image
By now, you must already know that I like to have fun while doing some projects. While reviewing some concepts on forms, I figured I could do a fun project in which someone enters a sentence and this could be converted into a signature quote by a famous person. Snoop Doog has a very particular way of saying things, so I came up with this idea of turning your phrase into a Snoop Dogg one. All you have to do is to handle the words entered by the user, and control them to display them in the part of the website that you want. As a bonus, I thought it’s be fun to include a picture of Snoop Dogg as well. This will only appear after the user has entered his/her phrase. Keep in mind that, ideally, you must enjoy the learning process of coding, so coming up with this type of project is essential for your journey.
Post a Comment
Read more

Day # 94: Notes

Image
Handling text that is entered by the visitor is simply mandatory for any frontend developer. That being said, for today’s project I’ve decided to do something that I’ve always wanted to do, given my writing background, which is a note making website. Above all, we need to include a textarea element so that the visitor can introduce his/her text. Then, we need to be able to process that text and show it in another section once the note has been entirely written. And finally to show that note, we need to display it in a separate div, which we can do by creating elements in Javascript and assigning it classes so we can style it in CSS. This website has two main functionalities: the edit button and the delete button. To delete a note we simply use the remove() method to eliminate it from the DOM.
Post a Comment
Read more