#100daysof(summer)code

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

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

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.

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!  

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.

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.

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.

I currently work as an English teacher, which means that I am constantly evaluating the progress of my students. That being said, I figured that a good way to practice my HTML and CSS skills was to create websites for their exams. The structure is very straightforward: I used several section elements for each of the sections of the exam: writing, listening and reading. I even did some research on the most appropriate color palette for exams to determine the colors of the background and the text. Based on the feedback of my own students I have to say that these websites are very effective in evaluating the progress of their performance.

I am once again practicing my CSS skills with an animation for today’s website. This project consists of three animated lines that move in some circular form. The key here is to set up the animations for each one of these lines so that they don’t get on top of each other. I figured this could be a cool animation for when something is loading on your website. We are used to the same traditional loading animations all the time, so I thought this could be an innovative way to achieve that. Animations are great because they are so fun that you even forget that while you’re creating them you’re learning a lot of important CSS concepts!

Neumorphism is one of those frontend development trends that caught on about a couple of years ago. It added a layer of sophistication to websites and everyone seemed to be doing it. I decided to jump on that wagon for today’s website and I created a light neumorphism form. This allowed me to keep practicing forms and also to increase the difficulty of its styling. In the end I have to say I feel very proud of the outcome. It looks cool and a little bit icy, to be honest, but I just figured this would be a fun way to keep practicing and get better at my frontend development skills.

I am always on the lookout for things on websites that I find interesting or attractive. I immediately feel the urge to try and emulate those cool functionalities. Recreating things is one of the most effective learning techniques when it comes to practicing frontend development. A few days ago I ran into a website that had some sort of menu hidden on the left. When you clicked on the hamburger icon, there was like a modal that featured the menu. For today’s project I decided to recreate that feature. I thought it was classy, elegant, and also a good opportunity to keep practicing my HTML and CSS skills. I have to admit that I feel very proud of being able to achieve that effect. During the process not only I was able to refresh a couple of concepts, but I also had to do some research, which allowed me to learn a couple of new tricks.

As I have stated previously, forms are an essential concept for any frontend developer, which is why we need to find creative ways to practice and work on them on a consistent basis. An innovative way to practice is to play around with the styling of forms. For today’s website I decided to focus on the background of such a form. I wanted to make it transparent, just to change things around. I also included an attractive background to make it more interesting. Forms are one of those concepts that are hard to get at first, especially when it comes to handling their data, but once you get to practice them a lot, you will increase your skills. As I have said many times before, find a fun way to practice and you will be able to enjoy the difficult process of learning how to code.

Today’s website consists of a list of the top millionaires in the world. The idea here is to create a drag and drop list until you get the order right. Drag and drop is one of the most important and difficult Javascript concepts you need to tackle as a frontend developer. Doing some research and reading attentively to the documentation on the subject is crucial to achieve the desired effect. This was certainly a frustrating challenge to overcome. I lost count of the times that I had to go back to the documentation when something didn’t work out the way that I wanted. The thing is that dealing with frustration is a daily situation that we must face as frontend developers, so this was a good exercise to make.

Toggling between dark and light modes is a common functionality for any website. It also represents a magnificent exercise for any beginner of frontend development. The premise is simple: you just need to change the background and the font colors by creating a button that controls that transition. However, achieving this change will allow you to practice and understand key concepts in frontend development, which is the ability to make changes in Javascript that affect the styling of the website. There are other more effective ways to do so, but I strongly encourage you to do this the hard way, since it will help you to clarify a few terms and get your HTML, CSS and Javascript juices going. 

As frontend developers, one of the most recurring tasks that we need to handle is the entering of text by the user. A good exercise to practice this skill is to create any type of app that allows us to create text and to process it to display it in any part of the website. With that in mind, I decided to create for today’s website an app that creates sticky notes. The procedure here consists of creating elements with that text and display it as autonomous entities throughout our website: function divStyle(text) {     let div = document.createElement("div")     div.className = 'note'     div.innerHTML = '<div class="details">'+'<h3>'+text+'</h3>'+'</div>'     div.addEventListener("dblclick", function() {         div.remove()     })     div.setAttribute('style', 'background:'+colors()+'')    ...

Handling text that is being entered by the user is essential for any frontend developer. At the end of the day, we must be able to control and process data so that it can be used for other purposes afterwards. With that in mind, I decided to create a game for today’s website that handles data being typed by the user and at the same time it includes a time counter to make it more fun. The key here is to compare the text that is being entered with the text that is initially displayed. Whoever matches that text wins the game. We can achieve that by using Javascript, since it allows us to process the data, compare it and decide if the user wins the game or not.

A few weeks ago, I ran into a website that had this cool effect of lighting a piece of some text to highlight it in contrast to the rest of the text. I thought it was a good idea to try and emulate that effect to practice my CSS skills. The key here is to select the text that we want to highlight and create an animation to give it that neon light effect. This functionality could be helpful for websites in which we want to remark on a particular section that is filled with text. 

A few days ago I ran into a website that featured some pictures that tilted whenever you hover the cursor over them. I decided to emulate that effect, did some research and found the Vanilla Tilt library. This small and light library allows you to add animations to your website. I focused on the tilt property and included it in today’s project. The documentation is well written so that helped me to get the work done. This simple project gives you the opportunity to practice on your documentation reading and to work on some fun things while learning throughout the process.