I have already set up the applyMiddleware(thunk) to the store.Īs a side note it is better to store the time the timer has started and subtract that from the current time (Date.now()), you should use Math.ciel or Math.floor so you get precise seconds and run the thunk with requestAnimationFrame. I have been trying different ways and reading StackOverflow past questions, but still can not make it work on my application. In this way I was able to create a generic button component, the TimingButton, that I could use to generate the different timing buttons I needed simply by using the properties within the Redux store to populate their specific text.I am trying to build a timer with a button, click to start, and stop the timer. WindowComponent = connect(įunction mapStateToProps(state, ownProps))Īs you can see the TimingButton is wrapped by the HOC generated by the connect function which ties a specific dispatch to the clicking of the button. I had the idea that I could dispatch an event on one window that all windows would observe, then pass a state object that either expands the window or hides the window (when maximizing), or puts all the windows back to the original state. It was during this period that I extracted out the expand/shrink functions out of CSS and moved it into the Redux state machine cycle. Initially I just used the React state management for most of the interactivity, and later refactored the project to use Redux. A future redesign might move to a tabbed to facilitate easy switch between edit mode and preview mode. I think I made a good compromise in design for smaller viewports. I think editors in general are not a good use case for apps on mobile devices because of the limited working area. Probably the most challenging aspect of this project was designing it for both Mobile and Desktop. Some concepts that I drilled into were controlled components and creating reusable components (see my Windowing capability). My understanding of React had expanded greatly through this project. The Markdown Editor is an app that allows a user to enter markdown text in an editor window and see the HTML rendered results in a preview window. This has the benefit of not having to modify style in multiple locations. In later projects I adopted a different approach of using CSS variables and classes to represent theme settings and use the React state to change to different theme classes in the parent container. In my original project I used react state to update the style elements individually to change the theme color. I also began to scratch the surface with Bootstrap though not to any significant degree.īecause of the simplicity of the project I spent more time in styling and discovering different ways to manage that styling. I did not use any promises or async/awaits in this project (that came later). The most difficult part was recalling how to use jQuery to make async API calls. I elected not to use Redux for any state management. This was the first project for the Front End Libraries certification. ![]() The project also provided a user with a single button to retrieve new quotes. ![]() In so doing using the React state management to update the text and author. The objective for this project was to build an app that could retrieve quotes from a remote API and display it in an App. What's more, they are a 501 3c so your donation is tax deductible. Please consider contributing to so it may continue to provide free access to educational material for software development. So as I adapted the apps so they could included on this page I refactored away from bootstrap to plain FlexBox. However, I found that CSS FlexBox much intuitive and easier to use. I made the effort to use Bootstrap in the originals, as you can view from the linked Pens. This course pushed students to use Bootstrap for layout and responsive design. Modified versions of each project exist within this space and are viewable at Github. ![]() Original projects are available as Pens on and include the certification tests used to validate each project. The specific libraries covered in the course work include Bootstrap, jQuery, SASS, React and Redux. The following are details outlying the final projects for the Front End Libraries certification from
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |