roelof Posts - Answer Overflow

roelof

Posts Comments

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