├── quiz-app ├── quiz.js ├── quiz.css └── quiz.html ├── emoji-maker ├── assets │ ├── skin │ │ ├── red.png │ │ ├── green.png │ │ └── yellow.png │ ├── eyes │ │ ├── long.png │ │ ├── closed.png │ │ ├── laughing.png │ │ ├── normal.png │ │ ├── rolling.png │ │ └── winking.png │ └── mouth │ │ ├── open.png │ │ ├── sad.png │ │ ├── smiling.png │ │ ├── teeth.png │ │ └── straight.png ├── emoji.css └── emoji.html ├── watch-page ├── player.js ├── player.css └── player.html ├── index.html ├── index.css └── multi-step-form ├── form.css └── form.html /quiz-app/quiz.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | console.log('Script Loaded'); 3 | }); -------------------------------------------------------------------------------- /emoji-maker/assets/skin/red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/skin/red.png -------------------------------------------------------------------------------- /emoji-maker/assets/eyes/long.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/eyes/long.png -------------------------------------------------------------------------------- /emoji-maker/assets/mouth/open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/mouth/open.png -------------------------------------------------------------------------------- /emoji-maker/assets/mouth/sad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/mouth/sad.png -------------------------------------------------------------------------------- /emoji-maker/assets/skin/green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/skin/green.png -------------------------------------------------------------------------------- /emoji-maker/assets/eyes/closed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/eyes/closed.png -------------------------------------------------------------------------------- /emoji-maker/assets/eyes/laughing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/eyes/laughing.png -------------------------------------------------------------------------------- /emoji-maker/assets/eyes/normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/eyes/normal.png -------------------------------------------------------------------------------- /emoji-maker/assets/eyes/rolling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/eyes/rolling.png -------------------------------------------------------------------------------- /emoji-maker/assets/eyes/winking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/eyes/winking.png -------------------------------------------------------------------------------- /emoji-maker/assets/mouth/smiling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/mouth/smiling.png -------------------------------------------------------------------------------- /emoji-maker/assets/mouth/teeth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/mouth/teeth.png -------------------------------------------------------------------------------- /emoji-maker/assets/skin/yellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/skin/yellow.png -------------------------------------------------------------------------------- /emoji-maker/assets/mouth/straight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qaifikhan/JavaScript-Assessment-Starter-Files/HEAD/emoji-maker/assets/mouth/straight.png -------------------------------------------------------------------------------- /watch-page/player.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | function createPlaylistCard(obj, pos) { 3 | //
4 | // 5 | //

The Heart of Soba

6 | //
7 | 8 | var mainDiv = document.createElement('div'); 9 | mainDiv.id = 'card' + obj.id; 10 | mainDiv.className = 'playlist-card'; 11 | 12 | var thumbnail = document.createElement('img'); 13 | thumbnail.src = obj.thumbnail; 14 | thumbnail.className = 'thumbnail'; 15 | 16 | var title = document.createElement('h3'); 17 | title.className = 'video-card-title'; 18 | title.innerHTML = obj.title; 19 | 20 | mainDiv.appendChild(thumbnail); 21 | mainDiv.appendChild(title); 22 | 23 | return mainDiv; 24 | } 25 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | JavaScript - Assessment 10 | 11 | 12 | 13 |
14 |
15 |

JavaScript Assessment

16 |
17 |
18 |

Emoji Maker

 19 |
20 |
21 |

Quiz App

 22 |
23 |
24 |

Watch Page

 25 |
26 |
27 |

Multi-Step Form

 28 |
29 |
30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Source Sans Pro', sans-serif; 4 | background-color: #54c3ef; 5 | } 6 | 7 | #main-heading { 8 | font-family: 'Caveat Brush', cursive; 9 | font-size: 90px; 10 | text-align: center; 11 | color: #fff748; 12 | text-shadow: 2px 5px #2b3252; 13 | margin: 0; 14 | animation: shake 2s infinite; 15 | } 16 | 17 | @keyframes shake { 18 | 0% { 19 | transform: rotate(1deg); 20 | } 21 | 22 | 25% { 23 | transform: rotate(0deg); 24 | } 25 | 26 | 50% { 27 | transform: rotate(-1deg); 28 | } 29 | 30 | 75% { 31 | transform: rotate(0deg); 32 | } 33 | 34 | 100% { 35 | transform: rotate(1deg); 36 | } 37 | } 38 | 39 | #main-container { 40 | width: 100%; 41 | height: 100vh; 42 | padding: 4% 8%; 43 | box-sizing: border-box; 44 | } 45 | 46 | #card-wrapper { 47 | height: 90%; 48 | display: flex; 49 | justify-content: center; 50 | align-items: center; 51 | } 52 | 53 | .problem-card { 54 | width: 200px; 55 | height: 200px; 56 | border-radius: 8px; 57 | margin: 16px; 58 | text-align: center; 59 | background-color: #2b3252; 60 | padding: 24px; 61 | 62 | display: inline-flex; 63 | justify-content: center; 64 | align-items: center; 65 | } 66 | 67 | .problem-card:nth-child(odd) { 68 | background-color: #fff748; 69 | color: #2b3252 70 | } 71 | 72 | .problem-card:nth-child(even) { 73 | background-color: #2b3252; 74 | color: #fff748; 75 | } 76 | 77 | .problem-card a { 78 | text-decoration: none; 79 | color: unset; 80 | } 81 | 82 | .problem-card p { 83 | font-weight: 700; 84 | font-size: 36px; 85 | } -------------------------------------------------------------------------------- /watch-page/player.css: -------------------------------------------------------------------------------- 1 | html { 2 | scroll-behavior: smooth; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: 'Source Sans Pro', sans-serif; 8 | background-color: #54c3ef; 9 | } 10 | 11 | #main-heading { 12 | font-family: 'Caveat Brush', cursive; 13 | font-size: 90px; 14 | text-align: center; 15 | color: #fad744; 16 | text-shadow: 2px 5px #2b3252; 17 | margin: 0; 18 | } 19 | 20 | #main-container { 21 | width: 100%; 22 | min-height: 100vh; 23 | padding: 4% 16%; 24 | box-sizing: border-box; 25 | } 26 | 27 | #back-to-homepage { 28 | position: absolute; 29 | top: 24px; 30 | left: 24px; 31 | color: #fff748; 32 | font-size: 20px; 33 | text-decoration: underline; 34 | } 35 | 36 | #player-section { 37 | width: 100%; 38 | background-color: white; 39 | border-radius: 6px; 40 | padding: 16px; 41 | box-sizing: border-box; 42 | margin-top: 36px; 43 | 44 | display: flex; 45 | justify-content: space-between; 46 | } 47 | 48 | #player-wrapper { 49 | width: 70%; 50 | padding-right: 16px; 51 | border-right: 1px solid #ccc; 52 | } 53 | 54 | #player-wrapper iframe { 55 | width: 100%; 56 | height: 400px; 57 | } 58 | 59 | #video-title { 60 | font-size: 36px; 61 | margin-top: 16px; 62 | margin-bottom: 16px; 63 | border-top: 1px solid #ccc; 64 | padding-top: 16px; 65 | } 66 | 67 | #video-description { 68 | font-size: 20px; 69 | letter-spacing: 1px; 70 | line-height: 1.3; 71 | margin-top: 0; 72 | color: rgba(0, 0, 0, 0.7); 73 | } 74 | 75 | #video-actions { 76 | display: flex; 77 | justify-content: space-between; 78 | align-items: center; 79 | } 80 | 81 | #video-actions p { 82 | font-size: 24px; 83 | color: rgba(0, 0, 0, 0.7); 84 | margin: 0; 85 | margin-top: 16px; 86 | } 87 | 88 | #video-actions i { 89 | font-size: 24px; 90 | color: rgba(0, 0, 0, 0.7); 91 | margin-right: 20px; 92 | margin-top: 16px; 93 | cursor: pointer; 94 | } 95 | 96 | #playlist-wrapper { 97 | width: 30%; 98 | margin-left: 16px; 99 | } 100 | 101 | .playlist-card { 102 | width: 100%; 103 | border-radius: 6px; 104 | border: 1px solid #ccc; 105 | cursor: pointer; 106 | margin-bottom: 16px; 107 | box-sizing: border-box; 108 | } 109 | 110 | .active-card { 111 | border: 4px solid #fad744; 112 | } 113 | 114 | .thumbnail { 115 | display: block; 116 | width: 100%; 117 | border-top-left-radius: 6px; 118 | border-top-right-radius: 6px; 119 | } 120 | 121 | .video-card-title { 122 | font-size: 18px; 123 | font-weight: 600; 124 | margin: 0; 125 | padding: 16px; 126 | } -------------------------------------------------------------------------------- /emoji-maker/emoji.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Source Sans Pro', sans-serif; 4 | /* background-color: #78909c; */ 5 | background-color: #54c3ef; 6 | } 7 | 8 | #main-heading { 9 | font-family: 'Caveat Brush', cursive; 10 | font-size: 90px; 11 | text-align: center; 12 | color: #fff748; 13 | text-shadow: 2px 5px #2b3252; 14 | margin: 0; 15 | } 16 | 17 | #main-container { 18 | width: 100%; 19 | height: 100vh; 20 | padding: 4% 8%; 21 | box-sizing: border-box; 22 | } 23 | 24 | #card-wrapper { 25 | height: 90%; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | } 30 | 31 | .card { 32 | width: 50%; 33 | height: 300px; 34 | border-radius: 8px; 35 | margin: 16px; 36 | text-align: center; 37 | background-color: #2b3252; 38 | padding: 24px; 39 | } 40 | 41 | .left-card { 42 | background-color: #fff748; 43 | color: #2b3252; 44 | position: relative; 45 | } 46 | 47 | .left-card h3 { 48 | color: #2b3252; 49 | font-size: 36px; 50 | margin-bottom: 32px; 51 | } 52 | 53 | .left-card > div { 54 | display: flex; 55 | justify-content: center; 56 | align-items: center; 57 | } 58 | 59 | .left-card > div > img { 60 | width: 100px; 61 | margin: 16px; 62 | cursor: pointer; 63 | } 64 | 65 | .next-step { 66 | font-size: 36px; 67 | cursor: pointer; 68 | position: absolute; 69 | top: 50%; 70 | right: 24px; 71 | transform: translateY(-50%); 72 | } 73 | 74 | .previous-step { 75 | font-size: 36px; 76 | cursor: pointer; 77 | position: absolute; 78 | top: 50%; 79 | left: 24px; 80 | transform: translateY(-50%); 81 | } 82 | 83 | #select-eyes-card h3 { 84 | margin-bottom: 16px; 85 | } 86 | 87 | #select-eyes-card img { 88 | width: 70px; 89 | background-color: white; 90 | border-radius: 8px; 91 | box-shadow: 0 2px 5px #ccc; 92 | } 93 | 94 | #select-mouth-card h3 { 95 | margin-bottom: 16px; 96 | } 97 | 98 | #select-mouth-card img { 99 | width: 70px; 100 | background-color: white; 101 | border-radius: 8px; 102 | box-shadow: 0 2px 5px #ccc; 103 | } 104 | 105 | .right-card { 106 | background-color: #2b3252; 107 | color: #fff748; 108 | display: inline-flex; 109 | justify-content: center; 110 | align-items: center; 111 | } 112 | 113 | #emoji { 114 | position: relative; 115 | width: 220px; 116 | height: 220px; 117 | } 118 | 119 | #skin { 120 | width: 100%; 121 | position: absolute; 122 | top: 0; 123 | left: 0; 124 | z-index: 0; 125 | } 126 | 127 | #eyes { 128 | width: 100%; 129 | top: 0px; 130 | left: 0; 131 | position: absolute; 132 | z-index: 5; 133 | } 134 | 135 | #mouth { 136 | width: 100%; 137 | top: 0px; 138 | left: 0; 139 | position: absolute; 140 | z-index: 5; 141 | } 142 | 143 | #back-to-homepage { 144 | position: absolute; 145 | top: 24px; 146 | left: 24px; 147 | color: #fff748; 148 | font-size: 20px; 149 | text-decoration: underline; 150 | } 151 | 152 | #select-skin-card { 153 | display: block; 154 | } 155 | 156 | #select-eyes-card { 157 | display: none; 158 | } 159 | 160 | #select-mouth-card { 161 | display: none; 162 | } -------------------------------------------------------------------------------- /emoji-maker/emoji.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | The Emoji Maker 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Back to Home 17 |

The Emoji Maker

18 |
19 |
20 |

Select Color

21 |
22 | 23 | 24 | 25 |
26 | 27 |
28 |
29 |

Select Eyes

30 |
31 | 32 | 33 | 34 |
35 |
36 | 37 | 38 | 39 |
40 | 41 | 42 |
43 |
44 |

Select Mouth

45 |
46 | 47 | 48 | 49 |
50 |
51 | 52 | 53 |
54 | 55 |
56 | 57 |
58 |
59 | 60 | 61 | 62 |
63 |
64 |
65 |
66 |
67 | 68 | -------------------------------------------------------------------------------- /multi-step-form/form.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Source Sans Pro', sans-serif; 4 | background-color: #54c3ef; 5 | } 6 | 7 | #main-heading { 8 | font-family: 'Caveat Brush', cursive; 9 | font-size: 90px; 10 | text-align: center; 11 | color: #fff748; 12 | text-shadow: 2px 5px #2b3252; 13 | margin: 0; 14 | } 15 | 16 | #main-container { 17 | width: 100%; 18 | height: 100vh; 19 | padding: 4% 8%; 20 | box-sizing: border-box; 21 | } 22 | 23 | #back-to-homepage { 24 | position: absolute; 25 | top: 24px; 26 | left: 24px; 27 | color: #fff748; 28 | font-size: 20px; 29 | text-decoration: underline; 30 | } 31 | 32 | #form-container { 33 | height: 90%; 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | } 38 | 39 | form{ 40 | width: 40%; 41 | background-color: #2b3252; 42 | border-radius: 10px; 43 | } 44 | 45 | .FormContainer{ 46 | border: 1px solid #ccc; 47 | border-radius: 10px; 48 | padding: 1em; 49 | margin: 1em; 50 | box-sizing: border-box; 51 | } 52 | 53 | .FormGroup{ 54 | margin: 1em; 55 | padding: 0.5em; 56 | position: relative; 57 | box-sizing: border-box; 58 | } 59 | 60 | legend{ 61 | color: #fff; 62 | font-size: 20px; 63 | } 64 | 65 | #SecondLegend{ 66 | text-align: center; 67 | } 68 | 69 | #ThirdLegend{ 70 | text-align: right; 71 | } 72 | 73 | .FormGroup > label{ 74 | color: #fff; 75 | font-size: 1.2em; 76 | margin-bottom: 0.5em; 77 | } 78 | 79 | .FormGroup > input{ 80 | width: 100%; 81 | margin-top: 10px; 82 | border: none; 83 | outline: none; 84 | background: #fff; 85 | color: #000; 86 | font-size: 1em; 87 | padding: 0.5em 1em; 88 | box-sizing: border-box; 89 | border-radius: 5px; 90 | } 91 | 92 | .FormGroup > select{ 93 | width: 100%; 94 | border: 1px solid #ccc; 95 | font-size: 1em; 96 | margin-top: 0.5em; 97 | padding: 0.5em 0.5em; 98 | border-radius: 5px; 99 | } 100 | 101 | .FormGroup > textarea{ 102 | resize: none; 103 | width: 100%; 104 | font-size: 1em; 105 | font-family: sans-serif; 106 | margin-top: 10px; 107 | border: none; 108 | outline: none; 109 | padding: 0.5em 1em; 110 | box-sizing: border-box; 111 | border-radius: 5px; 112 | } 113 | 114 | .FormGroupButtons{ 115 | padding: 1em; 116 | display: flex; 117 | flex-direction: row; 118 | justify-content: space-between; 119 | } 120 | 121 | #StepOneContainer > .FormGroupButtons{ 122 | justify-content: flex-end; 123 | } 124 | 125 | button{ 126 | border: 1px solid #ccc; 127 | background: transparent; 128 | color: #2b3252; 129 | padding: 12px 24px; 130 | border-radius: 5px; 131 | font-size: 0.95em; 132 | outline: none; 133 | cursor: pointer; 134 | background-color: #fff748; 135 | border: 0; 136 | } 137 | 138 | button:active{ 139 | background: #fff; 140 | color: #000; 141 | } 142 | 143 | #StepOneContainer{ 144 | display: block; 145 | } 146 | #StepTwoContainer, #StepThreeContainer{ 147 | display: none; 148 | } 149 | 150 | .ErrorText{ 151 | color: #ff4949; 152 | font-family: sans-serif; 153 | font-size: 0.9em; 154 | position: absolute; 155 | margin: 0px; 156 | margin-top: 4px; 157 | display: none; 158 | } 159 | 160 | #SuccessContainer{ 161 | border: 1px solid #ccc; 162 | border-radius: 10px; 163 | width: 30%; 164 | background-color: #2b3252; 165 | color: #fff748; 166 | height: 300px; 167 | display: flex; 168 | flex-direction: column; 169 | justify-content: center; 170 | align-items: center; 171 | display: none; 172 | } 173 | 174 | #SuccessContainer h3{ 175 | font-size: 1.3em; 176 | font-weight: normal; 177 | letter-spacing: 0.4px; 178 | text-align: center; 179 | } -------------------------------------------------------------------------------- /quiz-app/quiz.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Source Sans Pro', sans-serif; 4 | background-color: #54c3ef; 5 | } 6 | 7 | #main-heading { 8 | font-family: 'Caveat Brush', cursive; 9 | font-size: 90px; 10 | text-align: center; 11 | color: #fad744; 12 | text-shadow: 2px 5px #2b3252; 13 | margin: 0; 14 | } 15 | 16 | #main-container { 17 | width: 100%; 18 | height: 100vh; 19 | padding: 4% 8%; 20 | box-sizing: border-box; 21 | } 22 | 23 | #main-div { 24 | display: flex; 25 | flex-direction: start; 26 | } 27 | 28 | #score-wrapper { 29 | width: 100%; 30 | height: 300px; 31 | max-width: 200px; 32 | background-color: white; 33 | border-radius: 8px; 34 | box-shadow: 0 2px 5px #ccc; 35 | margin-top: 32px; 36 | 37 | box-sizing: border-box; 38 | padding: 48px 32px; 39 | font-size: 28px; 40 | 41 | position: sticky; 42 | top: 16px; 43 | } 44 | 45 | #score-wrapper p { 46 | font-size: 48px; 47 | font-weight: 600; 48 | margin-top: 20px; 49 | } 50 | 51 | #quiz-wrapper { 52 | width: 100%; 53 | max-width: 800px; 54 | margin: 32px auto; 55 | margin-right: 16px; 56 | 57 | box-sizing: border-box; 58 | padding: 24px; 59 | border-radius: 8px; 60 | background-color: #2b3252; 61 | color: #fad744; 62 | text-align: center; 63 | } 64 | 65 | .quiz-item { 66 | padding-bottom: 36px; 67 | border-bottom: 1px solid #fad744; 68 | text-align: left; 69 | } 70 | 71 | .quiz-item h3 { 72 | font-size: 24px; 73 | margin-bottom: 16px; 74 | } 75 | 76 | .option-wrapper { 77 | padding-bottom: 8px; 78 | margin-bottom: 8px; 79 | } 80 | 81 | /* .correct { 82 | background-color: rgba(0, 255, 0 , 0.1); 83 | border: 1px solid green; 84 | border-radius: 8px; 85 | } 86 | 87 | .incorrect { 88 | background-color: rgba(255, 0, 0 , 0.1); 89 | border: 1px solid red; 90 | border-radius: 8px; 91 | } */ 92 | 93 | .option-wrapper p { 94 | display: inline-block; 95 | font-size: 20px; 96 | margin: 8px 0 0 6px; 97 | cursor: pointer; 98 | } 99 | 100 | #btn-submit { 101 | padding: 12px 24px; 102 | color: #2b3252; 103 | font-size: 24px; 104 | border: 0; 105 | border-radius: 8px; 106 | cursor: pointer; 107 | margin-top: 48px; 108 | background-color: #fad744; 109 | } 110 | 111 | #back-to-homepage { 112 | position: absolute; 113 | top: 24px; 114 | left: 24px; 115 | color: #fff748; 116 | font-size: 20px; 117 | text-decoration: underline; 118 | } 119 | 120 | #modal-wrapper { 121 | display: none; 122 | width: 100%; 123 | height: 100vh; 124 | position: absolute; 125 | top: 0; 126 | left: 0; 127 | box-sizing: border-box; 128 | } 129 | 130 | #backdrop { 131 | width: 100vw; 132 | height: 100vh; 133 | position: fixed; 134 | background-color: rgba(0, 0, 0, 0.8); 135 | z-index: 10; 136 | cursor: pointer; 137 | } 138 | 139 | #result-modal { 140 | width: 100%; 141 | height: 400px; 142 | max-width: 600px; 143 | background-color: white; 144 | box-shadow: 0 2px 5px #ccc; 145 | border-radius: 8px; 146 | z-index: 20; 147 | 148 | display: flex; 149 | flex-direction: column; 150 | justify-content: center; 151 | align-items: center; 152 | 153 | position: fixed; 154 | top: 50%; 155 | left: 50%; 156 | transform: translate(-50%, -50%); 157 | } 158 | 159 | #result-modal h3 { 160 | font-size: 32px; 161 | font-weight: 500; 162 | margin-bottom: 0; 163 | } 164 | 165 | 166 | #result-modal span { 167 | font-size: 60px; 168 | font-weight: 800; 169 | } 170 | 171 | .correct-answer { 172 | border: 1px solid green; 173 | background-color: rgba(0, 255, 0, 0.2); 174 | border-radius: 8px; 175 | } 176 | 177 | .incorrect-answer { 178 | border: 1px solid red; 179 | background-color: rgba(255, 0, 0, 0.2); 180 | border-radius: 8px; 181 | } -------------------------------------------------------------------------------- /watch-page/player.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Video Player 8 | 9 | 10 | 14 | 15 | 16 | 17 |
18 |
19 | Back to Home 20 |

The Video Player

21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 |

98.4k views

29 | 30 |
31 | 32 | 33 | 34 |
35 |
36 |

Croissants | Flour and Stone

37 |

There is no other way but to commit wholeheartedly to a relationship with a croissant. We have all found ourselves at the mercy of its allure. Here, in another epic film by the uber talented Nathan Rodger, our Erin divulges her personal romance with The Croissant.

38 |
39 |
40 | 41 |
42 |
43 | 44 |

Croissants | Flour and Stone

45 |
46 | 47 |
48 | 49 |

Perfect Mashed Potatoes and Gravy

50 |
51 | 52 |
53 | 54 |

The Heart of Soba

55 |
56 | 57 |
58 | 59 |

Grilled Cheese 9 Ways

60 |
61 | 62 |
63 | 64 |

Pineapple Cheesecake

65 |
66 | 67 |
68 | 69 |

Lemony Chicken Noodle Soup

70 |
71 |
72 |
73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /multi-step-form/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | The Multi-Step Form 10 | 11 | 12 | 13 | 14 |
15 |
16 | Back to Home 17 |

The Multi-Step Form

18 |
19 |
20 | 21 |
22 | Step: 1 23 |
24 | 25 | 26 |

Please enter a valid first name.

27 |
28 |
29 | 30 | 31 |

Please enter a valid last name

32 |
33 |
34 | 35 | 36 |

Please enter a valid Email

37 |
38 |
39 | 40 |
41 | 42 |
43 | 44 | 45 |
46 | Step: 2 47 |
48 | 49 | 50 |

Please enter a valid contact

51 |
52 |
53 | 54 | 55 |

Please enter a valid City

56 |
57 |
58 | 59 | 60 |

Please enter a valid Country

61 |
62 | 63 |
64 | 65 | 66 |
67 |
68 | 69 | 70 |
71 | Step: 3 72 |
73 | 74 | 80 |

Please select a program

81 |
82 |
83 | 84 | 85 |

Please enter a message

86 |
87 |
88 | 89 | 90 |
91 |
92 |
93 | 94 | 95 |
96 |

Your form has been
submitted successfully!

97 |
98 |
99 |
100 |
101 | 102 | 103 | -------------------------------------------------------------------------------- /quiz-app/quiz.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | The Quiz App 9 | 10 | 14 | 15 | 16 |
17 |
18 | Back to Home 19 | 26 |

The Quiz App

27 |
28 |
29 |
30 |
31 |

Q1.Which was not one of Voldemort's Horcruxes?

32 |
33 | 37 |
38 |
39 | 43 |
44 |
45 | 49 |
50 |
51 | 55 |
56 |
57 |
58 |

Q2. Which of these are not one of Hagrid's many pets?

59 |
60 | 64 |
65 |
66 | 70 |
71 |
72 | 76 |
77 |
78 | 82 |
83 |
84 |
85 |

Q3. Which class did Severus Snape always want to teach?

86 |
87 | 91 |
92 |
93 | 97 |
98 |
99 | 103 |
104 |
105 | 109 |
110 |
111 |
112 |

Q4. Which Hogwarts house did Moaning Myrtle belong in?

113 |
114 | 118 |
119 |
120 | 124 |
125 |
126 | 130 |
131 |
132 | 136 |
137 |
138 |
139 |

Q5. What class did Neville end up teaching at Hogwarts?

140 |
141 | 145 |
146 |
147 | 151 |
152 |
153 | 157 |
158 |
159 | 163 |
164 |
165 | 166 | 169 |
170 |
171 | 172 |
173 | Score: 174 |

0/5

175 |
176 |
177 | 178 |
179 |
180 | 181 | 182 | 183 | --------------------------------------------------------------------------------