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>
Related
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.
i am trying to fire click event from div but if v-if false on component rendering click event not working
here my code:
export default {
name: "ProSelect",
data() { return {
isActive: false,
}},
methods: {
select(event) {
console.log('ID :' + event.currentTarget.id);
}
}
}
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
if i change isActive variable to true on rendering click is working
i found the answer but i wonder why this is not working.If i use #mousedown.prevent instead of #click its working
I am not sure if I get it correctly but as per the code you posted. Your parent div will be removed from the DOM as v-if is false. You can assign isActive as true while mounting.
Working Demo :
new Vue({
el: '#app',
data() {
return {
isActive: false,
}
},
methods: {
select(event) {
console.log('ID :' + event.currentTarget.id);
}
},
mounted() {
this.isActive = true;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
this is whole template code
<template>
<div>
<div class="flex flex-col items-center">
<div class="w-full flex flex-col items-center">
<div class="w-full">
<div class="flex flex-col items-center relative">
<div class="w-full">
<div class="flex">
<div class="flex flex-auto flex-wrap"></div>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:rounded-none focus:rounded-t-lg focus:border-b-0 focus:bg-white focus:border-indigo-500 border-transparent focus:border-transparent focus:ring-0"
type="text"
v-model="selected"
:name="name"
#focusin="isActive = !isActive"
#focusout="isActive = !isActive"
placeholder="Search by position">
</div>
</div>
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
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 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