Fylla dropdown beroende på ålder?

PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Lägg ett bokmärke på hela tråden
Skapa nytt inlägg   Svara på inlägget Gå till sida 1, 2  Nästa
Visa föregående ämne :: Visa nästa ämne  
Startad av: Meddelande
marcusgarden



Medlem i: 3194 dagar

Status: Offline



#741940
Inlägg Skrivet: 2017-10-30 21:04      Ämne: Fylla dropdown beroende på ålder? Citera

Har ett formulär idag som skickar ett födelsedata till nästa sida via url, på landningssidan så visas ett nytt formulär med en dropdown som fylls på från tabell i db, tabellen innehåller åldersspann, typ 4-6 månader, 1-8 år (12-96 månader). På första sidan så finns ett fält i formuläret som fylls i av användaren med födelsedata enligt formen xxxx-xx-xx

Nu skulle jag vilja ha dropdown från sida 2 till sida 1, alltså dropdown ska fyllas på beroende på vad användaren skriver in i fältet för födelsedata.

Detta bör göras med javascript/jquery gissar jag på...?

Jag provade för ett par år sedan men det blev bara pannkaka av allt, fixar inte javascript/jquery lika bra som PHP:/

Finns det det någon hågad expert där ute som är villig att hjälpa mig med detta formulär?

Tacksam för svar!

EDIT

Glömde säga att ålder baseras på födelsedata kontra datum hämtat från en tabell i db, typ

Födelsedata som anges 2008-03-28
Datum som hämtas i db 2017-12-31

Alltså blir åldern 9 år, 9 månader, 4 dagar, kommer alltså inte att rymmas inom ramen för 1 år - 8 år utan tillhör då 8 år ->
(alltså 96 månader och äldre)

Åldersspann som hämtas i db kan vara många olika så dropdown nummer 2 kan visa flera olika
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
harald_b
Moderator



Medlem i: 4655 dagar
Från: Tavesta
Status: Offline



#741945
Inlägg Skrivet: 2017-11-01 00:29      Ämne: Citera

Vill du att dropdownen skall uppdateras medan man fyller i datumet?
Är det åldern räknat i månader som gäller? Det blir ju lite olika om man räknar i dagar eller månader, eftersom månader är olika långa.
Hur är åldersspannen fördelade? Finns det alltid ett och bara ett åldersspann som passar varje given ålder? Om inte, vad skall ske när inget eller flera åldersspann passar?

Första steget, att räkna ut åldern i månader, kan jag hjälpa dig med nu på en gång. Men för att lösa problemet med att välja rätt värde i dropdownen behöver jag veta mer i detalj hur den ser ut.



KOD:
1:
<script>
2:
var ref_date = new Date('2017-12-31');
3:
</script>
4:
 
5:
<output id="debug"></output><br/>
6:
<input oninput="
7:
   var birthdate = new Date(this.value);
8:
   var age_m = (birthdate.getUTCDate() > ref_date.getUTCDate()? -1: 0) +
9:
      ref_date.getUTCMonth()-birthdate.getUTCMonth() +
10:
      (ref_date.getUTCFullYear()-birthdate.getUTCFullYear())*12;
11:
   document.getElementById('debug').textContent = age_m;
12:
"/>
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
marcusgarden



Medlem i: 3194 dagar

Status: Offline



#741946
Inlägg Skrivet: 2017-11-01 00:49      Ämne: Citera

Hej och tack för svar!

Börjar med att svara på dina frågor:)

Mig spelar det egentligen ingen roll om det autogenereras medan man fyller i eller om man måste klicka på en knapp för att fylla i dropdownlistan, det som är enklast/säkrast egentligen.

Ja, det är ålder i månader som räknas oavsett om det är 28, 29, 30 eller 31 dagar i månaden, det är dag# som räknas. Om individen är född den 3 februari så fyller den 1 månad den 3 mars osv.

Åldersspannen kan vara fördelade hur som helst. I db finns idag bl.a. 2 kolumner, min och max, vilket är månader, tomt värde på max innebär oändligt.

Nej, det kan finnas flera åldersspann på varje given ålder, alltså kan det vara flera åldersspann i dropdownlistan.

Om inget åldersspann passar så ska inte dropdownlisten fyllas i alls, möjligen ett felmeddelande visas, typ, "Inget åldersspann passar".

Försöker här förtydliga med några exempel:

Antal månader är viktigast, sedan är det viktigt att individen nått det lägre värdet men inte klivit över det övre värdet. Alltså för åldersspannet 4-6 månader så ska individen ha fyllt 4 månader (räknat från dag#, ex: 2017-01-01--2017-05-01) men ej fyllt 6 månader (räknat från dag#, ex: 2017-01-01--2017-06-30), alltså passar inte 2017-01-01--2017-07-01 in i spannet 4-6 månader pga att individen då klivit över 6 månader. 4-6 månader betyder egentligen "måste fyllt 4 månader men får inte ha fyllt 6 månader", 6-9 månader betyder "måste ha fyllt 6 månader men får inte ha fyllt 9 månader".

Hoppas det är förståeligt:)

Tack igen!

EDIT

För övrigt så ser dropdownlistan ut som

KOD:
1:
<select class="inputbox required" name="alder_id" id="alder_id" size="1" required >
2:
        <option value="" selected="selected"> - Välj ålder/Choose age - </option>
3:
<option value="'.$alder->id.'">' . $alder->namn_utf . ' ' . $alder->alder_min_text . '' . $alder->alder_max_text . '</option>';
4:
En massa åldersspann
5:
En massa åldersspann
6:
...
7:
...
8:
</select>


Senast ändrad av marcusgarden den 2017-11-01 01:02, ändrad totalt 1 gång
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
harald_b
Moderator



Medlem i: 4655 dagar
Från: Tavesta
Status: Offline



#741947
Inlägg Skrivet: 2017-11-01 01:01      Ämne: Citera

Finns min- och maxvärdet med i dropdownen från början på något sätt? Eller är det något som fortfarande behöver lösas?

Är det meningen att användaren, efter att man fyllt i datumet, själv på eget bevåg skall kunna ändra värdet i dropdownen?
Om inte det är meningen så kanske det finns enklare lösningar än en dropdown. Då kunde man kanske ha en textruta som visar åldersintervallet i klartext och en dold input som postas med formuläret (om det är frågan om ett sådant).
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
marcusgarden



Medlem i: 3194 dagar

Status: Offline



#741948
Inlägg Skrivet: 2017-11-01 01:08      Ämne: Citera

Idag så skrivs födelsedata in på sida 1, förs vidare via url, i formen xxxx-xx-xx, på sida 2 så räknas åldersspann idag ut med hjälp av PHP och dropdownlistan fylls i baserat på mellanskillnad av födelsedata och angivet datum.

Det finns en tabell med alla åldersspann med tillhörande min och max, tabellen kan dock komma att fyllas på med nya åldersspann och tillhörande min och max.

Ja, användaren ska kunna välja på ett av ett eller flera åldersspann, om det finns något att välja på.

Mitt mål är att slippa skicka födelsedata via url och ha dropdownlistan på sida 1, fylla på dropdownlistan med hjälp av t.ex. javascript.

EDIT

Angivet datum är för övrigt ett datum som hämtas i db...

EDIT 2

Så egentligen måste jag väl säga att en dropdown måste tillverkas som automatiskt fylls på med passande åldersspann som hämtas i tabell i db, baserat på mellanskillnad i födelsedata och datum som hämtas i tabell i db, och detta gissar jag görs på bästa sätt med javascript eller annat passande(?).
Användaren ska inte kunna redigera i dropdownlistan, bara välja från det som hämtas.

EDIT 3

Det kan kanske vara en idé att visa ålder (baserat på födelsedata kontra datum som hämtas i db) i textform bredvid input som en dubbelkoll för den som anger födelsedata? Då har man en liten "validering" så att användaren inte anger fel födelsedata.

I ditt exempel så är ju datum som hämtas i db
KOD:
1:
var ref_date = new Date('2017-12-31');
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
harald_b
Moderator



Medlem i: 4655 dagar
Från: Tavesta
Status: Offline



#741949
Inlägg Skrivet: 2017-11-02 01:45      Ämne: Citera

1) Hämta ref_date i databasen
2) Hämta alla åldersspann i databasen och spara dessa till en array
3) För över ref_date och arrayen till javascript med hjälp av json:
PHP:
1:
<script>
2:
 var alder = <?php echo json_encode($alder_array); ?>;
3:
 var ref_date = new Date(<?php echo json_encode($ref_date); ?>);
4:
</script>


Skriptet som uppdaterar dropdownen kan kopplas till oninput eller onchange på födelsedatuminmatningsrutan, beroende på om den skall uppdatera hela tiden medan man skriver, eller när man skrivit klart.
I scriptet jag visade förut lägger du till kod för att hantera dropdownen:
KOD:
1:
var drpdwn = document.getElementById('alder_id');
2:
drpdwn.innerHTML = ''; //töm dropdown
3:
 
4:
for(var i = 0; i<alder.length; i++) {
5:
  if(age_m >= alder[i].min && (age_m < alder[i].max || !alder[i].max)) {
6:
    var opt = drpdwn.appendChild(document.createElement('option'));
7:
    opt.value = alder[i].id;
8:
    opt.textContent = alder[i].namn+' '+alder[i].min+' '+alder[i].max;
9:
  }
10:
}
11:
if(drpdwn.childNodes.length) drpdwn.insertBefore(document.createElement('option'), drpdwn.firstChild).textContent = ' - Välj ålder/Choose age - ';
12:
else drpdwn.appendChild(document.createElement('option')).textContent = 'Ingen passande ålder';
13:
 


Koden är helt otestad, och namn på medlemmar och liknande behöver nog anpassas lite så de stämmer med din kod
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
marcusgarden



Medlem i: 3194 dagar

Status: Offline



#741951
Inlägg Skrivet: 2017-11-02 12:38      Ämne: Citera

Ok, tack för svaret!

Kör detta nu men något stämmer inte:/
Vad är t.ex. alder_m? Förstår VAD det ska vara men inte hur jag liksom fyller den variabeln med mellanskillnaden i månader mellan inmatat födelsedata enligt ÅÅÅÅ-MM-DD och månaden i var ref_date = new Date(<?php echo json_encode($datum); ?>);:/
Har lagt till ett option i dropdownen bara för att starta med något men när jag ändrar datum i inputen så töms dropdownen:/
var alder = <?php echo json_encode($alders, JSON_UNESCAPED_UNICODE); ?>; är välfylld med info:/
var ref_date = new Date(<?php echo json_encode($datum); ?>); har ett datum som är 2017-12-30:/

KOD:
1:
<script>
2:
            function alders() {
3:
               var alder = <?php echo json_encode($alders, JSON_UNESCAPED_UNICODE); ?>;
4:
               var ref_date = new Date(<?php echo json_encode($datum); ?>);
5:
               
6:
               var drpdwn = document.getElementById('alder_id');
7:
               drpdwn.innerHTML = ''; //töm dropdown
8:
               
9:
               for(var i = 0; i<alder.length; i++) {
10:
                 if(age_m >= alder[i].alder_min && (age_m < alder[i].alder_max || !alder[i].alder_max)) {
11:
                  var opt = drpdwn.appendChild(document.createElement('option'));
12:
                  opt.value = alder[i].id;
13:
                  opt.textContent = alder[i].alder_min_text+' '+alder[i].alder_min+' '+alder[i].alder_max;
14:
                 }
15:
               }
16:
               if(drpdwn.childNodes.length) drpdwn.insertBefore(document.createElement('option'), drpdwn.firstChild).textContent = ' - Välj ålder/Choose age - ';
17:
               else drpdwn.appendChild(document.createElement('option')).textContent = 'Ingen passande ålder';
18:
            }
19:
            </script>
20:
            alders: <input type="text" id="alders_id" value="2017-06-01" onchange="alders();" />
21:
            <select name="alder_id" id="alder_id" class="inputbox required" required ><option value="1">hvjbk</option></select>


Tack på förhand!

EDIT

Har stoppat in

KOD:
1:
var age_m = document.getElementById("alders_id").value;


Och matar där in antal månader bara för att få dropdowmnen att fyllas men den verkar fylla i saker som inte ska vara där:/ Bland annat så stoppas ett intervall in som är 12 månader och 96 månader om jag matar in 6 i alders_id.
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
harald_b
Moderator



Medlem i: 4655 dagar
Från: Tavesta
Status: Offline



#741952
Inlägg Skrivet: 2017-11-02 14:55      Ämne: Citera

Du skall ha kvar den koden jag visade förut. Där räknas age_m fram från ref_date och inputrutans value.

I din nya kod kan du skicka med inputrutans value när du anropar funktionen alders():

onchange="alders(this.value);"

Finns medlemmarna .alder_max och .alder_min?
Innehåller dessa vad som förväntas?

Bästa sättet att ta reda på saken är
KOD:
1:
console.log(alder[i].alder_min);
2:
console.log(alder[i].alder_max);

och titta i webbkonsolen vad som visas där
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
marcusgarden



Medlem i: 3194 dagar

Status: Offline



#741953
Inlägg Skrivet: 2017-11-02 21:10      Ämne: Citera

Hej igen och tack för svar!

Jag må vara korkad eller slarvig, oavsett vilket så är jag i alla fall oerfaren gällande javascript:/

Din kodsnutt:

KOD:
1:
<output id="debug"></output><br/>
2:
            <input oninput="
3:
               var birthdate = new Date(this.value);
4:
               var age_m = (birthdate.getUTCDate() > ref_date.getUTCDate()? -1: 0) +
5:
                 ref_date.getUTCMonth()-birthdate.getUTCMonth() +
6:
                 (ref_date.getUTCFullYear()-birthdate.getUTCFullYear())*12;
7:
               document.getElementById('debug').textContent = age_m;
8:
            " />


funkar i alla fall, men kommer förmodligen att behöva utvecklas att räkna ut t.ex. 6 månader minus 1 dag, 9 månader minus 1 dag osv, osv.

Det jag inte får ihop i övrigt är de andra kodsnuttarna du har gett mig:( Som sagt jag är oerfaren:/

Detta är fixat:

KOD:
1:
<script>
2:
            var alder = <?php echo json_encode($alder_array); ?>;
3:
            var ref_date = new Date(<?php echo json_encode($datum); ?>);
4:
            </script>


och, ja, de innehåller det de ska, t.ex.

[{"id":"249","alder_min":"3","alder_max":"6","alder_min_text":"3 mån -","alder_max_text":"6 mån"},{"id":"1","alder_min":"4","alder_max":"6","alder_min_text":"4 mån -","alder_max_text":"6 mån"},{"id":"253","alder_min":"4","alder_max":"7","alder_min_text":"4 mån -","alder_max_text":"7 mån"},osv, osv, osv...]

samt

"2017-12-30"

Jag vet dock inte var jag ska stoppa in

KOD:
1:
var drpdwn = document.getElementById('alder_id');
2:
drpdwn.innerHTML = ''; //töm dropdown
3:
 
4:
for(var i = 0; i<alder.length; i++) {
5:
  if(age_m >= alder[i].alder_min && (age_m < alder[i].alder_max || !alder[i].alder_max)) {
6:
    var opt = drpdwn.appendChild(document.createElement('option'));
7:
    opt.value = alder[i].id;
8:
    opt.textContent = alder[i].id+'-'+alder[i].alder_min+' '+alder[i].alder_max;
9:
  }
10:
}
11:
if(drpdwn.childNodes.length) drpdwn.insertBefore(document.createElement('option'), drpdwn.firstChild).textContent = ' - Välj ålder/Choose age - ';
12:
else drpdwn.appendChild(document.createElement('option')).textContent = 'Ingen passande ålder';


Hur jag än stoppar in det så får jag det inte att fungera:/

Och jag vet inte var jag ska stoppa in

KOD:
1:
onchange="alders(this.value);"


Mest förmodligen för att jag gör något banalt fel så att resultat uteblir:/

Tacksam för hjälp!
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
harald_b
Moderator



Medlem i: 4655 dagar
Från: Tavesta
Status: Offline



#741955
Inlägget är accepterad som det rätta svaret Skrivet: 2017-11-02 23:49      Ämne: Citera

Fortsätt med att använda funktionen alder() som du använde i ditt tidigare exempel.

De kodrader som räknar ut åldern i månader är dessa:

KOD:
1:
   var birthdate = new Date(birthdate_string);
2:
   var age_m = (birthdate.getUTCDate() > ref_date.getUTCDate()? -1: 0) +
3:
      ref_date.getUTCMonth()-birthdate.getUTCMonth() +
4:
      (ref_date.getUTCFullYear()-birthdate.getUTCFullYear())*12;


De skall stoppas in i funktionen alders() efter att ref_date fått sitt värde, men innan for-loopen, som behöver age_m för att fungera.

Bästa sättet att skicka med födelsedatumet från inputen till funktionen är att skicka med det som en parameter
onchange="alders(this.value);" hör sålunda ihop med inputen som har id="alders_id"
Då skall du också ändra till
function alders(birthdate_string) {
så parametern fångas upp i funktionen.
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
marcusgarden



Medlem i: 3194 dagar

Status: Offline



#741958
Inlägg Skrivet: 2017-11-04 09:29      Ämne: Citera

Gud vad vackert det är när det fungerar!

Då är det bara lite kvar innan det är perfekt:)

Detaljen om minus 1 dag.

Vi antar att ref_date är 2017-12-30, jag matar in 2017-06-30, det innebär att individen fyller 6 månader just den dagen, då är det åldersspann 6-9 månader så, ska visas, inte 4-6 månader.

ALLA åldersspann har den regeln, 4-6 månader innebär MÅSTE ha fyllt 4 månader men får inte ha fyllt 6 månader. 6-9 månader innebär MÅSTE ha fyllt 6 månader men får inte ha fyllt 9 månader.

Hur fixar jag detta?

Nästa sak är formatet, jag har hitintills haft 3 dropdown, år, månad och dag, för att tvinga användaren att ange rätt format, är det bättre med dessa 3 dropdowns eller ska man hålla på att validera input eller ändra åt användaren? vill ha formatet ÅÅÅÅ-MM-DD.

Tack för hjälpen, detta lär jag mig mycket påSmile
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
harald_b
Moderator



Medlem i: 4655 dagar
Från: Tavesta
Status: Offline



#741959
Inlägg Skrivet: 2017-11-04 13:55      Ämne: Citera

Tre dropdown för datumet är inte ovanligt, men det är inte heller användarvänligt. Det går bra mycket enklare för användaren att använda en input.
Det finns en input type="date" som kan användas. Men den var buggig i chromium när jag testade nyss, och envisades med att fylla i månaden i års-fältet när man skrev som vanligt. Men på pekskärm kan den nog underlätta.
Du kan lägga till en hint om hur datumet skall fyllas i:
<input placeholder="ÅÅÅÅ-mm-dd" ...


Problemet med detaljen om minus 1 dag förstår jag inte. Det är ju precis så som koden jag gav dig räknar.
Om den INTE skall räkna på det viset så ändrar du till:
var age_m = (birthdate.getUTCDate() >= ref_date.getUTCDate()? -1: 0) +
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
marcusgarden



Medlem i: 3194 dagar

Status: Offline



#741960
Inlägg Skrivet: 2017-11-04 15:54      Ämne: Citera

Hej igen!

Jag ber om ursäkt!
Jag har jobbat natt och var inte riktigt med:/ Det stämmer, det är precis så det fungerar, som det är tänkt:)

Tack för det!

MEN! Det fungerar lite för bra:) OM jag anger endast 2017 i fältet så räknas alla åldersspann upp som passar, men jag vill i slutändan som sagt tvinga användaren att ange formn ÅÅÅÅ-MM-DD.
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
marcusgarden



Medlem i: 3194 dagar

Status: Offline



#741961
Inlägg Skrivet: 2017-11-05 18:35      Ämne: Citera

Allt verkar fungera:)

Tackar enormt mycket för hjälpen!

Nu har jag lite att pilla med och lära mig av det du skickat:)
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
marcusgarden



Medlem i: 3194 dagar

Status: Offline



#741981
Inlägg Skrivet: 2017-11-15 01:28      Ämne: Citera

Hej igen och tack för den enormt bra hjälpen!

Nu har jag börjat förstå vad som händer i all kod jag har stoppat in:)

Nu har jag 2 saker jag skulle vilja utveckla i denna kodsnutt:)

Jag har stoppat in 3st dropdowns, en för år, en för månad och en för dag.
Nu skulle jag vilja att den kodsnutten som räknar ut åldersspann ska lyssna på ändringar i år, månad och dag för att uppdatera på en gång vid ändring:)

Idag ser ju koden ut som följer

KOD:
1:
<script>
2:
                     function alders() {
3:
                        var alder = <?php echo json_encode($alder_array2, JSON_UNESCAPED_UNICODE); ?>;
4:
                        var ref_date = new Date(<?php echo json_encode($datum['datum']); ?>);
5:
 
6:
                        var birthdate = new Date(document.getElementById('year').value+'-'+document.getElementById('month').value+'-'+document.getElementById('day').value);
7:
                        var age_m = (birthdate.getUTCDate() > ref_date.getUTCDate()? -1: 0) +
8:
                             ref_date.getUTCMonth()-birthdate.getUTCMonth() +
9:
                             (ref_date.getUTCFullYear()-birthdate.getUTCFullYear())*12;
10:
                        
11:
                        var drpdwn = document.getElementById('alder_id');
12:
                        drpdwn.innerHTML = ''; //töm dropdown
13:
                        
14:
                        for(var i = 0; i<alder.length; i++) {
15:
                        if(age_m >= alder[i].alder_min && (age_m < alder[i].alder_max || !alder[i].alder_max)) {
16:
                           var opt = drpdwn.appendChild(document.createElement('option'));
17:
                           opt.value = alder[i].id;
18:
                           opt.textContent = alder[i].namn_utf+' ' +alder[i].alder_min_text+' '+alder[i].alder_max_text;
19:
                          }
20:
                        }
21:
                        if(drpdwn.childNodes.length) drpdwn.insertBefore(document.createElement('option'), drpdwn.firstChild).textContent = ' - Välj ålder/Choose age - ';
22:
                        else drpdwn.appendChild(document.createElement('option')).textContent = 'Ingen passande ålder';
23:
                     }
24:
                     </script>


Hur får jag kodsnutten att lyssna på de 3 dropdowns??

Den andra saken är att jag skulle vilja printa ut hur många år, månader och dagar som är mellan inmatat datum och datumet som ligger i $datum['datum'], hur gör jag då?

Tack på förhand!

EDIT--------

Jag fixade lyssningen! Smile

Då återstår bara andra frågan:)

Den andra saken är att jag skulle vilja printa ut hur många år, månader och dagar som är mellan inmatat datum och datumet som ligger i $datum['datum'], hur gör jag då?
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Visa tidigare inlägg:   
Skapa nytt inlägg   Svara på inlägget Gå till sida 1, 2  Nästa
PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Hoppa till:  
Du kan inte skapa nya inlägg i det här forumet
Du kan inte svara på inlägg i det här forumet
Du kan inte ändra dina inlägg i det här forumet
Du kan inte ta bort dina inlägg i det här forumet
Du kan inte rösta i det här forumet
Du kan inte bifoga filer i detta forum
Du kan inte ladda ner filer från detta forum
Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic