Create a Clock
class component that will update the time every second using a given markup:
Here is the working version
- print current time on the page on page load;
- use
.toUTCString().slice(-12, -4)
methods do avoid timezone issues;
- use
- update the time every second using the
window.setInterval
; - start the timer only when the component is added to the page (
componentDidMount
). - every second print the time in the DevTools using
console.info
method (not theconsole.log
); - add the next comment above the console.debug line to ignore linter error
// eslint-disable-next-line no-console console.info('some message');
- make the
App
a class component; - add the
hasClock
property to theApp
state; - the
Clock
should be visible only when thehasClock
istrue
; - hide the
Clock
on a right mouse click in thedocument
(contextmenu
event):document.addEventListener('contextmenu', (event: MouseEvent) => { event.preventDefault(); // not to show the context menu // put your code here });
- show the
Clock
on a left mouse click in thedocument
(click
event):document.addEventListener('click', () => {});
- the time should not be printed to the console when the Clock is hidden (
componentWillUnmount
); - add the
clockName
havingClock-0
default value to theApp
state; - pass it to the
Clock
to be shown near the time (see the markup):<Clock name={this.state.clockName} />
- update the
clockName
every3300ms
with a new value generated by existinggetRandomName
function; - each time the name is changed, the
Clock
must print a message with an old name and a new name using theconsole.debug
method (usecomponentDidUpdate
):Renamed from oldName to newName
- to see
console.debug
messages enable theverbose
level in DevTools console:
check in the console that a renaming message occurs after each 3-4 time messages.
- Implement a solution following the React task guideline.
- Use the React TypeScript cheatsheet.
- Open one more terminal and run tests with
npm test
to ensure your solution is correct. - Replace
<your_account>
with your Github username in the DEMO LINK and add it to the PR description.