├── ATM └── index.html ├── Analogue Clock App ├── clock.js ├── index.html └── styles.css ├── BMI Calculator App ├── bmi.js ├── index.html └── styles.css ├── Calculator App ├── index.html └── style.css ├── Character Count Calculator App ├── index.html ├── scripts.js └── styles.css ├── CountDown Timer App ├── countdown.js ├── index.html └── styles.css ├── Digital Clock App ├── clock.js ├── clock_24format.js ├── index.html └── styles.css ├── Height Converter App ├── hconverter.js ├── index.html └── styles.css ├── Interactive Quiz App ├── css │ ├── component.css │ ├── normalize.css │ └── styles.css ├── index.html └── js │ ├── checkbox.js │ ├── jsquiz.js │ └── modernizr.custom.js ├── LICENSE ├── Loan Calculator App ├── index.html ├── loancalculator.js └── styles.css ├── README.md ├── Rock Paper Scissors ├── app.js ├── index.html └── styles.css └── Todo List App ├── index.html ├── script.js └── styles.css /ATM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /Analogue Clock App/clock.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById("canvas"); 2 | var ctx = canvas.getContext("2d"); 3 | var radius = canvas.height / 2; 4 | ctx.translate(radius, radius); 5 | radius = radius * 0.90 6 | setInterval(drawClock, 1000); 7 | 8 | function drawClock() { 9 | drawFace(ctx, radius); 10 | drawNumbers(ctx, radius); 11 | drawTime(ctx, radius); 12 | } 13 | 14 | function drawFace(ctx, radius) { 15 | var grad; 16 | ctx.beginPath(); 17 | ctx.arc(0, 0, radius, 0, 2*Math.PI); 18 | ctx.fillStyle = '#26C281'; 19 | ctx.fill(); 20 | grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); 21 | grad.addColorStop(0, '#FFF'); 22 | grad.addColorStop(0.5, '#fefefe'); 23 | grad.addColorStop(1, '#FFF'); 24 | ctx.strokeStyle = grad; 25 | ctx.lineWidth = radius*0.1; 26 | ctx.stroke(); 27 | ctx.beginPath(); 28 | ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); 29 | ctx.fillStyle = '#FFF'; 30 | ctx.fill(); 31 | } 32 | 33 | function drawNumbers(ctx, radius) { 34 | var ang; 35 | var num; 36 | ctx.font = radius*0.15 + "px arial"; 37 | ctx.textBaseline="middle"; 38 | ctx.textAlign="center"; 39 | for(num = 1; num < 13; num++){ 40 | ang = num * Math.PI / 6; 41 | ctx.rotate(ang); 42 | ctx.translate(0, -radius*0.85); 43 | ctx.rotate(-ang); 44 | ctx.fillText(num.toString(), 0, 0); 45 | ctx.rotate(ang); 46 | ctx.translate(0, radius*0.85); 47 | ctx.rotate(-ang); 48 | } 49 | } 50 | 51 | function drawTime(ctx, radius){ 52 | var now = new Date(); 53 | var hour = now.getHours(); 54 | var minute = now.getMinutes(); 55 | var second = now.getSeconds(); 56 | 57 | hour=hour%12; 58 | hour=(hour*Math.PI/6)+ 59 | (minute*Math.PI/(6*60))+ 60 | (second*Math.PI/(360*60)); 61 | drawHand(ctx, hour, radius*0.5, radius*0.07); 62 | 63 | minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); 64 | drawHand(ctx, minute, radius*0.8, radius*0.07); 65 | 66 | second=(second*Math.PI/30); 67 | drawHand(ctx, second, radius*0.9, radius*0.02); 68 | } 69 | 70 | 71 | function drawHand(ctx, pos, length, width) { 72 | ctx.beginPath(); 73 | ctx.lineWidth = width; 74 | ctx.lineCap = "round"; 75 | ctx.moveTo(0,0); 76 | ctx.rotate(pos); 77 | ctx.lineTo(0, -length); 78 | ctx.stroke(); 79 | ctx.rotate(-pos); 80 | } -------------------------------------------------------------------------------- /Analogue Clock App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Relógio Analógico 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Relógio Analógico

14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Analogue Clock App/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Lato', Arial, sans-serif; 5 | font-size: 100%; 6 | line-height: 1.25; 7 | color: #FFF; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | background: #26C281; 13 | color: rgba(0, 0, 0, 0.45); 14 | } 15 | 16 | .canvas { 17 | margin: 5% auto 0; 18 | width: 80%; 19 | max-width: 350px; 20 | display: block; 21 | } 22 | 23 | h1 { 24 | width: 100%; 25 | font-size: 2em; 26 | text-align: center; 27 | } -------------------------------------------------------------------------------- /BMI Calculator App/bmi.js: -------------------------------------------------------------------------------- 1 | document.getElementById("submit").addEventListener("click", bmiCalculator); 2 | function bmiCalculator(){ 3 | var cm = parseInt(document.getElementById("cm").value); 4 | var kg = parseFloat(document.getElementById("kg").value); 5 | 6 | var bmi; 7 | var newCm= parseFloat(cm/100); 8 | 9 | bmi = kg / (newCm * newCm); 10 | bmi = bmi.toFixed(1); 11 | console.log(bmi); 12 | 13 | document.getElementById("result").innerHTML = "The BMI result is " + bmi + "%"; 14 | 15 | } -------------------------------------------------------------------------------- /BMI Calculator App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BMI Calculator 6 | 7 | 8 | 9 | 10 | 11 | 12 |

BMI Calculator

13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 |

BMI Weight Guide

25 | Under Weight = Less than 18.6
26 | Normal Range = 18.6 and 24.9
27 | Overweight = Greater than 24.9
28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /BMI Calculator App/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Lato', Arial, sans-serif; 5 | font-size: 100%; 6 | line-height: 1.25; 7 | color: #FFF; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | background: #26C281; 13 | color: rgba(0, 0, 0, 0.45); 14 | } 15 | 16 | .container { 17 | margin: 1% auto 0; 18 | width: 65%; 19 | } 20 | 21 | @media (max-width: 600px) { 22 | .container { 23 | margin: 5% auto 0; 24 | width: 75%; 25 | } 26 | } 27 | 28 | h1 { 29 | width: 100%; 30 | font-size: 2em; 31 | text-align: center; 32 | margin: 2% auto; 33 | } 34 | 35 | .info { 36 | background: rgba(255, 255, 255, .09); 37 | padding: 2%; 38 | } 39 | 40 | .result { 41 | font-size: 35px; 42 | text-align: center; 43 | } 44 | 45 | label { 46 | margin: 3% 0 1%; 47 | position: relative; 48 | float: left; 49 | } 50 | 51 | input, 52 | textarea, 53 | select { 54 | line-height: 1.5; 55 | font-size: 1.4em; 56 | padding: 5px 10px; 57 | border: 2px solid #FFF; 58 | color: #fff; 59 | display: block; 60 | width: 100%; 61 | background: transparent; 62 | box-sizing: border-box; 63 | outline: 0; 64 | } 65 | 66 | .display-input { 67 | width: 100%; 68 | height: 100px; 69 | text-align: center; 70 | background-color: #1f80c9; 71 | } 72 | 73 | .submit { 74 | width: 150px; 75 | border-radius: 0px; 76 | border-style: none; 77 | color: #26C281; 78 | font-size: 25px; 79 | margin: 5% auto; 80 | border: 2px solid #FFF; 81 | background: #FFF; 82 | cursor: pointer; 83 | transition: all .6s; 84 | } 85 | 86 | .submit:hover { 87 | background: #26C281; 88 | color: #FFF; 89 | } -------------------------------------------------------------------------------- /Calculator App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple calculator 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Simple Calculator

13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /Calculator App/style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | font-family: 'Lato', Arial, sans-serif; 4 | font-size: 100%; 5 | line-height: 1.25; 6 | color: #FFF; 7 | padding: 0; 8 | margin: 0; 9 | } 10 | 11 | body { 12 | background: #26C281; 13 | color: rgba(0, 0, 0, 0.45); 14 | } 15 | 16 | h1 { 17 | text-align: center; 18 | font-size:32px; 19 | width: 100%; 20 | } 21 | 22 | #calform { 23 | margin: 1% auto 0; 24 | width: 65%; 25 | display: flex; 26 | flex-direction: row; 27 | flex-wrap: wrap; 28 | } 29 | 30 | .display { 31 | width: 100%; 32 | height: 100px; 33 | margin: 0 0 2% 0; 34 | font-size:32px; 35 | color: #fff; 36 | outline: 0; 37 | box-sizing: border-box; 38 | text-align: center; 39 | border: 2px solid #FFF; 40 | background-color: transparent; 41 | } 42 | 43 | input.number, 44 | input.tool { 45 | width: 25%; 46 | height: 100px; 47 | font-size: 24px; 48 | border-radius: 0; 49 | margin: 0; 50 | padding: 0; 51 | outline: 0; 52 | box-sizing: border-box; 53 | user-select: none; 54 | cursor: pointer; 55 | border: 1px solid #26C281; 56 | transition: all .35s; 57 | } 58 | 59 | input.number { 60 | color: #26C281; 61 | background: #fff; 62 | } 63 | 64 | input.tool { 65 | background: #1a8a5b; 66 | color: #fff; 67 | } 68 | 69 | input.number:hover, 70 | input.tool:hover { 71 | color: #fff; 72 | background: #26C281; 73 | ; 74 | } 75 | 76 | 77 | -------------------------------------------------------------------------------- /Character Count Calculator App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Character Count Calculator App 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Character Count Calculator App

17 |

Type a word (or sentence) in the box below

18 | 19 |
20 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Character Count Calculator App/scripts.js: -------------------------------------------------------------------------------- 1 | var print = function(msg) { 2 | 3 | document.getElementById("output").innerHTML = "Length is " + msg; 4 | 5 | } 6 | 7 | document.getElementById("btn").onclick = function(event){ 8 | 9 | print(document.getElementById('str').value.length); 10 | } 11 | 12 | -------------------------------------------------------------------------------- /Character Count Calculator App/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Lato', Arial, sans-serif; 5 | font-size: 100%; 6 | line-height: 1.25; 7 | color: #FFF; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | background: #26C281; 13 | color: rgba(0, 0, 0, 0.45); 14 | } 15 | 16 | .container { 17 | margin: 1% auto 0; 18 | width: 65%; 19 | } 20 | 21 | h1 { 22 | width: 100%; 23 | font-size: 2em; 24 | text-align: center; 25 | } 26 | 27 | p { 28 | margin: 2% 0 0; 29 | } 30 | 31 | input, 32 | textarea, 33 | select { 34 | line-height: 1.5; 35 | font-size: 1.4em; 36 | padding: 5px 10px; 37 | border: 2px solid #FFF; 38 | color: #fff; 39 | display: block; 40 | width: 100%; 41 | background: transparent; 42 | box-sizing: border-box; 43 | outline: 0; 44 | } 45 | 46 | .result { 47 | font-size: 35px; 48 | text-align: center; 49 | margin: 2% 0; 50 | } 51 | 52 | .btn { 53 | width: 20%; 54 | height: 100px; 55 | font-size: 16px; 56 | color: #26C281; 57 | outline: 0; 58 | margin: 2% auto; 59 | background: #26C281; 60 | box-sizing: border-box; 61 | text-align: center; 62 | border: 2px solid #FFF; 63 | background: #fff; 64 | cursor: pointer; 65 | position: relative; 66 | display: block; 67 | } 68 | -------------------------------------------------------------------------------- /CountDown Timer App/countdown.js: -------------------------------------------------------------------------------- 1 | function getTimeRemaining(endtime) { 2 | var t = Date.parse(endtime) - Date.parse(new Date()); 3 | var seconds = Math.floor((t / 1000) % 60); 4 | var minutes = Math.floor((t / 1000 / 60) % 60); 5 | var hours = Math.floor((t / (1000 * 60 * 60)) % 24); 6 | var days = Math.floor(t / (1000 * 60 * 60 * 24)); 7 | return { 8 | 'total': t, 9 | 'days': days, 10 | 'hours': hours, 11 | 'minutes': minutes, 12 | 'seconds': seconds 13 | }; 14 | } 15 | 16 | function initializeClock(id, endtime) { 17 | var clock = document.getElementById(id); 18 | var daysSpan = clock.querySelector('.days'); 19 | var hoursSpan = clock.querySelector('.hours'); 20 | var minutesSpan = clock.querySelector('.minutes'); 21 | var secondsSpan = clock.querySelector('.seconds'); 22 | 23 | function updateClock() { 24 | var t = getTimeRemaining(endtime); 25 | 26 | daysSpan.innerHTML = t.days; 27 | hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 28 | minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 29 | secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 30 | 31 | if (t.total <= 0) { 32 | clearInterval(timeinterval); 33 | } 34 | } 35 | 36 | updateClock(); 37 | var timeinterval = setInterval(updateClock, 1000); 38 | } 39 | 40 | var deadline = new Date(Date.parse(new Date()) + 14 * 24 * 60 * 60 * 1000); 41 | initializeClock('clocking', deadline); -------------------------------------------------------------------------------- /CountDown Timer App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Count down Timer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Countdown Clock

14 |
15 |
16 | 17 |
Days
18 |
19 |
20 | 21 |
Hours
22 |
23 |
24 | 25 |
Minutes
26 |
27 |
28 | 29 |
Seconds
30 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /CountDown Timer App/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Lato', Arial, sans-serif; 5 | font-size: 100%; 6 | line-height: 1.25; 7 | color: #FFF; 8 | } 9 | 10 | body { 11 | text-align: center; 12 | background: #26C281; 13 | color: rgba(0, 0, 0, 0.45); 14 | } 15 | 16 | h1{ 17 | width: 100%; 18 | font-size: 2em; 19 | text-align: center; 20 | margin: 2% auto; 21 | } 22 | 23 | .clocking{ 24 | font-family: sans-serif; 25 | color: #fff; 26 | display: inline-block; 27 | font-weight: 100; 28 | text-align: center; 29 | font-size: 55px; 30 | } 31 | 32 | .clocking > div{ 33 | padding: 50px; 34 | display: inline-block; 35 | } 36 | 37 | .clocking div > span{ 38 | padding: 65px 65px 0; 39 | border-radius: 3px; 40 | display: inline-block; 41 | } 42 | 43 | span.minutes {} 44 | 45 | span.minutes {} 46 | 47 | .smalltext{ 48 | padding-top: 5px; 49 | font-size: 25px; 50 | } -------------------------------------------------------------------------------- /Digital Clock App/clock.js: -------------------------------------------------------------------------------- 1 | setInterval(function () { 2 | var currentTime = new Date(); 3 | var hours = currentTime.getHours(); 4 | var minutes = currentTime.getMinutes(); 5 | var seconds = currentTime.getSeconds(); 6 | var period = "AM"; 7 | if (hours >= 12) { 8 | period = "PM"; 9 | } 10 | if (hours > 12) { 11 | hours = hours - 12; 12 | } 13 | if (seconds < 10) { 14 | seconds = "0" + seconds; 15 | } 16 | if (minutes < 10) { 17 | minutes = "0" + minutes; 18 | } 19 | var clockTime = hours + ":" + minutes + ":" + seconds + " " + period; 20 | 21 | var clock = document.getElementById('clock'); 22 | clock.innerText = clockTime; 23 | }, 1000); 24 | 25 | 26 | -------------------------------------------------------------------------------- /Digital Clock App/clock_24format.js: -------------------------------------------------------------------------------- 1 | setInterval(function () { 2 | var currentTime = new Date(); 3 | var hours = currentTime.getHours(); 4 | var minutes = currentTime.getMinutes(); 5 | var seconds = currentTime.getSeconds(); 6 | 7 | if (seconds < 10) { 8 | seconds = "0" + seconds; 9 | } 10 | if (minutes < 10) { 11 | minutes = "0" + minutes; 12 | } 13 | var clockTime = hours + ":" + minutes + ":" + seconds + " "; 14 | 15 | var clock = document.getElementById('clock'); 16 | clock.innerText = clockTime; 17 | }, 1000); 18 | 19 | 20 | -------------------------------------------------------------------------------- /Digital Clock App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Your local time 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Digital Clock App/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Lato', Arial, sans-serif; 5 | font-size: 100%; 6 | line-height: 1.25; 7 | color: #FFF; 8 | } 9 | 10 | body { 11 | background: #26C281; 12 | color: rgba(0, 0, 0, 0.45); 13 | } 14 | 15 | #clock { 16 | color: #fff; 17 | font-size: 120px; 18 | padding: 0.5em 0em; 19 | width: 80%; 20 | margin: 0px auto; 21 | text-align: center; 22 | } 23 | 24 | #banner { 25 | color: #fefefe; 26 | font-size: 50px; 27 | text-align:center; 28 | padding: 0.5em 0em; 29 | width: 80%; 30 | margin: 10% auto 0%; 31 | text-transform:uppercase; 32 | } 33 | -------------------------------------------------------------------------------- /Height Converter App/hconverter.js: -------------------------------------------------------------------------------- 1 | 2 | //BMI = KG / (H/100 * H/100) 3 | 4 | document.getElementById("submit").addEventListener("click", heightConverter); 5 | 6 | function heightConverter(){ 7 | var feet = parseInt(document.getElementById("feet").value *12); 8 | var inches = parseInt(document.getElementById("inches").value); 9 | 10 | var cm = (feet + inches) *2.54; 11 | var n = cm.toFixed(0); 12 | 13 | 14 | 15 | document.getElementById("result").innerHTML = n; 16 | 17 | } -------------------------------------------------------------------------------- /Height Converter App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Height Converter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Height Converter

15 | 16 |
17 | 18 |
19 |

20 | 21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Height Converter App/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Lato', Arial, sans-serif; 5 | font-size: 100%; 6 | line-height: 1.25; 7 | color: #FFF; 8 | } 9 | 10 | body { 11 | background: #26C281; 12 | color: rgba(0, 0, 0, 0.45); 13 | } 14 | 15 | #container { 16 | margin: 1% auto 0; 17 | width: 65%; 18 | } 19 | 20 | h1 { 21 | width: 100%; 22 | font-size: 2em; 23 | text-align: center; 24 | } 25 | 26 | 27 | #result { 28 | font-size: 35px; 29 | text-align: center; 30 | } 31 | 32 | input, 33 | textarea, 34 | select { 35 | line-height: 1.5; 36 | font-size: 1.4em; 37 | padding: 5px 10px; 38 | border: 2px solid #FFF; 39 | color: #fff; 40 | display: block; 41 | width: 100%; 42 | background: transparent; 43 | box-sizing: border-box; 44 | outline: 0; 45 | } 46 | 47 | #submit { 48 | width: 30%; 49 | min-width: 250px; 50 | color: #26C281; 51 | font-size: 25px; 52 | margin: 5% auto; 53 | background: #FFF; 54 | cursor: pointer; 55 | transition: all .6s; 56 | } 57 | 58 | #submit:hover { 59 | color: #FFF; 60 | background: #26C281; 61 | } 62 | -------------------------------------------------------------------------------- /Interactive Quiz App/css/component.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:after, 3 | *::before { 4 | -webkit-box-sizing: border-box; 5 | -moz-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | .ac-custom { 10 | padding: 0 3em; 11 | margin: 0 auto; 12 | } 13 | 14 | .ac-custom h2 { 15 | font-size: 3em; 16 | font-weight: 300; 17 | padding: 0 0 0.5em; 18 | margin: 0 0 30px; 19 | } 20 | 21 | .ac-custom ul, 22 | .ac-custom ol { 23 | list-style: none; 24 | padding: 0; 25 | margin: 0 5%; 26 | max-width: 90%; 27 | } 28 | 29 | .ac-custom li { 30 | margin: 0 auto; 31 | padding: 1% 0; 32 | position: relative; 33 | } 34 | 35 | .ac-custom label { 36 | display: inline-block; 37 | position: relative; 38 | font-size: 2em; 39 | padding: 0 0 0 80px; 40 | vertical-align: top; 41 | color: rgba(0,0,0,0.2); 42 | cursor: pointer; 43 | -webkit-transition: color 0.3s; 44 | transition: color 0.3s; 45 | } 46 | 47 | .ac-custom input[type="checkbox"], 48 | .ac-custom input[type="radio"], 49 | .ac-custom label::before { 50 | width: 50px; 51 | height: 50px; 52 | top: 50%; 53 | left: 0; 54 | margin-top: -25px; 55 | position: absolute; 56 | cursor: pointer; 57 | } 58 | 59 | .ac-custom input[type="checkbox"], 60 | .ac-custom input[type="radio"] { 61 | opacity: 0; 62 | -webkit-appearance: none; 63 | display: inline-block; 64 | vertical-align: middle; 65 | z-index: 100; 66 | } 67 | 68 | .ac-custom label::before { 69 | content: ''; 70 | border: 4px solid #fff; 71 | -webkit-transition: opacity 0.3s; 72 | transition: opacity 0.3s; 73 | } 74 | 75 | .ac-radio label::before { 76 | border-radius: 50%; 77 | } 78 | 79 | .ac-custom input[type="checkbox"]:checked + label, 80 | .ac-custom input[type="radio"]:checked + label { 81 | color: #fff; 82 | } 83 | 84 | .ac-custom input[type="checkbox"]:checked + label::before, 85 | .ac-custom input[type="radio"]:checked + label::before { 86 | opacity: 0.8; 87 | } 88 | 89 | /* General SVG and path styles */ 90 | 91 | .ac-custom svg { 92 | position: absolute; 93 | width: 40px; 94 | height: 40px; 95 | top: 50%; 96 | margin-top: -20px; 97 | left: 5px; 98 | pointer-events: none; 99 | } 100 | 101 | .ac-custom svg path { 102 | stroke: #fdfcd3; 103 | stroke-width: 13px; 104 | stroke-linecap: round; 105 | stroke-linejoin: round; 106 | fill: none; 107 | } 108 | 109 | /* Specific input, SVG and path styles */ 110 | 111 | /* Circle */ 112 | .ac-circle input[type="checkbox"], 113 | .ac-circle input[type="radio"], 114 | .ac-circle label::before { 115 | width: 30px; 116 | height: 30px; 117 | margin-top: -15px; 118 | left: 10px; 119 | position: absolute; 120 | } 121 | 122 | .ac-circle label::before { 123 | background-color: #fff; 124 | border: none; 125 | } 126 | 127 | .ac-circle svg { 128 | width: 70px; 129 | height: 70px; 130 | margin-top: -35px; 131 | left: -10px; 132 | } 133 | 134 | .ac-circle svg path { 135 | stroke-width: 5px; 136 | } 137 | 138 | /* Box Fill */ 139 | .ac-boxfill svg path { 140 | stroke-width: 8px; 141 | } 142 | 143 | /* Swirl */ 144 | .ac-swirl svg path { 145 | stroke-width: 8px; 146 | } 147 | 148 | /* List */ 149 | .ac-list ol { 150 | list-style: decimal; 151 | list-style-position: inside; 152 | } 153 | 154 | .ac-list ol li { 155 | font-size: 2em; 156 | padding: 1em 1em 0 2em; 157 | text-indent: -40px; 158 | } 159 | 160 | .ac-list ol li label { 161 | font-size: 1em; 162 | text-indent: 0; 163 | padding-left: 30px; 164 | } 165 | 166 | .ac-list label::before { 167 | display: none; 168 | } 169 | 170 | .ac-list svg { 171 | width: 100%; 172 | height: 80px; 173 | left: 0; 174 | top: 1.2em; 175 | margin-top: 0px; 176 | } 177 | 178 | .ac-list svg path { 179 | stroke-width: 4px; 180 | } 181 | 182 | /* Media Queries */ 183 | @media screen and (max-width: 50em) { 184 | section { 185 | font-size: 80%; 186 | } 187 | } -------------------------------------------------------------------------------- /Interactive Quiz App/css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /Interactive Quiz App/css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Lato', Arial, sans-serif; 5 | font-size: 100%; 6 | line-height: 1.25; 7 | color: #FFF; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | background: #fb887c; 13 | color: rgba(24, 18, 18, 0.45); 14 | } 15 | 16 | h1 { 17 | width: 100%; 18 | font-size: 2em; 19 | margin: 0 auto; 20 | padding: 1em; 21 | text-align: center; 22 | } 23 | 24 | ul { 25 | list-style: none; 26 | } 27 | 28 | li { 29 | font-size: 2em; 30 | } 31 | 32 | label { 33 | display: inline-block; 34 | position: relative; 35 | font-size: 1em; 36 | padding: 0 0 0 80px; 37 | vertical-align: top; 38 | color: rgba(0,0,0,0.2); 39 | cursor: pointer; 40 | -webkit-transition: color 0.3s; 41 | transition: color 0.3s; 42 | } 43 | 44 | input[type=radio] { 45 | border: 0px; 46 | height: 1em; 47 | } 48 | 49 | 50 | .quizContainer { 51 | width: 90vw; 52 | height: 90vh; 53 | margin: 1vh auto; 54 | box-sizing: border-box; 55 | } 56 | 57 | .nextButton { 58 | max-width: 250px; 59 | border-radius: 0px; 60 | border-style: none; 61 | padding: 1% 0; 62 | color: #fb887c; 63 | font-size: 25px; 64 | margin: 5% auto; 65 | border: 2px solid #FFF; 66 | background: #FFF; 67 | cursor: pointer; 68 | transition: all .6s; 69 | text-align: center; 70 | } 71 | 72 | .nextButton:hover { 73 | background: #fb887c; 74 | color: #FFF; 75 | } 76 | 77 | .question { 78 | width: 90%; 79 | font-size: 2em; 80 | margin: 0 auto; 81 | padding: 2%; 82 | text-align: center; 83 | background: rgba(0,0,0,.05); 84 | box-sizing: border-box; 85 | } 86 | 87 | .quizMessage { 88 | border-radius: 6px; 89 | width: 30%; 90 | margin: auto; 91 | text-align: center; 92 | padding: 2px; 93 | color: red; 94 | } 95 | 96 | .result { 97 | font-size: 35px; 98 | text-align: center; 99 | padding: 3% 0; 100 | } 101 | 102 | /* QUIZ */ 103 | .ac-custom label { 104 | display: inline-block; 105 | position: relative; 106 | font-size: 1em; 107 | padding:0 0 0 50px; 108 | vertical-align: top; 109 | color: rgba(0,0,0,0.2); 110 | cursor: pointer; 111 | transition: color 0.3s; 112 | } 113 | 114 | .ac-custom input[type="checkbox"], 115 | .ac-custom input[type="radio"], 116 | .ac-custom label::before { 117 | width: 35px; 118 | height: 35px; 119 | top: 50%; 120 | left: 0; 121 | margin-top: -17px; 122 | position: absolute; 123 | cursor: pointer; 124 | } 125 | 126 | .ac-custom input[type="checkbox"], 127 | .ac-custom input[type="radio"] { 128 | opacity: 0; 129 | display: inline-block; 130 | vertical-align: middle; 131 | z-index: 100; 132 | } 133 | 134 | .ac-custom label::before { 135 | content: ''; 136 | border: 4px solid #fff; 137 | transition: opacity 0.3s; 138 | } 139 | 140 | .ac-custom input[type="checkbox"]:checked + label, 141 | .ac-custom input[type="radio"]:checked + label { 142 | color: #fff; 143 | } 144 | 145 | .ac-custom input[type="checkbox"]:checked + label::before, 146 | .ac-custom input[type="radio"]:checked + label::before { 147 | opacity: 0.8; 148 | } -------------------------------------------------------------------------------- /Interactive Quiz App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Javascript Quiz Game with Animated Checkboxes 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

Quiz Game

20 |
21 |
22 | 23 |
24 |
25 |
Next Question
26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Interactive Quiz App/js/checkbox.js: -------------------------------------------------------------------------------- 1 | if( document.createElement('svg').getAttributeNS ) { 2 | 3 | var checkbxsCross = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-cross input[type="checkbox"]' ) ), 4 | radiobxsFill = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-fill input[type="radio"]' ) ), 5 | checkbxsCheckmark = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-checkmark input[type="checkbox"]' ) ), 6 | radiobxsCircle = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-circle input[type="radio"]' ) ), 7 | checkbxsBoxfill = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-boxfill input[type="checkbox"]' ) ), 8 | radiobxsSwirl = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-swirl input[type="radio"]' ) ), 9 | checkbxsDiagonal = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-diagonal input[type="checkbox"]' ) ), 10 | checkbxsList = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-list input[type="checkbox"]' ) ), 11 | pathDefs = { 12 | cross : ['M 10 10 L 90 90','M 90 10 L 10 90'], 13 | fill : ['M15.833,24.334c2.179-0.443,4.766-3.995,6.545-5.359 c1.76-1.35,4.144-3.732,6.256-4.339c-3.983,3.844-6.504,9.556-10.047,13.827c-2.325,2.802-5.387,6.153-6.068,9.866 c2.081-0.474,4.484-2.502,6.425-3.488c5.708-2.897,11.316-6.804,16.608-10.418c4.812-3.287,11.13-7.53,13.935-12.905 c-0.759,3.059-3.364,6.421-4.943,9.203c-2.728,4.806-6.064,8.417-9.781,12.446c-6.895,7.477-15.107,14.109-20.779,22.608 c3.515-0.784,7.103-2.996,10.263-4.628c6.455-3.335,12.235-8.381,17.684-13.15c5.495-4.81,10.848-9.68,15.866-14.988 c1.905-2.016,4.178-4.42,5.556-6.838c0.051,1.256-0.604,2.542-1.03,3.672c-1.424,3.767-3.011,7.432-4.723,11.076 c-2.772,5.904-6.312,11.342-9.921,16.763c-3.167,4.757-7.082,8.94-10.854,13.205c-2.456,2.777-4.876,5.977-7.627,8.448 c9.341-7.52,18.965-14.629,27.924-22.656c4.995-4.474,9.557-9.075,13.586-14.446c1.443-1.924,2.427-4.939,3.74-6.56 c-0.446,3.322-2.183,6.878-3.312,10.032c-2.261,6.309-5.352,12.53-8.418,18.482c-3.46,6.719-8.134,12.698-11.954,19.203 c-0.725,1.234-1.833,2.451-2.265,3.77c2.347-0.48,4.812-3.199,7.028-4.286c4.144-2.033,7.787-4.938,11.184-8.072 c3.142-2.9,5.344-6.758,7.925-10.141c1.483-1.944,3.306-4.056,4.341-6.283c0.041,1.102-0.507,2.345-0.876,3.388 c-1.456,4.114-3.369,8.184-5.059,12.212c-1.503,3.583-3.421,7.001-5.277,10.411c-0.967,1.775-2.471,3.528-3.287,5.298 c2.49-1.163,5.229-3.906,7.212-5.828c2.094-2.028,5.027-4.716,6.33-7.335c-0.256,1.47-2.07,3.577-3.02,4.809'], 14 | checkmark : ['M16.667,62.167c3.109,5.55,7.217,10.591,10.926,15.75 c2.614,3.636,5.149,7.519,8.161,10.853c-0.046-0.051,1.959,2.414,2.692,2.343c0.895-0.088,6.958-8.511,6.014-7.3 c5.997-7.695,11.68-15.463,16.931-23.696c6.393-10.025,12.235-20.373,18.104-30.707C82.004,24.988,84.802,20.601,87,16'], 15 | circle : ['M34.745,7.183C25.078,12.703,13.516,26.359,8.797,37.13 c-13.652,31.134,9.219,54.785,34.77,55.99c15.826,0.742,31.804-2.607,42.207-17.52c6.641-9.52,12.918-27.789,7.396-39.713 C85.873,20.155,69.828-5.347,41.802,13.379'], 16 | boxfill : ['M6.987,4.774c15.308,2.213,30.731,1.398,46.101,1.398 c9.74,0,19.484,0.084,29.225,0.001c2.152-0.018,4.358-0.626,6.229,1.201c-5.443,1.284-10.857,2.58-16.398,2.524 c-9.586-0.096-18.983,2.331-28.597,2.326c-7.43-0.003-14.988-0.423-22.364,1.041c-4.099,0.811-7.216,3.958-10.759,6.81 c8.981-0.104,17.952,1.972,26.97,1.94c8.365-0.029,16.557-1.168,24.872-1.847c2.436-0.2,24.209-4.854,24.632,2.223 c-14.265,5.396-29.483,0.959-43.871,0.525c-12.163-0.368-24.866,2.739-36.677,6.863c14.93,4.236,30.265,2.061,45.365,2.425 c7.82,0.187,15.486,1.928,23.337,1.903c2.602-0.008,6.644-0.984,9,0.468c-2.584,1.794-8.164,0.984-10.809,1.165 c-13.329,0.899-26.632,2.315-39.939,3.953c-6.761,0.834-13.413,0.95-20.204,0.938c-1.429-0.001-2.938-0.155-4.142,0.436 c5.065,4.68,15.128,2.853,20.742,2.904c11.342,0.104,22.689-0.081,34.035-0.081c9.067,0,20.104-2.412,29.014,0.643 c-4.061,4.239-12.383,3.389-17.056,4.292c-11.054,2.132-21.575,5.041-32.725,5.289c-5.591,0.124-11.278,1.001-16.824,2.088 c-4.515,0.885-9.461,0.823-13.881,2.301c2.302,3.186,7.315,2.59,10.13,2.694c15.753,0.588,31.413-0.231,47.097-2.172 c7.904-0.979,15.06,1.748,22.549,4.877c-12.278,4.992-25.996,4.737-38.58,5.989c-8.467,0.839-16.773,1.041-25.267,0.984 c-4.727-0.031-10.214-0.851-14.782,1.551c12.157,4.923,26.295,2.283,38.739,2.182c7.176-0.06,14.323,1.151,21.326,3.07 c-2.391,2.98-7.512,3.388-10.368,4.143c-8.208,2.165-16.487,3.686-24.71,5.709c-6.854,1.685-13.604,3.616-20.507,4.714 c-1.707,0.273-3.337,0.483-4.923,1.366c2.023,0.749,3.73,0.558,5.95,0.597c9.749,0.165,19.555,0.31,29.304-0.027 c15.334-0.528,30.422-4.721,45.782-4.653'], 17 | swirl : ['M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89 c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837 c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079 c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826 c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371 c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262 c0.643,4.698,0.646,10.775-3.811,13.746'], 18 | diagonal : ['M16.053,91.059c0.435,0,0.739-0.256,0.914-0.768 c3.101-2.85,5.914-6.734,8.655-9.865C41.371,62.438,56.817,44.11,70.826,24.721c3.729-5.16,6.914-10.603,10.475-15.835 c0.389-0.572,0.785-1.131,1.377-1.521'], 19 | list : ['M1.986,8.91c41.704,4.081,83.952,5.822,125.737,2.867 c17.086-1.208,34.157-0.601,51.257-0.778c21.354-0.223,42.706-1.024,64.056-1.33c18.188-0.261,36.436,0.571,54.609,0.571','M3.954,25.923c9.888,0.045,19.725-0.905,29.602-1.432 c16.87-0.897,33.825-0.171,50.658-2.273c14.924-1.866,29.906-1.407,44.874-1.936c19.9-0.705,39.692-0.887,59.586,0.45 c35.896,2.407,71.665-1.062,107.539-1.188'] 20 | }, 21 | animDefs = { 22 | cross : { speed : .2, easing : 'ease-in-out' }, 23 | fill : { speed : .8, easing : 'ease-in-out' }, 24 | checkmark : { speed : .2, easing : 'ease-in-out' }, 25 | circle : { speed : .2, easing : 'ease-in-out' }, 26 | boxfill : { speed : .8, easing : 'ease-in' }, 27 | swirl : { speed : .8, easing : 'ease-in' }, 28 | diagonal : { speed : .2, easing : 'ease-in-out' }, 29 | list : { speed : .3, easing : 'ease-in-out' } 30 | }; 31 | 32 | function createSVGEl( def ) { 33 | var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 34 | if( def ) { 35 | svg.setAttributeNS( null, 'viewBox', def.viewBox ); 36 | svg.setAttributeNS( null, 'preserveAspectRatio', def.preserveAspectRatio ); 37 | } 38 | else { 39 | svg.setAttributeNS( null, 'viewBox', '0 0 100 100' ); 40 | } 41 | svg.setAttribute( 'xmlns', 'http://www.w3.org/2000/svg' ); 42 | return svg; 43 | } 44 | 45 | function controlCheckbox( el, type, svgDef ) { 46 | var svg = createSVGEl( svgDef ); 47 | el.parentNode.appendChild( svg ); 48 | 49 | el.addEventListener( 'change', function() { 50 | if( el.checked ) { 51 | draw( el, type ); 52 | } 53 | else { 54 | reset( el ); 55 | } 56 | } ); 57 | } 58 | 59 | function controlRadiobox( el, type ) { 60 | var svg = createSVGEl(); 61 | el.parentNode.appendChild( svg ); 62 | el.addEventListener( 'change', function() { 63 | resetRadio( el ); 64 | draw( el, type ); 65 | } ); 66 | } 67 | 68 | checkbxsCross.forEach( function( el, i ) { controlCheckbox( el, 'cross' ); } ); 69 | radiobxsFill.forEach( function( el, i ) { controlRadiobox( el, 'fill' ); } ); 70 | checkbxsCheckmark.forEach( function( el, i ) { controlCheckbox( el, 'checkmark' ); } ); 71 | radiobxsCircle.forEach( function( el, i ) { controlRadiobox( el, 'circle' ); } ); 72 | checkbxsBoxfill.forEach( function( el, i ) { controlCheckbox( el, 'boxfill' ); } ); 73 | radiobxsSwirl.forEach( function( el, i ) { controlRadiobox( el, 'swirl' ); } ); 74 | checkbxsDiagonal.forEach( function( el, i ) { controlCheckbox( el, 'diagonal' ); } ); 75 | checkbxsList.forEach( function( el ) { controlCheckbox( el, 'list', { viewBox : '0 0 300 100', preserveAspectRatio : 'none' } ); } ); 76 | 77 | function draw( el, type ) { 78 | var paths = [], pathDef, 79 | animDef, 80 | svg = el.parentNode.querySelector( 'svg' ); 81 | 82 | switch( type ) { 83 | case 'cross': pathDef = pathDefs.cross; animDef = animDefs.cross; break; 84 | case 'fill': pathDef = pathDefs.fill; animDef = animDefs.fill; break; 85 | case 'checkmark': pathDef = pathDefs.checkmark; animDef = animDefs.checkmark; break; 86 | case 'circle': pathDef = pathDefs.circle; animDef = animDefs.circle; break; 87 | case 'boxfill': pathDef = pathDefs.boxfill; animDef = animDefs.boxfill; break; 88 | case 'swirl': pathDef = pathDefs.swirl; animDef = animDefs.swirl; break; 89 | case 'diagonal': pathDef = pathDefs.diagonal; animDef = animDefs.diagonal; break; 90 | case 'list': pathDef = pathDefs.list; animDef = animDefs.list; break; 91 | }; 92 | 93 | paths.push( document.createElementNS('http://www.w3.org/2000/svg', 'path' ) ); 94 | 95 | if( type === 'cross' || type === 'list' ) { 96 | paths.push( document.createElementNS('http://www.w3.org/2000/svg', 'path' ) ); 97 | } 98 | 99 | for( var i = 0, len = paths.length; i < len; ++i ) { 100 | var path = paths[i]; 101 | svg.appendChild( path ); 102 | 103 | path.setAttributeNS( null, 'd', pathDef[i] ); 104 | 105 | var length = path.getTotalLength(); 106 | // Clear any previous transition 107 | //path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'none'; 108 | // Set up the starting positions 109 | path.style.strokeDasharray = length + ' ' + length; 110 | if( i === 0 ) { 111 | path.style.strokeDashoffset = Math.floor( length ) - 1; 112 | } 113 | else path.style.strokeDashoffset = length; 114 | // Trigger a layout so styles are calculated & the browser 115 | // picks up the starting position before animating 116 | path.getBoundingClientRect(); 117 | // Define our transition 118 | path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'stroke-dashoffset ' + animDef.speed + 's ' + animDef.easing + ' ' + i * animDef.speed + 's'; 119 | // Go! 120 | path.style.strokeDashoffset = '0'; 121 | } 122 | } 123 | 124 | function reset( el ) { 125 | Array.prototype.slice.call( el.parentNode.querySelectorAll( 'svg > path' ) ).forEach( function( el ) { el.parentNode.removeChild( el ); } ); 126 | } 127 | 128 | function resetRadio( el ) { 129 | Array.prototype.slice.call( document.querySelectorAll( 'input[type="radio"][name="' + el.getAttribute( 'name' ) + '"]' ) ).forEach( function( el ) { 130 | var path = el.parentNode.querySelector( 'svg > path' ); 131 | if( path ) { 132 | path.parentNode.removeChild( path ); 133 | } 134 | } ); 135 | } 136 | 137 | } -------------------------------------------------------------------------------- /Interactive Quiz App/js/jsquiz.js: -------------------------------------------------------------------------------- 1 | var questions = [{ 2 | question: "What is the baby of a Moth known as?", 3 | choices: ["baby", "infant", "kit", "larva"], 4 | correctAnswer: 3 5 | }, { 6 | question: "What is the adult of a kid called", 7 | choices: ["calf", "doe", "goat", "chick"], 8 | correctAnswer: 2 9 | }, { 10 | question: "What is the young of Bufallo called?", 11 | choices: ["calf", "baby", "pup", "cow"], 12 | correctAnswer: 0 13 | }, { 14 | question: "What a baby Aligator called?", 15 | choices: ["baby", "gator", "hatchling", "calf"], 16 | correctAnswer: 2 17 | }, { 18 | question: "What is a baby Goose called?", 19 | choices: ["gooser", "gosling", "gup", "pup"], 20 | correctAnswer: 1 21 | }, { 22 | question: "What is a baby Hamster called?", 23 | choices: ["pup", "chick", "infant", "billy"], 24 | correctAnswer: 0 25 | 26 | }, { 27 | question: "What is a baby Hawk called?", 28 | choices: ["hawklett", "pup", "larva", "eyas"], 29 | correctAnswer: 3 30 | }, { 31 | question: "What is a baby grasshopper called?", 32 | choices: ["hopper", "nymph", "stick", "pup"], 33 | correctAnswer: 1 34 | }, { 35 | question: "What is a baby Kangaroo called?", 36 | choices: ["kinga", "joey", "calf", "baby"], 37 | correctAnswer: 1 38 | 39 | }, { 40 | question: "What is a baby Whale called?", 41 | choices: ["whala", "cub", "grub", "infant"], 42 | correctAnswer: 1 43 | 44 | }, { 45 | question: "What is a baby Monkey called?", 46 | choices: ["infant", "baby", "calf", "pup"], 47 | correctAnswer: 0 48 | 49 | }, { 50 | question: "What is a baby Bear Called?", 51 | choices: ["cub", "baby balu", "young bear", "bearlet"], 52 | correctAnswer: 0 53 | }]; 54 | 55 | var currentQuestion = 0; 56 | var correctAnswers = 0; 57 | var quizOver = false; 58 | 59 | $(document).ready(function () { 60 | 61 | // Display the first question 62 | displayCurrentQuestion(); 63 | $(this).find(".quizMessage").hide(); 64 | 65 | // On clicking next, display the next question 66 | $(this).find(".nextButton").on("click", function () { 67 | if (!quizOver) { 68 | 69 | value = $("input[type='radio']:checked").val(); 70 | 71 | if (value == undefined) { 72 | $(document).find(".quizMessage").text("Please select an answer"); 73 | $(document).find(".quizMessage").show(); 74 | } else { 75 | // TODO: Remove any message -> not sure if this is efficient to call this each time.... 76 | $(document).find(".quizMessage").hide(); 77 | 78 | if (value == questions[currentQuestion].correctAnswer) { 79 | correctAnswers++; 80 | } 81 | 82 | currentQuestion++; // Since we have already displayed the first question on DOM ready 83 | if (currentQuestion < questions.length) { 84 | displayCurrentQuestion(); 85 | } else { 86 | displayScore(); 87 | // $(document).find(".nextButton").toggle(); 88 | // $(document).find(".playAgainButton").toggle(); 89 | // Change the text in the next button to ask if user wants to play again 90 | $(document).find(".nextButton").text("Play Again?"); 91 | quizOver = true; 92 | } 93 | } 94 | } else { // quiz is over and clicked the next button (which now displays 'Play Again?' 95 | quizOver = false; 96 | $(document).find(".nextButton").text("Next Question"); 97 | resetQuiz(); 98 | displayCurrentQuestion(); 99 | hideScore(); 100 | } 101 | }); 102 | 103 | if (document.createElement('svg').getAttributeNS) { 104 | 105 | var checkbxsCross = Array.prototype.slice.call(document.querySelectorAll('form.ac-cross input[type="checkbox"]')), 106 | radiobxsFill = Array.prototype.slice.call(document.querySelectorAll('form.ac-fill input[type="radio"]')), 107 | checkbxsCheckmark = Array.prototype.slice.call(document.querySelectorAll('form.ac-checkmark input[type="checkbox"]')), 108 | radiobxsCircle = Array.prototype.slice.call(document.querySelectorAll('form.ac-circle input[type="radio"]')), 109 | checkbxsBoxfill = Array.prototype.slice.call(document.querySelectorAll('form.ac-boxfill input[type="checkbox"]')), 110 | radiobxsSwirl = Array.prototype.slice.call(document.querySelectorAll('form.ac-swirl input[type="radio"]')), 111 | checkbxsDiagonal = Array.prototype.slice.call(document.querySelectorAll('form.ac-diagonal input[type="checkbox"]')), 112 | checkbxsList = Array.prototype.slice.call(document.querySelectorAll('form.ac-list input[type="checkbox"]')), 113 | pathDefs = { 114 | cross: ['M 10 10 L 90 90', 'M 90 10 L 10 90'], 115 | fill: ['M15.833,24.334c2.179-0.443,4.766-3.995,6.545-5.359 c1.76-1.35,4.144-3.732,6.256-4.339c-3.983,3.844-6.504,9.556-10.047,13.827c-2.325,2.802-5.387,6.153-6.068,9.866 c2.081-0.474,4.484-2.502,6.425-3.488c5.708-2.897,11.316-6.804,16.608-10.418c4.812-3.287,11.13-7.53,13.935-12.905 c-0.759,3.059-3.364,6.421-4.943,9.203c-2.728,4.806-6.064,8.417-9.781,12.446c-6.895,7.477-15.107,14.109-20.779,22.608 c3.515-0.784,7.103-2.996,10.263-4.628c6.455-3.335,12.235-8.381,17.684-13.15c5.495-4.81,10.848-9.68,15.866-14.988 c1.905-2.016,4.178-4.42,5.556-6.838c0.051,1.256-0.604,2.542-1.03,3.672c-1.424,3.767-3.011,7.432-4.723,11.076 c-2.772,5.904-6.312,11.342-9.921,16.763c-3.167,4.757-7.082,8.94-10.854,13.205c-2.456,2.777-4.876,5.977-7.627,8.448 c9.341-7.52,18.965-14.629,27.924-22.656c4.995-4.474,9.557-9.075,13.586-14.446c1.443-1.924,2.427-4.939,3.74-6.56 c-0.446,3.322-2.183,6.878-3.312,10.032c-2.261,6.309-5.352,12.53-8.418,18.482c-3.46,6.719-8.134,12.698-11.954,19.203 c-0.725,1.234-1.833,2.451-2.265,3.77c2.347-0.48,4.812-3.199,7.028-4.286c4.144-2.033,7.787-4.938,11.184-8.072 c3.142-2.9,5.344-6.758,7.925-10.141c1.483-1.944,3.306-4.056,4.341-6.283c0.041,1.102-0.507,2.345-0.876,3.388 c-1.456,4.114-3.369,8.184-5.059,12.212c-1.503,3.583-3.421,7.001-5.277,10.411c-0.967,1.775-2.471,3.528-3.287,5.298 c2.49-1.163,5.229-3.906,7.212-5.828c2.094-2.028,5.027-4.716,6.33-7.335c-0.256,1.47-2.07,3.577-3.02,4.809'], 116 | checkmark: ['M16.667,62.167c3.109,5.55,7.217,10.591,10.926,15.75 c2.614,3.636,5.149,7.519,8.161,10.853c-0.046-0.051,1.959,2.414,2.692,2.343c0.895-0.088,6.958-8.511,6.014-7.3 c5.997-7.695,11.68-15.463,16.931-23.696c6.393-10.025,12.235-20.373,18.104-30.707C82.004,24.988,84.802,20.601,87,16'], 117 | circle: ['M34.745,7.183C25.078,12.703,13.516,26.359,8.797,37.13 c-13.652,31.134,9.219,54.785,34.77,55.99c15.826,0.742,31.804-2.607,42.207-17.52c6.641-9.52,12.918-27.789,7.396-39.713 C85.873,20.155,69.828-5.347,41.802,13.379'], 118 | boxfill: ['M6.987,4.774c15.308,2.213,30.731,1.398,46.101,1.398 c9.74,0,19.484,0.084,29.225,0.001c2.152-0.018,4.358-0.626,6.229,1.201c-5.443,1.284-10.857,2.58-16.398,2.524 c-9.586-0.096-18.983,2.331-28.597,2.326c-7.43-0.003-14.988-0.423-22.364,1.041c-4.099,0.811-7.216,3.958-10.759,6.81 c8.981-0.104,17.952,1.972,26.97,1.94c8.365-0.029,16.557-1.168,24.872-1.847c2.436-0.2,24.209-4.854,24.632,2.223 c-14.265,5.396-29.483,0.959-43.871,0.525c-12.163-0.368-24.866,2.739-36.677,6.863c14.93,4.236,30.265,2.061,45.365,2.425 c7.82,0.187,15.486,1.928,23.337,1.903c2.602-0.008,6.644-0.984,9,0.468c-2.584,1.794-8.164,0.984-10.809,1.165 c-13.329,0.899-26.632,2.315-39.939,3.953c-6.761,0.834-13.413,0.95-20.204,0.938c-1.429-0.001-2.938-0.155-4.142,0.436 c5.065,4.68,15.128,2.853,20.742,2.904c11.342,0.104,22.689-0.081,34.035-0.081c9.067,0,20.104-2.412,29.014,0.643 c-4.061,4.239-12.383,3.389-17.056,4.292c-11.054,2.132-21.575,5.041-32.725,5.289c-5.591,0.124-11.278,1.001-16.824,2.088 c-4.515,0.885-9.461,0.823-13.881,2.301c2.302,3.186,7.315,2.59,10.13,2.694c15.753,0.588,31.413-0.231,47.097-2.172 c7.904-0.979,15.06,1.748,22.549,4.877c-12.278,4.992-25.996,4.737-38.58,5.989c-8.467,0.839-16.773,1.041-25.267,0.984 c-4.727-0.031-10.214-0.851-14.782,1.551c12.157,4.923,26.295,2.283,38.739,2.182c7.176-0.06,14.323,1.151,21.326,3.07 c-2.391,2.98-7.512,3.388-10.368,4.143c-8.208,2.165-16.487,3.686-24.71,5.709c-6.854,1.685-13.604,3.616-20.507,4.714 c-1.707,0.273-3.337,0.483-4.923,1.366c2.023,0.749,3.73,0.558,5.95,0.597c9.749,0.165,19.555,0.31,29.304-0.027 c15.334-0.528,30.422-4.721,45.782-4.653'], 119 | swirl: ['M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89 c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837 c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079 c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826 c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371 c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262 c0.643,4.698,0.646,10.775-3.811,13.746'], 120 | diagonal: ['M16.053,91.059c0.435,0,0.739-0.256,0.914-0.768 c3.101-2.85,5.914-6.734,8.655-9.865C41.371,62.438,56.817,44.11,70.826,24.721c3.729-5.16,6.914-10.603,10.475-15.835 c0.389-0.572,0.785-1.131,1.377-1.521'], 121 | list: ['M1.986,8.91c41.704,4.081,83.952,5.822,125.737,2.867 c17.086-1.208,34.157-0.601,51.257-0.778c21.354-0.223,42.706-1.024,64.056-1.33c18.188-0.261,36.436,0.571,54.609,0.571', 'M3.954,25.923c9.888,0.045,19.725-0.905,29.602-1.432 c16.87-0.897,33.825-0.171,50.658-2.273c14.924-1.866,29.906-1.407,44.874-1.936c19.9-0.705,39.692-0.887,59.586,0.45 c35.896,2.407,71.665-1.062,107.539-1.188'] 122 | }, 123 | animDefs = { 124 | cross: { 125 | speed: .2, 126 | easing: 'ease-in-out' 127 | }, 128 | fill: { 129 | speed: .8, 130 | easing: 'ease-in-out' 131 | }, 132 | checkmark: { 133 | speed: .2, 134 | easing: 'ease-in-out' 135 | }, 136 | circle: { 137 | speed: .2, 138 | easing: 'ease-in-out' 139 | }, 140 | boxfill: { 141 | speed: .8, 142 | easing: 'ease-in' 143 | }, 144 | swirl: { 145 | speed: .8, 146 | easing: 'ease-in' 147 | }, 148 | diagonal: { 149 | speed: .2, 150 | easing: 'ease-in-out' 151 | }, 152 | list: { 153 | speed: .3, 154 | easing: 'ease-in-out' 155 | } 156 | }; 157 | 158 | function createSVGEl(def) { 159 | var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 160 | if (def) { 161 | svg.setAttributeNS(null, 'viewBox', def.viewBox); 162 | svg.setAttributeNS(null, 'preserveAspectRatio', def.preserveAspectRatio); 163 | } else { 164 | svg.setAttributeNS(null, 'viewBox', '0 0 100 100'); 165 | } 166 | svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); 167 | return svg; 168 | } 169 | 170 | function controlCheckbox(el, type, svgDef) { 171 | var svg = createSVGEl(svgDef); 172 | el.parentNode.appendChild(svg); 173 | 174 | el.addEventListener('change', function () { 175 | if (el.checked) { 176 | draw(el, type); 177 | } else { 178 | reset(el); 179 | } 180 | }); 181 | } 182 | 183 | function controlRadiobox(el, type) { 184 | var svg = createSVGEl(); 185 | el.parentNode.appendChild(svg); 186 | el.addEventListener('change', function () { 187 | resetRadio(el); 188 | draw(el, type); 189 | }); 190 | } 191 | 192 | checkbxsCross.forEach(function (el, i) { 193 | controlCheckbox(el, 'cross'); 194 | }); 195 | radiobxsFill.forEach(function (el, i) { 196 | controlRadiobox(el, 'fill'); 197 | }); 198 | checkbxsCheckmark.forEach(function (el, i) { 199 | controlCheckbox(el, 'checkmark'); 200 | }); 201 | radiobxsCircle.forEach(function (el, i) { 202 | controlRadiobox(el, 'circle'); 203 | }); 204 | checkbxsBoxfill.forEach(function (el, i) { 205 | controlCheckbox(el, 'boxfill'); 206 | }); 207 | radiobxsSwirl.forEach(function (el, i) { 208 | controlRadiobox(el, 'swirl'); 209 | }); 210 | checkbxsDiagonal.forEach(function (el, i) { 211 | controlCheckbox(el, 'diagonal'); 212 | }); 213 | checkbxsList.forEach(function (el) { 214 | controlCheckbox(el, 'list', { 215 | viewBox: '0 0 300 100', 216 | preserveAspectRatio: 'none' 217 | }); 218 | }); 219 | 220 | function draw(el, type) { 221 | var paths = [], 222 | pathDef, 223 | animDef, 224 | svg = el.parentNode.querySelector('svg'); 225 | 226 | switch (type) { 227 | case 'cross': 228 | pathDef = pathDefs.cross; 229 | animDef = animDefs.cross; 230 | break; 231 | case 'fill': 232 | pathDef = pathDefs.fill; 233 | animDef = animDefs.fill; 234 | break; 235 | case 'checkmark': 236 | pathDef = pathDefs.checkmark; 237 | animDef = animDefs.checkmark; 238 | break; 239 | case 'circle': 240 | pathDef = pathDefs.circle; 241 | animDef = animDefs.circle; 242 | break; 243 | case 'boxfill': 244 | pathDef = pathDefs.boxfill; 245 | animDef = animDefs.boxfill; 246 | break; 247 | case 'swirl': 248 | pathDef = pathDefs.swirl; 249 | animDef = animDefs.swirl; 250 | break; 251 | case 'diagonal': 252 | pathDef = pathDefs.diagonal; 253 | animDef = animDefs.diagonal; 254 | break; 255 | case 'list': 256 | pathDef = pathDefs.list; 257 | animDef = animDefs.list; 258 | break; 259 | }; 260 | 261 | paths.push(document.createElementNS('http://www.w3.org/2000/svg', 'path')); 262 | 263 | if (type === 'cross' || type === 'list') { 264 | paths.push(document.createElementNS('http://www.w3.org/2000/svg', 'path')); 265 | } 266 | 267 | for (var i = 0, len = paths.length; i < len; ++i) { 268 | var path = paths[i]; 269 | svg.appendChild(path); 270 | 271 | path.setAttributeNS(null, 'd', pathDef[i]); 272 | 273 | var length = path.getTotalLength(); 274 | // Clear any previous transition 275 | //path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'none'; 276 | // Set up the starting positions 277 | path.style.strokeDasharray = length + ' ' + length; 278 | if (i === 0) { 279 | path.style.strokeDashoffset = Math.floor(length) - 1; 280 | } else path.style.strokeDashoffset = length; 281 | // Trigger a layout so styles are calculated & the browser 282 | // picks up the starting position before animating 283 | path.getBoundingClientRect(); 284 | // Define our transition 285 | path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'stroke-dashoffset ' + animDef.speed + 's ' + animDef.easing + ' ' + i * animDef.speed + 's'; 286 | // Go! 287 | path.style.strokeDashoffset = '0'; 288 | } 289 | } 290 | 291 | function reset(el) { 292 | Array.prototype.slice.call(el.parentNode.querySelectorAll('svg > path')).forEach(function (el) { 293 | el.parentNode.removeChild(el); 294 | }); 295 | } 296 | 297 | function resetRadio(el) { 298 | Array.prototype.slice.call(document.querySelectorAll('input[type="radio"][name="' + el.getAttribute('name') + '"]')).forEach(function (el) { 299 | var path = el.parentNode.querySelector('svg > path'); 300 | if (path) { 301 | path.parentNode.removeChild(path); 302 | } 303 | }); 304 | } 305 | 306 | } 307 | 308 | }); 309 | 310 | // This displays the current question AND the choices 311 | function displayCurrentQuestion() { 312 | 313 | console.log("In display current Question"); 314 | 315 | var question = questions[currentQuestion].question; 316 | var questionClass = $(document).find(".quizContainer > .question"); 317 | var choiceList = $(document).find(".quizContainer > .choiceList"); 318 | var numChoices = questions[currentQuestion].choices.length; 319 | 320 | // Set the questionClass text to the current question 321 | $(questionClass).text(question); 322 | 323 | // Remove all current
  • elements (if any) 324 | $(choiceList).find("li").remove(); 325 | 326 | var choice; 327 | for (i = 0; i < numChoices; i++) { 328 | choice = questions[currentQuestion].choices[i]; 329 | $('
    • ').appendTo(choiceList); 330 | } 331 | } 332 | 333 | function resetQuiz() { 334 | currentQuestion = 0; 335 | correctAnswers = 0; 336 | $(document).find(".choiceList").show(); 337 | 338 | hideScore(); 339 | 340 | } 341 | 342 | function displayScore() { 343 | $(document).find(".quizContainer > .result").text("You scored " + correctAnswers + " out of " + questions.length); 344 | $(document).find(".quizContainer > .result").show(); 345 | $(document).find('.question').text("Quiz Finished"); 346 | $(document).find(".choiceList").hide(); 347 | } 348 | 349 | function hideScore() { 350 | $(document).find(".result").hide(); 351 | } -------------------------------------------------------------------------------- /Interactive Quiz App/js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(m.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={},o={},p={},q=[],r=q.slice,s,t=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | Loan Calculator 12 | 13 | 14 | 15 | 16 | 17 |
    18 |

    Loan Calculator

    19 | 20 |

    21 | 22 | 23 |

    25 | 26 | 27 |

    29 | 30 |

    31 |
    32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Loan Calculator App/loancalculator.js: -------------------------------------------------------------------------------- 1 | function computeLoan(){ 2 | var amount = document.getElementById('amount').value; 3 | var interest_rate = document.getElementById('interest_rate').value; 4 | var months = document.getElementById('months').value; 5 | var interest = (amount * (interest_rate * .01)) / months; 6 | var payment = ((amount / months) + interest).toFixed(2); 7 | payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 8 | 9 | document.getElementById('payment').innerHTML = "Monthly Payment = $"+payment; 10 | } -------------------------------------------------------------------------------- /Loan Calculator App/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Lato', Arial, sans-serif; 5 | font-size: 100%; 6 | line-height: 1.25; 7 | color: #FFF; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | background: #fb887c; 13 | color: rgba(24, 18, 18, 0.45); 14 | } 15 | 16 | h1 { 17 | width: 100%; 18 | font-size: 2em; 19 | margin: 0 auto; 20 | padding: 1em; 21 | text-align: center; 22 | } 23 | 24 | #loancal { 25 | margin: 1% auto 0; 26 | width: 65%; 27 | } 28 | 29 | input, 30 | textarea, 31 | select { 32 | line-height: 1.5; 33 | font-size: 1.4em; 34 | padding: 5px 10px; 35 | border: 2px solid #FFF; 36 | color: #fff; 37 | display: block; 38 | width: 100%; 39 | background: transparent; 40 | box-sizing: border-box; 41 | outline: 0; 42 | } 43 | 44 | label { 45 | margin: 3% 0 1%; 46 | position: relative; 47 | float: left; 48 | } 49 | 50 | .payment { 51 | font-size: 25px; 52 | text-align: center; 53 | margin: 3%; 54 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # [EN] Javascript: Basic Projects 3 | 4 | Basic Javascript projects to use in classrooms 5 | 6 | These projects cover the very basics of Javascript. You could use them as you like. 7 | 8 | ## License 9 | 10 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details 11 | 12 | # [PT] Javascript: Projetos básicos 13 | 14 | Projetos básicos em Javascript para utilizar em aula. 15 | 16 | Estes projetos cobrem o mais básico do Javascript. 17 | 18 | ## Licença 19 | 20 | Este projeto é distribuído sob o MIT License - veja o arquivo [LICENSE.md](LICENSE.md) para detalhes 21 | -------------------------------------------------------------------------------- /Rock Paper Scissors/app.js: -------------------------------------------------------------------------------- 1 | let userChosen 2 | let computerChosen 3 | const displayResult = document.getElementById('result'); 4 | const userChoice = document.getElementById('user-choice'); 5 | var result = results(); 6 | const possibleChoices = document.querySelectorAll('.choices'); 7 | const computerChoice = document.getElementById('computer-choice'); 8 | const randomNumber = Math.round(Math.random() * (3)); 9 | 10 | // Get users userChoice 11 | possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => { 12 | userChosen = e.target.id; 13 | generatedComputerChoice(); 14 | results(); 15 | userChoice.innerHTML = userChosen; 16 | computerChoice.innerHTML = computerChosen; 17 | displayResult.innerHTML = result; 18 | })) 19 | 20 | //Get a random computers choice 21 | function generatedComputerChoice() { 22 | if (randomNumber === 1) { 23 | return computerChosen = 'rock'; 24 | } else if (randomNumber === 2) { 25 | return computerChosen = 'paper'; 26 | } else if (randomNumber === 3) { 27 | return computerChosen = 'scissors'; 28 | } 29 | } 30 | 31 | function results() { 32 | if (computerChosen == userChosen) { 33 | return result = 'There was a tie!'; 34 | } else if (computerChosen === 'rock' && userChosen === 'paper') { 35 | return result = 'You lost!'; 36 | } else if (computerChosen === 'rock' && userChosen === 'scissors') { 37 | return result = 'You win!'; 38 | } else if (computerChosen === 'paper' && userChosen === 'rock') { 39 | return result = 'You lost!'; 40 | } else if (computerChosen === 'paper' && userChosen === 'scissors') { 41 | return result = 'You win!'; 42 | } else if (computerChosen === 'scissors' && userChosen === 'rock') { 43 | return result = 'You win!'; 44 | } else if (computerChosen === 'scissors' && userChosen === 'paper') { 45 | return result = 'You lost!'; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /Rock Paper Scissors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rock Paper Scissors 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    Rock Paper Scissor

    14 |
    15 |
    16 |

    Choose one

    17 | 18 | 19 | 20 |
    21 | 22 |
    23 |

    Computer Choice:

    24 |

    25 |
    26 | 27 |
    28 |

    Your Choice:

    29 |

    30 |
    31 | 32 |
    33 |

    Results:

    34 |

    35 |
    36 | 37 |
    38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Rock Paper Scissors/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Lato', Arial, sans-serif; 5 | font-size: 100%; 6 | line-height: 1.25; 7 | color: #FFF; 8 | box-sizing: border-box; 9 | text-align: center; 10 | } 11 | 12 | body { 13 | background: #26C281; 14 | color: rgba(0, 0, 0, 0.45); 15 | } 16 | 17 | .container { 18 | margin: 1% auto 0; 19 | width: 65%; 20 | display: flex; 21 | flex-direction: row; 22 | flex-wrap: wrap; 23 | } 24 | 25 | 26 | 27 | @media (max-width: 600px) { 28 | .container { 29 | margin: 5% auto 0; 30 | width: 75%; 31 | } 32 | } 33 | 34 | .container .block{ 35 | width: 48%; 36 | margin: 1%; 37 | } 38 | 39 | .container .block:first-child, .container .block:last-child { 40 | width: 90%; 41 | margin: 3% 1%; 42 | } 43 | 44 | h1 { 45 | width: 100%; 46 | font-size: 2em; 47 | text-align: center; 48 | margin: 2% auto; 49 | } 50 | 51 | h2 { 52 | width: 100%; 53 | font-size: 1em; 54 | text-align: center; 55 | margin: 2% auto; 56 | } 57 | 58 | button { 59 | min-width: 100px; 60 | border: 1px solid #FFF; 61 | background: transparent; 62 | padding: 1%; 63 | cursor: pointer; 64 | width: 32%; 65 | box-sizing: border-box; 66 | outline:0; 67 | } 68 | 69 | button:hover { 70 | color: #26C281; 71 | background: #FFF; 72 | } 73 | 74 | -------------------------------------------------------------------------------- /Todo List App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic To Do App with Javascript 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    Todo List

    14 |
    15 |
    16 | 17 | 18 |
    19 | 20 |
    21 |
    22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Todo List App/script.js: -------------------------------------------------------------------------------- 1 | function get_todos() { 2 | var todos = new Array; 3 | var todos_str = localStorage.getItem('todo'); 4 | if (todos_str !== null) { 5 | todos = JSON.parse(todos_str); 6 | } 7 | return todos; 8 | } 9 | 10 | function add() { 11 | var task = document.getElementById('task').value; 12 | 13 | var todos = get_todos(); 14 | todos.push(task); 15 | localStorage.setItem('todo', JSON.stringify(todos)); 16 | 17 | show(); 18 | 19 | return false; 20 | } 21 | 22 | function clearDefault(a) { 23 | if (a.defaultValue==a.value) {a.value=""} 24 | 25 | }; 26 | function remove() { 27 | var id = this.getAttribute('id'); 28 | var todos = get_todos(); 29 | todos.splice(id, 1); 30 | localStorage.setItem('todo', JSON.stringify(todos)); 31 | 32 | show(); 33 | 34 | return false; 35 | } 36 | 37 | function show() { 38 | var todos = get_todos(); 39 | 40 | var html = ''; 45 | 46 | document.getElementById('todos').innerHTML = html; 47 | 48 | var buttons = document.getElementsByClassName('remove'); 49 | for (var i=0; i < buttons.length; i++) { 50 | buttons[i].addEventListener('click', remove); 51 | }; 52 | } 53 | 54 | document.getElementById('add').addEventListener('click', add); 55 | show(); -------------------------------------------------------------------------------- /Todo List App/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Lato', Arial, sans-serif; 5 | font-size: 100%; 6 | line-height: 1.25; 7 | color: #FFF; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | background: #fb887c; 13 | color: rgba(0, 0, 0, 0.45); 14 | } 15 | 16 | 17 | h1 { 18 | width: 100%; 19 | font-size: 2em; 20 | text-align: center; 21 | } 22 | 23 | .container { 24 | margin: 1% auto 0; 25 | width: 65%; 26 | } 27 | 28 | header{ 29 | display: flex; 30 | flex-direction: row; 31 | flex-wrap: wrap; 32 | } 33 | 34 | .task { 35 | width: 80%; 36 | height: 100px; 37 | margin: 0 0 2% 0; 38 | font-size: 32px; 39 | color: #fff; 40 | outline: 0; 41 | box-sizing: border-box; 42 | text-align: center; 43 | border: 2px solid #FFF; 44 | background: transparent; 45 | } 46 | 47 | .add { 48 | width: 20%; 49 | height: 100px; 50 | margin: 0 0 2% 0; 51 | font-size: 32px; 52 | color: #26C281; 53 | outline: 0; 54 | box-sizing: border-box; 55 | text-align: center; 56 | border: 2px solid #FFF; 57 | background: #fff; 58 | cursor: pointer; 59 | } 60 | 61 | .remove { 62 | background-color: rgba(0,0,0,.095); 63 | float: right; 64 | clear: both; 65 | width: 30px; 66 | height: 30px; 67 | border-style: none; 68 | text-align: center; 69 | cursor: pointer; 70 | outline: 0; 71 | } 72 | 73 | .todos { 74 | width: 50%; 75 | min-width: 250px; 76 | max-width: 600px; 77 | margin: 2% auto; 78 | } 79 | 80 | .todos ul { 81 | list-style: none; 82 | text-align: left; 83 | line-height: 35px; 84 | } 85 | 86 | .todos ul li { 87 | margin: 1% 0 0; 88 | border: 1px solid #FFF; 89 | padding: 1%; 90 | height: 37px; 91 | } --------------------------------------------------------------------------------