Following the advice under Thinking In React…
I’ve built out my UI first, with no real functionality to anything yet.
Now that you have your component hierarchy, it’s time to implement your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It’s best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We’ll see why.
Passing 12 out of 29, for the Pomodoro at FreeCodeCamp.com
I don’t understand why it’s failing on number 8 under #Content. I have the id="time-left" and the text hardcoded to 25:00… unless it means the value="25:00", but that’s not the way it’s been worded on the other challenges. I’ve also tried moving the id down to the h1 tag, but the testing results are the same.
repo
live demo, be sure to use the NavBar to get to quote
use the hamburger menu on the top left and select Random Quote Machine to run the test suite, they say it’s designed for Chrome and may encounter bugs in other browsers.
Pomodoro.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
export class Pomodoro extends Component {
render() {
return (
<div>
<ToggleButtonGroup type="radio" name="options" defaultValue={22}>
<ToggleButton value={5} variant="warning" id="time-left"><h1>25:00</h1></ToggleButton>
<ToggleButton value={6} variant="warning" id="session-length">25</ToggleButton>
</ToggleButtonGroup>
<br></br>
<ToggleButtonGroup type="radio" name="options">
<ToggleButton value={1} variant="warning" id="break-label">Break</ToggleButton>
<span> _ </span>
<ToggleButton value={3} variant="warning" id="session-label">Work</ToggleButton>
</ToggleButtonGroup>
<br></br>
<ToggleButtonGroup type="radio" name="options">
<ToggleButton value={2} variant="warning" id="break-length">5</ToggleButton>
<span> _ </span>
<ToggleButton value={4} variant="warning" id="timer-label">25</ToggleButton>
</ToggleButtonGroup>
<br></br>
<ToggleButtonGroup type="radio" name="options">
<ToggleButton value={7} variant="danger" id="break-decrement">- Break</ToggleButton>
<ToggleButton value={8} variant="danger" id="session-decrement">- Work</ToggleButton>
</ToggleButtonGroup>
<br></br>
<ToggleButtonGroup type="radio" name="options">
<ToggleButton value={9} variant="success" id="break-increment">+ Break</ToggleButton>
<ToggleButton value={10} variant="success" id="session-increment">+ Work</ToggleButton>
</ToggleButtonGroup>
<br></br>
<ToggleButtonGroup type="radio" name="options">
<ToggleButton value={11} id="start_stop">Start/Stop</ToggleButton>
<ToggleButton value={12} id="reset">Reset</ToggleButton>
</ToggleButtonGroup>
<figure>
{/* <figcaption>Listen to the T-Rex:</figcaption> */}
<audio
id="beep"
controls
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
Your browser does not support the
<code>audio</code> element.
</audio>
</figure>
{/* <audio
id="beep"
preload="auto"
ref={(audio) => {
this.audioBeep = audio;
}}
controls
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav"
/> */}
</div>
);
}
}
export default Pomodoro;
