Forem: Sergei Mazhuga

I've made my own Portfolio

Sergei Mazhuga — Wed, 18 Jan 2023 07:47:40 +0000

I didn't write any posts here for a while because I was making my own portfolio. I think it's not as good as it could be so looking forward for your tips 👍
Here it is: The Portfolio.

What to do when you want to use an async function inside of an async function?

Sergei Mazhuga — Sat, 10 Sep 2022 11:58:27 +0000

The problem: I needed both Firebase functions listAll() and getDownloadURL() to work together in one custom function which takes images directory and return images' url.

The code I came to

...
export const getImages = async (dir) => {
  let data = []
  const storage = getStorage()
  const listRef = ref(storage, dir)
  await listAll(listRef)
    .then(res => {
      res.items.forEach(itemRef => {
        getDownloadURL(itemRef)
          .then(url => {
            data.push(url)
          })
      })
    })
  return data
}

It didn't work cuz it turned for me out that there's no way to nest async functions. So I just asked a question on StackOverflow and someone helped me out. The key to the solution was promise chaining.

The solution

export const getImages = async (dir) => {
  let data = []
  const storage = getStorage()
  const listRef = ref(storage, dir)
  const res = await listAll(listRef)

  const promises = res.items.map(itemRef => getDownloadURL(itemRef))
  const data = await Promise.all(promises)
  console.log(data)

  return data
}

Calculator

Sergei Mazhuga — Thu, 18 Aug 2022 12:41:00 +0000

I made a calculator (less convenient one) using React.
Here it is: Link

The Full Code

GitHub: Link

How to make an element to fill the height of a page

Sergei Mazhuga — Wed, 17 Aug 2022 14:35:00 +0000

Sometimes it's needed for a fullscreen menu, etc. There are 2 ways I know to do so:

100vh

vh stands for "viewport height". To make the element full-screen just add height: 100vh to its CSS. There's also vw that's based on viewport width. The only problem is that vh doesn't mind mobile browsers' search bar and toolbar so sometimes you may encounter a situation when these bars hover some page's elements hiding them.

100dvh

dvg stands for "dynamic viewport height", it does mind mobile browsers' search bar and toolbar and excludes their heights out of viewport's height.

iOS Switch Button

Sergei Mazhuga — Sun, 14 Aug 2022 12:29:00 +0000

Check my YouTube video where I made an iOS switcher using only HTML & CSS! (Funny bonus at the end)

Clock

Sergei Mazhuga — Tue, 09 Aug 2022 13:54:00 +0000

The Website: Link

So I made a clock. At first I was trying to code it via React but couldn't find the way to create infinite loop that would start after page initial render - React was spamming error messages in the console if using useEffect and it wasn't even allowing page to load if using recursive function.

And I used recursive function in common HTML project. Luckily it worked and it wasn't too difficult do code a clock hands. In few words, recursive function was just checking every 1/10s current system time and setting angle for the hands using simple formula:

angle = 360 / marks_num * time_value

where marks_num is the number of current hand's marks (for hours it's 12, for minutes and seconds it's 60)

We also have to make out hands to move smoothly (optional for seconds) so we also add the current state of lower time dimensions.
For hours it's:

minutes / 60 + seconds / 3600

For minutes it's:

seconds / 60 + milliseconds / 60000

So as the result it looks like this:

document.querySelector('.h-hand').style.transform = "rotate("+30*(now.getHours()+now.getMinutes()/60+now.getSeconds()/3600)+"deg)"
document.querySelector('.m-hand').style.transform = "rotate("+6*(now.getMinutes()+now.getSeconds()/60+now.getMilliseconds()/60000)+"deg)"
document.querySelector('.s-hand').style.transform = "rotate("+6*(now.getSeconds())+"deg)"

The Full Code

GitHub: Link

Draggable & Resizable Window on your Website

Sergei Mazhuga — Mon, 08 Aug 2022 10:10:00 +0000

Create a draggable and resizable window that looks and feels like those in your desktop OS.
The source code is located at the end of the post.

❔How it works

Now, let's just briefly look at HTML and then I'll explain the JS part.

HTML

<div class="window">
  <div class="resizer corner tl"></div>
  <div class="resizer corner tr"></div>
  <div class="resizer corner bl"></div>
  <div class="resizer corner br"></div>
  <div class="resizer t"></div>
  <div class="resizer b"></div>
  <div class="resizer l"></div>
  <div class="resizer r"></div>
  <div class="body">
    <div class="topbar">
      <div class="btns">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- your content here -->
  </div>
</div>

Here we have 4 resizers at the corners and 4 at the sides of the window. We'll be able to drag the window holding its topbar.

JS

Let's declare variables-selectors of the window and topbar.

const xwindow = document.querySelector(".window")
const topbar = document.querySelector(".topbar")

Dragging

We'll be able to drag the window while holding the mouse button and moving it. The mousemove listener will only be added when mousedown is triggered. So we also need mouseup to remove mousemove when releasing the mouse button.
Let's now add mousedown listener to the topbar and create a mousedown() function.

//topbar can be whatever you want to hold while dragging
topbar.addEventListener("mousedown", mousedown)
function mousedown(){
  window.addEventListener("mousemove", mousemove)
  window.addEventListener("mouseup", mouseup)
  function mousemove(){}
  function mouseup(){
    window.removeEventListener("mousemove", mousemove)
    window.removeEventListener("mouseup", mouseup)
  }
}

Ok, so now we want JS to track out cursor's position and move the windows as we move the cursor. To do so we need e (or event) which besides other stuff stores information about cursor position. Let's pass it as a function argument.

function mousedown(e){
  ...
  function mousemove(e){}
  ...
}

To change the position of the window we can add the difference of the new and previous position of the cursor and add this difference to the left and top values of the window (our window is absolutely positioned). Let's get previous values of the cursor's coordinates. Before we move the cursor, these values are just the current values.

function mousedown(e){
  ...
  let prevX = e.clientX
  let prevY = e.clientY
  function mousemove(e){}
  ...
}

Now let's find the difference between new and previous positions.

...
let prevX = e.clientX
let prevY = e.clientY
function mousemove(e){
  let newX = e.clientX - prevX
  let newY = e.clientY - prevY
}
...

JavaScript method getBoundingClientRect() returns a DOMRect object providing information about the size of an element and its position relative to the viewport. With it we can get the values of top and left properties and set new values.

function mousemove(e){
  let newX = e.clientX - prevX
  let newY = e.clientY - prevY
  const rect = xwindow.getBoundingClientRect()
  xwindow.style.left = rect.left + newX + "px"
  xwindow.style.top = rect.top + newY + "px"
  prevX = e.clientX
  prevY = e.clientY
}

Congrats! Now we can drag our window.

Resizing

Let's get all the resizers.

const resizers = document.querySelectorAll(".resizer")

As with the topbar, we want to resize the window only when holding the resizer. So let's do the similar thing but in for loop to apply for every resizer.

for (let resizer of resizers){
  resizer.addEventListener("mousedown", mousedown)
  function mousedown(e){
    window.addEventListener("mousemove", mousemove)
    window.addEventListener("mouseup", mouseup)
    let prevX = e.clientX
    let prevY = e.clientY
    function mousemove(e){
      const rect = xwindow.getBoundingClientRect()
      prevX = e.clientX
      prevY = e.clientY
    }
    function mouseup(){
      window.removeEventListener("mousemove", mousemove)
      window.removeEventListener("mouseup", mouseup)
    }
  }
}

Now we need to tell JS which resizer we're holding. We can easily check it by their class. For example, tl means "top-left". To check if current resizer has such class at first we need to declare currentResiser and assign it to e.target (the element we're holding).

...
let prevY = e.clientY
let currentResizer = e.target
...

To check if there's some class in classes list of the resizer, we use currentResizer.classList.contains("tl") in if statement. If yes, we need to calculate new size to the windows. Also if it's top, left or top-left resizer, we also have to change top and left.

...
function mousemove(e){
  const rect = xwindow.getBoundingClientRect()
  if(currentResizer.classList.contains("br")){
    xwindow.style.width = rect.width + (e.clientX - prevX) + "px"
    xwindow.style.height = rect.height + (e.clientY - prevY) + "px"
  }
  else if(currentResizer.classList.contains("bl")){
    xwindow.style.width = rect.width + (prevX - e.clientX) + "px"
    xwindow.style.height = rect.height + (e.clientY - prevY) + "px"
    xwindow.style.left = rect.left + (e.clientX - prevX) + "px"
  }
  else if(currentResizer.classList.contains("tr")){
    xwindow.style.width = rect.width + (e.clientX - prevX) + "px"
    xwindow.style.height = rect.height + (prevY - e.clientY) + "px"
    xwindow.style.top = rect.top + (e.clientY - prevY) + "px"
  }
  else if(currentResizer.classList.contains("tl")){
    xwindow.style.width = rect.width + (prevX - e.clientX) + "px"
    xwindow.style.height = rect.height + (prevY - e.clientY) + "px"
    xwindow.style.top = rect.top + (e.clientY - prevY) + "px"
    xwindow.style.left = rect.left + (e.clientX - prevX) + "px"
  }
  else if(currentResizer.classList.contains("t")){
    xwindow.style.height = rect.height + (prevY - e.clientY) + "px"
    xwindow.style.top = rect.top + (e.clientY - prevY) + "px"
  }
  else if(currentResizer.classList.contains("b")){
    xwindow.style.height = rect.height + (e.clientY - prevY) + "px"
  }
  else if(currentResizer.classList.contains("l")){
    xwindow.style.width = rect.width + (prevX - e.clientX) + "px"
    xwindow.style.left = rect.left + (e.clientX - prevX) + "px"
  }
  else if(currentResizer.classList.contains("r")){
    xwindow.style.width = rect.width + (e.clientX - prevX) + "px"
  }
  prevX = e.clientX
  prevY = e.clientY
}
...

Voila! Now we also can resize it.

The Full Code

HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="index.js"></script>
</head>
<body>

  <div class="window">
    <div class="resizer corner tl"></div>
    <div class="resizer corner tr"></div>
    <div class="resizer corner bl"></div>
    <div class="resizer corner br"></div>
    <div class="resizer t"></div>
    <div class="resizer b"></div>
    <div class="resizer l"></div>
    <div class="resizer r"></div>

    <div class="body">
      <div class="topbar">
        <div class="btns">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

      <!-- your content here -->
    </div>
  </div>

</body>
</html>

SCSS

*{
  margin: 0;
  box-sizing: border-box;
}


.window{
  width: 600px;
  height: 400px;
  min-width: 300px;
  min-height: 200px;
  position: absolute;

  .resizer{
    position: absolute;
    z-index: 1;
    width: 22px;
    height: 22px;
    background: #41a94c80; //delete
    &.corner{
      z-index: 2;
      &.tl{ cursor: nw-resize; top: -5px; left: -5px; }
      &.tr{ cursor: ne-resize; top: -5px; right: -5px; }
      &.bl{ cursor: sw-resize; bottom: -5px; left: -5px; }
      &.br{ cursor: se-resize; bottom: -5px; right: -5px; }
    }
    &.t, &.b{
      width: 100%;
      height: 14px;
    }
    &.l, &.r{
      width: 14px;
      height: 100%;
    }
    &.t{ cursor: n-resize; top: -5px; }
    &.b{ cursor: s-resize; bottom: -5px; }
    &.l{ cursor: w-resize; left: -5px; }
    &.r{ cursor: e-resize; right: -5px; }
  }

  .body{
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
    background: #f4f4f4;
    .topbar{
      width: 100%;
      height: 60px;
      background: #8c8c8c;
      display: flex;
      align-items: center;
      padding: 0 30px;
      .btns{
        display: flex;
        gap: 9px;
        div{
          height: 14px;
          width: 14px;
          border-radius: 50%;
          &:nth-child(1){ background:#FF5F58; }
          &:nth-child(2){ background:#FFBE2F; }
          &:nth-child(3){ background:#2AC940; }
        }
      }
    }
  }

}

JS

const xwindow = document.querySelector(".window")

const topbar = document.querySelector(".topbar")
topbar.addEventListener("mousedown", mousedown)

function mousedown(e){
  window.addEventListener("mousemove", mousemove)
  window.addEventListener("mouseup", mouseup)
  let prevX = e.clientX
  let prevY = e.clientY
  function mousemove(e){
    let newX = e.clientX - prevX
    let newY = e.clientY - prevY
    const rect = xwindow.getBoundingClientRect()
    xwindow.style.left = rect.left + newX + "px"
    xwindow.style.top = rect.top + newY + "px"
    prevX = e.clientX
    prevY = e.clientY
  }
  function mouseup(){
    window.removeEventListener("mousemove", mousemove)
    window.removeEventListener("mouseup", mouseup)
  }
}



const resizers = document.querySelectorAll(".resizer")

for (let resizer of resizers){
  resizer.addEventListener("mousedown", mousedown)
  function mousedown(e){
    let currentResizer = e.target
    let prevX = e.clientX
    let prevY = e.clientY
    window.addEventListener("mousemove", mousemove)
    window.addEventListener("mouseup", mouseup)
    function mousemove(e){
      const rect = xwindow.getBoundingClientRect()
      if(currentResizer.classList.contains("br")){
        xwindow.style.width = rect.width + (e.clientX - prevX) + "px"
        xwindow.style.height = rect.height + (e.clientY - prevY) + "px"
      }
      else if(currentResizer.classList.contains("bl")){
        xwindow.style.width = rect.width + (prevX - e.clientX) + "px"
        xwindow.style.height = rect.height + (e.clientY - prevY) + "px"
        xwindow.style.left = rect.left + (e.clientX - prevX) + "px"
      }
      else if(currentResizer.classList.contains("tr")){
        xwindow.style.width = rect.width + (e.clientX - prevX) + "px"
        xwindow.style.height = rect.height + (prevY - e.clientY) + "px"
        xwindow.style.top = rect.top + (e.clientY - prevY) + "px"
      }
      else if(currentResizer.classList.contains("tl")){
        xwindow.style.width = rect.width + (prevX - e.clientX) + "px"
        xwindow.style.height = rect.height + (prevY - e.clientY) + "px"
        xwindow.style.top = rect.top + (e.clientY - prevY) + "px"
        xwindow.style.left = rect.left + (e.clientX - prevX) + "px"
      }
      else if(currentResizer.classList.contains("t")){
        xwindow.style.height = rect.height + (prevY - e.clientY) + "px"
        xwindow.style.top = rect.top + (e.clientY - prevY) + "px"
      }
      else if(currentResizer.classList.contains("b")){
        xwindow.style.height = rect.height + (e.clientY - prevY) + "px"
      }
      else if(currentResizer.classList.contains("l")){
        xwindow.style.width = rect.width + (prevX - e.clientX) + "px"
        xwindow.style.left = rect.left + (e.clientX - prevX) + "px"
      }
      else if(currentResizer.classList.contains("r")){
        xwindow.style.width = rect.width + (e.clientX - prevX) + "px"
      }
      prevX = e.clientX
      prevY = e.clientY
    }
    function mouseup(){
      window.removeEventListener("mousemove", mousemove)
      window.removeEventListener("mouseup", mouseup)
    }
  }
}

Stopwatch in React

Sergei Mazhuga — Sun, 07 Aug 2022 16:05:00 +0000

The Website: Link

I made a stopwatch in React.
The source code is located down below.

❔How it works

We have variables: time which we can see on the display, startTime (the time when we click play button), stopTime = 0 (the time when we click pause/stop button), elapsedTime (the time between start and pause/stop clicks).
1. If you click start and it's 9h00m00s00ms right now
startTime = 9h00m00s00ms. Now every millisecond elapsedTime = Date.now() - startTime and time = stopTime + elapsedTime which is the same as elapsedTime until the first stop.
2. If you click pause button and it's 9h1m20s10ms now
stopTime = time (1m20s10ms). If we click again, we'll return to the first step but it'll start count not from 0s but from 1m20s10ms.
3. If you click reset
All variables are reset and stopwatch stops.
4. If you click lap button
Current time is recorded

The Source Code

GitHub: Link