Homework to practice Elm language and the basics of The Elm Architecture.
Install dependencies.
npm installFormat elm code.
npm run formatRun tests for Part I.
npm run testRun for Part II and open in browser.
npm run devThe goal of this part is to practice the Elm language. There are several functions in the file src/Lib.elm waiting for your implementation. Each function has a documentation comment with a description of what it is supposed to do. There are also unit tests for these functions in tests/LibTest.elm which can help if something is unclear. You can run the tests using elm-test.
Most of the functions can be implemented using functions from elm/core modules, such as List, Maybe, String or Dict. For the last one, indexOf function, you should find appropriate package at package.elm-lang.org, install it and use it.
This part focuses on practising The Elm Architecture. The goal is to create a simple application that shows a story separated into three tabs (Introduction, Plot, Conclusion) with navigation between these tabs. When the app is opened, it should display the Introduction tab.
In the file src/Main.elm, there is already a structure for the application prepared. Your goal is to
- Define necessary messages you need for your implementation,
- Define the type for the
Modeland implementinitfunction to return initialModel, - Implement the
updatefunction to update the model correctly according to the message, - Update
viewfunctions to- Dispatch messages when clicking on tabs,
- Display correct content based on active tab,
- Use
tabStyleActivefor active tab.
To open the application in the web browser, use elm reactor then navigate to http://localhost:8000 and open the Main.elm file.
- Feel free to add more tests (for you), create new modules or install new dependencies (if necessary)
- No need to implement everything (you will receive some points also for non-complete solution)
- When not sure what to do or how to do, feel free to ask
This project is licensed under the MIT License - see the LICENSE file for more details.