API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 25th, 2019
256
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.75 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.     <title>Шаблонизация</title>
  4.     <meta charset="utf-8">
  5.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=cyrillic" rel="stylesheet">
  6.     <link href="css/fontawesome-all.min.css" rel="stylesheet">
  7.     <style>
  8.     * {
  9.         margin: 0;
  10.         padding: 0;
  11.     }
  12.  
  13.     html {
  14.         font-family: 'Open Sans', sans-serif;
  15.     }
  16.  
  17.     body {
  18.         max-width: 1200px;
  19.     }
  20.  
  21.     .photo {
  22.         position: relative;
  23.  
  24.         width: 30%;
  25.         padding: 30px 20px 20px;
  26.  
  27.         margin: 1%;
  28.  
  29.         display: inline-block;
  30.  
  31.         height: 215px;
  32.         background-repeat: no-repeat;
  33.         background-size: cover;
  34.  
  35.         border: 1px solid #fff;
  36.         border-radius: 3px;
  37.  
  38.         box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
  39.     }
  40.  
  41.     .photo footer {
  42.         position: absolute;
  43.         bottom: 0;
  44.         left: 0;
  45.  
  46.         box-sizing: border-box;
  47.         height: 70px;
  48.         width: 100%;
  49.         padding: 10px;
  50.  
  51.         line-height: 50px;
  52.  
  53.         color: #fff;
  54.     }
  55.  
  56.     .photo footer > * {
  57.         float: left;
  58.     }
  59.  
  60.     .photo footer > * + * {
  61.         margin-left: 5px;
  62.     }
  63.  
  64.     .avatar {
  65.         border: 1px solid transparent;
  66.         border-radius: 50%;
  67.  
  68.         overflow: hidden;
  69.     }
  70.  
  71.     .avatar > img {
  72.         width: 50px;
  73.     }
  74.  
  75.     .social {
  76.         color: inherit;
  77.     }
  78.  
  79.     .rating[class][class] {
  80.         float: right;
  81.     }
  82.  
  83.     .rating > i {
  84.         color: red;
  85.     }
  86.     </style>
  87. </head>
  88. <body>
  89.     <h2>Исходник</h2>
  90.     <article class="photo" style="background-image: url(https://images.unsplash.com/photo-1522205432273-e6a178a9edd2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjI1MzQyfQ&s=d8a144480f68b2607fd0acae7f073f24)">
  91.         <footer>
  92.             <span class="avatar"><img src="https://images.unsplash.com/profile-1515413915015-5aee0237c74b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=aa2ade77e5fc4568828507b0e5b3ae2a"></span>
  93.             <h2>Felix Russell-Saw</h2>
  94.             <a class="social" href="https://www.instagram.com/felixrussellsaw">
  95.                 <i class="fab fa-instagram"></i>
  96.             </a>
  97.             <span class="rating">
  98.                 <i class="fa fa-heart"></i> 11
  99.             </span>
  100.         </footer>
  101.     </article>
  102.     <h2>Шаблонизируем строками</h2>
  103.     <div class="string-template"></div>
  104.     <h2>Шаблонизируем браузером</h2>
  105.     <div class="browser-template"></div>
  106.     <h2>Шаблонизируем в два прохода</h2>
  107.     <div class="two-steps-template"></div>
  108. <script>
  109.  
  110.     var apiJson = `[
  111. {"id": "lqCO94n4KP0", "created_at": "2018-04-26T11:31:39-04:00", "updated_at": "2018-04-27T08:18:07-04:00", "width": 4416, "height": 3312, "color": "#050505", "description": null, "categories": [], "urls": {"raw": "https://images.unsplash.com/photo-1524755968487-e44edcb96e1d?ixlib=rb-0.3.5\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=d3fab9b95d5f3485ddafcdc6cb03e8ff", "full": "https://images.unsplash.com/photo-1524755968487-e44edcb96e1d?ixlib=rb-0.3.5\u0026q=85\u0026fm=jpg\u0026crop=entropy\u0026cs=srgb\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=cfcbced77ad98edfef6fc2e7d9e36694", "regular": "https://images.unsplash.com/photo-1524755968487-e44edcb96e1d?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=1080\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=2a3ebc94d1f3829b69f1f79d026f1f14", "small": "https://images.unsplash.com/photo-1524755968487-e44edcb96e1d?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=400\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=483678bec36d4eb0a9ce2b315a19c837", "thumb": "https://images.unsplash.com/photo-1524755968487-e44edcb96e1d?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=200\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=619dcbe923f8a80d0c45a7e2e4b6bac5"
  112. }, "links": {"self": "https://api.unsplash.com/photos/lqCO94n4KP0", "html": "https://unsplash.com/photos/lqCO94n4KP0", "download": "https://unsplash.com/photos/lqCO94n4KP0/download", "download_location": "https://api.unsplash.com/photos/lqCO94n4KP0/download"
  113. }, "liked_by_user": false, "sponsored": false, "likes": 0, "user": {"id": "cq5j_Rhaw1I", "updated_at": "2018-04-26T22:33:22-04:00", "username": "jonathanbell", "name": "Jonathan Bell", "first_name": "Jonathan", "last_name": "Bell", "twitter_username": null, "portfolio_url": null, "bio": null, "location": null, "links": {"self": "https://api.unsplash.com/users/jonathanbell", "html": "https://unsplash.com/@jonathanbell", "photos": "https://api.unsplash.com/users/jonathanbell/photos", "likes": "https://api.unsplash.com/users/jonathanbell/likes", "portfolio": "https://api.unsplash.com/users/jonathanbell/portfolio", "following": "https://api.unsplash.com/users/jonathanbell/following", "followers": "https://api.unsplash.com/users/jonathanbell/followers"
  114. }, "profile_image": {"small": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32\u0026s=0ad68f44c4725d5a3fda019bab9d3edc", "medium": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64\u0026s=356bd4b76a3d4eb97d63f45b818dd358", "large": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128\u0026s=ee8bbf5fb8d6e43aaaa238feae2fe90d"
  115. }, "total_collections": 0, "instagram_username": null, "total_likes": 0, "total_photos": 1
  116. }, "current_user_collections": []
  117. }, {"id": "DaLK5QH0_xI", "created_at": "2018-04-27T08:04:04-04:00", "updated_at": "2018-04-27T08:17:36-04:00", "width": 3648, "height": 5472, "color": "#1E1D1E", "description": null, "categories": [], "urls": {"raw": "https://images.unsplash.com/photo-1524830575636-674cfa79ddba?ixlib=rb-0.3.5\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=f0c42207ac748582c8389a5c2a8586f3", "full": "https://images.unsplash.com/photo-1524830575636-674cfa79ddba?ixlib=rb-0.3.5\u0026q=85\u0026fm=jpg\u0026crop=entropy\u0026cs=srgb\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=9631f18bff42fd46ac1cc26b456d350d", "regular": "https://images.unsplash.com/photo-1524830575636-674cfa79ddba?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=1080\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=262f7f7ce0db2784a6de5caa67eea10a", "small": "https://images.unsplash.com/photo-1524830575636-674cfa79ddba?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=400\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=2d3ebb032b8533aaee622287d6d5cdf6", "thumb": "https://images.unsplash.com/photo-1524830575636-674cfa79ddba?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=200\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=1559a3591f5bb9c794f0e11e53b31c40"
  118. }, "links": {"self": "https://api.unsplash.com/photos/DaLK5QH0_xI", "html": "https://unsplash.com/photos/DaLK5QH0_xI", "download": "https://unsplash.com/photos/DaLK5QH0_xI/download", "download_location": "https://api.unsplash.com/photos/DaLK5QH0_xI/download"
  119. }, "liked_by_user": false, "sponsored": false, "likes": 1, "user": {"id": "P9cpS1fJFN8", "updated_at": "2018-04-27T08:04:04-04:00", "username": "staticlaw", "name": "Fabrizio Conti", "first_name": "Fabrizio", "last_name": "Conti", "twitter_username": null, "portfolio_url": "http://staticlaw.it/", "bio": null, "location": null, "links": {"self": "https://api.unsplash.com/users/staticlaw", "html": "https://unsplash.com/@staticlaw", "photos": "https://api.unsplash.com/users/staticlaw/photos", "likes": "https://api.unsplash.com/users/staticlaw/likes", "portfolio": "https://api.unsplash.com/users/staticlaw/portfolio", "following": "https://api.unsplash.com/users/staticlaw/following", "followers": "https://api.unsplash.com/users/staticlaw/followers"
  120. }, "profile_image": {"small": "https://images.unsplash.com/profile-1504629483788-8c7dcca0ee7b?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32\u0026s=dedb6a344bd0e6fbf0b982c0040d2d48", "medium": "https://images.unsplash.com/profile-1504629483788-8c7dcca0ee7b?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64\u0026s=85c91c3fab799e0b548eeb47b2af016c\\\" onload=\\\"alert('hello world');\\\"", "large": "https://images.unsplash.com/profile-1504629483788-8c7dcca0ee7b?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128\u0026s=e6dc5ad44c4a0503821a5d2d62ae492d"
  121. }, "total_collections": 15, "instagram_username": null, "total_likes": 607, "total_photos": 180
  122. }, "current_user_collections": []
  123. }, {"id": "IJS2q_V7-fQ", "created_at": "2018-04-27T07:31:29-04:00", "updated_at": "2018-04-27T08:17:04-04:00", "width": 3674, "height": 5511, "color": "#100D0F", "description": null, "categories": [], "urls": {"raw": "https://images.unsplash.com/photo-1524828628484-8274f57edd96?ixlib=rb-0.3.5\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=cf3ddf2d870e216b89cc8248c53d3c31", "full": "https://images.unsplash.com/photo-1524828628484-8274f57edd96?ixlib=rb-0.3.5\u0026q=85\u0026fm=jpg\u0026crop=entropy\u0026cs=srgb\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=6503afbb397a6af0a2213cb7f6f9d38b", "regular": "https://images.unsplash.com/photo-1524828628484-8274f57edd96?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=1080\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=673c9b62b05bac236289edf895459613", "small": "https://images.unsplash.com/photo-1524828628484-8274f57edd96?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=400\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=2737ad229e4dc059f1ce687d6f612c22", "thumb": "https://images.unsplash.com/photo-1524828628484-8274f57edd96?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=200\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=d8699efdbcb4b15c5e09ba5b3eda3b73"
  124. }, "links": {"self": "https://api.unsplash.com/photos/IJS2q_V7-fQ", "html": "https://unsplash.com/photos/IJS2q_V7-fQ", "download": "https://unsplash.com/photos/IJS2q_V7-fQ/download", "download_location": "https://api.unsplash.com/photos/IJS2q_V7-fQ/download"
  125. }, "liked_by_user": false, "sponsored": false, "likes": 56, "user": {"id": "Y_ahmO0Bbjg", "updated_at": "2018-04-27T07:31:29-04:00", "username": "caldhela", "name": "Caesar Aldhela", "first_name": "Caesar", "last_name": "Aldhela", "twitter_username": null, "portfolio_url": "http://hellonemo.com", "bio": "Interface designer who loves take random photos", "location": "Malang, Indonesia", "links": {"self": "https://api.unsplash.com/users/caldhela", "html": "https://unsplash.com/@caldhela", "photos": "https://api.unsplash.com/users/caldhela/photos", "likes": "https://api.unsplash.com/users/caldhela/likes", "portfolio": "https://api.unsplash.com/users/caldhela/portfolio", "following": "https://api.unsplash.com/users/caldhela/following", "followers": "https://api.unsplash.com/users/caldhela/followers"
  126. }, "profile_image": {"small": "https://images.unsplash.com/profile-fb-1517736776-7b6f58bafc39.jpg?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32\u0026s=9151c54fb8eb2a3c01f1f850a3bf16dc", "medium": "https://images.unsplash.com/profile-fb-1517736776-7b6f58bafc39.jpg?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64\u0026s=966759a32bc15ecc13ab096c8d43c974", "large": "https://images.unsplash.com/profile-fb-1517736776-7b6f58bafc39.jpg?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128\u0026s=6d39a9a6536d0a87fe0c1ed54e329949"
  127. }, "total_collections": 0, "instagram_username": "caldhela", "total_likes": 2, "total_photos": 5
  128. }, "current_user_collections": []
  129. }, {"id": "OAM6t86yOvw", "created_at": "2018-04-27T06:14:45-04:00", "updated_at": "2018-04-27T08:16:54-04:00", "width": 4000, "height": 6000, "color": "#B3CCCD", "description": null, "categories": [], "urls": {"raw": "https://images.unsplash.com/photo-1524824019080-e835a2929578?ixlib=rb-0.3.5\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=6619fff73473f2e0cd801af2d20a8109", "full": "https://images.unsplash.com/photo-1524824019080-e835a2929578?ixlib=rb-0.3.5\u0026q=85\u0026fm=jpg\u0026crop=entropy\u0026cs=srgb\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=e811acb339481638c56441b15f9f7a37", "regular": "https://images.unsplash.com/photo-1524824019080-e835a2929578?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=1080\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=fd232b9eab3da990a1b2aaa5fa418ad6", "small": "https://images.unsplash.com/photo-1524824019080-e835a2929578?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=400\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=585fabf510d44b384540b8c899fdb95d", "thumb": "https://images.unsplash.com/photo-1524824019080-e835a2929578?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=entropy\u0026cs=tinysrgb\u0026w=200\u0026fit=max\u0026ixid=eyJhcHBfaWQiOjI1MzQyfQ\u0026s=f6d266c4058529b634759a2e8cec461b"
  130. }, "links": {"self": "https://api.unsplash.com/photos/OAM6t86yOvw", "html": "https://unsplash.com/photos/OAM6t86yOvw", "download": "https://unsplash.com/photos/OAM6t86yOvw/download", "download_location": "https://api.unsplash.com/photos/OAM6t86yOvw/download"
  131. }, "liked_by_user": false, "sponsored": false, "likes": 94, "user": {"id": "oenW-Y4S49U", "updated_at": "2018-04-27T06:14:45-04:00", "username": "thethinblackframe", "name": "David Clarke", "first_name": "David", "last_name": "Clarke", "twitter_username": null, "portfolio_url": "http://www.instagram.com/thethinblackframe", "bio": "Melbourne through my eyes.", "location": "Melbourne, Australia", "links": {"self": "https://api.unsplash.com/users/thethinblackframe", "html": "https://unsplash.com/@thethinblackframe", "photos": "https://api.unsplash.com/users/thethinblackframe/photos", "likes": "https://api.unsplash.com/users/thethinblackframe/likes", "portfolio": "https://api.unsplash.com/users/thethinblackframe/portfolio", "following": "https://api.unsplash.com/users/thethinblackframe/following", "followers": "https://api.unsplash.com/users/thethinblackframe/followers"
  132. }, "profile_image": {"small": "https://images.unsplash.com/profile-1523415950363-ae4827aec244?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32\u0026s=931fc96c9284c2bdd5895f4850a9d267", "medium": "https://images.unsplash.com/profile-1523415950363-ae4827aec244?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64\u0026s=3b71ecb4f3f6d2215bdf5ed331a17977", "large": "https://images.unsplash.com/profile-1523415950363-ae4827aec244?ixlib=rb-0.3.5\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128\u0026s=f1290bc4749c979efd2800025ecb5b00"
  133. }, "total_collections": 0, "instagram_username": "thethinblackframe", "total_likes": 4, "total_photos": 63
  134. }, "current_user_collections": []
  135. }
  136. ]
  137. `;
  138.  
  139. const photos = JSON.parse(apiJson);
  140.  
  141.     function photoBrowserTemplate(photo) {
  142.         const element = document.createElement('article');
  143.         const footer = document.createElement('footer');
  144.         const avatar = document.createElement('span');
  145.         const avatarImage = document.createElement('img');
  146.         const username = document.createElement('h2');
  147.         const rating = document.createElement('span');
  148.         const ratingIcon = document.createElement('i');
  149.         const ratingValue = document.createTextNode(` ${photo.likes}`);
  150.  
  151.         element.classList.add('photo');
  152.         element.style.backgroundImage = `url(${photo.urls.small})`;
  153.  
  154.         avatar.classList.add('avatar');
  155.         avatarImage.src = photo.user.profile_image.medium;
  156.  
  157.         username.innerText = photo.user.name;
  158.  
  159.         rating.classList.add('rating');
  160.         ratingIcon.classList.add('fa', 'fa-heart');
  161.  
  162.         element.appendChild(footer);
  163.  
  164.         footer.appendChild(avatar);
  165.         avatar.appendChild(avatarImage);
  166.  
  167.         footer.appendChild(username);
  168.  
  169.         if (photo.user.instagram_username) {
  170.             const social = document.createElement('a');
  171.             const socialIcon = document.createElement('i');
  172.  
  173.             social.classList.add('social');
  174.             social.href = `https://www.instagram.com/${photo.user.instagram_username}`;
  175.             socialIcon.classList.add('fab', 'fa-instagram');
  176.  
  177.             footer.appendChild(social);
  178.             social.appendChild(socialIcon);
  179.         }
  180.  
  181.         footer.appendChild(rating);
  182.         rating.appendChild(ratingIcon);
  183.         rating.appendChild(ratingValue);
  184.  
  185.         return element;
  186.     }
  187.  
  188.     // { tag: 'div', content: [' ', { tag: 'div' }] }
  189.     function browserTemplateEngine(block) {
  190.         if ((block === undefined) || (block === null) || (block === false)) {
  191.             return document.createTextNode('');
  192.         }
  193.         if ((typeof block === 'string') || (typeof block === 'number') || (block === true)) {
  194.             return document.createTextNode(block);
  195.         }
  196.         if (Array.isArray(block)) {
  197.             const fragment = document.createDocumentFragment();
  198.             block.forEach(el => {
  199.                 fragment.appendChild(browserTemplateEngine(el));
  200.             });
  201.             return fragment;
  202.         }
  203.         const element = document.createElement(block.tag);
  204.  
  205.         const classes = Array.isArray(block.cls) ? block.cls : [block.cls];
  206.         classes.forEach(cls => {
  207.             if (!cls) return;
  208.             element.classList.add(cls);
  209.         });
  210.         //element.classList.add(...[].concat(block.cls).filter(Boolean));
  211.         if (block.attrs) {
  212.             Object.keys(block.attrs).forEach(key => {
  213.                 element.setAttribute(key, block.attrs[key]);
  214.             });
  215.         }
  216.  
  217.         element.appendChild(browserTemplateEngine(block.content));
  218.  
  219.         return element;
  220.     }
  221.     browserTemplateEngine({ tag: 'div', content: { tag: 'div' } });
  222.  
  223.     function photoJSTemplate(photo) {
  224.         return {
  225.             tag: 'article',
  226.             cls: 'photo',
  227.             attrs: { style: `background-image: url(${photo.urls.small})` },
  228.             content: {
  229.                 tag: 'footer',
  230.                 content: [
  231.                     {
  232.                         tag: 'span',
  233.                         cls: 'avatar',
  234.                         content: {
  235.                             tag: 'img',
  236.                             attrs: { src: photo.user.profile_image.medium }
  237.                         }
  238.                     },
  239.                     { tag: 'h2', content: photo.user.name },
  240.                     photo.user.instagram_username && {
  241.                        tag: 'a',
  242.                        cls: 'social',
  243.                        href: `https://www.instagram.com/${photo.user.instagram_username}`,
  244.                        content: { tag: 'i', cls: ['fab', 'fa-instagram'] }
  245.                    },
  246.                    {
  247.                        tag: 'span',
  248.                        cls: 'rating',
  249.                        content: [
  250.                            {
  251.                                tag: 'i',
  252.                                cls: ['fa', 'fa-heart']
  253.                            },
  254.                            ' ',
  255.                            photo.likes
  256.                        ]
  257.                    }
  258.                ]
  259.            }
  260.        }
  261.    }
  262.  
  263.    function photoStringTemplate(photo) {
  264.        return `
  265.    <article class="photo" style="background-image: url(${photo.urls.small})">
  266.        <footer>
  267.            <span class="avatar"><img src="${photo.user.profile_image.medium}"></span>
  268.            <h2>${photo.user.name}</h2>` +
  269.            (photo.user.instagram_username ? `<a class="social" href="https://www.instagram.com/${photo.user.instagram_username}">
  270.                <i class="fab fa-instagram"></i>
  271.            </a>` : '') +
  272.            `<span class="rating">
  273.                <i class="fa fa-heart"></i> ${photo.likes}
  274.            </span>
  275.        </footer>
  276.    </article>
  277.        `;
  278.     }
  279. /*
  280.     document.querySelector('.string-template').innerHTML =
  281.         photos.map(photoStringTemplate).join('');
  282. */
  283.     const fragment = document.createDocumentFragment();
  284.     photos.forEach(photo => {
  285.         fragment.appendChild(photoBrowserTemplate(photo));
  286.     });
  287.     document.querySelector('.browser-template').appendChild(fragment);
  288.  
  289.     document.querySelector('.two-steps-template').appendChild(
  290.         browserTemplateEngine(photos.map(photoJSTemplate))
  291.     );
  292. </script>
  293. </body>
  294. </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!