ozcanzaferayan

<div x-data="{ open: false }">
  <span>Filmin sonunda kimsenin beklemediği bir şey oluyor: </span></br>
  <button
    @click="open = true"
    x-text="open ? 'Gizle' : 'Spoiler göster'"
  ></button>
  <span x-show="open" @click.away="open = false">
     🗻🛳🔽👩👱❄️Titanik batıyor
  </span>
</div>

ozcanzaferayan

.DS_Store

ozcanzaferayan

<div id="app">
  <img class="bigImage" v-bind:src='activeImage' />
  <div class="images">
    <div v-for="image in images" v-bind:key="image" v-on:click="activeImage = image" v-bind:class="['image', { active: activeImage === image }]"> <img v-bind:src='image' /></div>
  </div>
</div>

ozcanzaferayan

import React from "react";
import { useRecoilValue, selector } from "recoil";
import { filteredTodoListState } from "./state/selectors";
import { TodoListFilters } from "./components/TodoListFilters";
import { TodoItemCreator } from "./components/TodoItemCreator";
import { TodoItem } from "./components/TodoItem";
import { UserInfo } from "./components/UserInfo";

function App() {
  const filteredTodos = useRecoilValue(filteredTodoListState);

ozcanzaferayan

import React from "react";
import { useRecoilValue } from "recoil";
import { currentUserNameQuery } from "../state/selectors";

export function UserInfo() {
  const userName = useRecoilValue(currentUserNameQuery);
  return <div>{userName}</div>;
}

ozcanzaferayan

export const currentUserNameQuery = selector({
  key: "CurrentUserName",
  get: async ({ get }) => {
    const response = await fetch(`https://api.github.com/users/ozcanzaferayan`);
    if (response.error) {
      throw response.error;
    }
    const json = await response.json();
    return json.name;
  },

ozcanzaferayan

import React from "react";
import { useRecoilValue } from "recoil";
import { filteredTodoListState } from "./state/selectors";
import { TodoListFilters } from "./components/TodoListFilters";
import { TodoItemCreator } from "./components/TodoItemCreator";
import { TodoItem } from "./components/TodoItem";

function App() {
  const filteredTodos = useRecoilValue(filteredTodoListState);
  return (

ozcanzaferayan

import React from "react";
import { useRecoilState } from "recoil";
import { todoListState } from "../state/atoms";

export function TodoItem({ item, index }) {
  const [todoList, setTodoList] = useRecoilState(todoListState);

  const deleteItemAt = (index) => {
    const todos = [...todoList];
    todos.splice(index, 1);

ozcanzaferayan

import React, { useState } from "react";
import { useSetRecoilState } from "recoil";
import { todoListState } from "../state/atoms";

export function TodoItemCreator() {
  const [todo, setTodo] = useState({ name: "" });
  const setTodoList = useSetRecoilState(todoListState);

  return (
    <>

ozcanzaferayan

import React from "react";
import { useRecoilState } from "recoil";
import { todoListFilterState } from "../state/atoms";

export function TodoListFilters() {
  const [filter, setFilter] = useRecoilState(todoListFilterState);

  return (
    <>
      <select value={filter} onChange={(e) => setFilter(e.target.value)}>