Tag: Projects

All the articles with the tag "Projects".

• 50projectsIn50days – Day 21: Drag And Drop

  25 Feb, 2024

  An HTML with 6 boxes. In the first one you have an image which you can drag and drop using the mouse. The HTLM and CSS are simple. The only topic you may notice is that there are a number of functions

• 50projectsIn50days – Day 20: Button Ripple

  12 Oct, 2023

  When you click the button a ripple effect apeared on the button and its expands up to the end. The construction starts with a event listener which is listening the click inside the buttont. When the

• 50projectsIn50days – Day 19: Theme clock

  11 Oct, 2023

  The clock container has several classes that referes to the clock elements: needles, hours, minutes and seconds: <div class="clock-container"> <div class="clock"> <div class="needle hour"></div> <div

• 50projectsIn50days – Day 18: Background Slider

  10 Oct, 2023

  A Image carrousell changes the background image deppending where you clikc. It's an easy and well known task to perform in your mind but, when you have to use Vainilla Javascript it should be

• 50projectsIn50days – Day 17: Movie App

  9 Oct, 2023

  The movie app needs you create an account in the movie db beacuse you need this access to get the data const API_KEY = "ADD API KEY HERE" const API_URL =

• 50projectsIn50days – Day 16: Drink Water

  5 Oct, 2023

  A chanllenging project which shows how a cup is filled by a water. The HTML looks quite simple becase we have 8 cups of 250ml. But, we can select one cup or a range which is cool. In fact, the HTML is

• 50projectsIn50days – Day 15: Counter

  4 Oct, 2023

  A page which load three values that are hardcoded in the HTML tag: <div class="counter-container"> <i class="fa-solid fa-truck-fast fa-3x"></i> <div class="counter" data-target="120000"></div>

• 50projectsIn50days – Day 14: animated navigation

  3 Oct, 2023

  A navigation bar inside the html is the responsible of hosting the menu li. But, for the example is not necesarry to use explain more about that. This nav has an event listener which listen for a