+1

index.html

reviewed

··· 58 58 </div> 59 59 60 60 <div class="options"></div> 61 61 + <div class="image selector">Display Images on Result: </div> 61 62 <div class="results"></div> 62 63 63 64 <div class="info">

+8

src/css/styles.css

reviewed

··· 164 164 width: 100%; 165 165 } 166 166 167 167 + .image.selector { 168 168 + margin-top: 0.5em; 169 169 + width: 500px; 170 170 + display: none; 171 171 + text-align: center; 172 172 + font-size: 0.75em; 173 173 + } 174 174 + 167 175 .results { 168 176 font-size: 0.75em; 169 177 display: flex;

+18 -1

src/js/main.js

reviewed

··· 68 68 document.querySelector('.finished.getimg.button').addEventListener('click', generateImage); 69 69 document.querySelector('.finished.list.button').addEventListener('click', generateTextList); 70 70 71 71 + document.querySelector('.image.selector').insertAdjacentElement('beforeend', document.createElement('select')); 72 72 + 73 73 + for (let i = 1; i <= 10; i++) { 74 74 + const select = document.createElement('option'); 75 75 + select.value = i; 76 76 + select.text = i; 77 77 + if (i === 3) { select.selected = 'selected'; } 78 78 + document.querySelector('.image.selector > select').insertAdjacentElement('beforeend', select); 79 79 + } 80 80 + 81 81 + document.querySelector('.image.selector > select').addEventListener('input', (e) => { 82 82 + const imageNum = e.target.options[e.target.selectedIndex].value; 83 83 + result(Number(imageNum)); 84 84 + }); 85 85 + 71 86 setLatestDataset(); 72 87 73 88 /** Decode query string if available. */ ··· 385 400 * @param {number} [imageNum=3] Number of images to display. Defaults to 3. 386 401 */ 387 402 function result(imageNum = 3) { 388 388 - document.querySelectorAll('.sorting.button').forEach(el => el.style.display = 'none'); 389 403 document.querySelectorAll('.finished.button').forEach(el => el.style.display = 'block'); 404 404 + document.querySelector('.image.selector').style.display = 'block'; 405 405 + 406 406 + document.querySelectorAll('.sorting.button').forEach(el => el.style.display = 'none'); 390 407 document.querySelectorAll('.sort.text').forEach(el => el.style.display = 'none'); 391 408 document.querySelector('.options').style.display = 'none'; 392 409 document.querySelector('.info').style.display = 'none';