Ik heb gebruik gemaakt van padding en margin, hierdoor kan ik de positie goed zetten en de vakken verdelen. Ik heb de belangrijkste elementen een class gegeven en die heb ik via CSS bewerkt.

Ik heb een div met een class container waar alles inzit. Daarna heb ik nog 4 divs:

• Header
• Sidebar/Navigator
• Main/Info
• Footer

En die layout heb ik aangepast via CSS.

Mobiel

Ik heb er voor gezorgd dat de website op mobiel de juiste schaal heeft. Eerst moet je in je head-sectie van de html: "meta name="viewport" content="width=device-width, initial-scale=1" toevoegen. En in je CSS gebruik je @media screen, dit pakt je scherm en je wilt het css gebruiken wanneer je scherm te klein is. Dus voeg je een statement. @media screen and (max-width:700px){ styles } zorgt er voor wanneer de breedte van de scherm kleiner dan 700px is, dan wordt het css opmaak in de {} toegepast.

Script

1
2
3
4
                    

  $(".ImageResizer ul li img").click(function () {
        $(".ImageResizer ul li img").each(function (index) { $(this).removeClass('showImage') })
        $(this).addClass('showImage')
    });

jQuery

Eerst wil je een script tag in HEAD-sectie maken met source (src) "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js". Hierdoor ben je met de javascript van jquery verbonden. En daarna heb ik een andere script die ik zelf heb aangemaakt. Hierboven zie je wat ik in mijn script heb.

Selector

Eerst pak ik alle images die ik in mijn div hebt. Door de jQuery pak ik de element met de class ".ImageResizer" en daarna heb je de ul met li die met img erin zit. uiteindelijk heb ik dus (".ImageResizer ul li img") en je krijgt dan alle img element van die selector. Hier heb voor elk ("each") een functie gegeven wanneer er op wordt gedrukt.

"each"

Met de each(function (index) kan ik door alle element in de selector. De index parameter geeft aan welke aan de beurt is en is een cijfer. Zo heb ik er voor gezorgd dat alle image geen class heeft met "showImage" en dan de gekozen image de class "showImage" gegeven.

"click" en de class

En met $(this) kan je de element zelf pakken. .click() is een event die afgaat wanneer er op de img wordt gedrukt. Wat ik eerst doe is alle image met de class "showImage" verwijderen. De showImage class veranderd de height van de image. Daarna zet ik de class weer op de gekozen image.

Klok

Ik pak de date met new Date(). Die maak ik een variable en ik pak de uren, minuten second, etc. Die heb ik dan ook als variable gemaakt. Dat heb ik gedaan door:"Date.getMonth(), Date.GetDate(), Date.getHours() ". Maar de minutren, seconden en uren heb ik gedaan wanneer het getal onder 10 is komt er een 0 ervoor. Zo staat er dan 08 in plaats van 8. Dan gebruik ik jQuery om de element te pakken met de class "Klok_Label", want dat is mijn label voor mijn tekst. Ik verander de tekst door ".text()" functie en ik de () vul ik de string in. de string maak ik door de uren, minuten, etc in een rij te zetten.

Thema verandren

Ik heb 3 kleur sliders en buttons voor de thema gemaakt. Ik gebruik jQuery om te checken wanneer er een slider is gebruikt en kijk ik de value door .val(). Daarna maak ik het rgb(r,g,b) met de value. Voor de thema heb ik de rgb waarde vermenigvuldigd met *0.80 en * 0.40 zodat ik donkere kleur krijg. Daarna gebruik ik weer jQuery om de body, sidedar, header te pakken en heb ik die kleur veranderd met de ".css()". Je zet dan op de eerste plek de css opmaak die je wilt veranderen en op de tweede de waarde voor de css.

jQuery op contact.html

Ik heb op de contact pagina een div met alle image erin. Met jquery kan ik categorie maken. Wanneer er op een andere categorie wordt gekozen laat ik alleen de foto's op die categorie zien. Ik gebruik het functie ".fadeIn()" en ".hide()". Doordat ik data-filter heb gegeven kan ik kijken welke knop is gedrukt. Ik zoek dan alle image met die data-filter en doe ik fadeIn(), maar de rest doe ik hide()

Canvas

Ik heb eerst een canvas, button en 3 teksten in de html ingezet. Die heb ik met css bewerkt. De canvas is 500x500. Met de javascript kan ik de canva bewerken. Eerst heb ik de button een event gegeven wanneer er op wordt gedrukt begint de game. Ik heb een variable gemaakt van de context van de canva. "canvas.getContext("2d");" Nu kan ik de context bewerken.

Setup

De setup function maakt een fruit en een snake. Dit doe ik door de "fillrect". Ik geef de fillstyle een andere kleur zodat het niet hetzelfde is als het achtergrond. En ik maak het op het cordinaten (0,0), maar ik heb het variable x en y gebruikt. Want dan kan ik het veranderen. Ik heb de groote op scale. De blokken zijn 20x20px, maar wanneer je breedte van de window kleiner is dan 550px, is de scale 15. Er is een Interval, waardoor er op een bepaalde milliseconde wordt er een functie uitgevoerd.

Beweging

Ik heb een event op de window gezet en die activeert wanneer er een key is gedrukt (keydown). Doordat ik de variable x en y heb gebruikt verander ik de x en y wanneer er wordt gedrukt. Ook let je op de stappen, aangezien ik scale gebruik kan ik gewoon - of + scale down. Ik heb een check voor wanneer hij tegen zichzelf raakt. Dan eindigt de game. Ik verwijder alles door "clearrect" functie. context.clearrect(BeginX, BeginY, EindeX, EindeY). Ik wil alles op het canva verwijdern dus ik doe het vanaf 0 tot canva groote. context.clearRect(0, 0, canvas.width, canvas.height).

Animatie

Je maakt een canvas aan en een script. In die script maak ik een herhalende functie met de "setInterval()" Hierdoor refresh het canvas eigenlijk elke keer. Je zet op de eerste plek van setInterval() de functie en op de tweede plek de uitvoeringstijd in milliseconde.

Beweging

Dit heb voor elkaar gekregen door Math.random(). Dit geeft eerst een random waarde tussen 0 en 1. Ik heb ook een check voor wanneer de x en de y van de cirkel de grond/muur raakt. En die zet ik dan in een tegenovergestelde richting. Verder gaat het ook weg na een tijdje. Ik heb de cirkel gemaakt door .arc(), maar daarvoor heb ik beginpath() en daarna closepath().