API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 22nd, 2017
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.06 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>Nogal random blog</title>
  4. <style>
  5. body{
  6. background: ##ECE9E6; /* fallback for old browsers */
  7. background: -webkit-linear-gradient(to left, #ECE9E6 , #FFFFFF); /* Chrome 10-25, Safari 5.1-6 */
  8. background: linear-gradient(to left, #ECE9E6 , #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  9. width:90%;
  10. text-align:center;
  11. }
  12. #mainContent {
  13. background: #0B486B; /* fallback for old browsers */
  14. background: -webkit-linear-gradient(to left, #0B486B , #F56217); /* Chrome 10-25, Safari 5.1-6 */
  15. background: linear-gradient(to left, #0B486B , #F56217); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  16. border-radius:25px;
  17. color:white;
  18. display:inline-block;
  19. margin-top:20px;
  20. margin-left:-100px;
  21. padding:20px;
  22. text-align:center;
  23. width:700px;
  24. }
  25.  
  26. #topPosts {
  27. border:3px solid black;
  28. border-radius:25px;
  29. float:left;
  30. margin:20px;
  31. width:500px;
  32. display:inline-block;
  33. text-align:left;
  34. }
  35.  
  36. #topPosts p, h2 {
  37. margin-left:10px;
  38. }
  39.  
  40. .blogContent {
  41. text-align:left;
  42. }
  43.  
  44. a {
  45. color:black;
  46. }
  47.  
  48. p {
  49.  
  50. }
  51.  
  52. img {
  53. float:right;
  54. margin-left:20px;
  55. width:60%;
  56. }
  57. </style>
  58. </head>
  59.  
  60. <body>
  61. <div id="topPosts">
  62. <h2>Best beoordeelde blogposts:</h2>
  63. </div>
  64.  
  65. <div id="mainContent">
  66. </div>
  67.  
  68. <script>
  69. var functions = {
  70. render: function(object) {
  71. if(object.image == undefined){
  72. return "<h2>" + object.title + "</h2>" + object.bodyText + object.link + object.author + "rank: " + object.ranking + "<p>" + object.comments[0].inhoud + "</p>";
  73. } else {
  74. return "<h2>" + object.title + "</h2>" + object.image + object.bodyText + object.link + object.author + "rank: " + object.ranking + "<p>" + object.comments[0].inhoud + "</p>";
  75. }
  76. },
  77.  
  78. showAllPosts: function() {
  79. var blogPosts = [myBlogPosting1, myBlogPosting2, myBlogPosting3, myBlogPosting4, myBlogPosting5, myBlogPosting6, myBlogPosting7, myBlogPosting8];
  80. var posts = ""
  81. for (var i = 0; i < blogPosts.length; i++){
  82. posts += this.render(blogPosts[i]) + "<br><br><hr>"
  83. }
  84. return posts
  85. functions.returnRank()
  86.  
  87. },
  88. returnRank: function() {
  89. var blogPosts = [myBlogPosting1, myBlogPosting2, myBlogPosting3, myBlogPosting4, myBlogPosting5, myBlogPosting6, myBlogPosting7, myBlogPosting8];
  90. var ratings = "<h2>Best beoordeelde blogposts</h2>"
  91. for (var i = 0; i < blogPosts.length; i++){
  92. if( blogPosts[i].ranking < 3 ) {
  93. null
  94. }
  95. else if( blogPosts[i].ranking >= 3 && blogPosts[i].ranking !== 5 ) {
  96. ratings+= "<p>" + blogPosts[i].title + " &#9733;".repeat(blogPosts[i].ranking) + "</p>"
  97. }
  98. else if( blogPosts[i].ranking == 5 ) {
  99. ratings += "<p>" + "<b>" + blogPosts[i].title + " &#9733;".repeat(blogPosts[i].ranking) + "</b>" + "</p>"
  100. }
  101. }
  102. return ratings;
  103. }
  104. }
  105.  
  106. var myBlogPosting1 = {
  107. title: "Google launches underwater Street View",
  108. bodyText: "<p class = 'blogContent'>Today Google Maps unveils a new Street View feature: " +
  109. "underwater panoramic views of six special sea spots. " +
  110. "The idea is to create a virtual map of the oceans, " +
  111. "documenting the state of fragile ecosystems as they " +
  112. "change over time, and sharing a vivid experience of " +
  113. "part of our world that few humans get to see up close " +
  114. "and in person, in real life.</p>" +
  115. "<p class = 'blogContent'>The ocean collection on Google Street View is now " +
  116. "available at maps.google.com/ocean, and includes coral " +
  117. "reefs and the creatures who live in them, in Australia, " +
  118. "the Philippines and Hawaii.</p>",
  119. link: "<a href='http://boingboing.net/2012/09/25/google-launches-underwater-str.html'>Link to article</a>",
  120. author: "<p>Author: <b>Xeni Jardin</b></p>",
  121. image: "<img src='https://puu.sh/uRX6A/9b22e07652.jpg'>",
  122. ranking: 2,
  123. comments: [ { inhoud: "Leuk artikel!",
  124. naam: "Joost Klaassen",
  125. ranking: 4
  126. },
  127.  
  128. { inhoud: "Mooie foto, ga het zeker eens bekijken.",
  129. naam: "Piet van Dijk",
  130. ranking: 3
  131. }
  132. ]
  133. }
  134.  
  135. var myBlogPosting2 = {
  136. title: "Terug naar 2007: wat is er van de rijders terechtgekomen?",
  137. bodyText: "<p class = 'blogContent'>Met Max Verstappen, Carlos Sainz, Esteban Ocon en Stoffel Vandoorne " +
  138. "zijn er in de afgelopen twee jaar een aantal bijzondere talenten gedebuteerd, " +
  139. "van wie in de toekomst veel verwacht wordt. " +
  140. "Rond het jaar 2007 arriveerde er eveneens een grote lichting aan talentvolle rijders. " +
  141. "GPUpdate.net kijkt precies tien jaar terug in de tijd naar wie er destijds in Australië aan de start verschenen: " +
  142. "wat is er terechtgekomen van de coureurs van toen?</p>",
  143. link: "<a href='http://www.gpupdate.net/nl/f1-nieuws/350728/terug-naar-2007-wat-is-er-van-de-rijders-terechtgekomen/'>Link to article</a>",
  144. author: "<p>Author: <b>René Oudman</b></p>",
  145. image: "<img src='http://adn.gpupdate.net/news/300528.jpg'>",
  146. ranking: 4
  147. }
  148.  
  149. var myBlogPosting3 = {
  150. title: "Robben en Lens melden zich pas later bij Oranje",
  151. bodyText: "<p class = 'blogContent'>Arjen Robben en Jeremain Lens sluiten pas later aan bij het Nederlands elftal, " +
  152. "zo laat de KNVB weten. " +
  153. "De aanvaller van Bayern München kampt met een lichte voetblessure, " +
  154. "terwijl de aanvaller van Fenerbahçe vanwege trieste " +
  155. "familieomstandigheden nog niet is afgereisd naar Noordwijk.</p>" +
  156. "<p class = 'blogContent'>Lens zit in Suriname vanwege het overlijden van zijn vader en komt woensdag aan in Nederland. " +
  157. "Robben werd zondag in de slotfase van het competitieduel met Borussia Mönchengladbach naar de kant gehaald. " +
  158. "Hij meldt zich dinsdagmiddag bij de selectie van bondscoach Danny Blind. " +
  159. "De kans is groot dat Robben alleen het eerste duel met Bulgarije speelt en de oefeninterland tegen Italië niet hoeft te spelen.</p>",
  160. link: "<a href='http://www.voetbalzone.nl/doc.asp?uid=301960'>Link to article</a>",
  161. author: "<p>Author: <b>Voetbalzone.nl</b></p>",
  162. image: "<img src='http://static.voetbalzone.nl/images/photos/ori_576_324/11235763514235.jpg'>",
  163. ranking: 3,
  164. comments: [ { inhoud: "Leuk artikel!",
  165. naam: "Joost Klaassen",
  166. ranking: 4
  167. },
  168.  
  169. { inhoud: "Mooie foto, ga het zeker eens bekijken.",
  170. naam: "Piet van Dijk",
  171. ranking: 3
  172. }
  173. ]
  174. }
  175.  
  176. var myBlogPosting4 = {
  177. title: "Wat gebeurt er met de 3,5mm-jack?",
  178. bodyText: "<p class = 'blogContent'>Het is een hardnekkige mythe dat Apple altijd wil verrassen bij zijn productintroducties. " +
  179. "Voor de iPhone 7, met een presentatie in september 2016, " +
  180. "wilde de fabrikant juist dat het publiek en de makers van accessoires ruim van tevoren " +
  181. "op de hoogte waren van de grootste verandering. " +
  182. "Daarom kwam in november 2015 voor het eerst het gerucht naar buiten " +
  183. "dat Apple de geliefde 3,5mm-jack voor headsets wilde schrappen.</p>",
  184. link: "<a href='https://tweakers.net/reviews/5271/wat-gebeurt-er-met-de-3-komma-5mm-jack.html'>Link to article</a>",
  185. author: "<p>Author: <b>Arnoud Wokke</b></p>",
  186. ranking: 5,
  187. comments: [ { inhoud: "Leuk artikel!",
  188. naam: "Joost Klaassen",
  189. ranking: 4
  190. },
  191.  
  192. { inhoud: "Mooie foto, ga het zeker eens bekijken.",
  193. naam: "Piet van Dijk",
  194. ranking: 3
  195. }
  196. ]
  197. }
  198.  
  199. var myBlogPosting5 = {
  200. title: "Pinguïnpopulatie op Zuidpool veel groter dan gedacht",
  201. bodyText: "<p class = 'blogContent'>Er leven veel meer pinguïns op de Zuidpool dan wetenschappers tot nu toe dachten. " +
  202. "Tot dusver werd uitgegaan van 2,3 miljoen pinguïns in het oosten van Antarctica, " +
  203. "maar het blijken er 5,9 miljoen te zijn.</p>" +
  204. "<p class = 'blogContent'>Australische wetenschappers hebben de populatie op de Zuidpool " +
  205. "uitgebreid onderzocht door middel van videobeelden vanuit de lucht en op de grond. " +
  206. "Bij deze telling zijn voor het eerst niet-broedende adeliepinguïns, " +
  207. "een kleine zwart-witte soort, meegeteld. " +
  208. "De vorige tellingen focusten zich alleen op broedende pinguïns.</p>",
  209. link: "<a href='http://nos.nl/artikel/2164212-pinguinpopulatie-op-zuidpool-veel-groter-dan-gedacht.html'>Link to article</a>",
  210. author: "<p>Author: <b>NOS.nl</b></p>",
  211. image: "<img src='http://yourshot.nationalgeographic.com/u/ss/fQYSUbVfts-T7pS2VP2wnKyN8wxywmXtY0-FwsgxoQufDJR20dfArh3C8-z7w3B7yFPXINNpiHU3SyF8RM38/'>",
  212. ranking: 4,
  213. comments: [ { inhoud: "Leuk artikel!",
  214. naam: "Joost Klaassen",
  215. ranking: 4
  216. },
  217.  
  218. { inhoud: "Mooie foto, ga het zeker eens bekijken.",
  219. naam: "Piet van Dijk",
  220. ranking: 3
  221. }
  222. ]
  223. }
  224.  
  225. var myBlogPosting6 = {
  226. title: "Paul McCartney on Chuck Berry: 'He Was a Magician'",
  227. bodyText: "<p class = 'blogContent'>In a reflective tribute to the late Chuck Berry, " +
  228. "Paul McCartney honored the rock icon's massive influence on the Beatles' formative music. " +
  229. "'To us, he was a magician making music that was exotic, yet normal, at the same time,' " +
  230. "the singer wrote on his website. " +
  231. "'We learnt so many things from him which led us into " +
  232. "a dream world of rock & roll music.'</p>",
  233. link: "<a href='http://www.rollingstone.com/music/news/paul-mccartney-on-chuck-berry-he-was-a-magician-w472980'>Link to article</a>",
  234. author: "<p>Author: <b>Ryan Reed</b></p>",
  235. image: "<img src='https://puu.sh/uS3Im/e6cb3d54cf.jpg'>",
  236. ranking: 2,
  237. comments: [ { inhoud: "Leuk artikel!",
  238. naam: "Joost Klaassen",
  239. ranking: 4
  240. },
  241.  
  242. { inhoud: "Mooie foto, ga het zeker eens bekijken.",
  243. naam: "Piet van Dijk",
  244. ranking: 3
  245. }
  246. ]
  247. }
  248.  
  249. var myBlogPosting7 = {
  250. title: "Terrifying face gadget promises to keep your conversations private in public places",
  251. bodyText: "<p class = 'blogContent'>Now you can keep your conversations private, annoy your coworkers and look like Bane — all at once." +
  252. "<p class = 'blogContent'>The gadget that makes it all happen is called Hushme. " +
  253. "It bills itself as the 'world's first voice mask for mobile phones.' " +
  254. "This absurd-looking contraption is designed to help you keep your " +
  255. "conversations private when you're in a public space.</p>",
  256. link: "<a href='http://mashable.com/2017/03/14/hushme-private-conversations-gadget/#agAwx1NsJ5qQ'>Link to article</a>",
  257. author: "<p>Author: <b>Freia Lobo</b></p>",
  258. image: "<img src='https://puu.sh/uS4r2/e40c322b03.jpg'>",
  259. ranking: 5,
  260. comments: [ { inhoud: "Leuk artikel!",
  261. naam: "Joost Klaassen",
  262. ranking: 4
  263. },
  264.  
  265. { inhoud: "Mooie foto, ga het zeker eens bekijken.",
  266. naam: "Piet van Dijk",
  267. ranking: 3
  268. }
  269. ]
  270. }
  271.  
  272. var myBlogPosting8 = {
  273. title: "Get ready for all sorts of augmented reality wizardry on your iPhone",
  274. bodyText: "<p class = 'blogContent'>We know that Tim Cook loves augmented reality. He loves it so much that he declared the technology might be as big as an idea as the smartphone. " +
  275. "Now, a new report from Bloomberg sheds some light on what, exactly, Apple is working on in the field of AR, and what it might mean for the company's upcoming iPhone.</p> " +
  276. "<p class = 'blogContent'>According to the report, which cites multiple sources familiar with Apple's plans, " +
  277. "Apple has built a large team of engineers—a combination of their own experts " +
  278. "and teams that joined through acquisitions of smaller AR companies such as " +
  279. "Metaio—to work on both hardware and software augmented reality products and solutions.</p>",
  280. link: "<a href='http://mashable.com/2017/03/20/apple-ar-report/#DheK0L4jqOq4'>Link to article</a>",
  281. author: "<p>Author: <b>Stan Schroeder</b></p>",
  282. image: "<img src='https://puu.sh/uS4P6/7ee7495b19.jpg'>",
  283. ranking: 2,
  284. comments: [ { inhoud: "Leuk artikel!",
  285. naam: "Joost Klaassen",
  286. ranking: 4
  287. },
  288.  
  289. { inhoud: "Mooie foto, ga het zeker eens bekijken.",
  290. naam: "Piet van Dijk",
  291. ranking: 3
  292. }
  293. ]
  294. }
  295.  
  296.  
  297. document.getElementById("mainContent").innerHTML = functions.showAllPosts();
  298. document.getElementById("topPosts").innerHTML = functions.returnRank();
  299. </script>
  300. </body>
  301. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!