I'm trying to select all the button with the class ".add-to-cart" using the querySelectorAll function but I am not able to generate the MouseEvent in the console.
HTML
<section class="hero py-16">
<div class="container mx-auto flex items-center justify-between">
<div class="w-3/4">
<h6 class="text-lg"> <em> Feeling Hungry? </em></h6>
<h1 class="text-6xl font-bold">What are you waiting for?</h1>
<button class="btn-primary px-6 py-2 rounded-full text-white font-bold mt-4">Order Now</button>
</div>
<div class="w-1/2 "><img src="/img/Sloppy_Joes_hero.png" alt=""> </div>
</div>
</section>
<section class="menu container mx-auto py-8">
<h1 class="text-xl font-bold mb-8"> All Burgers</h1>
<div class="grid grid-cols-4 gap-x-12 gap-y-16">
<% burgers.forEach(function(burger){ %>
<div class="w-64">
<img class="h-40 mb-4 mx-auto" src="/img/<%= burger.image %>" alt="item-static">
<div class="text-center">
<h2 class="mb-4 text-lg"><%= burger.name %></h2>
<span class="item-color py-1 px-4 rounded-full uppercase text-xs"> <%= burger.size %></span>
<div class="flex items-center justify-around mt-6">
<span class="font-bold text-lg"> ₹<%= burger.price %> </span>
<button data-burger="<%= JSON.stringify(burger)%>" class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
<span>+</span>
<span class="ml-4">Add</span>
</button>
</div>
</div>
</div>
<% })%>
</div>
</section>
JavaScript
let addToCart = document.querySelectorAll('.add-to-cart');
addToCart.forEach((btn) => {
btn.addEventListener('click', (e) => {
let burger = btn.dataset.burger
console.log(burger)
})
})
I am using laravel-mix and I did check if the files are compiling, and they are but I am unable to see the event occur. Thank you so much in advance.
I figured out the problem I forgot to add the script tag in the html file. Thank you to all the people who tried to help.
Related
I am working on image upload component in my react app and I design the image uploader component.
Here is the code and the result respectively.
<div className="px-8 py-6 mt-2 text-left bg-white shadow-lg">
<form action="">
<div class="flex items-center justify-center bg-grey-lighter">
<label class=" flex flex-col items-center px-4 py-6 bg-white text-blue rounded-lg shadow-lg tracking-wide uppercase border border-blue cursor-pointer hover:bg-blue hover:text-white">
<AddAPhotoIcon />
<span class="mt-2 text-base leading-normal">Upload Photo</span>
<input type="file" class="hidden" />
</label>
</div>
</form>
</div>
But I want change it exactly as the following component.
Make sure you have the same width and height for the element you want circular, in combination with rounded-full.
I adapted your example and used h-40 and w-40 to control height and width. With rounded-full, the result is a circular component.
<div class="flex items-center justify-center">
<form action="">
<label class="text-blue border-blue hover:bg-blue flex h-40 w-40 cursor-pointer flex-col items-center justify-center rounded-full border bg-white uppercase tracking-wide shadow-lg hover:text-white">
<AddAPhotoIcon />
<span class="mt-2 text-base leading-normal">Upload Photo</span>
<input type="file" class="hidden" />
</label>
</form>
</div>
Is this you want ??
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10 w-72 border-4 border-gray-200 rounded-full">
<div class="bg-gray-300 p-20 w-52 rounded-full text-center">
Upload <br/>Photo
</div>
</div>
My Component
return (
<div>
<section>
<div class="md:grid md:grid-cols-2 gap-4">
{pinnedRepos.map((r) => {
const bgColor = {
backgroundColor: r.node.primaryLanguage.color,
};
return (
<div
id="project-outer-container"
class="text-sm border-solid border border-gray-300 rounded shadow mb-4 md:mb-0 pb-4">
<div id="project-inner-container" class="p-4 relative">
<div id="project-title" class="flex items-center">
<span class="mr-3 text-xl">
<GoRepo />
</span>
<a href={r.node.url}>{r.node.name}</a>
</div>
<div class="flex flex-col justify-between">
<div id="project-about" class="">
<p class="">{r.node.description}</p>
</div>
<div id="project-lang" class="flex items-center content-end">
<div style={bgColor} class="rounded-full h-3 w-3"></div>
<span class="ml-3">{r.node.primaryLanguage.name}</span>
</div>
</div>
</div>
</div>
);
})}
</div>
</section>
</div>
);
I want to keep this section...
<div id="project-lang" class="flex items-center content-end">
<div style={bgColor} class="rounded-full h-3 w-3"></div>
<span class="ml-3">{r.node.primaryLanguage.name}</span>
</div>
at the bottom of its parent always. Otherwise I end up with stuff like this:
which just looks messy. I have tried multiple flexbox alignments and justified rulings. I have set the parent element to absolute and the child to a relative still nothing.
I have even tried the way of using a sticky footer but nope.
Any CSS wizards to move me in the right direction would be great
With the tip of above this is how I managed to do it
<div
id="project-outer-container"
class="text-sm border-solid border border-slate-300 dark:border-slate-700 rounded shadow mb-4 md:mb-0 pb-4">
<div id="project-inner-container" class="p-4 h-full relative">
<div id="project-title" class="flex items-center">
<span class="mr-3 text-xl">
<GoRepo />
</span>
<a href={r.node.url}>{r.node.name}</a>
</div>
<div id="project-about" class="">
<p class="">{r.node.description}</p>
</div>
//----------------- this is what I wanted to be placed at the bottom
<div id="project-lang" class="flex items-center absolute bottom-0">
<div style={bgColor} class="rounded-full h-3 w-3"></div>
<span class="ml-3">{r.node.primaryLanguage.name}</span>
</div>
</div>
</div>
I had a project about a month ago that used handlebars.js for templates, and now we have to update it to use react.js instead. How would I approach that? This is one of the pages I'm in charge of changing.
Home page:
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div class="text-center">
<p
class="text-3xl font-extrabold text-transparent sm:text-6xl bg-clip-text bg-gradient-to-r from-green-300 via-blue-500 to-purple-600">
Geek Emporium</p>
<p class="max-w-xl mt-5 mx-auto text-xl text-gray-500">Your one stop shop for all your nerdy needs!</p>
</div>
</div>
<article class="post">
<div class="bg-white">
<div class="max-w-7xl mx-auto py-16 px-4 overflow-hidden sm:py-24 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-x-8">
{{#each posts as |post|}}
{{> post-info-homepage post }}
{{/each}}
</div>
</div>
</div>
</article>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
I am making a website using the Next.js framework for React and Tailwind Css for markup and am getting this annoying problem. Basically I am trying to put my image onto the right side while having my text on the left but it just won't work properly and when I try putting the heading and subheading divs into one separate div inside body, the entire navbar gets really wonky.
Code Before Extra Div
import Head from 'next/head'
import Avatar from '../components/Avatar'
import Image from 'next/image'
export default function Home() {
return (
<div>
<Head>
<title>Vasu Bansal</title>
<link rel="icon" href="logo.png" />
</Head>
{/* Navbar */}
<header className="flex w-full p-5 justify-between text-2xl text-white bg-gray-700">
<div className="flex">
<Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' />
</div>
<div className="flex items-center">
<button className="btn">Meet Vasu</button>
</div>
<div>
<button className="btn">The Blog</button>
</div>
<div>
<button className="btn">Other</button>
</div>
<div>
<Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' />
</div>
</header>
<body className="flex flex-wrap w-full bg-gray-500 bg-cover justify-between">
<div className="flex text-center mt-32 md:ml-40 md:pt-16">
<h1 className="flex text-white text-5xl font-extrabold">My Name is Vasu Bansal</h1>
</div>
<div className="flex text-center flex-nowrap w-full md:pl-40 md:pt-5">
<h1 className="flex text-white text-xl ">I am an experienced programmer who knows multiple languages</h1>
</div>
<div className="flex flex-col">
<img src="computer.png" width={400} height={400}/>
</div>
</body>
</div>
)
}
Picture Before Extra Div
Now for after the extra div
Code
import Head from 'next/head'
import Avatar from '../components/Avatar'
import Image from 'next/image'
export default function Home() {
return (
<div>
<Head>
<title>Vasu Bansal</title>
<link rel="icon" href="logo.png" />
</Head>
{/* Navbar */}
<header className="flex w-full p-5 justify-between text-2xl text-white bg-gray-700">
<div className="flex">
<Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' />
</div>
<div className="flex items-center">
<button className="btn">Meet Vasu</button>
</div>
<div>
<button className="btn">The Blog</button>
</div>
<div>
<button className="btn">Other</button>
</div>
<div>
<Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' />
</div>
</header>
<body className="flex flex-wrap w-full bg-gray-500 bg-cover justify-between">
<div>
<div className="flex text-center mt-32 md:ml-40 md:pt-16">
<h1 className="flex text-white text-5xl font-extrabold">My Name is Vasu Bansal</h1>
</div>
<div className="flex text-center flex-nowrap w-full md:pl-40 md:pt-5">
<h1 className="flex text-white text-xl ">I am an experienced programmer who knows multiple languages</h1>
</div>
</div>
<div className="flex flex-col">
<img src="computer.png" width={400} height={400}/>
</div>
</body>
</div>
)
}
Picture
Any help would be greatly appreciated. You could either help by telling how to fix problem or tell me how to put the image on right with text on left. Thanks in advance!/
You have overused your flex way too much. Keep things simple. Check a demo.
<div class="flex w-full h-96">
<!-- Content -->
<div class="flex flex-1 flex-col justify-center items-center">
<div class="text-5xl font-extrabold">My Name is Vasu Bansal</div>
<div class="text-xl">I am an experienced programmer who knows multiple languages</div>
</div>
<!-- Image -->
<div class="flex flex-1 justify-center items-center">
<img src="https://www.pngitem.com/pimgs/m/357-3579137_computer-silhouette-no-background-hd-png-download.png" width="400px" height="400px" />
</div>
</div>
I want to make a button to move a specific page...like if I click the #move_to_slide2, then the page moves to slide2, but the moveTo function doesn't work.
There is only one section and 4 slides.
How can I make the move to button?
<div class="section" anchor="s0">
<div class="slide" data-anchor="slide1">
<div class="container w-1/3 mx-auto">
<div class="my-40">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="text-xl font-bold text-center text-unifolio-blue">Getting Started</div>
<div class="flex w-full mt-5 items-center justify-center">
<p id="move_to_slide1">
<p class="w-full h-6 rounded-full bg-unifolio-blue cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<p id="move_to_slide2">
<p class="w-full h-6 rounded-full bg-gray-400 cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<p id="move_to_slide3">
<p class="w-full h-6 rounded-full bg-gray-400 cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<div class="flex w-full mb-5 items-center text-center justify-center">
<p id="move_to_slide1">
<p class="w-full h-6 text-xs text-unifolio-blue cursor-pointer">아이디 및 비밀번호 설정</p>
</p>
<div class="h-px w-full bg-white"></div>
<p id="move_to_slide2">
<p class="w-full h-6 text-xs text-gray-400 cursor-pointer">개인정보 입력</p>
</p>
<div class="h-px w-full bg-white"></div>
<p id="move_to_slide3">
<p class="w-full h-6 text-xs text-gray-400 cursor-pointer">핸드폰 인증</p>
</p>
<div class="h-px w-full bg-white"></div>
this is my script.
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true
});
$('#move_to_slide1').click(function(){
fullpage_api.moveTo(1,slide1);
});
$('#move_to_slide2').click(function(){
fullpage_api.moveTo(1,slide2);
});
$('#move_to_slide3').click(function(){
fullpage_api.moveTo(1,slide3);
});
$('#move_to_slide4').click(function(){
fullpage_api.moveTo(1,slide4);
});
});
</script>
You are not passing the correct parameters to moveTo.*
2nd param should be the slide anchor string or the slide index.
For example:
fullpage_api.moveTo(1, 1); // using slide index
fullpage_api.moveTo(1, 'slide1'); // using slide anchor