Создать динамическое приложение Java на основе HTML и CSS с использованием сервлетов и MySQL ⇐ MySql

[Anonymous]

Я хочу генерировать динамическое приложение Java, используя мой существующий HTML, CSS и JS, которые повторно обрабатывают данные на основе опции фильтрации, например, при выбранной дисциплине и партии из базы данных Dynmaily. Я попробовал это, как это, неспособное динамически забрать данные, фильтраруя из базы данных, используя сервлеты и mysql
, но результаты не отображаются. У меня есть HTML, CSS, JS < /p>
html: < /p>

Код: Выделить всё

    















[i]

Discover diverse portfolios from
the



connect



collaborate



create














Industrial Design


Communication Design


Textile and Apparel Design





All batches
[/i]






[img]./assets/images/card1.png[/img]


[img]./assets/images/pp1.png[/img]

Pooja
Communication Design, 2021



Interests

Interaction Design, Graphic Design, Branding, Illustration





[img]./assets/images/card2.jpg[/img]


[img]./assets/images/pp2.png[/img]

Swathi
Communication Design, 2021



Interests

Interaction Design, Graphic Design, Branding, Illustration






[img]./assets/images/card2.jpg[/img]


[img]./assets/images/pp2.png[/img]

Swathi
Communication Design, 2021



Interests

Interaction Design, Graphic Design, Branding, Illustration





[img]./assets/images/card1.png[/img]


[img]./assets/images/pp2.png[/img]

Swathi
Communication Design, 2021



Interests

Interaction Design, Graphic Design, Branding, Illustration





[img]./assets/images/card2.jpg[/img]


[img]./assets/images/pp2.png[/img]

Swathi
Communication Design, 2021



Interests

Interaction Design, Graphic Design, Branding, Illustration





[img]./assets/images/card2.jpg[/img]


[img]./assets/images/pp2.png[/img]

Swathi
Communication Design, 2021



Interests

Interaction Design, Graphic Design, Branding, Illustration





[img]./assets/images/card2.jpg[/img]


[img]./assets/images/pp2.png[/img]

Swathi
Communication Design, 2021



Interests

Interaction Design, Graphic Design, Branding, Illustration











< /code>
css: < /p>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Font-Falimy  */
@font-face {
font-family: "manrope-bold";
src: url(./../fonts/manrope.bold.otf);
}
@font-face {
font-family: "manrope-extrabold";
src: url(./../fonts/manrope.extrabold.otf);
}
@font-face {
font-family: "manrope-light";
src: url(./../fonts/manrope.light.otf);
}
@font-face {
font-family: "manrope-medium";
src: url(./../fonts/manrope.medium.otf);
}
@font-face {
font-family: "manrope-regular";
src: url(./../fonts/manrope.regular.otf);
}
:root {
--baseWhite: #ffffff;
--accentBlue: #0048ff;
--textGray: #838383;
--secoundaryGray: #b3b3b3;
}
body {
font-family: "manrope-regular" !important;
font-size: 16px;
min-height: 100vh;
background-color: var(--baseWhite);
}
/* .container {
width: 90%;
margin: 0 0 0 1em;
} */
.container {
width: 90%;
margin: 0 auto;
}
.hero__container {
width: 98%;
margin: 10px 0 10px 20px;
}
.logo__container {
border: 1px solid black;
width: 253px;
border-radius: 10px;
float: right;
margin: 10px 10px 0 0;
}
.logo__container img {
width: 250px;
border-radius: 10px;
}
/* Hero Section */
.hero__container p {
clear: both;
font-size: 16px;
color: var(--textGray);
}
.hero__title-1 {
width: 100%;
font-size: 48px;
font-weight: 300;
color: black;
position: relative;
display: inline-block;
}
.hero__title-1 span {
font-size: 120px;
font-family: "manrope-light";
line-height: 1.1;
}
.hero__title-1::after {
content: " ";
height: 7px;
width: auto;
background: var(--accentBlue);
display: block;
position: absolute;
top: 80%;
left: 10.5em;
right: 0;
}
.hero__title-1 .circle {
position: absolute;
width: 77px;
height: 77px;
/* opacity: .8;  */
top: 39px;
left: 64px;
background: linear-gradient(to bottom, #1c40a5, #728dd1);
border-radius: 50%;
margin: 0 5px;
}
.hero__title-2 {
margin-top: 10px;
width: 100%;
font-size: 48px;
font-weight: 300;
color: black;
position: relative;
display: inline-block;
}
.hero__title-2 span {
font-size: 120px;
font-family: "manrope-bold";
line-height: 1.1;
}
.hero__title-2::after {
content: " ";
height: 7px;
width: auto;
background: var(--accentBlue);
display: block;
position: absolute;
top: 80%;
left: 15em;
right: 0;
}
.hero__title-2 .circle {
position: absolute;
/* Position relative to the container */
width: 77px;
height: 77px;
/* opacity: .8; */
top: 39px;
left: 69px;
background: linear-gradient(to bottom, #1c40a5, #728dd1);
border-radius: 50%;
margin: 0 5px;
}
.hero__title-3 {
margin-top: 10px;
width: 100%;
font-size: 48px;
font-weight: 300;
color: black;
position: relative;
display: inline-block;
}
.hero__title-3 span {
font-size: 120px;
font-family: "manrope-bold";
line-height: 1.1;
}
.hero__title-3::after {
content: " ";
height: 7px;
width: auto;
background: var(--accentBlue);
display: block;
position: absolute;
top: 80%;
left: 8.9em;
right: 0;
}
.hero__title-3 .circle {
position: absolute;
width: 77px;
height: 77px;
/* opacity: .8; */
top: 39px;
left: -1px;
background: linear-gradient(to bottom, #1c40a5, #728dd1);
border-radius: 50%;
margin: 0 5px;
}
.circle-cut {
position: absolute;
width: 15px;
height: 77px;
/* opacity: .8; */
top: 39px;
left: 61px;
background-color: var(--baseWhite);
margin: 0 5px;
cursor: not-allowed;
}
/* Body Start */
.body__container {
width: 95%;
margin: 0 auto;
height: auto;
}
/*  */
/* Dropdown Section */
.filter__container {
display: flex;
align-items: center;
justify-content: space-between;
margin: 2em 0;
border-bottom: 1px solid black;
}
.filter_buttons {
gap: 30px;
display: flex;
}
button.filter-btn {
padding: 20px 0;
font-family: "manrope-regular";
font-size: 16px;
cursor: pointer;
background-color: var(--baseWhite);
border: none;
}
.filter-btn.active {
border-bottom: 2px solid var(--accentBlue);
}

.dropdown {
display: inline-block;
position: relative;
}
.label {
margin-bottom: 3px;
}
/* Select container */
.select {
cursor: pointer;
transition: 0.3s;
background-color: var(--baseWhite);
border-radius: 5px;
border: 1px solid black;
display: flex;
padding: 5px 15px;
align-items: center;
justify-content: space-between;
}
.selected {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.caret {
margin-left: 10px;
transition: 0.3s;
}
/* Hover effect for the select container */
.select:hover {
background-color: var(--secoundaryGray);
}
/* Dropdown Menu Animation */
.menu {
visibility: hidden;
border-radius: 5px;
border: 1px solid black;
background-color: var(--baseWhite);
overflow: hidden;
position: absolute;
width: 100%;
top: 146%;
opacity: 0;
transform: translateY(-20px);
transition: visibility 0s, opacity 0.3s ease, transform 0.3s ease;
z-index: 10;
}
.menu-open {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
/* Caret animation */
.caret {
margin-left: 10px;
transition: transform 0.3s ease;
}
.caret-rotate {
transform: rotate(180deg);
}
/* Menu items */
.menu li {
cursor: pointer;
padding: 10px;
}
/* Hover effect for menu items */
.menu li:hover {
background-color: var(--secoundaryGray);
}
/* Active item style */
.dd-active {
background-color: var(--accentBlue);
color: #fff;
}
/* "All batches"  - Make clickable */
.menu li:first-child {
font-weight: normal;
cursor: pointer;
}
/* Show all batches filter text */
.show-all-batches {
font-weight: bold;
color: var(--accentBlue);
cursor: pointer;
padding: 10px;
}
/* Card Container */
.card-container {
margin: 2em 0 5em 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 50px;
}
.card {
transform: scale(0) translate(0, 0);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
transform-origin: top left;
}
/* When the card becomes visible */
.card.visible {
transform: scale(1) translate(0, 0);
opacity: 1;
}
.card {
background-color: var(--baseWhite);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 417px;
height: 312px;
transition: transform 0.3s ease;
position: relative;
}
.card.hide {
display: none;
}
.card__image {
width: 100%;
height: 100%;
max-height: auto;
object-fit: cover;
}
.card__overlay {
position: absolute;
bottom: 0;
height: 257px;
left: 0;
right: 0;
z-index: 1;
background-color: rgba(39, 39, 39, 0.6);
backdrop-filter: blur(5px);
transform: translateY(100%);
transition: transform 0.3s ease-in-out, box-shadow 0.4s ease-in-out;
color: var(--baseWhite);
}
.card:hover .card__overlay {
transform: translateY(0);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0);
}
.card__header {
position: relative;
display: flex;
align-items: center;
gap: 2rem;
background-color: rgba(33, 33, 33, 0.9);
padding: 2em;
transform: translateY(-100%);
transition: 0.3s ease-in-out;
font-size: 16px;
font-family: "manrope-regular";
}
.card:hover .card__header {
transform: translateY(0);
background-color: rgba(33, 33, 33, 0);
transition: 0.3s ease-in-out;
transition-delay: 0s;
}
.card__thumb {
flex-shrink: 0;
width: 3.125em;
height: 3.125em;
border-radius: 50%;
}
.card__title {
font-size: 16px;
margin: 0 0 0.3rem;
font-family: "manrope-bold";
}
.card__status {
font-size: 16px;
}
.card__descraption-box {
padding: 0 2em 0 7em;
font-size: 16px;
}
.card__descraption-title {
margin: 0;
font-size: 16px;
font-family: "manrope-bold";
}
.card__descraption {
font-size: 16px;
font-family: "manrope-regular";
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
@keyframes revealAnimation {
0% {
transform: scale(0) translate(-50%, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(0, 0);
opacity: 1;
}
}
< /code>
js: < /p>
// Select all filter buttons, filterable cards, and dropdowns
const filterButtons = document.querySelectorAll(".filter_buttons button");
const filterableCards = document.querySelectorAll(".card-container .card");
const dropdowns = document.querySelectorAll(".dropdown");

// Common filtering logic
function filterCardsByData(selectedFilter) {
filterableCards.forEach((card) => {
const cardBatch = card.getAttribute("data-batch");
const cardName = card.dataset.name;

// Show or hide the card based on filter condition
if (
selectedFilter === "All batches" ||
selectedFilter === "" ||
cardBatch === selectedFilter ||
cardName === selectedFilter
) {
// Show card and add reveal animation
card.classList.remove("hide", "exit");
setTimeout(() => {
card.classList.add("reveal"); // Add reveal class for the animation
}, 10);

setTimeout(() => {
card.classList.add("visible"); // Ensure visibility after animation
}, 500); // Adjust based on reveal animation duration
} else {
// Apply exit animation before hiding the card
card.classList.remove("reveal", "visible");
card.classList.add("exit");
setTimeout(() => {
card.classList.add("hide");
}, 500); // Ensure card hides after exit animation
}
});
}

// Button click event
filterButtons.forEach((button) =>  {
button.addEventListener("click", (e) => {
// Update active button state
document
.querySelector(".filter_buttons .active")
.classList.remove("active");
e.target.classList.add("active");

// Get filter value from the button's data-name attribute or default to "All batches"
const filterValue = e.target.dataset.name || "All batches";

// Apply the filter
filterCardsByData(filterValue);
});
});

// Dropdown logic
dropdowns.forEach((dropdown) => {
const select = dropdown.querySelector(".select");
const caret = dropdown.querySelector(".caret");
const selected = dropdown.querySelector(".selected");
const menu = document.createElement("ul");

menu.className = "menu";

const menuItems = [
"All batches",
"Batch of 2017",
"Batch of 2018",
"Batch of 2019",
"Batch of 2020",
"Batch of 2021",
"Batch of 2022",
"Batch of 2023",
"Batch of 2024",
];

// Add menu items dynamically
menuItems.forEach((item) => {
const option = document.createElement("li");
option.innerText = item;

// Handle dropdown item selection
option.addEventListener("click", () => {
selected.innerText = item;
caret.classList.remove("caret-rotate");
menu.classList.remove("menu-open");

// Add dd-active to the selected option and remove it from others
menu.querySelectorAll("li").forEach((opt) => {
opt.classList.remove("dd-active"); // Remove dd-active from all items
});
option.classList.add("dd-active"); // Add dd-active to the clicked option

// Apply the filter
filterCardsByData(item);
});

menu.appendChild(option);
});

dropdown.appendChild(menu);

// Toggle dropdown visibility
select.addEventListener("click", (event) => {
event.stopPropagation();
caret.classList.toggle("caret-rotate");
menu.classList.toggle("menu-open");
});

// Close dropdown if clicked outside
document.addEventListener("click", (event) => {
if (!dropdown.contains(event.target)) {
caret.classList.remove("caret-rotate");
menu.classList.remove("menu-open");
}
});
});

// Ensure cards are visible on page load or refresh by applying the default filter
document.addEventListener("DOMContentLoaded", () => {
// Trigger the default filter to show all cards (or set to a specific filter if needed)
filterCardsByData("All batches");
});

Пожалуйста, направьте меня, где есть точная проблема в коде Сервлета/JS в приведенной выше ссылке.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ts-and-mys