User stories applied but not recognised

JavaScript
1

Hola,
I have applied every user story to the Random Quote Machine exercise as follows using REACT:

(App.js)

import React, {useEffect, useState} from 'react';
import './App.scss';
import COLORS_ARRAY from "./colorsArray"

let citasDB = "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"
const tlogo = "./580b57fcd9996e24bc43c53e.png"
function App() {
  const [quote, setQuote] = useState("This is an ibru sentence: hkb fhuiog hgv goiug sd");
  const [author, setAuthor] = useState("The Author");
  const [randomNumber, setRandomNumber] = useState(0);
  const [quotes, setQuotes] = useState(null);
  const [accentColor, setAccentColor] = useState('#282c34')

  const fetchQuotes = async (url) => {
    const response = await fetch(url);
    const parsedJSON = await response.json();
    
    setQuotes(parsedJSON.quotes)
    
  }
  
  useEffect(() => {
   fetchQuotes(citasDB)
  }, [citasDB])

  const generateRandomNumber = () => {
    let randomInteger = Math.floor(quotes.length * Math.random())
    setRandomNumber(randomInteger);
    setAccentColor(COLORS_ARRAY[randomInteger])
    setQuote(quotes[randomInteger].quote);
    setAuthor(quotes[randomInteger].author);
  }

  return (
    <div className="App">
      <header className="App-header" style={
        {backgroundColor: accentColor}
      }>
        <div id="quote-box" style={{color: accentColor}}>
          <p id="text">
            "{quote}"
          </p>
          <p id="author">
            - {author}
          </p>
          <div id="buttons">
            <button id="new-quote" style={
        {backgroundColor: accentColor}
      } onClick={() => generateRandomNumber()}>New quote</button>
            <a id="tweet-quote" style={
        {backgroundColor: accentColor}
      } href={encodeURI('http://www.twitter.com/intent/tweet?text=${quote} -${author}')}>Tweet Quote</a>
          </div>
        </div>
      </header>
    </div>
  );
}

export default App;

It runs ok on my laptop but they dont pass tests on codepen.
Can anybody tell me why?

3

exercise to be found here:

4

Hello;
Can you share codePen link pls?

5

btw, CodePen is a weird environment, and you don’t need to host on CodePen, you can host anywhere you want, you just need to submit the link to a live app with all tests passing

1 Like
6

You can’t import files or dependencies as local resources on Codepen. You only have a single file, so all code must be inside that one “file”. You can import dependencies from esm.sh

import { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";

Use Stackblitz or Codesandbox instead, that will let you use the same project structure and import/export. Or build and host it on something like Netlify, Vercel, Surge.sh, etc.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.