MarkBoots
MarkBoots
PostsComments
KPCKevin Powell - Community
Created by Faker on 11/17/2024 in #front-end
How to use Fetch API in JS
it's not 'just' a variable. it's an object. template literals only work with strings https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
25 replies
KPCKevin Powell - Community
Created by Faker on 11/17/2024 in #front-end
How to use Fetch API in JS
with that you're trying put an object into a string. you can just console log the object itself
25 replies
KPCKevin Powell - Community
Created by Faker on 11/17/2024 in #front-end
How to use Fetch API in JS
well, you're making the result a string with the ${result} console.log("Success": result) will work
25 replies
KPCKevin Powell - Community
Created by Faker on 11/17/2024 in #front-end
How to use Fetch API in JS
a really simple example 
fetch('https://pokeapi.co/api/v2/pokemon/?offset=0&limit=10000')
  .then(response => response.json())
  .then(data => listPokemons(data.results));

function listPokemons(pokemons){
  const ul = document.createElement("ul");
  pokemons.forEach(pokemon => {
    const li = document.createElement("li");
    li.innerText = pokemon.name;
    ul.append(li)
  })
  document.body.append(ul);
}
fetch('https://pokeapi.co/api/v2/pokemon/?offset=0&limit=10000')
  .then(response => response.json())
  .then(data => listPokemons(data.results));

function listPokemons(pokemons){
  const ul = document.createElement("ul");
  pokemons.forEach(pokemon => {
    const li = document.createElement("li");
    li.innerText = pokemon.name;
    ul.append(li)
  })
  document.body.append(ul);
}
there are some other things to take care of though. What if the api is not responding or returns something you didnt expect. you have to do some extra work for that
25 replies
KPCKevin Powell - Community
Created by vic on 11/15/2024 in #front-end
how to calculate border values based on height and width in css for loaders
other option could be to use container units in a pseudo element 
#loader{
  height: 50px;
  aspect-ratio: 1;
  --border-color: red;
  --border-size: 16;
  border-radius: 50%;
  display: grid;
  container-type: inline-size;
  animation: spin 1s linear infinite;
  
  &::after{
    content: "";
    grid-area: 1/1;
    border: calc(1cqi * var(--border-size)) solid transparent;
    border-top-color: var(--border-color);
    border-radius: inherit;
  }
}
#loader{
  height: 50px;
  aspect-ratio: 1;
  --border-color: red;
  --border-size: 16;
  border-radius: 50%;
  display: grid;
  container-type: inline-size;
  animation: spin 1s linear infinite;
  
  &::after{
    content: "";
    grid-area: 1/1;
    border: calc(1cqi * var(--border-size)) solid transparent;
    border-top-color: var(--border-color);
    border-radius: inherit;
  }
}
4 replies
KPCKevin Powell - Community
Created by vic on 11/15/2024 in #front-end
how to calculate border values based on height and width in css for loaders
if you want the border size to be a percentage of the element size, you could mimic the border with a background. that accepts percentages. something like this 
#loader{
  height: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  --border-size: 16%;
  --border-color: red;
  
  background: conic-gradient(var(--border-color) 25%, #0000 0); /* quarter circle */
  mask-image: /* hide the inner part */
    radial-gradient(100% 100%, 
      #0000 calc(50% - var(--border-size) - 1px), 
      #000  calc(50% - var(--border-size))
    );
  animation: spin 1s linear infinite;
  
}
@keyframes spin { to { rotate: 1turn } }
#loader{
  height: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  --border-size: 16%;
  --border-color: red;
  
  background: conic-gradient(var(--border-color) 25%, #0000 0); /* quarter circle */
  mask-image: /* hide the inner part */
    radial-gradient(100% 100%, 
      #0000 calc(50% - var(--border-size) - 1px), 
      #000  calc(50% - var(--border-size))
    );
  animation: spin 1s linear infinite;
  
}
@keyframes spin { to { rotate: 1turn } }
4 replies
KPCKevin Powell - Community
Created by peterpumkineaterr on 11/10/2024 in #front-end
side index is not sticking. what i'm doin’ wrong ?
you are missing the position where it sticks to. add top: 0 to .side
6 replies
KPCKevin Powell - Community
Created by Raskin on 11/8/2024 in #front-end
skip eggs function
no problem, glad to help
27 replies
KPCKevin Powell - Community
Created by Raskin on 11/8/2024 in #front-end
skip eggs function
because it seems OP is still learning, don't overcomplicate it
27 replies
KPCKevin Powell - Community
Created by Raskin on 11/8/2024 in #front-end
skip eggs function
but the question was if his logic was correct. there are multiple other methods and logic, but i kept it with the explanation of op's examples
27 replies
KPCKevin Powell - Community
Created by Raskin on 11/8/2024 in #front-end
skip eggs function
then the resulting array is in the wrong order unless instead of push, you add it with unshift
27 replies
KPCKevin Powell - Community
Created by Raskin on 11/8/2024 in #front-end
skip eggs function
the example of the youtube vid combines the egg value + counter check. - if it is an egg AND (&&) the counter is less then 2, increase counter and 'continue' (skip the following bit, go to next iteration) - if not, add it to the array (else is not needed, because it won't reach this bit because of the continue)
27 replies
KPCKevin Powell - Community
Created by Raskin on 11/8/2024 in #front-end
skip eggs function
yea, your logic seems to be correct. reverse the array and iterate trough it - if the value is egg, check if you already have 2. * if not: increase the counter and continue * if so, push it to the new array - if the value is not egg, push it to the new array reverse the array back.
27 replies
KPCKevin Powell - Community
Created by lko on 11/2/2024 in #front-end
Is it normal for view transitions to still be buggy?
maybe you can screenrecord to show us what happens
3 replies
KPCKevin Powell - Community
Created by lko on 11/2/2024 in #front-end
Is it normal for view transitions to still be buggy?
i ran it locally but it works just fine. Can't tell if it has something to do with linux, but if you use the same browser, I can't see a reason why it acts differently
3 replies
KPCKevin Powell - Community
Created by vic on 11/2/2024 in #front-end
how to make border bottom color transition
Im no expert in react and mui, but after a bit of searching: the default input already has the animating underline. To change its colors: 
<Input
  sx={{
    ':before': { borderBottomColor: 'red' },
    ':after': { borderBottomColor: 'blue' },
  }}
/>
<Input
  sx={{
    ':before': { borderBottomColor: 'red' },
    ':after': { borderBottomColor: 'blue' },
  }}
/>
you coul;d also define themes, but that's totally out of my knowledge
8 replies
KPCKevin Powell - Community
Created by Faker on 11/2/2024 in #front-end
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true. . .
grammerly is an extenstion I suppose, yes
25 replies
KPCKevin Powell - Community
Created by Faker on 11/2/2024 in #front-end
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true. . .
then it wouldnt find the element to attach the eventlistener too, but that doesnt seem to be the issue
25 replies
KPCKevin Powell - Community
Created by Faker on 11/2/2024 in #front-end
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true. . .
can you screenshot the error from the devtools console
25 replies
KPCKevin Powell - Community
Created by Faker on 11/2/2024 in #front-end
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true. . .
No description
25 replies