Skip to content

Commit

Permalink
add questions
Browse files Browse the repository at this point in the history
  • Loading branch information
@esikgabi
esikgabi committed Nov 15, 2024
1 parent ebbdfbe commit bc81185
Show file tree
Hide file tree
Showing 6 changed files with 534 additions and 118 deletions.
100 changes: 58 additions & 42 deletions app/luckydraw/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,66 @@ import SpinWheel from '@/components/SpinWheel';
import React, { useState } from 'react';

const Page = () => {
const [names, setNames] = useState<string[]>([]);
const [names, setNames] = useState<string[]>(
["Which technologies have you used during your most recent project?",
"What was the biggest challenge in your past project?",
"What is DRY principle?",
"What are SOLID principles?",
"What is a clean code in your opinion?",
"What are the main OOP Principles?",
"Microservice architecture and domain-driven design.",
"How do microservices communicate?",
"How to handle transaction in a microservice environment?",
"What is CQRS microservice pattern?",
"Design patterns",
"Name two design patterns from each of the 3 main groups.",
"What is a REST API?",
"What are common HTTP methods in REST you have used?",
"What is the difference between Sync vs async calls?",
"What are High cohesion and Loose coupling?",
"What is the difference between Authentication and Authorization?",
"What do you check on a code review?",
"What is a JWT? How does it work?",
"What are the inheritance rules in Java?",
"What is the order of initialization in a Java class? (constructor child/super, static child/super)",
"What is the difference between Abstract class vs. Interface and when to use them?",
"Access modifiers on variables & methods.",
"Static, Final on variables & classes.",
"Hierarchy of the Exceptions in Java meaning of checked-unchecked,",
"What are immutable and mutable?",
"What are the benefits of immutable objects? eg: Strings",
"How it is able to create an immutable object?",
"What is the difference between “==” and .equals()?",
"equals() and hashCode contract",
"What are the components of a Java function's signature?",
"What are the features of Java 8?",
"What is Stream API? Name the two group of stream operations with some example.",
"What is a functional interface?",
"What are the features of Java 11+?",
"Name some interfaces and their implementation from the Collection framework.",
"What is the difference between ArrayList vs LinkedList?",
"HashSet - How it works and how it ensures the uniqueness?",
"How would you implement a simple queue and with which collection?",
"Difference between ordered and sorted",
"Thread lifecycles",
"Thread vs Runnable, when can you run it, how?",
"Try with resources",
"What is the difference between Comparable vs Comparator? When to use?",
"Name some of the Java Stream Collectors.",
"What is Atomic? Why and when it is useful?",
"Speak about ConcurrentHashMap.",
"What does the keyword \"Synchronized\" mean?",
"Difference Between orElse and orElseGet() in Optional Class",
"What does Deadlock mean?",
"Name some Lombok annotations.",
"In which stage the Lombok code gets generated?",
"Speak about SynchronizedList.",
"Explain Java memory model.",
"What is the difference between Shallow Copy vs Deep Copy?"
]);
const [name, setName] = useState('');

const handleAddName = (event: React.FormEvent<HTMLFormElement>) => {
// Formun varsayılan davranışını engelliyoruz (sayfa yenilenmesini engellemek için)
event.preventDefault();

if (name.trim()) {
Expand All @@ -22,46 +77,7 @@ const Page = () => {
<Navigation />
<div className="h-screen py-20 px-2 ">
<div className="grid grid-cols-12 gap-4 items-center h-full ">
<div className="col-span-12 lg:col-span-5">
<div className="flex justify-center items-center gap-2">
<form
onSubmit={handleAddName}
className="flex w-[300px] md:w-[400px] relative"
>
<input
className="border-2 py-2 border-btnpurple w-full pl-2 rounded-xl outline-btnpurple "
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Competitor name..."
/>
<button
type="submit"
className="bg-btnpurple text-white px-4 rounded-xl absolute right-0 py-[10px] "
>
Add
</button>
</form>
<button
onClick={() => {
setNames([]);
}}
className="py-[8px] border-2 border-btngreen bg-btngreen text-white px-4 rounded-xl "
>
Reset
</button>
</div>

<h1 className="text-center text-white text-5xl mt-10 mb-2">
Competitors
</h1>
{names.map((name, index) => (
<p className="text-xl text-white text-center" key={index}>
- {name}
</p>
))}
</div>
<div className="col-span-12 lg:col-span-7 p-10 xl:p-24 lg:-mt-20">
<div className="p-10 lg:-mt-20" style={{gridColumn: "4 / span 6"}}>
<SpinWheel names={names} setNames={setNames} />
</div>
</div>
Expand Down
87 changes: 16 additions & 71 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,90 +5,35 @@ import React from 'react';
export default function Home() {
return (
<div className=" overflow-x-hidden ">
<main className="bg-homebg xl:h-screen relative ">
<div className="bg-none my-2 h-screen relative xl:max-w-7xl xl:mx-auto">
{/* LEFT IMAGE */}
<div className="absolute md:-left-20 -left-2 xl:left-0 top-20 border-2 border-btngreen rounded-xl h-[150px] w-[100px] md:h-[200px] md:w-[180px] lg:h-[300px] lg:w-[250px] xl:h-[400px] xl:w-[300px] -rotate-[26deg] z-10 shadow-2xl" />
<div className="absolute md:-left-20 xl:left-0 top-32 md:top-40 justify-center h-[150px] w-[100px] md:h-[200px] md:w-[180px] lg:h-[300px] lg:w-[250px] xl:h-[400px] xl:w-[300px] -rotate-[11deg] z-0">
<Image
className="h-full w-full object-fit grayscale-[100%] rounded-xl "
src="https://plus.unsplash.com/premium_photo-1665590827405-51810e1fa565?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2832&q=80"
// src={'/wheel.jpg'}
alt="etsy-banner"
width={500}
height={500}
/>
</div>
<section className="bg-homebg md:h-screen relative -mt-64 md:-mt-40 xl:mt-0 ">

<div className="w-full h-full flex flex-col justify-center items-center align-middle relative z-20 px-2">
<div
className="top-32 md:top-40 justify-center z-0" style={{marginBottom: "20px"}}>

{/* RIGHT IMAGE */}
<div className="absolute top-32 md:top-52 right-0 md:-right-20 xl:top-64 xl:right-0 border-2 border-btngreen rounded-xl h-[150px] w-[100px] md:h-[200px] md:w-[180px] lg:h-[300px] lg:w-[250px] xl:h-[400px] xl:w-[300px] -rotate-[-26deg] z-10 shadow-2xl" />
<div className="absolute top-32 md:top-52 right-0 md:-right-20 xl:top-64 xl:right-0 justify-center h-[150px] w-[100px] md:h-[200px] md:w-[180px] lg:h-[300px] lg:w-[250px] xl:h-[400px] xl:w-[300px] -rotate-[-11deg] z-0">
<Image
className="h-full w-full object-fit grayscale-[100%] rounded-xl "
src="https://images.unsplash.com/photo-1533558493928-231014635309?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2814&q=80"
alt="etsy-banner"
width={500}
height={500}
className="h-full w-full object-fit rounded-xl "
src={'logo_white-blue.svg'}
alt="epam-logo"
width={300}
height={300}
/>
</div>

<div className="w-full h-full flex flex-col justify-center items-center align-middle relative z-20 px-1 ">
<h1 className="text-5xl md:text-8xl xl:text-9xl uppercase text-white banner--text--purple">
Lucky Wheel
</h1>
<Link href={'/luckydraw'}>
<button className="animate-pulse py-[4px] font-semibold border-2 border-btngreen bg-btngreen text-white mt-10 w-[300px] rounded-2xl text-xl ">
Lucky Draw
</button>
</Link>
</div>
</div>
</main>
<section className="bg-homebg md:h-screen relative -mt-64 md:-mt-40 xl:mt-0 ">
<div className="absolute right-0 top-28 border-2 border-btngreen rounded-full h-[470px] w-[300px] -rotate-[134deg] z-10 shadow-2xl" />
<div className="w-full h-full flex flex-col justify-center items-center align-middle relative z-20 px-2">
<h1 className="text-5xl md:text-8xl xl:text-9xl uppercase text-white banner--text--purple">
Ready, Spin!
Ready, Spin, Answer!
</h1>
<p className="text-white text-4xl px-10 md:px-20 xl:px-52 text-center mt-10 banner--text--purple ">
Share your indomitable spirit with us. Add the names to the list and
await the result with anticipation. Whether a reward or a penalty
for the drawn name; the choice is yours. With your boundless
imagination, reach the peaks of excitement in our app.
Keep up to date your interviewing skill with this tool.
Spin the wheel and answer the question!
</p>
<Link href={'/luckydraw'}>
<button className="animate-pulse py-[4px] font-semibold border-2 border-btngreen bg-btngreen text-white mt-10 w-[300px] rounded-2xl text-xl ">
Lucky Draw
<button
className="animate-pulse py-[4px] font-semibold border-2 border-btngreen bg-btngreen text-white mt-10 w-[300px] rounded-2xl text-xl ">
Question Wheel
</button>
</Link>
</div>
</section>
<footer className="bg-homebg h-auto py-20">
<div className="flex items-center flex-col justify-center space-y-4">
<div className=" text-white flex justify-center items-center gap-4">
<div>© 2023 </div>
<a
target="_blank"
className="hover:text-btngreen -mt-[2px] "
href="https://tanselberkant.dev/"
>
@tanselberkant
</a>{' '}
</div>
<a
href="https://www.buymeacoffee.com/tanselberkant"
className="w-[300px] h-20"
target="_blank"
>
<Image
width={500}
height={500}
src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png"
alt="Buy Me A Coffee"
/>
</a>
</div>
</footer>
</div>
);
}
2 changes: 1 addition & 1 deletion components/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function Modal({
</div>
<div className="sm:flex sm:items-start">
<div className="mt-3 mb-6 text-center sm:ml-4 sm:mt-0 sm:text-left w-full">
<p className="text-center text-white text-3xl">
<p className="text-center text-white text-3xl sm:mt-10">
{selectedName}
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/Navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const Navigation = () => {
<nav className="max-w-7xl mx-auto px-4 py-4 flex justify-center items-center">
<Link href={'/'}>
<h1 className="text-2xl uppercase text-white banner--text--purple cursor-pointer">
Lucky Wheel
Question Wheel
</h1>
</Link>
</nav>
Expand Down
5 changes: 2 additions & 3 deletions components/SpinWheel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const SpinWheel: React.FC<Props> = ({ names, setNames }) => {
text.setAttribute('fill', 'white');
text.setAttribute('font-size', '3');
text.setAttribute('transform', `rotate(90, ${textX}, ${textY})`);
text.textContent = name;
text.textContent = `${++index}`;
svg.appendChild(text);
});
}, [names]);
Expand All @@ -88,10 +88,9 @@ const SpinWheel: React.FC<Props> = ({ names, setNames }) => {
const adjustedAngle = degree % 360;
const sliceAngle = 360 / names.length;
const index = Math.floor((360 - adjustedAngle) / sliceAngle);
// alert(names[index]);

setSelectedName(names[index]);
setOpen(true); // Modal'ı aç
setOpen(true);

wheelRef.current.style.transition = 'none';
wheelRef.current.style.transform = `rotate(${adjustedAngle}deg)`;
Expand Down
Loading

0 comments on commit bc81185

Please sign in to comment.