休闲一下

独狼2910 发表于 7 天前

import React, { useState } from 'react';

export default function App() {
const = useState(false);
const word = "strawberrrrry";
const countR = () => {
return word.split('').filter(char => char === 'r').length;
};

return (
<div className="min-h-screen bg-gradient-to-br from-pink-100 to-purple-200 flex items-center justify-center p-4">
   <div
   className={`bg-white rounded-2xl shadow-xl p-8 w-full max-w-md transform transition-all duration-500 ${
      showAnswer ? 'scale-105' : 'scale-100'
   }`}
   >
   <div className="flex justify-center mb-6">
      <div className="text-3xl">🍓</div>
   </div>

   <h1 className="text-2xl font-bold text-center text-gray-800 mb-4">神奇单词冒险</h1>

   <div className="bg-gradient-to-r from-yellow-100 to-orange-100 p-4 rounded-xl mb-6 text-center">
      <p className="font-mono text-xl text-gray-700 tracking-wider">{word}</p>
   </div>

   <p className="text-gray-600 text-center mb-8">这里面藏了多少个小「r」精灵呢？</p>

   <button
      onClick={() => setShowAnswer(!showAnswer)}
      className="w-full py-3 bg-gradient-to-r from-pink-500 to-red-500 text-white font-semibold rounded-xl shadow-md hover:shadow-lg transform transition-all duration-300 hover:scale-105 focus:outline-none"
   >
      {showAnswer ? '再猜一次' : '揭晓答案'}
   </button>

   {showAnswer && (
      <div className="mt-8 animate-fadeIn">
         <div className="bg-purple-50 rounded-xl p-4 text-center">
         <p className="text-2xl font-bold text-purple-600">✨ 答案是：{countR()} 个「r」精灵！</p>
         <div className="mt-2 flex justify-center space-x-1">
            {word.split('').map((char, index) => (
               <span
               key={index}
               className={`inline-block w-6 h-6 rounded-full text-center ${
                  char === 'r' ? 'bg-pink-200 text-pink-700 font-bold' : 'text-gray-400'
               }`}
               >
               {char}
               </span>
            ))}
         </div>
         </div>
      </div>
   )}
   </div>
</div>
);
}

页: [1]

Elonghui's Archiver

休闲一下