This single page application can be used to explore and learn more about the Nobel Prizes. It was created by using HTML, CSS and JavaScript, and it uses data sourced from Nobel Prize API version 2.
This application is a minimum viable product (MVP), with the number of returned results limited to 25 per search. It provides three user interactions: light/dark mode, search and delete. The search results list the full name of the category and the award year for each Nobel Prize returned.
- HTML
- CSS
- JavaScript
- Nobel Prize API version 2
- Nobel Prize facts. NobelPrize.org. Nobel Prize Outreach AB 2023. Fri. 21 Apr 2023.
- Photo by Ivan Jevtic on Unsplash
- MDN, Your first form
- MDN, How to structure a web form
- MDN, Basic native form contols
- MDN, The HTML5 input types
- MDN, <select>: The HTML Select element
- W3docs, How to Change Cursor on Hover in CSS
- MDN, cursor
- MDN, <button>: The Button element
- W3Schools, Button type Property
- color-hex
- Adobe Color, Contrast Checker
- Material Design, Dark Theme
- Siteimprove, How to choose a font for accessibility
- Lorem ipsum
- W3Schools, How TO - Hero Image
- CSS-Tricks, Chris Coyier, A Complete Guide to Flexbox
- 'Responsive Web Design with HTML5 and CSS', Ben Frain, Fourth Edition, 2022, Packt Publishing
- Big Cat Creative, How to strategically use your website Footer: what you can (& should) include
- MDN, JavaScript basics
- MDN, What is JavaScript?
- Semrush Blog, Michelle Ofiwe, A Beginner's Guide to URL Parameters
- freeCode Camp, Kingsley Ubah, JavaScript Array.forEach() Tutorial - How to Iterate Through Elements in an Array
- W3Schools, HTML DOM Element appendChild()
- W3Schools, HTML DOM Element textContent
- Kelly Norton, innerText vs. textContent
- MDN, Node: textContent property
- MDN, Element: append() method
- MDN, NOde: appendChild() method
- JavaScript Tutorial, JavaScript CreateElement
- MDN, Element: classList property
- codeinwp blog, Louis Lazaris, Dark Mode Toggle Button with JavaScript
- W3Schools, How TO - Toggle Dark Mode
- W3Schools, How TO - Toggle Class
- W3Schools, HTML DOM ELement classList
- CSS-Tricks, Adhuham, A Complete Guide to Dark Mode on the Web
- Larry Sass-Ainsworth, Iterating over an HTML Collection in JavaScript
None