Uppgift 7 - jQuery del 1

Denna uppgift gick ut på att, i jQuery, JavaScript och HTML, skapa ett program som slumpar fram bakgrundsfärger. Uppgiften bestod av två delar. Del 1a skulle innehålla en funktion som varje gång man laddade om sitt HTML-dokument gav bakgrunden en slumpvald färg, ett klickbart HTML-element för att slumpa fram en ny bakgrundsfärg samt ett som gav bakgrunden en ny random färg en gång per sekund. I utbyggnaden - aka del 1b - skulle man även kunna ange egna färgkoder genom ett HTML-formulär för att kunna dels applicera koden som bakgrundfärg, dels spara/lägga till färgen.

För att få en överblick på denna uppgift - som kändes ganska stor i och med att den var uppdelad i två delar - började jag med att rada upp de olika funktionerna, elementen etcetera som skulle finnas i lösningen. Jag skissade sedan upp hur jag ville att HTML-sidan skulle se ut, och denna grundidé höll jag fast vid.

Jag skrev först HTML-delen, med rubriker, formulär och knappar. Jag hade en vision om att ha stora rundade knappar istället för de små standardknapparna, så jag skapade dessa på denna hemsida och lärde mig sedan, i W3Schools, hur man använder bilder som knappar. Sedan valde jag typsnitt, textplacering och dimensioner med CSS.

Därefter övergick jag till jQuery/JavaScript. Först hämtade jag jQuery i minifierad version från Googles CDN. Sedan skapade jag en JavaScript-array - en lista - som jag fyllde med 10 stycken HTML-färgkoder. Math()-modulen slumpar sedan bland dessa värden, och jQuerys css()-funktion ändrar färg på bakgrunden. För att kunna lägga till en egen färgkod i arrayen har jag använt JavaScripts push()-funktion. setInterval() har jag använt för att byta bakgrundsfärg med intervaller på en sekund. Med hjälp av jQuerys .ready()-hanterare har koden körts först när dokumentet laddats färdigt.

Det var givande att arbeta i jQuery för första gången! Något jag gillar är att allt är samlat i en fil, det kändes mer överskådligt än när man jobbar med flera olika dokument.

Såhär blev "bakgrundsslumparens" gränssnitt: