Tumi Mondo is een platform waar kinderen van 6 maanden t/m een jaar hun taalontwikkeling kunnen verbeteren en stimuleren. Dit geeft voordelen voor het leerproces, vermindering van geestelijke ziektes en het vergroten van sociale vaardigheden.
Tumi Mondo heeft zelf onderzoek gedaan om te kunnen kijken of er platform zijn die kinderen helpt bij de taalontwikkeling. Ze zijn tot de conclusie gekomen dat er momenteel nog geen ontwikkelingen-of leermethodes voor zijn.
Daarom hebben zij als opdracht gegeven: Maak een gedeelte van de app die je op alle apparaten kan gebruiken. Je mag het originele design aanhouden, maar het mag ook worden veranderd.
link naar de homepagina:https://nadiachaja.github.io/the-client-website/
DESIGN
Deze afbeelding komt uit het Figma bestand die we hebben gekregen van de opdrachtgever dit is het Figma bestand: https://www.figma.com/design/RDlD4etdXBvcOW9AAqueBz/TuMiMundo_FDND_Prototype?node-id=0-1&node-type=canvas&t=v3bWNzXjRyCss1Qm-0
Ik heb vooral het originele design aangehouden, maar voor het menu heb ik het iets anders gedaan ik heb er voor gekozen om het menu niet over de hele pagina te doen. Zo kan je nog zien op welke pagina je zit.
WERKING
Ik heb verschillende werkingen toegepast.
Als je op het kruisje in het tesktwolkje klikt verdwijnt het tekstwolkje. Daarnaast als je op de streepjes klinkt komt het menu tevoorschijn. Op het menu staan kopjes en als je over de kopjes heen gaat wordt het lichter en krijgt het een randje eromheen.
Verder de bovenste tekst in het tekstwolkje met de tijd.
Good morning van 6 uur ’s ochtends t/m 12 uur ’s middags.
Good afternoon van 12 uur ’s middags t/m 6 uur ’s avonds.
Good evening van 6 uur ’s avonds t/m 12 uur ’s nachts.
Na 12 uur ’s nachts veranderd de tekst in Good night en de tekst eronder veranderd in It’s time to sleep en I see you tomorrow dat is t/m 6 uur ’s ochtends.
RESPONSIVE
De pagina is voor voor telefoon, tablet en laptop/computer te gebruiken.
telefoon zonder menu
telfoon met menu
tablet zonder menu
tablet met menu
laptop met menu
HTML mijn index.html: https://github.com/nadiachaja/the-client-website/blob/main/index.html
Ik heb mijn HTML ingedeeld in de homepagina en het menu. Om het overzichterlijker te maken staat er wanneer het menu start en wanneer het eindigt en hetzelfde voor homepagina.
Menu: https://github.com/nadiachaja/the-client-website/blob/main/index.html#L14-L119
het menu bevat een header en daarin een ul en een li.
Home: https://github.com/nadiachaja/the-client-website/blob/main/index.html#L122-L313
de homepagina bevat een main met daarin section, button en een figure.
CSS mijn styles.css:https://github.com/nadiachaja/the-client-website/blob/main/styles/styles.css
Ik heb voor de CSS hetzelfde gedaan als mijn HTML ik heb het ingedeeld in de homepagina en het menu.
Menu: https://github.com/nadiachaja/the-client-website/blob/main/styles/styles.css#L7-L169
Home:https://github.com/nadiachaja/the-client-website/blob/main/styles/styles.css#L173-L307
JS mijn script.js: https://github.com/nadiachaja/the-client-website/blob/main/scripts/script.js
Ik heb JS gebruikt voor het kruisje in het wolkje, streepjes naar menu en tekst in tekstwolkje. Javascript wordt gebruikt als je op het kruisje klikt en dan verdwijnt het tekstwolkje, als je op de streepjes klikt komt het menu in beeld en dat de tekst in het tekstwolkje veranderd naarmate de tijd veranderd.