roelof Posts - Answer Overflow

roelof

•Created by roelof on 11/2/2024 in #front-end

Kevin . Image caroussel tutorial

Does Kevin have a video where I can learn how to make a image scroller So I can solve this one : https://www.frontendmentor.io/challenges/room-homepage-BtdBY_ENq

2 replies

KPCKevin Powell - Community

•Created by roelof on 9/30/2024 in #front-end

CLR navigation problem

Can anyone help me a better way to get the logo and the menu some space. I use now margin-left: 90px but that feels not the right choice. Second question Can anyone help me figure out why the button is not aligned nice with the rest of the menu ? Code so far : https://codepen.io/RoelofWobben/pen/vYoNrXO

6 replies

KPCKevin Powell - Community

•Created by roelof on 9/29/2024 in #front-end

Feedback on a CLR course challenge

I solved challenge2 of the flexbox challenge of the CRL course. How did I do it regarding naming and my css ? Code: https://codepen.io/RoelofWobben/pen/PoMPzOd

14 replies

KPCKevin Powell - Community

•Created by roelof on 9/29/2024 in #front-end

Why is my codepen messed up.

Hello, I tried to do the first challenge of the CLR course about flexbox but my layout is totally messed up. It looks the css file is suddenly not found. Anyone a idea how to solve this ? Code : https://codepen.io/RoelofWobben/pen/gOVaMmK?editors=1100

6 replies

KPCKevin Powell - Community

•Created by roelof on 9/28/2024 in #front-end

Why is my layout messed up on mobile

Hello, I wonder why me layout is messed up on mobile. Code so far: https://codepen.io/RoelofWobben/pen/BaXoydN

7 replies

KPCKevin Powell - Community

•Created by roelof on 9/20/2024 in #front-end

Tutorial for a responsive and accessible hamburger menu

Im still struggeling with the last challenge of the CLR course. Is there somewhere a good course where I can learn to make a responsive and accessible hamburger menu in mobile and a normal menu in desktop. Im struggeling with making the right html and css

3 replies

KPCKevin Powell - Community

•Created by roelof on 7/21/2024 in #front-end

Good way to learn more css

Do not know if it's a question for here but with a CLR challenge , can it be wise to use the html has and just get busy with the css On one challenge I do not know if I use the right html structure

11 replies

KPCKevin Powell - Community

•Created by roelof on 6/24/2024 in #front-end

Sticky footer

Does anyone know if Kevin has a video about how to make a sticky footer. So a footer which is always on the bottom

22 replies

KPCKevin Powell - Community

•Created by roelof on 6/22/2024 in #front-end

Div with fixed width How to make responsive ?

Hello, On the CLR course I learned that a fixed with with px is never good. But now I want to try to make this challenge : https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H and it looks to me that the card has a fixed width on both mobile and desktop. Is it good for this case to use a fixed width in px or can still beter use % and then a width and a max-width ?

10 replies

KPCKevin Powell - Community

•Created by roelof on 6/9/2024 in #resources

online grid generator

Hello, For a grid layout, I always use this site : https://grid.layoutit.com/

2 replies

KPCKevin Powell - Community

•Created by roelof on 3/16/2024 in #front-end

react why is setCategories is not defined error

Hello, For wordpress im busy with making a component who reads all categories. So far I have this :

const [categories, setCategories] = useState([]);
  const [chosenCategory, setChosenCategory] = useState(0)
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchCategories() {
      
        const queryParams = { _fields: ['name', 'id'] };
        apiFetch({ path: addQueryArgs('/wp/v2/categories', queryParams) }).then((response) => {
          setCategories(response).catch((error) => {console.log(error)});
        });
      
    }
    fetchCategories();
  }, []);

const [categories, setCategories] = useState([]);
  const [chosenCategory, setChosenCategory] = useState(0)
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchCategories() {
      
        const queryParams = { _fields: ['name', 'id'] };
        apiFetch({ path: addQueryArgs('/wp/v2/categories', queryParams) }).then((response) => {
          setCategories(response).catch((error) => {console.log(error)});
        });
      
    }
    fetchCategories();
  }, []);

but when I run this I see a message that setCategories is undefined. Can someone explain why this happens and how to solve it

121 replies

KPCKevin Powell - Community

•Created by roelof on 2/17/2024 in #back-end

Can I change the jquery to plain js and how do I send the errors back to the form

Hello, I have this challenge Task: Develop a shortcode that will output a simple contact form. This contact form, when submitted, will use wp_mail to send the email. Requirements: Shortcode needs to have fields: Subject (input), Email (input), Message (textarea), Sanitize all fields before being used for sending it, Use wp_mail to send the email Style it and enqueue style only on pages where the shortcode is Display errors on top of the form I found a tutorial that does almost that but it works with jquery. Now my question are : 1) is there a way I can convert the jquery to plain js. 2) How do I make it work that if there is a validation error I can show it also above the form. Code of the tutorial : https://gitlab.com/roelofwobben/short-code-form ping @ἔρως

5580 replies

KPCKevin Powell - Community

•Created by roelof on 12/22/2023 in #front-end

How can I animate my accordion menu and still keep in accesbile.

Hello I wonder how I can animate the opening and closing of a carroussel but still keep it accessible. Code so far : https://github.com/RoelofWobben/faq-accordion Live url : https://roelofwobben.github.io/faq-accordion/roelof.html

25 replies

KPCKevin Powell - Community

•Created by roelof on 11/10/2023 in #front-end

Feedback on responsiviness and javascript use

Hello, I almost finisch a FEM challenge and I wonder how I can improve the responiviness and my javascript. And of course semantic html it is about a form that needs to be validated. Code here : https://github.com/RoelofWobben/intro-component Live you can see it here : https://roelofwobben.github.io/intro-component/roelof.html

1 replies

KPCKevin Powell - Community

•Created by roelof on 11/2/2023 in #back-end

Good free low-code platform

Hello, Im fairl y good in FE (html, css and js) I like to learn also BE work but in ruby and PHP I fail at things to be complex. So I think I want to look at non of lowcode to make nice custom looking website's. Can anyone recommend nay platforms.

6 replies

KPCKevin Powell - Community

•Created by roelof on 9/13/2023 in #front-end

Read a file and make div's based on the content of the file. best approach

Hello, I have to read a json file so I do it like this :

 
fetch('./data.json) 
  .then( (resp) => resp.json())
  .then( (data) => result = data)

 
fetch('./data.json) 
  .then( (resp) => resp.json())
  .then( (data) => result = data)

now I have to make a div with these contents for every object

<div class="reaction card">
                <div class="left">
                    <img src="./assets/images/icon-reaction.svg">
                    <p>Reaction</p>
                </div>
                <div class="right">
                    <span class="bold">80 </span>
                    <p> / 100</p>
                </div>
            </div>

<div class="reaction card">
                <div class="left">
                    <img src="./assets/images/icon-reaction.svg">
                    <p>Reaction</p>
                </div>
                <div class="right">
                    <span class="bold">80 </span>
                    <p> / 100</p>
                </div>
            </div>

Is it wise to call a function in my fetch or is there a way I can use the data outside the fetch

1 replies

KPCKevin Powell - Community

•Created by roelof on 8/17/2023 in #front-end

How to construct this image

I wanted to make a gallery with the rijksmuseum api. I get some json back which looks like this :

{"levels":
   [
     {
       "name":"z3",
       "width":1400,
       "height":1165,
       "tiles":
                [
                  {"x":2,"y":0,"url":"http://lh3.googleusercontent.com/kRPnUXsQSnT3ArTDzrZV3sR8W319W-PNoTtR0JY5sUPnKGUEQXLkXqpwyuH0itllQs8XmYKdCY0yAvJY1l61WROh5UvHgHjMS1XJv2o=s0"},
                  {"x":2,"y":2,"url":"http://lh3.googleusercontent.com/4gQFJa-ImwN4KCIIcjal7oSBsVsWTiXQP9Z5pPvRczjbI34PLqYPGJ53CLHEKzi4B-kR

{"levels":
   [
     {
       "name":"z3",
       "width":1400,
       "height":1165,
       "tiles":
                [
                  {"x":2,"y":0,"url":"http://lh3.googleusercontent.com/kRPnUXsQSnT3ArTDzrZV3sR8W319W-PNoTtR0JY5sUPnKGUEQXLkXqpwyuH0itllQs8XmYKdCY0yAvJY1l61WROh5UvHgHjMS1XJv2o=s0"},
                  {"x":2,"y":2,"url":"http://lh3.googleusercontent.com/4gQFJa-ImwN4KCIIcjal7oSBsVsWTiXQP9Z5pPvRczjbI34PLqYPGJ53CLHEKzi4B-kR

This is a part of the json. But now I wonder how can I construct the image back when I get some coordinates. Now it looks like a square of 2 x 2 but it can also be a different one on another image

68 replies

KPCKevin Powell - Community

•Created by roelof on 8/4/2023 in #front-end

Wordpress front end forum

Hello, I wonder where I can ask the best how to convert this html ( https://github.com/RoelofWobben/sunny_side_landing_page) to a php based wordpress tutorial. Now I wonder if someone knows a good forum where I can ask for help

36 replies

KPCKevin Powell - Community

•Created by roelof on 6/24/2023 in #front-end

Can I improve here something to make it more reponsive the good way

Hello, A long time ago I wrote this css (https://github.com/RoelofWobben/stats-card/blob/main/roelof.css)
But I wonder now im doing the CLR course what to improve to make the css better

64 replies

Gaming

Programming