DEV Community: CMarghin

JS-beginners-projects

CMarghin — Tue, 13 Jul 2021 09:21:49 +0000

about the Js beginners projects I want to tell you that I can't continue it here by posting articles, instead I created a repository on GitHub here Js-beginners-projects
the repo is a collection of folders of project, every folder has a index.html style.js app.js and a description file description.md in case you want to challenge yourself before seeing the source code

If you have other ideas or projects send them or add a pull request there

I'll add new projects too
hope you are doing fine and good luck.

vanilla Js beginners projects #2 : calculate items price

CMarghin — Wed, 07 Jul 2021 21:29:48 +0000

continuing our beginners projects to practice some Js basics
in this one we will make something similar to this on codepen

it's so easy you but before we start let's divide the main idea to small problems to solve then start coding.
first let's start by the html and css, you can create your own styles .. focus on the js part.

if you want to follow me this is my code you can also check codepen above for the rest

<body>
  <div class="container">
    <div class="product">
      <!-- add an image here or whatever -->
    </div>
    <div class="pricing">
      <p>
        <span class="price">100</span>
        <span class="currency">$</span>
      </p>
      <div class="custom">
        <button class="btn add">&plus;</button>
        <button class="btn remove">&minus;</button>
      </div>
      <div class="add-to-cart">
        <p>
          <span class="quantity">1</span>
            item to buy
          </p>
        <button class="buy-btn">Add To Card</button>
      </div>
    </div>
  </div>
</body>

simple hah, make container to contain product and pricing divs
product for the image and pricing for other stuff
for the styles it your choice ...

let's start

so the first thing we need to do is selecting the elements.
oh Sh*t 😑 thinking of writing all the document.querySelect.... is so silly, let's build a function to do that for us and re-use it whenever we want
let's call it _ or $(jQuery) or whatever you want to call it but make it shorter because that's the reason why we creating it xD

function _s(element, all) { //_ used for private functions but don't think of that now just keep it simple
  if(all) {
    return document.querySelectorAll(element)
  }
  return document.querySelector(element);
}

this function takes two arguments, the first one is a string (class, id, tag, ...), the second argument is optional, you can use a truthy value if you want to use the querySelectorAll() function, else ... leave it;
the difference between them
the querySelector() function returns a single html element and you can use all the methods directly on it, the querySelectorAll() returns an array (nodeList) so you can only use arrays methods on it,to access the elements you have to loop through it,

so now let's select the html elements using this _s() function

let price = _s(".price").textContent,
    //the text that shows how mush money we need spend

    buttons = _s(".btn", true),
    //array of buttons with the class .btn [add and remove buttons]

    quantity = _s(".quantity"),
    //the number of items that we will buy (string)

    items = parseInt(quantity.textContent);
    //transfer the quantity using the parseInt function
    //with a single parameter it returns an integer number type
    //if it can't transfer it it returns NaN

so now we have to loop through the buttons and add an event to each one and create the function that will change the html with the new numbers.
I'll use the forEach() methode to loop over the numbers learn more about it here ... you can use any other methods

buttons.forEach(button => {
  button.addEventListener("click", function(e) {

  })
})

but how could know what button we clicked on ... hmmm good question
we can access to that item by adding a parameter to the function inside the addEventListener;
in the code above It's (e), this is the event object it has many methods that will help you, one of them is the e.target, this will return the html element after the event finished,
ok now we have the target but how we will know if the user is clicking on the + or - button.
for me I'm not that creative so I will give each button a unique class and check the class of that target element (look at the html)
so to access a class of an element I will use the classList method that return an array of element's classes then check if it contains add or remove class to know what to do in each case.

function _s(element, all) { 
  if(all) {
    return document.querySelectorAll(element)
  }
  return document.querySelector(element);
}

let price = _s(".price").textContent,
    buttons = _s(".btn", true),
    quantity = _s(".quantity"),
    items = parseInt(quantity.textContent);


buttons.forEach(button => {
  button.addEventListener("click", function(e) {
    if(e.target.classList.contains("add")) {

    } else { //we have only two buttons so if it's not "add" it will be "remove"

    }
  })
})

everything is good let's finish it
the total price is the the price of one item multiple by how many items
the price of one item is stored in the price variable as a string
if we click on the add button it will increase the items by one, and if we click on the remove button it will decrease the items by one
in the end it will show the total price that is price * items, since the price is a textContent (string) we have to convert it to a valid number, we can use the parseInt() as we learned before or 😎 use this trick(Idk why I wrote the emoji but I just learned it too), using + before a string number will convert it to a number
so the total price is +price * items
then we have to show the items in the html too
and also we have to add a condition to decrease the items only if it is bigger that 1, to avoid buying negative items
so the result is

function _s(element, all) { 
  if(all) {
    return document.querySelectorAll(element)
  }
  return document.querySelector(element);
}

let price = _s(".price").textContent,
    buttons = _s(".btn", true),
    quantity = _s(".quantity"),
    items = parseInt(quantity.textContent);

buttons.forEach(button => {
  button.addEventListener("click", function(e) {
    if(e.target.classList.contains("add")) {
      items++
    } else {
      if(items > 1) items--
    }

    _s(".price").textContent = +price * items;
    quantity.textContent = items;
  })
})

I hope you learned something and sorry for writing a lot of lines but it should be understandable for beginners and if I had any mistake please correct it in the comments and good luck

Js beginners projects

CMarghin — Mon, 05 Jul 2021 00:35:54 +0000

introduction

Hi
we'll build some simple and friendly beginners projects using Js and we'll learn more about the DOM and some Js basics.
those projects will be like a series of projects, in every post I'll talk about the project and a way of how we will get to our needed output.

random background

let's start with the easiest one, in this project we want to generate a random background color of our html body element, we need to add a button that changes the background color whenever we click on it.

html and css

this is optional, you can use the styles you want, you only need to remember the classes or
ids so you can select your elements with Js
if you want to follow me here is my body code

<main>
    <p>
      The Color Used Is <br><span class="color">rgb(255, 255, 255)</span>
    </p>
    <button class="change">
      Generate
    </button>
</main>

inside the span add the initial color of the body to make it appear when we opened the beowser
the actual idea is that whenever the user click on the button it will change the background and will show it's value inside the span
the css part

main{
    text-align: center;
    font-family: sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
p{
    border: 3px solid Black;
    margin-bottom: 2rem;
    padding: 1rem;
}
.change{
    padding: .7em 1em;
    font: bold 1.2rem sans-serif;
    border: 3px solid #000;
    cursor: pointer;
}
.color{
    font-weight: bold;
    text-decoration: underline;
}

this will create everything in the center of our web page
next we have add some functionality to our idea, take a moment and thing of a way to get random colors and and add them to the body whenever we click on the button.

Javascript

here we back ...
this is my code

you may think or write a different code ... it doesn't matter ... it only have to make the job done

//select the span
const colorName = document.querySelector(".color");
//select the button
const changeBtn = document.querySelector(".change")

//create the function
function changeColor() {
    //creating three random numbers
    let r = Math.floor(Math.random() * 256)
    let g = Math.floor(Math.random() * 256)
    let b = Math.floor(Math.random() * 256)

    //create a template literal string rgb color based on the previous numbers and store it on a color variable
    let color = `rgb(${r}, ${g}, ${b})`

    //change the body's background color to the new generated color and also show it the span text content
    document.body.style.backgroundColor = color;
    colorName.textContent = color
}

//we call the changeColor function every time we click on the button 
changeBtn.addEventListener("click", changeColor)

we used the rgb css function to create color, we know that this function accept 3 parameters as numbers between 0 and 255
so we created the 3 variables with different values using

Math.random() * 256 : since Math.random() returns number between 0 and 1 but without including 1 then Math.random() * 256 will return a number between 0 and 256 without including 256 but it will be a decimal number here it comes the
Math.floor() : this function returns the largest integer less than or equal to a given number. we have the three numbers so we will create a random rgb() color and apply it to the body

external resources

good luck

hide and show nav-links content without using JS (only pure CSS)

CMarghin — Wed, 03 Feb 2021 11:31:06 +0000

I was working on a FreeCodeCamp's project , and I was looking for new ideas even though they only need to perform some simple tasks, accidentally I fond the :target pseudo class in the MDN docs, exactly in the lightbox section

how this selector works

the first thing you should know is that the :target selects the element when its id and the hash in the URL are the same, and that's happens when you visit a link which refers to that element ... for example

if we link a section by an anchor tag

<!-- the link -->
<a href="#changed_element">link</a>

<!-- the linked element -->
<section id="changed_element">
    the changed element
</section>

now let's change the section's style when the user click on the link that refers to it by adding the :target selector.

#changed_element:target{
    background-color: #000;
    color: #fff;
}

so this selector selects the visited elements

hmmmm so if we want to hide and show elements using this selector we only need to specify their display before and after clicking on their links

example

<!-- nav links -->
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
</ul>


<section id="home">
    home's content
</section>


<section id="about">
    about's content
</section>


<section id="services">
    services's content
</section>

/* the default display by hiding the elements  */

#home, #about, #services{
    display: none;
}

/* showing the element that has been clicked in the nav-linkd */

#home:target, #about:target, #services:target{
    display: block;
}

so if the user click on a link .. the browser will show the hidden content of that link ... and if he click on other element, the previous element will be hidden again cause he is not targeted and the new link's content will appear

you can change the styles that you want this is just an example ... you can visit this website to see how he made a full website with a single html file
this is my first article in a dev community SO I'm sorry if my explanation was bad (maybe) ... i hope that this article is useful to you and you like it

resources

the MDN docs link
article about a image gallery using only css and :target element in hacks.mozilla
an article about some uses of that selector on css-tricks link
my freecodecamp project