Using window.matchMedia() to handle the different screen sizes and jQuery to update the DOM

When I am using multiple CSS classes on JS, window.onresize isn't working for me.

Tried different solutions on the web to solve but none worked for me.

My codes:

JS:

window.onresize = function(event) { console.log(event); var mq = window.matchMedia('(max-width: 768px)'); if (mq.matches) { $('.front-screen .overlay .container .seat .front-row .seats .legend').addClass('front-screen-mw768 overlay-mw768 container-mw768 seat-mw768 front-row-mw768 seats-mw768 legend-mw768') } else { $('.front-screen .overlay .container .seat .front-row .seats .legend').removeClass('front-screen-mw768 overlay-mw768 container-mw768 seat-mw768 front-row-mw768 seats-mw768 legend-mw768'); } }; 

function appendSeats(seats, rowType) { const row = document.querySelector(`.${rowType}`); for (let i = 1; i <= seats; i++) { const seat = document.createElement("div"); seat.classList.add("seat"); row.appendChild(seat); } } function selectSeats() { const seat = document.querySelectorAll(".seat"); seat.forEach((item) => { item.addEventListener("click", () => { item.classList.toggle("selected"); }); }); } function markRandomSeats(SEAT_RESERVED) { const totalSeats = document.querySelectorAll(".seat"); const reservedSeats = getRandomSeats(totalSeats, SEAT_RESERVED); reservedSeats.forEach((seat) => { seat.classList.add("reserved"); }); } function getRandomSeats(seats, count) { const shuffledSeats = Array.from(seats).sort(() => 0.5 - Math.random()); return shuffledSeats.slice(0, count); } 

window.addEventListener("DOMContentLoaded", () => { const SEAT_RESERVED = 10; appendSeats(12, "first-front-row"); appendSeats(14, "second-front-row"); appendSeats(96, "middle-row"); appendSeats(14, "second-last-row"); appendSeats(12, "first-last-row"); selectSeats(); markRandomSeats(SEAT_RESERVED); }); 

CSS:

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } *::-webkit-scrollbar { display: none; } body { background-color: #121212; color: white; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .container { border: 4px solid rgba(255, 255, 255, 0.05); border-radius: 10px; height: 550px; width: 650px; padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; overflow-y: scroll; } .front-screen { margin: 0 auto; width: 580px; } .screen { background-color: white; width: calc(100% - 8.5rem); height: 10px; margin: 0 auto; border-radius: 50% 50% 0 0; position: relative; } .overlay { background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); margin: 0 auto; width: 100%; height: 50px; clip-path: polygon(4.2rem 0%, 32.1rem 0%, 100% 100%, 0 100%); } .seats{ flex: 1; margin: 0 auto; margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; } .front-row{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; } .middle-row{ display: grid; grid-template-columns: repeat(16, 1fr); gap: 1rem; } .seat{ cursor: pointer; background-color: rgba(255,255,255,0.1); height: 20px; width: 20px; border-radius: 5px; transition: 0.2s ease-in-out; } .seat.reserved{ cursor: not-allowed; } .legend{ display: flex; align-items: center; justify-content: center; gap: 2rem; margin: 0 auto; } .legend > div{ display: flex; align-items: center; font-size: 0.9rem; gap: 0.5rem; } .legend .seat{ pointer-events: none; } .selected{ background-color: #9195f8; } .reserved{ background-color: red; } /* 768 breakpoint */ @media (max-width: 768px) { .front-screen-mw768 { width: 26rem; } .overlay-mw768 { height: 2rem; clip-path: polygon(4.2rem 0%, 21.1rem 0%, 100% 100%, 0 100%); } .container-mw768 { border: none; border-radius: unset; height: 34rem; width: 39rem; } .seat-mw768 { height: 1rem; width: 1rem; } .front-row-mw768 { gap: 1rem; } .seats-mw768 { flex: 0; } .legend-mw768 { margin: 3rem auto; } } @media (max-width: 540px) { .front-screen { width: 26rem; } .overlay { height: 2rem; clip-path: polygon(4.2rem 0%, 21.1rem 0%, 100% 100%, 0 100%); } .container { border: none; border-radius: unset; height: 34rem; width: 39rem; } .seat { height: 1rem; width: 1rem; } .front-row { gap: 5px; } .middle-row { gap: 5px; } .legend { margin: 3rem auto; } } 

HTML:

<!DOCTYPE html> <html lang="en"> <head> <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2250%22 fill=%22%230058ff%22></rect><path fill=%22%23fff%22 d=%22M72.15 21.33L72.15 21.33Q74.49 22.50 74.90 25.02Q75.30 27.54 73.59 29.61L73.59 29.61Q72.42 31.23 70.58 31.41Q68.73 31.59 66.84 30.69L66.84 30.69Q64.68 29.70 62.30 29.16Q59.91 28.62 57.30 28.62L57.30 28.62Q52.44 28.62 48.62 30.15Q44.79 31.68 42.09 34.52Q39.39 37.35 38.00 41.22Q36.60 45.09 36.60 49.77L36.60 49.77Q36.60 55.26 38.18 59.31Q39.75 63.36 42.54 66.06Q45.33 68.76 49.11 70.07Q52.89 71.37 57.30 71.37L57.30 71.37Q59.73 71.37 62.16 70.92Q64.59 70.47 66.84 69.30L66.84 69.30Q68.73 68.40 70.58 68.67Q72.42 68.94 73.68 70.56L73.68 70.56Q75.48 72.81 74.99 75.20Q74.49 77.58 72.24 78.66L72.24 78.66Q69.90 79.83 67.43 80.60Q64.95 81.36 62.43 81.77Q59.91 82.17 57.30 82.17L57.30 82.17Q50.82 82.17 45.02 80.10Q39.21 78.03 34.67 73.98Q30.12 69.93 27.51 63.86Q24.90 57.78 24.90 49.77L24.90 49.77Q24.90 42.84 27.29 36.99Q29.67 31.14 34.04 26.87Q38.40 22.59 44.34 20.21Q50.28 17.82 57.30 17.82L57.30 17.82Q61.26 17.82 65.04 18.72Q68.82 19.62 72.15 21.33Z%22></path></svg>" /> <meta charset="UTF-8"> <meta http-equiv=“Pragma” content=”no-cache”> <meta http-equiv=“Expires” content=”-1″> <meta http-equiv=“CACHE-CONTROL” content=”NO-CACHE”> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- CSS Stylesheets --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="css/master.css"> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic" rel="stylesheet"> <title>Responsive-seat-selector-UI-V2</title> </head> <body> <div class="container"> <div class="front-screen"> <div class="screen"></div> <div class="overlay"></div> </div> <div class="seats"> <div class="front-row first-front-row"> </div> <div class="front-row second-front-row"></div> <div class="middle-row"></div> <div class="front-row second-last-row"></div> <div class="front-row first-last-row"></div> </div> <div class="legend"> <div> <div class="seat available"></div> <span>Available</span> </div> <div> <div class="seat selected"></div> <span>Selected</span> </div> <div> <div class="seat reserved"></div> <span>Reserved</span> </div> </div> </div> </body> <!-- Our codes --> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> <script src="js/main.js"></script> </html> 

Now, how can we use window.matchMedia() to handle the different screen sizes and jQuery to update the DOM?

Can anyone help me with examples?