week16's People
Forkers
smarthutzaweek16's Issues
add contraceptive icons next to each contraceptive method
so that users can visualize what these methods look like (and so they will find our page more beautiful).
icons are already available in the assets folder of this project.
build view: home screen
relates #4
Add routes to connect all views
Create readme with learnings from Frontend Masters Elm course
As we go, we'll document learnings from the frontend masters elm course
Route between home page and options
Using either navigation
or beginnerProgram
As a user, I want to be able to select which type of contraceptives I'd like to see first
so that I can filter through the information
Build extended contraceptive method information view
Build the view that shows detailed information on contraceptive methods, once the user has clicked on a 'find out more' type of CTA.
User story: As a girl/woman I want to be able to track the effects of contraceptives on my physical and mental health
...so that I can make a decision as to whether my current form of contraceptives is helping me.
Intro page: decrease spacing between elements on desktop
Do we want such a large divide between the text and the button on desktop?
My suggestion is to vertically align the text and button element and have half the current amount of spacing between them. We could also add another container to limit the width of the content so that the text looks as beautiful as it does on mobile ✨
Add calendar svg
Add hormonal contraceptive methods
Rename header
to something more meaningful
currently 'elmHubHeader
Add svg logo
Home: scale font as screen grows
User story: As a girl/woman who is considering using/changing contraceptives, I want to know all of the options available to me
... so that I can make an informed decision about my sexual reproductive health.
Plan: wednesday
After hacking together a couple of views in Elm yesterday afternoon and starting the Frontend Master's Elm course - we are collectively in ❤️ with Elm.
Our aim for today is to:
- learn as much about Elm as we can in a day (through the excellent 9-hr Frontend Masters course)
- understand how to implement making our app offline first #3
Spike: elm [components?]
Knowledge needed by end of spike:
What do we need to know about elm in order to set up our project and start building views?
Spike: progressive web apps
We need to undertake a spike into PWAs so that we can make our app offline-first
Create back button
Rename 'nonhormonal' methods to contraceptiveMethods
Ad this model will include the information for both hormonal and non-hormonal methods (and toggle the view depending on which 'tab' the user selects), so I think this name should be clearer as to what the model does.
Contraceptive type selection: make headings more prominent
Currently more like paragraph text than headings.
Ideas include:
- increasing font/ spacing
- having a different font & size set for these clickable headings that take you to a new page (would also apply to #43 if we were to do this)
remember to tidy css
There'll be some inconsistencies in how we're setting height etc in our css (what are you gonna do when there's 4 people working on one stylesheet 👩🎨 )
Add contraceptive pngs to assets
remove svgs from main elm.app
Let's try to remove svg code from the main elm app as it makes the file harder to read.
Set content height with % instead of vh
vh is buggy in some browsers. Let's use % instead 🎉
Add hover colour to contraceptive methods tag
build view: contraceptive type
Add dividing line between tabs on contraceptive types page
Change lorem ipsum on iud to real facts
Build views for Information Flow
We must build the views for the information flow.
Screens are:
- home
- intro to information section
- choose a type of contraception to view (hormonal/ non-hormonal)
- view all methods of contraception in selected type, and a short synopsis on each
- in-depth information on a contraceptive
relates #1
Rename files to make them more sensible
Fix nonhormonal page
Currently the view doesn't fill the whole page.
Add link to home from logo in header
As a user, I want to toggle between hormonal and non-hormonal methods
so that I can easily access either type of method and don't get trapped in one section (which could skewer the choices I make).
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.