DEV Community: Raquel Santos | RS-coding

How I did a mouse move shadow effect using JavaScript

Raquel Santos | RS-coding — Thu, 12 Aug 2021 16:55:25 +0000

Hi everyone 👋!
How are you doing?

Today I will show you how I did a mouse move shadow effect based on what I have learned in an challenge of JavaScript30 of Wes Bos.
It is a good trick to enhance your portfolio or other websites you are doing.

Let's get started!

1.- I created the HTML structure for the challenge

<div class="hero">
   <div class="container">
      <h1 class="container__title">Hello,👋  I'm <span>Raquel Santos</span></h1>
      <p class="container__paragraph">A self-taught, commited and passionated Front-end developer</p>
      <button class="container__button">About me</button>
   </div>
</div>

I have created a very simple structure that has a div called hero where the event mouseMove runs , a div called container just give some flexbox and align this container to the right. This container has h1, paragraph and a button. The h1 is the element that will be changed.

2.- Added general and specific CSS style in the elements


*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing: inherit;
}

:root{

    --secondary-color: #f151bc;

    --shadow-color:#14011dbe;
    --text-color:#e7e7e7;
}

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

html{
    font-size:100%;
     min-height:100vh;
     width:100vw;
}

body{
    min-height:100vh;
    width:100vw;
    font-family: 'Georama',
    sans-serif;
    box-sizing:border-box;

   background: linear-gradient(90deg, #020024 0%, #06065e 35%, #0273a0 100%);

}

.hero{
    height:100vh;
    width:100vw;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    font-family:'PT Sans',
    sans-serif;
    color:var(--text-color);
    letter-spacing: .1rem;
}

.container{
    margin-right:16rem;
    width:50rem;
    display:flex;
    flex-direction:column;
}

.container__title{
    font-size:7rem;
    font-weight:600;
    margin:4rem 0;
    text-shadow: 10px 10px 1px var(--shadow-color);
    line-height: 6.8rem;
}

.container__title span{
    color:var(--secondary-color);
}

.container__paragraph{
    font-size:3rem;
}

.container__button{
    align-self: flex-end;
    margin-top:4rem;
    border:none;
    padding:2rem 4rem;
    background-color:var(--secondary-color);
    color:white;
    border-radius:5px;
    box-shadow:5px 5px 5px var(--shadow-color);
    font-size:2rem;
    cursor:pointer;
}

3.- Now its time for JavaScript

3.1- First I obtained the elements from DOM and created a variable called walk with 100 value, which means how much the shadow can move/walk.

const hero = document.querySelector('.hero')
const text = hero.querySelector('h1')

cont walk = 100;

3.2- I create an event listener to the hero variable with an event mouvemove and a function called shadow.

hero.addEventListener('mousemove',shadow)

3.3- In this function caleed shadow it where I did put all the functional code to get the result of a shadow moving while I move my mouse in the screen.


const shadow = function(e){
   const width = this.offsetWidth;
   const height = this.offsetHeight;

}

First I created two variables width and height to get the measurements of the here.

Note: what is offsetWidth and offsetHeight?

offsetWidth gives the measurement in pixels of the element's CSS width
offsetHeight gives the measurement in pixels of the element's CSS height
the measure differs if we resize the window of the browser -responsiveness

3.4- I created other two variables x and y that takes as value the measuresments of exact pixel in the here where the event is. (mousemove).I use let instead of const in this variables because I have to update them next.

 let x = e.offsetX
 let y = e.offsetY

Note: what is offsetX and offsetY?
It is property of the MouseEvent interface that provides the offset in the X or Y coordinate of the mouse pointer between that event and the padding edge of the target node.

3.5- After that I needed to change the x and y variables because they are set the value of 0 in the top left of the hero and we want to set the value in the top left of the text.
So I needed to verify if the this(hero) is different from the e.target, if that so I need to update those variables to set the value 0 in the correct place.


const shadow = function(e){
  ...
  if(this !== e.target){
      x = x + e.target.offsetLeft;
      y = y + e.target.offsetTop;
  }
}

3.6- After that I added two new variables which will contain the math to make the shadow move in correct place.
If the shadow walks 100 we have to remember that walks 50 from the zero point to left top and 50 bottom right. so we need to devide the walk in two and subtract to the math made with the 0 point pixel where it begins divided by the height and width of the hero plus the walking .


const shadow = function(e){

    const xWalk = Math.round(( x / width * walk) - (walk / 2))
    const yWalk = Math.round(( y /height * walk) - (walk / 2))

}

This will give the exact pixel moved of the shadow to every direction in the screen until 100/2 = 50.

3.7- After that all I needed to do was to style the text shadow of the variable text with the values from xWalk and yWalk


 const shadow = function(e){
   ...
   text.style.textShadow = `
    ${xWalk}px ${yWalk}px  var(--shadow-color)`;

}

Don't forgetting to put px in the value.

And that is it 🎉 Enjoy it doing and have fun to explore.
If you want to share your examples and new things you tried related to this , comment bellow .

To check the full code click here

to see the demo click here

How I used LocalStorage and Event delegation in a list of items.

Raquel Santos | RS-coding — Wed, 11 Aug 2021 13:51:05 +0000

Hi everyone 👋!
How are you doing?

Today I will show you how I did the JavaScript30 - Wes Bos challenge using localStorage and Event Delegation.
The challenge was creating a form with input and a button to add elements and a ul where items render.
Then I used localStorage to save the items to when I refresh the page they will still be there.
And for checking an item is completed I used event delegation which is creating an event in the parent node to manipulate the children of that parent.

Let's get started!

1.- I created the HTML structure for the challenge


<div class="container__img"> 
  <img src="logo_restaurant.png" alt="logo"> 
</div> 

<div class="container__form> 
 <h2> Local Tapas </h2> 

 <ul class="plates-list"> 
    <li>Loading tapas..</li> 
 </ul> 

 <form class="add-items"> 
    <input type="text" name="item" placeholder="Item Name" required> 
    <input type="submit" value="+Add Item" 
 </form> 
</div>

2.- Added general and specific CSS style in the elements

body{ 
  min-height:100vh; 
   display:flex; 
   flex-direction:column; 
   justify-content:center; 
   align-items:center; 
} 

/*for the background image to give less opacity and dont change the elements above - seen this in css tricks*/ 
body::after{ 
   content:''; 
   background: url(https://images.unsplash.com/photo-1504754524776-8f4f37790ca0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80); 
     background-size:cover; 
    opacity:0.5; 

    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
     position:absolute; 
    z-index:-1; 
}  

.container__img{ 
  width:15rem; 
  margin:2rem; 
} 

img{width:100%;} 

.container__form{ 
   padding:2rem; 
    background-color:white; 
   box-shadow: 0 0 0 10px rgba(0,0,0, 0.1); 
} 

h2{ 
    text-align:center; 
   font-size:3rem; 
   font-weight:200; 
   text-transform: uppercase; 
   margin:1rem 0; 
   letter-spacing: .2rem; 
} 

/*ul*/ 
.plates-list{ 
  text-align:left; 
  list-style-type:none; 
} 

/*input text*/ 
.add-items input{ 
   margin-top:1rem; 
   padding:1rem; 
   outline:0; 
   border:1px solid rgba(70, 78, 70, 0.562); 
} 

/*input submit*/ 
.add-items input[type="submit"]{ 
    background-color:rgb(230, 168, 0); 
    color:white; 
    border:none; 
   padding:1.1rem; 
}

3.- Now it's time for JavaScript

3.1- First I obtained the elements in the DOM

const itemsList = document.querySelector('.plates-list') //ul 
const addItems = document.querySelector('.add-items') // form

3.2- I create a variable called items that have as value an empty array that in the future is where all the items will be

const items = []

3.3- I added an event listener in the form 'add-items' with an event submit and a function with the name addItem. Inside the function, first I called the method preventDefault() because I didn't want the form to submit. The second thing was creating a variable named 'text' to get the input type text value.
Then I created an object that represents each item that is entered in the input type text. After that, I called the array 'items' and push that object 'item'. Also, I reset the form after pushing the new element into the array and put a focus on the input type text.


  const addItem = function(e){ 

     e.preventDefault() 
     const text = (this.querySelector('[name= item]')).value; // **this** represents the form where the event is listenening. we call the input that as the atribute name with value item 

     const item ={ 
        text: text; // text will have the value of the variable text 
        done: false 
    } 

     items.push(item) 

     this.reset() // reset the form 
     const input = this.querySelector('[name=item]') //get input 
     input.focus() // focus the input  
 } 

  addItems.addEventListener('submit' addItem)

3.4- At this moment we have updated the array items since we add another new item using the input and the submit.
But we need to render that array into HTML elements to show in our browser. So I created a function called 'populateList' that is a generic function that is responsible to create HTML from an array and being insert in the parent Node. So that function will take two arguments. The first one is an array that has as default an empty array value and the second one is the parent element in which the HTML code will be inserted.

  const populateList = function(platesArr = [], platesList){ 


      platesList.innerHTML = platesArr.map( (plate, i) { 
         return ` 
           <li> 
               <input type="checkbox" data-index=${i} id="item${i} ${plate.done} ? checked : '' "/> 
               <label></label> 
           </li> 
         ` 
      }.join('') 
 }

First I inserted directly to the parent node, using innerHTML, the result of the next code.
I used map() method in platesArr(an argument that represents an array) that returns a new array filled with the results of the provided function call. the result is a new array so I needed to use method join('') to transform it into strings.
Note that in map method I add two arguments, one the element itself and two the index of the element because I need to use the unique id for each element, also created a data attribute with that index for each element. It will be useful for the checkbox.
Note also, that in the input type checkbox I used a conditional ternary operator to add the attribute checked if the 'plate.done' is not I used empty strings.

3.5- I called the function that I did earlier inside the function addItem with correct arguments. like this:


  const addItem = function(e){ 
             e.preventDefault(); 
             const text = (this.querySelector('[name = item]')).value; 

             const item={ 
                 text:text, 
                 done:false 
            } 

             items.push(item) 

             populateList(items,itemsList) //here items - our array and itemList - our ul  


            //reset the form and focus the input  
             this.reset() 

             const input = this.querySelector('[name=item]') 
             input.focus() 

      }

3.6- This part is done. Now it's time to show you how I did the checkbox toggle using event delegation. But first I updated the CSS styles that were missing that was the li element, the label and input elements inside the li element and create our custom checkbox.


  .plates-list li{ 
    border-bottom:1px solid rgba(0,0,0,0.2); 
    padding:1rem 0; 
    font-size: 1.6rem; 
     display:flex; 
  } 

  .plates-list label{ 
    flex:1; 
     cursor:pointer; 
  } 

   .plates-list input{ 
      display:none;/* to erase the default checkbox */ 
  } 

   /* custom checkbox */ 
   .plates-list input + label:before{ 
     content:"⬜️"; 
     margin-right:1rem; 
  } 

   .plates-list input:checked + label:before{ 
      content:"🌮"; 
   }

3.7- Now it's time for our event delegation. I add an event listener in the 'itemsList' variable(parent Node - ul element ) with click event and created a function called toggleDone.
This function is responsible to toggle the checkbox and update in the items array, the property 'done' from false to true or contrariwise.

Note: what is Event Delegation?
if we have a lot of elements handled similarly, then instead of assigning a handler to each of them – we put a single handler on their common ancestor - parent element.


const toggleDone = function(e){ 

   if(!e.target.matches('input)) return; 

    const el = e.target; 

    const index =el.dataset.index; 

   items[index].data = !items[index].data 

    populateList(items, itemsList) 
} 

itemsList.addEventListener('click',toggleDone)

The first thing I did in the function was to check if the target is not the input then I return. because we want only to use the input the checkbox.

Then I created a variable called el for an element that takes as value the e.target to make things simple.

Also, I created a variable called index that takes as value the dataset called index (data-index) of the element.

Note : To get a specific data attribute we created in an element we get with dataset property and the name of the data attribute which is the name before the hyphen: data-.

I call the array 'items' with index [index] that is the variable I created before. Note that normally we write like this items[0], items[1], items[2] but we don't want hard code so I written item[index] that is the index we clicked no matter which number.
In the final, we add the property .done because is that property we want to update from false to true or true to false when clicked on the checkbox items[index].done.
After updating the items array we call again the 'populateList ' function to render the updated information in HTML.

3.8- Now it's time to do one last thing. Saving the things we added by using localStorage, so when we refresh the browser we keep that information added before.

Note: What is localStorage?
localStorage allows developers to store and retrieve data in the browser. The data stored in local storage will not expire. This means the data will persist even if the tab or the browser window is closed.
It is important to note that local storage only stores strings so, if you wish to store objects, lists, or arrays, you must convert them into a string using JSON.stringify().

First, we need to use setItem() (This function is used to store items in local storage.) where we create the new items and push them into an array. So in the addItem function, we need to make an update.

const addItem = function(e){ 
     e.preventDefault(); 
     const text = (this.querySelector('[name = item]')).value; 
     const item={ 
         text:text, 
         done:false 
    } 

     items.push(item) 

     populateList(items,itemsList) 

    //localStorage.setItem 
    //'items' is the key that will be used to getItem 
    //items is the value -array that needs tobe converted into a string using JSON.stringify() 
     localStorage.setItem('items',JSON.stringify(items)) 

     this.reset() 
     const input = this.querySelector('[name=item]') 
     input.focus() 

}

After doing this I went to the array items to get the elements that are in the localStorage using localStorage.getItem()
and call the function 'populateList' at the end of the code for the first time. Because maybe there are already items to get in localStorage.

const items = JSON.parse(localStorage.getItem('items')) || [] 

... 

populateList(items, itemsList)

Why localStorage.getItem() in the array? Because it's where we get the items to render. If there are no items in localStorage it's an empty array if there is, we use the localStorage.getItem() to get the items that are stored. And don't forget to use the JSON.parse because we need to convert the data into an object again.

Also, we need to use localStorage.setItem() in the function toggleDone because this function updates the done property in the array.

And that is it!🎉

To check the full code click here
to see the demo click here

How I customized a video Player + bonus(fullscreen video)

Raquel Santos | RS-coding — Sun, 18 Jul 2021 15:22:52 +0000

Hi everyone 👋!
How are you doing?
Today I will show you how I did the JavaScript30 - Wes Bos challenge of customizing a video player.
The challenge was only to customize the controls player of the video, but Wes Bos suggested in the final minutes of the video to try to add a button for fullscreen. So I searched and found a fullscreen API to use in my project.

Let me show since the beggining
First I did the HTML

Created a div with class name "player".Inside I added the video tag and another div for controls.

<div class="player">
   <video class="player__video" src="./1003935.mp4"></video>
   <div class="player__controls">
   </div>
</div>

Inside the player Controls I added the tags for the player button, volume input, speed input, backwards button, forwards button and fullscreen button.

 <div class="player__controls">

     <!--progress Bar-->
     <div class="progress">
         <div class="progress__filled"></div>
     </div>

     <!--player Button-->
     <div class="player__Button toggle" tittle="Toggle Play">►</div>

     <!--volume input range-->
     <input class="player__slider" type="range" name="speed" value="1" min="0.5" max="2" step="0.1">

     <!--speed input range -->
     <input class="player__slider" type="range" name="speed" value="1" min="0.5" max="2" step="0.1">

     <!--backwards and forwards buttons-->
     <button class="player__button" data-skip="-10">« 10s </button>
     <button class="player__button" data-skip="20">25s » </button>

     <!--fullscreen button-->
     <button class="fullscreen__button">
          <i class="fas fa-compress"></i>
     </button>
 </div>

2.Added the CSS styles ( you can check here )

3.Finally I did the JavaScript to make this video player functional

First I obtained the elements

const player = document.querySelector('.player')
const video = player.querySelector('.player__video')
const progress = player.querySelector('.progress')
const progressbar = player.querySelector('.progress__filled')
const playerButton = player.querySelector('.toggle')
const ranges = player.querySelectorAll('.player__slider')
const skipButtons = player.querySelectorAll('[data-skip]')
const fullScreenBtn = player.querySelector('.fullscreen__button')

Then I made the events and functions for each functionality of the video player:

For the video I created a toggle play/pause the video my clicking in the video. I did a event listener to the video variable with click event and a function called togglePlay. That function does a if statement that plays the video if the video is paaused and pauses the video if the video is playing.

const togglePlay = function(){
  if(video.paused){
      video.play()
  }else{
      video.pause()
  }
}

video.addEventListener('click', togglePlay)

After that, I needed to update the icon play to pause and pause to play while we click on video. So I added 2 other event Listeners to video variable , one with play event and other with pause event and both with function called updateButton.

const updateButton = function(){
      const icon = this.paused ? '►' : '❚❚'
      playerButton.textContent = icon
}

video.addEventListener('play',updateButton)
video.addEventListener('pause',updateButton)

for the player button I added an event listener to the playerButton variable with click event and a function togglePlay created before for the video that plays the video if its paused and paused if its playing , and because we created a a video event listener with event play and pause it will update the icon even clicking by the player button.


playerButton.addEventListener('click', togglePlay)

For the Skip Buttons I made a forEach loop to add a event listener for each button with click event and a function called skip. In the function skip we add addition assignment the current time of the video to the value of the data-set called skip of the current element clicked(this). We had to envolve into parseFloat because the value it comes as a string and ewe need in JavaScript to be a number.


const skip = function(){
  video.currentTime += parseFloat(this.dataset.skip)
}

skipButtons.forEach( button => button.addEventListener('click', skip)

For updating the range inputs - volume and speed I made a forEach for each range element ,added two events : change and mousemove and a function called handleRangeUpdate. The function takes the video and add the name attribute of the current range used ([this.name] is the same has[volume] or [speed]) and assign the value of the current range is used ( this.value - the value of ther attribute value that changes by the event change or mousemove).

const handleRangeUpdate = function(){
   video[this.name] = this.value
}

ranges.forEach( range => range.addEventListener('change', handleRangeUpdate)

ranges.forEach( range => range.addEventListener( 'mousemove', handleRangeUpdate)

After this I took care of the progress Bar. First I created other event lister to video variable with timeupdate event and a function called handleProgress. This function is responsable to fullfill the progress Bar by playing the video. First I needed to to some Math to get the division of video current time with video duration. this result must be multiplied by 100 to get the percent. Then we put this result at the style of flexBasis of the progressBar class that exist in CSS. Remember it is a string so I needed to use template strings to add the result and the % symbol in the end.

const handleProgress = function(){
  const percent=(video.currentTime / video.duration)*100
  progressBar.style.flexBasis = `${percent}%`
}

video.addEventListener('timeupdate', handleProgress)

After that I also had to update the video and the progress bar by clicking and moving over the progress bar. the final resul is to move the progress bar forwards or backwards with the mouse, updating the video in the place where we moved the Progress Bar. So first I created a variable called mousedown with a boolean false. then took the progress and add an event listener with click event and function named scrub. Added another event to progress with mousemove event with anonymous function.Inside that function e make a if statement if the mouse is down and then call the scrub function .

the function scrub is responsable to do a math that takes the offsetX of event divided to the progress offsetWidth ,multiplying the result for video duration. then assign this result to currentTime Video.
Then add two events to progressBar , one is mousedown the other mouseup. first event when is mousedown the mousedown variable takes true mouseup the variable mousedown takes false again.

const scrub = function(e){
 const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration
 video.currentTime = scrubTime
}

let mousedown = false

progress.addEventListener('click', scrub)

progress.addEventListenr('mousemove', (e) =>{
 if(mousedown){
      scrub(e)
 }
})

progressBar.addEventListener('mousedown', () => mousedown = true)
progressBar.addEventListener('mouseup', () => mousedown = false)

Finally I did the last piece to finish this challenge which was the fullscreen video. I made a research and found out in MDN tha there is an API already implemented in JavaScript. I followed the explication and what I did was, first add an event listener to the fullscreen button with click event and a function called fullScreen In the fullScreen function I just neeed to do a if statement that if the video requests full screen then call the method resquestFullScreen() to the video.


function fullScreen(){
    if(video.requestFullscreen){
         video.requestFullscreen()
    }
}


fullScreenBtn.addEventListener('click',fullScreen)

You can Check the Demo
and the code here

How I did a Search filter for a city or state with Ajax

Raquel Santos | RS-coding — Mon, 12 Jul 2021 16:52:03 +0000

Hi everyone 👋 ,
today I will explain my solution for another challenge made by Wes Bos - "JavaScript 30".
This challenge was interesting to do because I did a review on important matters such as Ajax, promises, fetch, regex, array methods and string methods, spread operator.

Let's start!

1.HTML file is simple with a form tag that contains an input inside that is the search engine and a list that is the given suggestions based on the search.

Done that and the CSS style (you can check on my GitHub repository at the end of the article), let's start with JavaScript :

2.First of all what I did was to assign the external data URL in a variable called endpoint.

3.I created another variable called cities that takes as value an empty array.

4.I created also a variable called prom( promise) to fetch the data that comes from an external source and push the items of that data into an empty array - cities constant .
To do that I used spread operator because if I didn't it would push a nested array inside the empty array and we needed every item to go to the empty array.

Note about spread operator:

The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

For function calls:

f(...iterableObj);

For array literals:

[...iterableObj, 4, 5, 6]

For destructuring:

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

5.I created a function that is responsible to find the city or state that matches what was searched.
This function takes two arguments, one is the word to match and the second is the cities array.
Inside the function, I used an array method - Filter - that returns an array filtered.
Inside that, I used the match() method

match() method returns a match between a string with regular expression.
Because the value of a regular expression is always different we need to build a regular Expression from a variable. So I used the RegExp constructor with a string parameter - wordToMatch

const regex = new RegExp( wordToMatch, 'gi')

g - is for global search. Meaning it'll match all occurrences.
i - stands for ignoring case in the given string. Usually referred to as case-insensitive as pointed out in the comment.

Then I used that variable as an argument inside the match method for the city and also for the state

return place.city.match(regex) || place.state.match(regex)

This function will return a small array with the matches city or states of what we searched.

6.I accessed the input elements 'search' and ul 'suggestions' via DOM and add an event listener to 'search' input with change event and other with keyup event and a function called displayMatches that I have created after.

const searchInput = document.querySelector('.search')
const suggestions = document.querySelector('.suggestions')

searchInput.addEventListener('change', displayMatches)
searchInput.addEventListener('keyup',displayMatches)

The displayMatches function first takes the result of the findMatches function and assigns it to a variable called matchArray.

const matchArray = findMatches(this.value, cities)

After that, I created another variable called HTML that will be responsible to create an HTML of the result of the new array filtered.
First, the HTML variable gets the variable matchArray and does a map ( array method -The map() method creates a new array with the results of calling a function for every array element.)
to create a li tag with two span tags one for the city and the state and the other for the population.

const html = matchArray.map(place =>{
  return `<li>
             <span class="name"> ${place.city}, ${place.state}</span>
             <span class="population">${place.population}</span>
          </li>
         `
}

After that, we get the innerHTML suggestion variable that represents the ul and assigns the HTML variable.

suggestions.innerHTML = html

At this moment we can see already the results after we type something in the search.

7.After that, all that was left was to do the part of colouring the background of the letters that matches what's written in search and putting a comma in the population number of 3 in 3 numbers.

Inside the displayMatches Function, inside the map and before returning I created a variable called regex that will create a regex constructor of the input actual value.

const regex = new RegExp(this.value, 'gi')

then I created two variables, one for the city other for the state that replaces the individual element of property city and state from cities array and replaces whatever it matches in regex and replace it with a span class name 'hl'(highlight) and the value that the person searched for.

const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`)

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement

Then we can replace place.city and place.state inside the literal template with cityName and stateName variables.

return `
       <li>
           <span class="name">${cityName},${cityState}</span>
           <span class="population">${place.population}</span>
       </li>
      `

8.Finally I created a function that is responsible to put commas in the population number.

function numberWithCommas(x) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

return `<li>
            <span class="name">${cityName}, ${stateName}</span>
            <span class="population">${numberWithCommas(place.population)}</span>
        </li>
       `

You can check the full code here and see the demo here

How I did a Flex Panels Gallery with Vanilla JavaScript

Raquel Santos | RS-coding — Thu, 01 Jul 2021 14:26:27 +0000

Today I will show you my solution for one of the challenges of 'javaScript30' by Wes Bos.
The objective was to open a panel by clicking it and show the hidden text with CSS and JS.
However, I noticed while doing the challenge that the preceding panel doesn't close when I click on another. So I decided to take care of that part by adding some code that does the functionality to turn off the sibling panels when the clicked one is open.

Let's see what I did since the beginning:

HTML

1.This is my HTML file, quite simple with one parent element - 'panels' and inside the items-'panel'.

CSS

Having made the HTML I wrote the CSS. In this exercise, it was necessary to do some CSS special Flexbox and transitions.

2.First I declared the dispaly:flex in the parent

3.In each child item -panel- I used flex:1 to receive the specified proportion of the remaining space filling the screen.
Also I added flexbox too to align and justify the child items -

- vertically using flex-direction:column.
Besides, making the general CSS of each element, I added a specific transition for the flex and for the font-size of the paragraphs. Because these two elements will be changed when clicking on the panel, its size and the size of the paragraph.

4.That done, I made the CSS of the paragraphs in more detail as they will also be manipulated depending on whether the panel is open or closed. I highlight here that I made a display flex for the paragraphs all individually to distribute the text aligning and justified in the centre vertically. I styled the middle paragraph to have a larger font size and indicated that the first and last paragraphs of each panel come off the screen initially. Because they reappeared when there is the 'open-active' class that will be manipulated in JavaScript.

5.In JavaScript I first called the DOM element corresponding to each panel, selecting all the elements that contain the .panel class.
Then I created a forEach in the panels variable to add a click event listener to each panel.
In the .openPanel function, I first added the .open class with the toggle method because I wanted it to serve both to open and to close the panel.
Then I also wanted, as I said at the beginning of the text, that when you click on a panel your siblings would automatically close. So I created a 'for..of' loop that accepts the siblings variable and runs through all the panel container panels. Inside the loop, I determined an if statement asking if the siblings variable is equal to the clicked this - panel. If not then we remove the class open.

Once I finished this, I did the second part of the challenge which was to show the first paragraphs and the last paragraphs on the screen as soon as the clicked panel finished opening completely.
So I created a new listener event for each panel with the transition end event. I Requested this event because it fires when the panel transition from closed to open is over.

In the 'showFullText' function, I added the event-e in argument to see if the event's propertyName includes the word flex in the name. If so then we add class '.open-active' with the toggle method.

You can check the demo here Demo and my code here Github

How I made a mini filter app with Vanilla JavaScript

Raquel Santos | RS-coding — Sun, 27 Jun 2021 14:03:31 +0000

I have been doing the JavaScript30 from Wes Bos and one of the challenges is to change CSS Variables using JS.
I found the challenge so interesting that I decided to try myself and create a mini-filter image app by using the same concept that he used on the challenge.
Also, I decided to go further and made functionality to display an uploaded image and then change it with the filters available.

I will show you step by step what I did. You can check the Demo and full code here github.

First of all, I sketched what I wanted to look like in the end to help me trace a path.

Having the sketch done I created an HTML file with elements I wanted. As you can see I write a div container with 3 divs inside:

header-container - for the title and uploading icon,
img-container - for the displayed image,
controls - for the filters controls.

How To Display Uploaded Image In Html Using Javascript

Let's focus first on how to display an uploaded image. So let's take a look at the two first containers.

Inside header-container I created a div called upload-img that contains label and input elements.
The input has some attributes :

type='file' because we want to add a file
accept=' image/*' that takes as a value all the type of files permitted to upload (* - global). If we wanted only permit jpg files we would have to write accept='image/jpg'.
style='display: none;' because I wanted to show only the icon on the label instead of the input.

On the div img-container I added an img HTML tag without a source attribute but an id named "output" that will retrieve the image source from javaScript.
It's time to do JavaScript code to display the image in HTML element img :

The first thing I did was to get the element input from the DOM and stored it in a variable named fileUpload.
Further, I added an event listener with event change and a function called loadFile.
Inside the loadFile function, I get the element img from DOM and store it in a variable called img ( you could call it an image or something else. I decided to call the same name as the tag).
After that, I created a source URL for that variable img that by using URL.createObjectURL(), a static method that creates a string containing URL representing the specific file inside the parameters that, in this case, is the selected file or files of the input:

e.target is the input type="file"
files[0] represents the file or the files that were selected

This part is Done!

How to change CSS Variables in JavaScript

Inside the third container controls let's just focus on the construction of the input element.

As you can see in the image there are a couple of Attributes important that I added. let's talk about each one:

id - the id of the element (example id="sepia")
type ="range" - it is the type of the input. in this case, I wanted a slider control
name - it is the name of the specific filter which is the same as the id (example name="sepia")
min, max value - min and max are the minima and maximum values the input range has and the value is the default value we want to point to at the beginning. To set the values for the min, max and value attributes for each filter control I researched here [filters characteristics]((https://www.w3schools.com/cssref/css3_pr_filter.asp)
data-sizing="%" - it is a custom attribute that has as value an % because all filters that I will use in CSS end with percentage.

Let's take a look at CSS file :

Here I created CSS variables in the : root pseudo-class and added those named variables in the img element.

Now its time to code in JavaScript:

First of all, I stored in a variable all the inputs(plural).
Then I wanted to make an event listener for each input(individual) with change and input event.
So I did a forEach loop at the 'inputs' variable to get each input and add the event listener.

Why did I want to use two events and not just the first one change?
Because the change event only updates the result when the movement ended, and I wanted also to show changes in the image while I move the input range.

In the updateStyle function first, I made a variable called suffix that stores the value '%' of data-sizing or if there are none stores an empty string ' '.
After that, I set a new property value for the root element that takes the value of the input.

That is it!

Drum Kit from JavaScript30

Raquel Santos | RS-coding — Tue, 22 Jun 2021 17:07:51 +0000

Today I have created a repository in my Github with my solutions from JavaScript30 exercises by Wes Bos.
I'm starting to document my entire process so I can see my own evolution and look for new solutions.
For the moment it has only the first exercise , the "Drum Kit"(first day) , which I found really fun to create. Not boring at all

link

What I did last week

Raquel Santos | RS-coding — Tue, 22 Jun 2021 12:56:42 +0000

Last week:

I created in my github two repositories of exercises(beginner to intermediate), one of JavaScript and the other of Vue.js Framework. Basically are exercises that I have been doing in my code journey, and decided to do it again. I have been adding each day after I finish doing by myself and give my solution.
Feel free to check out and make a fork and pull request of 'dev' branch with your solutions.

JavaScript Exercises: link | Vue Exercises: link
I am doing to do app in JavaScript again for the 1000x time to practice with different new solutions from 0 and by myself only.(soon will share)
Learning Vue.Js chapter Animations of the udemy course "Vue - The Complete Guide (w/ Router, Vuex, Composition API)" by Maximilian Schwarzmüller.
Doing JavaScript30 exercises of Wes Bos (soon will do a git repository for this)

struggles:

I feel the need to practice more, because when I do more complicated projects I struggle a bit and need help.

accomplishments and straights:

everyday I small exercises of JavaScript and I can do it by myself only consulting google to find methods or stuff to do the thing I want to do.
I feel improvements in my code everyday and more confident to do some things by my own. not 100% but it is a start

Goals for this week 21 to 27 June

practice everyday small tasks/exercises -JavaScript
practice everyday small tasks/exercises - Vue
continuing the To Do App in JavaScript and finish
continuing study Vue.js Course
practice everyday JavaScript30 exercises
reviewing one subject random or that I feel need remember of JS

Introduce myself

Raquel Santos | RS-coding — Tue, 22 Jun 2021 10:34:43 +0000

Hi,

my name is Raquel Santos, also known as RS-coding.
I have a bachelor's degree in Visual Design and have worked for many years in the field, but as I took a specialization course in front-end web development in 2016-2017, at the end of 2018 I decided to quit my previous job, moving to Amsterdam-The Netherlands with my boyfriend to find new opportunities and started studying code in my spare time while working at clothing stores to have money to pay the bills.

In 2020 I decided that my free time was not enough to learn, so I gave up working in stores and just dedicate myself to focus and studying fulltime reviewing some things about HTML and CSS I already knew, learning javaScript, and the new frameworks on the market.

I resolved to write my journey as developer by telling you what I have been doing, my struggles, my accomplishments, and things that I find important to help me find the job of my dreams.