describe food option heredescribe juice option hereHow can I create a button using HTML, CSS, JavaScript, and Bootstrap that displays different images for food and juices when clicked? For example, clicking on "food" will display 3 different food images, while clicking on "juice" will display 3 different juice images.
I was surprised to see this link because I only uploaded two pictures.
Learn how to effectively showcase your product range
// The following array consists of objects that represent various menu items
let products = [
{id:0, name:"Burger", price:150, img:"assets/images/burger.jpg", type:"foods"},
{id:1, name:"pizza", price:150, img:"assets/images/pizza.jpg", type:"foods"},
{id:2, name:"fries", price:150, img:"assets/images/fries.jpg", type:"foods"},
{id:3, name:"strawberry", price:150, img:"assets/images/strawberry.jpg", type:"juices"},
{id:4, name:"apple", price:150, img:"assets/images/apple.jpg",type:"juices"},
{id:5, name:"orange", price:150, img:"assets/images/orange.jpg", type:"juices"}
]
// Initialize an empty array to store filtered items based on user choice (FOODS or JUICES)
let filtered = []
// Identify the input where the user selects FOODS or JUICES
let input = document.querySelectorAll(".ma__filter__item")
// Perform filtering of products based on user selection
if(input.value == "foods"){
var results = products.filter(prod => (prod.type ==="foods"))
filtered = [...results]
}
else if(input.value == "juices"){
var results = products.filter(prod => (prod.type === "juices"))
filtered = [...results]
}
for(let i=0 ; i < filtered.length ; ++i){
console.log(filtered[i])
newproduct(filtered[i])
}
// Locate the div for displaying the items
let grid = document.querySelector("#ma__grid");
grid.innerHTML = "" ;
// Function to create a new div, populate it with product data and append it to the display grid
function newproduct(prod){
let newProd = document.createElement("div");
newProd.className = "ma__grid__item";
newProd.innerHTML = `<div class="card" style="width: 18rem;">
<img class="card-img-top crd_img" src=${prod.img} alt="Card image cap">
<div class="card-body container">
<div class="row ma__prod__name">
<h2>${prod.name}<h2>
</div>
<div class="row ma__prod__details">
<p>Lorem ipsum dolor, sit amet consectetur llitia. Quo</p>
</div>
<div class="row ma__prod__name text-center">
<p class="col-lg-12">price : ${prod.price}$</p>
</div>
<div class="row ma__prod__name d-flex justify-content-center">
<button name ="${prod.id}" type="button" class="btn btn-primary ma__prod__btn ma__prod__btn1">Add To Cart</button>
<button type="button" class="btn btn-primary ma__prod__btn ma__prod__btn2">More Details</button>
</div>
</div>
</div> `;
grid.appendChild(newProd);
}
Currently, I am utilizing ui-router to handle the state management for the admin segment of a project. The admin area includes the ability to browse through various categories. In this category management module, I am working on implementing a breadcrumb l ...
I am currently working on creating a bootstrap4 layout that includes three boxes arranged side by side on a wide screen. However, my goal is to ensure that if the screen size decreases, the red and green boxes always stay adjacent to each other while the b ...
Currently, I am working on developing a web application using asp.net, Bootstrap, and JQuery. While testing it on LocalHost, I encountered an issue that needs debugging. The navigation bar of my application has a dropdown menu with links to tutorial video ...
I've been working on creating an interactive map using some prebuilt templates. Each country in the map highlights when the mouse hovers over it. My question is, how can I make another country, like Brazil, highlight when any country is hovered over? ...
I need to dynamically set the minimum height of #wrapper equal to the height of #sidebar, but the height of #sidebar is not fixed. Here is my attempt at achieving this with JavaScript: var sidebarHeight = jQuery('#sidebar').height; jQuery(&apos ...
Using HtmlSpanner with CSS for TextView I recently discovered a library called HtmlSpanner that claims to assist in adding an HTML string with CSS to a TextView. However, I am struggling to locate any detailed documentation on how to achieve this, except ...
I need to conditionally display a div inside a card that slides within a carousel. My current approach is to check if the ancestor element contains the active class, and then use v-if to decide whether it should be rendered or not. However, this method d ...
I'm struggling with this puzzle game. Sometimes, when I start a new game, the pieces get shuffled incorrectly. I tried adding a function to fix it, but it doesn't seem to be working. It's really frustrating and I want to simplify the code as ...
I've been attempting to set a maxlength and minlength for an input in Bootstrap 5, but it doesn't seem to be working. Can you help me troubleshoot this issue? Here's the code: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-c ...
Due to the deprecation of IE in Angular 12, I need to inform users to switch to a supported browser by displaying a static warning on my page. To achieve this, I have implemented a simple snippet in the index.html file that appends a CSS class to the body ...
In this particular scenario, I have set up a basic 'toy' node.js server that responds with the following JSON object: { "message" : "hello there" } This response is triggered by making a GET request to "http://localhost:3060/" So, it's reall ...
After conducting thorough research on this topic, I realized that I am not alone in facing this issue. Unfortunately, the solutions provided by others with the same question did not resolve my problem. I have carefully configured my links for navigation wi ...
Currently, I am utilizing canvas(graph) within my Angular JS UI5 application. My main goal is to increase the width of the graph. However, whenever I attempt to adjust the size of the Graph, it remains unchanged. Interestingly, when I shrink the screen, th ...
I need to organize my data in a way that includes an additional row for descriptive information, but this particular row should not be sorted. It is crucial for understanding the rest of the data, so hiding or showing it is not an option. Is it possible t ...
I am attempting to configure my page using the CK5 editor. So far, I have done the following: ClassicEditor.create(document.querySelector('#editor'), { language: 'pt-br', toolbar: ['heading', '|', 'bold&apo ...
Is there a way to trigger a function when a specific div receives a certain class? I have an animated div that only appears when scrolling, and once it's visible, it gains the class "in-view". I want to execute a function every time this div has the ...
Starting my React journey with Webpack configuration. Followed all steps meticulously. No error messages in console or browser, but the desired h1 element is not showing up. Aware that React version is 18, yet working with version 17. App.jsx import Reac ...
Is there a way to isolate elements within a div, similar to how it would behave in an iFrame? I am facing issues with the global SharePoint styles affecting my app inside SharePoint. I want to completely disable these global styles so that my app only use ...
I have a unique component that utilizes an object with its props for styling. const CustomSection = ({ sectionDescription, }) => { return ( <Text {...sectionDescription} content={intl.formatMessage({ id: &apos ...
Currently, I am in the process of developing cloud functions for pushing data to Google AutoML. I have successfully created a function to generate the necessary data. However, for the next phase, I am curious about the possibility of downloading a Google ...