FCC Pomodoro

Developer
Victoria
Size
3,618 Kb
Views
8,096
  1. FCC Pomodoro Previews
  2. FCC Pomodoro HTML Codes
  3. FCC Pomodoro CSS Codes
  4. FCC Pomodoro JS Codes

How do I make an fcc pomodoro?

What is a fcc pomodoro? How do you make a fcc pomodoro? This script and codes were developed by Victoria on 02 December 2022, Friday.

FCC Pomodoro Previews
IQ Test

FCC Pomodoro - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC Pomodoro</title> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="pomodoro"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FCC Pomodoro - Script Codes CSS Codes

body { font-size: 20px; background-color: limegreen; font-family: 'Lobster', cursive;
}
.title { font-size: 50px;
}
.pomodoro { margin: auto; text-align: center
}
.timer { font-size: 36px; width: 150px; height: 150px; margin: auto; display: inline-flex; justify-content: center; align-items: center; border: 5px solid darkred; border-radius: 100%; background-color: red; cursor: pointer;
}
.change { cursor: pointer;
}

FCC Pomodoro - Script Codes JS Codes

'use strict';
var Pomodoro = React.createClass({ displayName: 'Pomodoro', getInitialState: function getInitialState() { return { session: 1, break: 1, isSession: true, switchedOn: false, timer: 0 }; }, handleSwitcherClick: function handleSwitcherClick() { var _this = this; if (this._handler) clearInterval(this._handler); this.setState({ switchedOn: !this.state.switchedOn, isSession: true }, function () { if (_this.state.switchedOn) { (function () { var SECOND = 1000; var tick = function tick() { _this.setState({ timer: _this.state.isSession ? _this.state.session * 60 : _this.state.break * 60 }); _this._handler = setInterval(function () { _this.setState({ timer: _this.state.timer - 1 }, function () { if (_this.state.timer === 0) { clearInterval(_this._handler); _this.setState({ isSession: !_this.state.isSession }); tick(); } }); }, SECOND); }; tick(); })(); } }); }, colonTimer: function colonTimer(sec) { var pad = function pad(num, size) { var s = "0" + num; return s.substr(s.length - size); }; var minutes = Math.floor(sec / 60); var seconds = sec % 60; return pad(minutes, 2) + ':' + pad(seconds, 2); }, handleChange: function handleChange(isSession, isPlus) { var _this2 = this; return function () { var _this2$setState; var status = isSession ? 'session' : 'break'; var value = _this2.state[status]; if (!isPlus && value === 1) return; _this2.setState((_this2$setState = {}, _this2$setState[status] = value + (isPlus ? 1 : -1), _this2$setState)); }; }, render: function render() { return React.createElement( 'div', { className: 'pomodoro' }, React.createElement( 'div', { className: 'title' }, 'Pomodoro Clock' ), React.createElement( 'div', { className: 'session' }, 'Session: ', React.createElement('i', { className: 'change fa fa-minus-circle', 'aria-hidden': 'true', onClick: this.handleChange(true, false) }), ' ', this.state.session, ' minutes ', React.createElement('i', { className: 'change fa fa-plus-circle', 'aria-hidden': 'true', onClick: this.handleChange(true, true) }) ), React.createElement( 'div', { classname: 'break' }, 'Break: ', React.createElement('i', { className: 'change fa fa-minus-circle', 'aria-hidden': 'true', onClick: this.handleChange(false, false) }), ' ', this.state.break, ' minutes ', React.createElement('i', { className: 'change fa fa-plus-circle', 'aria-hidden': 'true', onClick: this.handleChange(false, true) }) ), React.createElement( 'div', { className: 'timer', onClick: this.handleSwitcherClick }, this.state.switchedOn ? this.state.isSession ? 'Session ' + this.colonTimer(this.state.timer) : 'Break ' + this.colonTimer(this.state.timer) : 'Go!' ) ); }
});
React.render(React.createElement(Pomodoro, null), document.getElementById('pomodoro'));
FCC Pomodoro - Script Codes
FCC Pomodoro - Script Codes
Home Page Home
Developer Victoria
Username Enieste
Uploaded December 02, 2022
Rating 3
Size 3,618 Kb
Views 8,096
Do you need developer help for FCC Pomodoro?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Victoria (Enieste) Script Codes
Name
FCC Tribute page
FCC Random quote machine
React TODO
A Pen by Victoria
FCC Leaderboard
FCC Tic Tac Toe
Profile
FCC Wiki viewer
Cube calc
FCC Recipe Box
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!