Deepseek ArtifactsDeepseek Artifacts
Back to blocks

App calculatrice scientifique

4.0
frTechnologiecalculatricescientifiqueapp

Prompt

je veux app de calculatrice sientific

Résultat Généré

import React, { useState } from 'react';

export default function App() {
  const [input, setInput] = useState('');
  const [result, setResult] = useState('');
  const [theme, setTheme] = useState('light');

  const handleClick = (value) => {
    if (value === '=') {
      try {
        setResult(eval(input).toString());
      } catch (error) {
        setResult('Error');
      }
    } else if (value === 'C') {
      setInput('');
      setResult('');
    } else {
      setInput(input + value);
    }
  };

  const buttons = [
    '7', '8', '9', '/',
    '4', '5', '6', '*',
    '1', '2', '3', '-',
    '0', '.', '=', '+',
    'C', '(', ')', '%'
  ];

  return (
    <div className={`min-h-screen flex flex-col items-center justify-center ${theme === 'light' ? 'bg-gray-100' : 'bg-gray-800'}`}>
      <div className={`p-6 rounded-lg shadow-lg ${theme === 'light' ? 'bg-white' : 'bg-gray-700'}`}>
        <div className={`mb-4 p-3 rounded ${theme === 'light' ? 'bg-gray-200' : 'bg-gray-600'}`}>
          <input
            type="text"
            value={input}
            readOnly
            className={`w-full text-right text-2xl ${theme === 'light' ? 'text-gray-800' : 'text-white'} bg-transparent`}
          />
          <input
            type="text"
            value={result}
            readOnly
            className={`w-full text-right text-xl ${theme === 'light' ? 'text-gray-600' : 'text-gray-300'} bg-transparent`}
          />
        </div>
        <div className="grid grid-cols-4 gap-2">
          {buttons.map((button, index) => (
            <button
              key={index}
              onClick={() => handleClick(button)}
              className={`p-3 rounded ${theme === 'light' ? 'bg-gray-200 hover:bg-gray-300' : 'bg-gray-600 hover:bg-gray-500'} text-xl ${theme === 'light' ? 'text-gray-800' : 'text-white'}`}
            >
              {button}
            </button>
          ))}
        </div>
        <div className="mt-4 flex justify-center">
          <button
            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
            className={`p-2 rounded ${theme === 'light' ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'}`}
          >
            {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
          </button>
        </div>
      </div>
      <footer className={`mt-8 text-sm ${theme === 'light' ? 'text-gray-600' : 'text-gray-300'}`}>
        &copy; 2025 - Scientific Calculator
      </footer>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Plus de Recommandations

Voir Tout

Histoire Informatique App

Technologiefr
4.0

une application web en Français pour présenter l'histoire de l'informatique avec photos

informatiquehistoireapplication web04/04/2025

Slatracker: KPIs Facebook Messenger

Technologiefr
4.0

Le projet est nomme 'Slatracker' avec pour but de collecter des KPIs ou Statistiques des pages Facebook Messenger connectees sur l application afin d avoir le taux des reponses, le delai de premiere reponses, le nombre de messages envoyes et recus, etc. Une application qui collecte des KPIs (indicateurs clés de performance) pour les pages Facebook Messenger Définition des KPIs à collecter : Taux de réponse : Pourcentage de messages auxquels la page répond. Délai de première réponse : Temps moyen avant la première réponse à un nouveau message. Nombre de messages envoyés : Total des messages envoyés par la page. Nombre de messages reçus : Total des messages reçus par les utilisateurs. Intégrez une librairie comme Chart.js ou D3.js pour afficher les KPIs sous forme de graphiques (ex.barres pour les messages envoyés/reçus). Configurez un webhook avec l'API Messenger pour recevoir les messages en temps réel. Cela permet à Slatracker de collecter les données dès qu'un message est envoyé ou reçu. Calculez les KPIs en temps réel ou par lots (par exemple, toutes les heures ou quotidiennement) selon vos besoins. Juste preciser que le Taux de réponse a calculer est le taux de reponse sur toutes les reponses en moins de 30 secondes, cad l agent ou les agents doivent repondre en moins de 30 secondes aux messages Messenger (prives) en moins de 30 secondes. Assurez-vous que les horodatages de l'API Messenger sont fiables. Ils sont généralement en millisecondes, ce qui est parfait pour ce calcul. intégrer la gestion des utilisateurs avec deux rôles (administrateur et agent), les permissions spécifiques, Pour l ajout des pages Facebook Messenger, des utilisateurs, as-tu prevu la creation de nouveaux formulaires y afferents ds le code ? Si tu peux aller en detail avec l integration des pages faceebook en comment par la creation de l APP pour recuperer l ID et le token. Merci Les administrateurs saisissent manuellement l’ID de la page et le Page Access Token obtenus via Meta for Developers. la page d'accueil apres login doit avoir comme titre ' Tableau de board' et description ' Analyse des performances'. Comme menu tableau, Pages, utilisateurs et un bouton se deconnecter. La ligne qui suit doit permettre de selectionner une date ou une plage de dates et choisir une page Facebooksur la liste deroualante pour affcihier les statistiques en bas, delai de premiere reponse, taux de reponse en moins de 30 secondes sur toutes les reponses, plus sous forme graphique les messages envoyes et recus sous forme graphique. Maintenir cette barre de menu fixe quelque soit le changement de pages (Dashboard, Pages, Users, etc). En cliquant sur le menu pages, on passe sur la page de gestion des pages Facebook, avec comme titre 'Gestion des pages Facebook' etdescritipn 'Cnnexion des pages facebook'. Plus bas, affichage des pages facebook connectes et ces pages seront ajoutes automatiquement sur la selection des pages Fcaebook dans la page Accueil. Un bouton 'Ajouter une page' ouvrira une formulaire pour remplir les informations necessaires a l intergration de la page. Le menu utilisateurs afficher les informations completes des utilisateurs sauf le mot de passe, un bouton 'Ajour un utilisateur' qui ouvrira un formulairepour entrer les infomations necessaires a la creation de l utilisateur (Nom, email, mot de passe, role (Agent ou Administrateur)

KPIsFacebook Messengeranalyse de performance04/04/2025

Application Eagle Eye pour cimenterie

Technologiefr
4.0

créé une application complète pour la surveillance des ateliers d'une cimenterie. Voici les principales fonctionnalités : Interface utilisateur intuitive avec : En-tête avec logo Sélecteur de zones de l'usine Liste des tâches à vérifier Zones principales couvertes : Broyeur Cru Four Rotatif Refroidisseur Broyeur Ciment Fonctionnalités pour chaque tâche : Marquage comme complétée/non-complétée Ajout de commentaires Horodatage automatique Description détaillée Organisation du code : Types TypeScript pour la sécurité du code Composants React réutilisables Données de démonstration incluses Style moderne avec Tailwind CSS Nouvelle organisation des zones par secteur : Secteur Cru : Broyeur Cru 1 (BC1) et Broyeur Cru 2 (BC2) Secteur Cuisson : Four 1 et Four 2 Secteur Ciment : BK1, BK2 et BK3 Zones regroupées par secteur Sélecteur plus clair avec titres de sections Meilleure organisation visuelle Mise à jour des types pour inclure le secteur dans la structure des données nommer l application :eagle eye rendre en francais je veux faire la page principale avec les 3 secteur : cru, cuisson, ciment . puis en appuyant sur chaque secteur une page s ouvre avec les sous secteur elminer le mot secteur Une page principale avec 3 cartes représentant les secteurs (Cru, Cuisson, Ciment) Chaque secteur a son propre icône et une description En cliquant sur un secteur, on accède à une vue détaillée avec : La liste des zones du secteur sélectionné La possibilité de sélectionner une zone pour voir ses tâches Un bouton retour dans le header pour revenir à la sélection des secteurs chaque sous secteur dois avoir des taches faire revenir le nom de l app

surveillancecimenterieapplication04/04/2025

Surveillance Cimenterie Eagle Eye

Technologiefr
4.0

créé une application complète pour la surveillance des ateliers d'une cimenterie. Voici les principales fonctionnalités : Interface utilisateur intuitive avec : En-tête avec logo Sélecteur de zones de l'usine Liste des tâches à vérifier Zones principales couvertes : Broyeur Cru Four Rotatif Refroidisseur Broyeur Ciment Fonctionnalités pour chaque tâche : Marquage comme complétée/non-complétée Ajout de commentaires Horodatage automatique Description détaillée Organisation du code : Types TypeScript pour la sécurité du code Composants React réutilisables Données de démonstration incluses Style moderne avec Tailwind CSS Nouvelle organisation des zones par secteur : Secteur Cru : Broyeur Cru 1 (BC1) et Broyeur Cru 2 (BC2) Secteur Cuisson : Four 1 et Four 2 Secteur Ciment : BK1, BK2 et BK3 Zones regroupées par secteur Sélecteur plus clair avec titres de sections Meilleure organisation visuelle Mise à jour des types pour inclure le secteur dans la structure des données nommer l application :eagle eye rendre en francais je veux faire la page principale avec les 3 secteur : cru, cuisson, ciment . puis en appuyant sur chaque secteur une page s ouvre avec les sous secteur elminer le mot secteur Une page principale avec 3 cartes représentant les secteurs (Cru, Cuisson, Ciment) Chaque secteur a son propre icône et une description En cliquant sur un secteur, on accède à une vue détaillée avec : La liste des zones du secteur sélectionné La possibilité de sélectionner une zone pour voir ses tâches Un bouton retour dans le header pour revenir à la sélection des secteurs chaque sous secteur dois avoir des taches

surveillancecimenterieapplication04/04/2025

Surveillance ateliers cimenterie

Technologiefr
4.0

créé une application complète pour la surveillance des ateliers d'une cimenterie. Voici les principales fonctionnalités : Interface utilisateur intuitive avec : En-tête avec logo Sélecteur de zones de l'usine Liste des tâches à vérifier Zones principales couvertes : Broyeur Cru Four Rotatif Refroidisseur Broyeur Ciment Fonctionnalités pour chaque tâche : Marquage comme complétée/non-complétée Ajout de commentaires Horodatage automatique Description détaillée Organisation du code : Types TypeScript pour la sécurité du code Composants React réutilisables Données de démonstration incluses Style moderne avec Tailwind CSS Nouvelle organisation des zones par secteur : Secteur Cru : Broyeur Cru 1 (BC1) et Broyeur Cru 2 (BC2) Secteur Cuisson : Four 1 et Four 2 Secteur Ciment : BK1, BK2 et BK3 Zones regroupées par secteur Sélecteur plus clair avec titres de sections Meilleure organisation visuelle Mise à jour des types pour inclure le secteur dans la structure des données nommer l application :eagle eye rendre en francais je veux faire la page principale avec les 3 secteur : cru, cuisson, ciment . puis en appuyant sur chaque secteur une page s ouvre avec les sous secteur

applicationsurveillancecimenterie04/04/2025

Surveillance ateliers cimenterie

Technologiefr
4.0

créé une application complète pour la surveillance des ateliers d'une cimenterie. Voici les principales fonctionnalités : Interface utilisateur intuitive avec : En-tête avec logo Sélecteur de zones de l'usine Liste des tâches à vérifier Zones principales couvertes : Broyeur Cru Four Rotatif Refroidisseur Broyeur Ciment Fonctionnalités pour chaque tâche : Marquage comme complétée/non-complétée Ajout de commentaires Horodatage automatique Description détaillée Organisation du code : Types TypeScript pour la sécurité du code Composants React réutilisables Données de démonstration incluses Style moderne avec Tailwind CSS Nouvelle organisation des zones par secteur : Secteur Cru : Broyeur Cru 1 (BC1) et Broyeur Cru 2 (BC2) Secteur Cuisson : Four 1 et Four 2 Secteur Ciment : BK1, BK2 et BK3 Zones regroupées par secteur Sélecteur plus clair avec titres de sections Meilleure organisation visuelle Mise à jour des types pour inclure le secteur dans la structure des données nommer l application :eagle eye rendre en francais

surveillancecimenterieapplication04/04/2025