Category: javascript

I want to send an object which is almost big along with an excel file to api, but only my photo is recognized and my object is not sent, and I get the [object Object] error. I know that this error is for the completion of a string Yes, but I don’t know what to do, I will leave people in the future

This is the output

what should i do?
thanks

I’m working in React and using MUI components. The problem I’m running into is that when I click the subscribe Button, the click event for the CardActionArea component is running as well. I understand that this is because of propagation/bubbling, but I can’t figure out how to fix it from what I’ve found online. I’m hoping someone here can help me with a solution.

function subscribeClick(event) {
    event.stopPropagation();
    console.log("button was clicked");
}

function cardClick() {
    console.log("card was clicked");
}

Above is the code for the functions

return (
    <Card variant="outlined" className="card-item" sx={{ width: 500, verticalAlign: 'top' }} style={{ display: 'inline-block', borderRadius: '0', verticalAlign: 'top' }}>

        <CardActionArea component={RouterLink} to={'./Details/' + props.reportName} onClick={cardClick}>
            <CardContent className='card-content' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <h2 style={{ display: "inline-block" }} className='card-header'>{props.reportName}</h2>
                <Button onClick={subscribeClick} variant="contained">Subscribe</Button>
            </CardContent>
        </CardActionArea>

        <CardActions style={{ justifyContent: 'space-around' }}>
            {StatusBars}
        </CardActions>

    </Card>
);

There is the code for the components that call those functions.

I have tried passing in the event to the subscribeClick function in the onClick of the button by using an arrow function, I’ve tried calling subscribeClick using this.subscribeClick, as well as various different ways of calling the function from Buttons onClick. I can’t figure out why it is still bubbling up to the cardClick function.

I need to learn how to go from June to February with cypress, clicking month by month.
enter image description here

enter image description here

I was thinking of applying a conditional but it didn’t work for me.
If someone can fix the code or help me with any ideas, that would be fantastic.

I want to update my answers in the ejs file whenever the search input in changed without pressing enter.
I have used a script which bing-chat provided me but it has two problems

1. it shows results for the first few inputs i give, then I have to restart the server again
2. It is not updating results in the ‘search-results’ div

please provide me a solution to this

here is the user.controllers.js file’s code

const {pool} = require('../config/database.config');
const MiniSearch = require('minisearch');
const userModels = require('../models/user.models');

const getHome = async(req, res) => {
  const searchedValue = typeof req.query.searchedValue === 'undefined'? '' : req.query.searchedValue;
  const deptFilter    = typeof req.query.deptFilter === 'undefined'? '' : req.query.deptFilter;
  const yearFilter    = typeof req.query.yearFilter === 'undefined'? '' : req.query.yearFilter;
  const fromDate      = typeof req.query.fromDate === 'undefined'? '' : req.query.fromDate;
  const toDate        = typeof req.query.toDate === 'undefined'? '' : req.query.toDate; 
  console.log('searchedValue: ' + searchedValue);
  // console.log(fromDate);
  // console.log(toDate);

  // -------------client query --------------
  const all_results = [];
  {
    const query = `select * from "users"`;
    const client = await pool.connect();
  
    await client.query(query)
      .then((result) => {
        result.rows.forEach((row) => {
          all_results.push(row);
        })
      })
      .catch((err) => console.error(err));
  }
  // -------------client query ends --------------
  
  const minisearch = new MiniSearch({
    fields: ['id','name', 'description','id','name', 'description', 'dept', 'year', 'fromDate', 'toDate'],
    storeFields: ['id','name', 'description', 'dept', 'year', 'fromDate', 'toDate'],
  });
  
  minisearch.addAll(all_results);
  minisearch.autoSuggest(searchedValue, { prefix: true, fuzzy: 0.2 });

  // Defining the filter criteria
  const filterCriteria = (result, filters) => {
    return Object.entries(filters).every(([key, value]) => {
      if (!value) {
        // If filter value is empty or not provided, include the result
        return true;
      } 

      console.log(key, value);
      // Check the result property against the filter value
      if(key == 'fromDate') {
        const formattedDate = userModels.formatDate(result.fromDate);
        console.log(formattedDate);
        return value <= formattedDate;
      }

      if(key == 'toDate') {
        console.log('when toDate true');
        const formattedDate = userModels.formatDate(result.toDate);
        console.log(formattedDate);

        if(value >= formattedDate) {
          // console.log('true');
          return true;
        } else {
          // console.log('false');
          return false
        };
      }

      if (result[key] === undefined || result[key] !== value) {
        return false;
      }
  
      return true;
      
    });
  };
  
  // defining the filters
  const filters = {
    dept: deptFilter,
    year: yearFilter,
    fromDate: fromDate,
    toDate: toDate  
  }

  // Extracting the searched values into results
  let results = (searchedValue) ? 
  minisearch.search(searchedValue, {
    prefix:true,
    fuzzy: 0.4,
    filter: (result) => filterCriteria(result, filters)
  })
  : all_results.filter((result) => filterCriteria(result, filters));
  

  console.log('results');
  console.log(results);

  // just putting hte results in a format that can be used in ejs 
  // in 'search_results' variable
  const search_results = results.map((result) => {
      return {
        id: result.id,
        name: result.name,
        description: result.description,
      };
    });

  console.log('search_results');
  console.log(search_results);

  // flashing the search results to be used in ejs
  if(search_results.length) {
    req.flash('search_results', search_results);
  } else {
    req.flash('search_results');
  }

  // rendering the ejs file
  res.render('../Views/user.ejs', {
    search_results: req.flash('search_results')
  });
}

const getSearchResult = async(req, res) => {

}

module.exports = {
  getHome,
  getSearchResult
}

and here is the user.ejs file’s code

<!DOCTYPE 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>User</title>
</head>
<body>
    <form action="/search" method="GET">
        <h1>SEARCH HERE</h1>
        <input type="search" name="searchedValue" id="searchedValue" oninput="this.form.submit()">
        <br>
        <label for="filter">Select a filter:</label>
        <select id="deptFilter" name="deptFilter">
          <option value="" id="Department" name="Department">Department</option>
          <option value="CSE" id="CSE" name="CSE">CSE</option>
          <option value="EEE" id="EEE" name="EEE">EEE</option>
          <option value="ME" id="EEE" name="ME">ME</option>
        </select>
        <select id="yearFilter" name="yearFilter">
          <option value="" id="Year" name="Year">Year</option>
          <option value="first" id="first" name="first">First Year</option>
          <option value="second" id="second" name="second">Second Year</option>
          <option value="third" id="third" name="third">Third Year</option>
          <option value="fourth" id="fourth" name="fourth">Fourth Year</option>
        </select>
        <br>
        <label for="fromDate"> From </label>
        <input type="date" id="fromDate" name="fromDate">
        <label for="toDate"> To </label>
        <input type="date" id="toDate" name="toDate">
        <br>
        <input type="submit" name="submit" id="submit">
    </form> 
      
    <script>
      // Get references to the input fields
      const searchedValueInput = document.querySelector('#searchedValue');
      const deptFilterInput = document.querySelector('#deptFilter');
      const yearFilterInput = document.querySelector('#yearFilter');
      const fromDateInput = document.querySelector('#fromDate');
      const toDateInput = document.querySelector('#toDate');

      // Listen for changes in the input fields
      searchedValueInput.addEventListener('input', updateSearchResults);
      deptFilterInput.addEventListener('change', updateSearchResults);
      yearFilterInput.addEventListener('change', updateSearchResults);
      fromDateInput.addEventListener('change', updateSearchResults);
      toDateInput.addEventListener('change', updateSearchResults);

      // Update the search results when any of the input fields change
      function updateSearchResults() {
        // Get the current values of the input fields
        const searchedValue = searchedValueInput.value;
        const deptFilter = deptFilterInput.value;
        const yearFilter = yearFilterInput.value;
        const fromDate = fromDateInput.value;
        const toDate = toDateInput.value;

        // Send an asynchronous request to your server to get the search results
        fetch(`/search?searchedValue=${searchedValue}&deptFilter=${deptFilter}&yearFilter=${yearFilter}&fromDate=${fromDate}&toDate=${toDate}`)
          .then(response => response.json())
          .then(data => {
            // Get a reference to the search results container
            const searchResultsContainer = document.querySelector('#search-results');

            // Clear any existing search results
            searchResultsContainer.innerHTML = '';

            // Check if there are any search results
            if (data.search_results.length > 0) {
              // Loop through the search results and create an element for each one
              data.search_results.forEach(result => {
                const resultElement = document.createElement('div');
                resultElement.innerHTML = `
                  <h1>${result.id}</h1>
                  <h2>${result.name}</h2>
                  <h3>${result.description}</h3>
                `;
                searchResultsContainer.appendChild(resultElement);
              });
            } else {
              // If there are no search results, display a message
              searchResultsContainer.innerHTML = '<h1>No results found</h1>';
            }
          });
      }
    </script>

    <div id="search-results" name="search-results">
      <% if(search_results.length > 0) { %>
        <% search_results.forEach((result) => { %>
          <div>
            <h1><%= result.id %></h1>
            <h2><%= result.name %></h2>
            <h3><%= result.description %></h3>
          </div>
        <% }) %>
      <% } else { %>
        <h1> <%= 'No results found' %> </h1>
      <% } %> 
    </div>
    
</body>
</html>

I am expecting a solution where I can search data and make it show in the page just by typing in the search bar without pressing anything

I have a from which has couple of required fields. When users submits the form, I clear all the fields, but then I get the ‘required’ red border around them. This is a problem, because the form shroud be clean, ready for a new submission.

After submission, I expect fields to be cleared and they should not have the required border initially.

So I’m having this project and it kills me with the way the instructions unfold step by step.
At first they asked me to create a BookingForm.js component that includes a form, for my app.
They asked me to use “useEffect” hook to manage the state in the component, and so did I.
Right after, they asked me to lift the state of specific element to another component, and pass the state down as props, to my BookingForm.js component.
And since I’m inexperienced with hooks and useReducer, I’m struggling so much to find the solution.
I feel I could make it work on my own, if it wasn’t for this shift from useState to useReducer, because I don’t know what to keep and what to change now.

This is my Main.js component that imports the BookingForm.js component and renders it.

import React, {useReducer} from 'react';
import ReactLogo from '../bruchetta.svg';
import image1 from '../greeksalad.jpg';
import image3 from '../lemondessert.jpg';
import image4 from '../restauranfood.jpg';
import image5 from '../customer1.jpg';
import image6 from '../customer2.jpg';
import image7 from '../customer3.jpg';
import image8 from '../customer4.jpg';
import image9 from '../restaurant.jpg';
import image10 from '../mario-and-adrian.jpg';
import { faStar } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Link } from 'react-router-dom';
import BookingForm from './BookingForm';


function Main() {

    function initializeTimes() {
        return [
          '17:00',
          '18:00',
          '19:00',
          '20:00',
          '21:00',
          '22:00'
        ];
    }

    const [availableTimes, dispatch] = useReducer(updateTimes, initializeTimes());

    const showBookingForm = false;

    function updateTimes(state, action) {
        switch (action.type) {
            case 'update_times':
                return action.availableTimes;
            default:
                return state;
        }
    }

    return (
        <div>
            {showBookingForm && (<BookingForm availableTimes={availableTimes} dispatch={dispatch}/>)}
            
         ...rest of my Main code...
        </div>
    );
}

export default Main;

And this is my BookingForm.js component:

import React, { useState } from 'react';

function BookingForm({ availableTimes = [], dispatch }) {
    const [date, setDate] = useState('');
    const [time, setTime] = useState('17:00');
    const [guests, setGuests] = useState(1);
    const [occasion, setOccasion] = useState('Birthday');

    const handleFormSubmit = (event) => {
        event.preventDefault();
        // Handle form submission logic here
        // e.g., display form data or make an API call
        console.log('Form submitted:', { date, time, guests, occasion });
    };

    const handleDateChange = (e) => {
        const selectedDate = e.target.value;
        setDate(selectedDate);
        dispatch({type: "update_times"}); // Dispatch the selected date to update available times
      };

    return (
        <form style={{ display: 'grid', maxWidth: '200px', gap: '20px' }} onSubmit={handleFormSubmit}>
            <label htmlFor="res-date">Choose date</label>
            <input type="date" id="res-date" value={date} onChange={handleDateChange} />

            <label htmlFor="res-time">Choose time</label>
            <select id="res-time" value={time} onChange={(e) => setTime(e.target.value)}>
                {availableTimes.map((availableTime) => (
                    <option key={availableTime} value={availableTime}>
                        {availableTime}
                    </option>
                ))}
            </select>

            <label htmlFor="guests">Number of guests</label>
            <input type="number" placeholder="1" min="1" max="10" id="guests" value={guests} onChange={(e) => setGuests(e.target.value)} />
                <label htmlFor="occasion">Occasion</label>
                <select id="occasion" value={occasion} onChange={(e) => setOccasion(e.target.value)}>
                    <option value="Birthday">Birthday</option>
                    <option value="Anniversary">Anniversary</option>
                </select>
            <input type="submit" value="Make Your reservation" />
        </form>
    );
}

export default BookingForm;

At first when the website loads, I initialize the ‘showBookingForm’ = ‘false’ in Main.js, so that this component will not be displayed, and will only appear when the user clicks on any of the respective links.
When that happens, the rest of the Main component disappears properly.
But when I’m in my BookingForm, and the user tries to pick a date, it throws either of the errors :
“dispatch is not a function / initializeTimes is not a function”

with whatever attempt I tried.
What I want is for these instructions to be met by, but I can’t:

“Step 1: Life state up to the Main component
As you added the table booking state to the BookingForm component in the previous exercise, in this exercise, you need to lift the state up to the Main component. This is the preferred approach in this case, as your app is relatively simple.

Move the availableTimes useState hook from the BookingForm component into the Main component

Pass down the state and state changing functions from the Main component to the BookingForm component using props in order to make state work across different components.

Step 2: Update BookingForm to display available times based on the selected date
The next step is to prepare the available times to be updated based on the date the user has selected. To do this, you will change the availableTimes state to a reducer.

In the Main component, create a function named updateTimes which will handle the state change. This function will change the availableTimes based on the selected date. For now, the function can return the same available times regardless of the date.

Next, create a function called initializeTimes which will create the initial state for the availableTimes.

Then, change availableTimes to a reducer using the useReducer function and provide the two previous functions as parameters.

Update the BookingForm component to dispatch the state change when the date form field is changed.

Tip: Include the newly selected date in the dispatch parameter.”

I have a Nexjs application that I want to be able to upload multiple images and store those images in a useState array variable and update it as the user adds more images. This works but somehow, the first item is never stored in the array. It is from the second item that gets stored. For example, if the user adds three images, image2, and image3 would be stored in the useState. The image1 won’t be found. Here is the code: This is the helper function because I would be using the function in many components:

  export const selectFiles = (file: React.ChangeEvent<HTMLInputElement>)=>{
      const fileLen = file?.target?.files?.length as number 
       if(fileLen > 0){
       const img = file?.target?.files?.[0] as File;//this is the items I am missing the first image
       const prevImg = URL.createObjectURL(img);

      return {prevImg, img}
    }
    else return


   };

This is one of the places I used the function:

 const handleSelection = (file: React.ChangeEvent<HTMLInputElement>)=>{
    
    const result = selectFiles(file);
   
    dispatch({type: actionEnum.SELECTEDIMAGEUPLOAD, payload: result?.img});
    dispatch({type: actionEnum.IsSELECTED_IMAGES, payload: result?.prevImg});
   
   }

This is the input html tag:

 <input type="file" name="file" className=" absolute w-full opacity-0 h-5/6 top-0 bottom-0" 
  onChange={handleSelection} />

The state that is storing the images coming from result?.img is always missing the first image the user selected from their local storage.

I am making a project in Spring Boot with Thymeleaf. I want to add a dynamic popup to my project for this purpose I want to add some Javascript code to my project. But it is not working.
test.html :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="container">
  <button type="submit" class="btn">Submit</button>
  <div class="popup" id="popup" onclick="openPopup()">
    <img src="tick.png" >
    <h2>Thank you!</h2>
    <p>Your details bla bla simple message.</p>
    <button type="button" onclick="closePopup()">OK</button>
  </div>
</div>

</body>
</html> 

When I open html file in view mode it is like this(popup is hidden in the beginning) :
When I started the application it seems like :

How can I solve this issue? Thanks in advance.

What does the following function definition mean in JavaScript:

var Candy = (function(self, $) {
    return self;
}  (Candy || {}, jQuery));

I am still learning JavaScript. And am trying to read and understand one of the applications I downloaded online. I can’t figure out what the meaning of the above function definition is. This is only the trimmed version of the module.

My frontEnd works here greenway-vld.ru on HTTPS protocol and calls to the backEnd that works on the same server.

POST methods and spring security aren’t working if i try to POST here is frontEnd example.
GET works fine.

here is how i call to backend login form, it works on my local machine with http

function login() {
    const username = document.getElementById("email").value;
    const password = document.getElementById("psw").value;
  
    const xhttp = new XMLHttpRequest();
    xhttp.open("POST", "https://www.greenway-vld.ru/api/auth/login");
    xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhttp.send(JSON.stringify({
      "email": username,
      "password": password
    }));
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4) {
        const objects = JSON.parse(this.responseText);
        console.log(objects.userInfo);

        const user = objects.userInfo;
        window.sessionStorage.setItem("user",JSON.stringify(user));

        if (objects['status'] == 'ok') {
            
              document.getElementById('id01').style.display="none";
              if(user.role=="ROLE_ADMIN"){
                window.location.href = './AdminPage.html';
              }else{
                window.location.href = './UserPage.html';
              }
              
            
          
        } else {
            alert("error")
        }
      }
    };
    return false;
  }

this is my security config file

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        CsrfTokenRequestAttributeHandler requestHandler = new CsrfTokenRequestAttributeHandler();
        return http.csrf().disable()
                .httpBasic()//Попробовать без
                .and().portMapper().http(80).mapsTo(443)
                .and().anonymous().disable()
                .userDetailsService(userDetailsService)
                .authorizeHttpRequests(auth->auth
                        .requestMatchers("/api/auth/account").hasRole("USER")
                        .requestMatchers("/api/auth/admin").hasRole("ADMIN")
                        .requestMatchers("/", "/**").permitAll()
                        .anyRequest()
                        .authenticated())
                .logout(logout->logout
                        .logoutUrl("/logout")
                        .logoutSuccessUrl("/api/category"))
                .build();
    }

Login Contoller

    @PostMapping("/login")
    public ResponseEntity<LoginApiResponse> login(@RequestBody User user, HttpServletRequest request) throws Exception {

        UsernamePasswordAuthenticationToken authReq =
                new UsernamePasswordAuthenticationToken(user.getEmail(),user.getPassword());
        Authentication auth = authenticationManager.authenticate(authReq);
        SecurityContext securityContext = SecurityContextHolder.getContext();
        securityContext.setAuthentication(auth);
        HttpSession session = request.getSession();
        session.setAttribute("SPRING_SECURITY_CONTEXT", securityContext);
        User foundUser = userService.findUserByEmail(user.getEmail());
        Map<String,String> userInfo = new HashMap<>();
        userInfo.put("name",foundUser.getName());
        userInfo.put("email",foundUser.getEmail());
        userInfo.put("phoneNumber",foundUser.getPhoneNumber());
        userInfo.put("role",foundUser.getRole());
        return new ResponseEntity<>(
                new LoginApiResponse("ok","Logged in",authReq.getPrincipal().toString(),userInfo),HttpStatus.OK);
    }

My first idea was to follow this answer Redirect to HTTPS fails Spring Security because it really redirects

but nothing works, even if i write there 8080 to 443.

All spring security documentations confuse me more and more. Read them all,

I am trying to get short month name for Lithuanian locale from date

new Date().toLocaleDateString('lt-LT', {month: 'short'}) // '06'
new Intl.DateTimeFormat('lt-LT', { month: 'short' }).format(new Date()) // '06'

However it gives me numeric value. I also tried moment library and it gave me correct result

moment(new Date()).locale('lt-LT').format('MMM') // 'bir'

Am I doing something wrong using toLocaleDateString or moment library uses some other sources for dates?

I am new to the creation of an Office add-in using yo office generator, I have created a word office Add-in that will insert a custom header and footer based on the command clicked. I was able to add a header and footer on the first page successfully. But I want to add a different header on the second page.

Like eg Page 1 Header is ABC
Page 2 Header should be DEF
Page 3 Header should be DEF

Below is the code that I followed to add the first header and footer

`Office.initialize = function () {
  // Entry point for the add-in
};

function addHeaderAndFooter() {
  Word.run(function (context) {
    var section = context.document.sections.getFirst();
    section.load("header", "footer");

    return context.sync()
      .then(function () {
        var header = section.header;
        var footer = section.footer;

        header.insertText("Header text", Word.InsertLocation.start);
        footer.insertText("Footer text", Word.InsertLocation.start);

        return context.sync();
      });
  })
  .catch(function (error) {
    console.log(error.message);
  });
}`

Thanks in advance

I’m trying to get data from a URL endpoint and every time I get this error:

How to fix this SerializableError?

Error serializing .middlewareAPI returned from getServerSideProps
in “/”. Reason: undefined cannot be serialized as JSON. Please only
return JSON serializable data types.

Here is my function:

exports.SerializableError = SerializableError;

function isSerializableProps(page, method, input) {
  if (!(0, _isPlainObject.isPlainObject)(input)) {
    throw new SerializableError(page, method, "", `Props must be returned as a plain object from ${method}: `{ props: { ... } }` (received: `${(0, _isPlainObject.getObjectClassLabel)(input)}`).`);
  }

  function visit(visited, value, path) {
    if (visited.has(value)) {
      throw new SerializableError(page, method, path, `Circular references cannot be expressed in JSON (references: `${visited.get(value) || "(self)"}`).`);
    }
    visited.set(value, path);
  }

  function isSerializable(refs, value, path) {
    const type = typeof value;

    if (value === null || type === "boolean" || type === "number" || type === "string") {
      return true;
    }
    if (type === null) {
      // Replaced undefined with null
      value = null;
      return true;
    }
  }
}

In my local environment, I am unable to run this code.

In the header of the site, I display information (email, name) about the user (the information is taken from their microsoft openwork). However, I would also like to add a photo of the user. Whatever I do I get a error

GET https://graph.microsoft.com/v1.0/me/photo/$value 401 (Unauthorized)
Uncaught (in promise) AxiosError {message: ‘Request failed with status code 401’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {…}, request: XMLHttpRequest, …}

I have already looked at many answers and tips on a similar topic, but the error does not disappear. Can you tell me how I can display the user’s photo?

export default function UserPhoto() {
  const [imageUrl, setImageUrl] = useState(null)
  useEffect(() => {
    Axios.get('https://graph.microsoft.com/v1.0/me/photo/$value', {
      headers: { 'Authorization': `Bearer ${localStorage.getItem('access_token')}` },
      responseType: 'blob'
    }).then(o => {
      const url = window.URL || window.webkitURL;
      const blobUrl = url.createObjectURL(o.data);
      setImageUrl(blobUrl)
    })
  }, [])
  return (
    <div className="App">
      {imageUrl && <img alt='my-user-avatar' src={imageUrl} />}
    </div>
  );
}

Header.jsx

export default function Header() {
    return (
        <div >
            <UserInformation />
            <UserPhoto/>
        </div>
    );
}

I am trying to create a category selection section that includes 6 options.

This product selection section should be more to the left, but there is no way to move everything together

Maybe there are some suggestions on how to achieve this better with changes

<!---Search-->
<section id="search" class="my-5 py-5 ms-2">
  <div class="container mt-5 py-5">
  <p>Search Porducts</p>
  <hr>
  </div>

  <form action="shop.php" method="POST">
    <div class="row mx-auto container">
      <div class="col-lg-12 col-md-12 col-sm-12">


      <p>Category</p>
        <div class="form-check">
        <input class="form-check-input" value="clothes" type="radio" name="category" id="category_one" <?php if (isset($category) && $category == 'clothes') {echo 'checked';}?>>
           <label class="form-check-label" for="category_one">
          Clothes
        </label>
      </div>

      <div class="form-check">
        <input class="form-check-input" value="sunglasses" type="radio" name="category" id="category_two" <?php if (isset($category) && $category == 'sunglasses') {echo 'checked';}?>>
            <label class="form-check-label" for="category_two">
          Sunglasses
        </label>
      </div>

      <div class="form-check">
         <input class="form-check-input" value="shoes" type="radio" name="category" id="category_three" <?php if (isset($category) && $category == 'shoes') {echo 'checked';}?>>
            <label class="form-check-label" for="category_two">
          Shoes
        </label>
      </div>

      <div class="form-check">
         <input class="form-check-input" value="jackets" type="radio" name="category" id="category_four" <?php if (isset($category) && $category == 'jackets') {echo 'checked';}?>>
            <label class="form-check-label" for="category_two">
          Jackets
        </label>
      </div>

      <div class="form-check">
         <input class="form-check-input" value="watches" type="radio" name="category" id="category_four" <?php if (isset($category) && $category == 'watches') {echo 'checked';}?>>
            <label class="form-check-label" for="category_two">
          Watches
        </label>
      </div>

      <div class="form-check">
            <input class="form-check-input" value="bags" type="radio" name="category" id="category_five" <?php if (isset($category) && $category == 'bags') {echo 'checked';}?>>
            <label class="form-check-label" for="category_five">
          Bags
        </label>
      </div>


      </div>
    </div>


    <div class="row mx-auto container mt-5">
      <div class="col-lg-12 col-md-12 col-sm-12">

        <p>Price</p>
        <input type="range" class="form-range w-50" name="price" value="1000" min="1" max="1000" id="customRange2">
        <div class="w-50">
          <span style="float:left;">1</span>
          <span style="float:right;">1000</span>
        </div>
      </div>
    </div>

    <div class="form-group my-3 mx-3">
      <input type="submit" name="search" value="Search" class="btn btn-primary">
    </div>

  </form>
</section>

For information on what it should look like and how I got it

It should look like this

and it looks like this to me

I tried to change the code by applying css with styles but nothing changed as it should