Soucis intégration date dans HTML/JSON

Soucis intégration date dans HTML/JSON - HTML/CSS - Programmation

Marsh Posté le 14-07-2018 à 15:03:13    

Bonjour à tous,
 
Je viens demander un peu d'aide aux connaisseurs car je suis un peu (complètement) perdu.
Je précise tout de suite que je n'y connais rien en programmation !
 
Je suis en train de me créer une "startpage" perso en reprenant quelques scripts sur Github et en essayant à mon niveau (de mer..) de l'adapter à mon besoin.
Elle est presque finie mais j'ai un soucis et je n'arrive pas à intégrer la date du type "samedi 14 juillet 2018" dans mon script et que la date soit bien intégrée dans le même cadre que l'heure.
 
Sauriez-vous m'aider svp ? Merci par avance.
 
Voici l'unique page HTML du script, le reste ne sont que des images ou fonts.
 

Code :
  1. <!doctype html>
  3. <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  4. <meta http-equiv="x-dns-prefetch-control" content="on">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="icon" href="./favicon.ico" >
  7. <meta name="robots" content="noindex, nofollow">
  8. <title>Page d'accueil</title>
  11. <script>
  13.   const CONFIG = {
  15.     // the category, name, key, url, search path and color for your commands
  16.     // if none of the specified keys are matched, the '*' key is used
  17.     commands: [
  18.   [null, 'DuckduckGO', 'd', 'https://duckduckgo.com', '/?q={}&t=h_&ia=news', '#373D53', './img/null/duckduckgo.png'],
  19.       [null, 'Google', 'g', 'https://encrypted.google.com', '/search?q={}', '#373D53', './img/null/google.png'],
  20.   [null, 'Qwant', '*', 'https://lite.qwant.com', '/?l=fr&q={}&t=web', '#373D53', './img/null/qwant.png'],
  21.   [null, 'StartPage', 's', 'https://www.startpage.com', '/do/asearch?q={}&cat=web&nj=1&language=francais&lui=francais&t=air', '#A2C9EF', './img/null/startpage.png'],
  22.   [null, 'Google Translate', 'translate', 'https://translate.google.fr', '/#en/fr/{}', '#4285f4', './img/null/translate.svg'],
  23.  
  24.   ['Divers', 'Pages Jaunes', 'pages jaunes', 'https://www.pagesjaunes.fr', '/annuaire/chercherlespros?quoiqui={}', '#FFEA03', './img/Divers/pages_jaunes.png'],
  25.      
  26.   ['Forums', 'Forum JVC', 'forum jvc', 'http://www.jeuxvideo.com/forums.htm', '/forums/recherche.php?q={}', '#004565', './img/Forums/jvc.png'],
  27.       ['Forums', 'Forum HFR', 'hfr', 'https://forum.hardware.fr', '/forum1.php?config=hfr.inc&cat=1&post_cat_list=|1*hfr|16*hfr|25*hfr|3*hfr|4*hfr|22*hfr|21*hfr|11*hfr|10*hfr|6*hfr|13*hfr|&trash=0&orderSearch=1&recherches=1&resSearch=20&jour=7&mois=4&annee=2018&titre=1&search={}&pseud=&daterange=2&searchtype=1&searchall=1', '#394F67', './img/Forums/hfr.png'],
  28.       ['Forums', 'Forum Next Inpact', 'forum next inpact', 'https://forum.nextinpact.com', '/search/?q={}', '#3F6593', './img/Forums/next_inpact.png'],
  29.   ['Forums', 'Reddit', 'reddit', 'https://www.reddit.com', '/search?q={}', '#5f99cf', './img/Forums/reddit.svg'],
  31.   ['Informatique', 'Discord', 'discord', 'https://discordapp.com', null, '#1E1F22', './img/Informatique/discord.svg'],   
  32.       ['Informatique', 'Dropbox', 'dropbox', 'https://www.dropbox.com/fr/', null, '#333333', './img/Informatique/dropbox.svg'],   
  33.   ['Informatique', 'DL Compare', 'dl compare', 'https://www.dlcompare.fr', '/search?q={}', '#363636', './img/Informatique/dl_compare.png'],
  34.       ['Informatique', 'Imgur', 'imgur', 'https://imgur.com/upload', null, '#474A50', './img/Informatique/imgur.png'],
  35.       ['Informatique', 'Jeuxvideo.com', 'jvc', 'http://www.jeuxvideo.com/', '/recherche.php?q={}', '#DFDFDF', './img/Informatique/jvc.png'],
  36.       ['Informatique', 'MacG', 'macg', 'https://www.macg.co/', '/recherche/{}&o=date', '#FF6602', './img/Informatique/macg.png'],
  37.   ['Informatique', 'Next Inpact', 'next inpact', 'https://www.nextinpact.com', '/recherche?_search={}&RubriqueId=&Author=&OrderType=date&DateStartPeriod=&DateEndPeriod=&ListTypeContent.actus_view=true&ListTypeContent.dossiers_view=true&ListTypeContent.bonsplans_view=true&ListTypeContent.archives_view=true', '#06455A', './img/Informatique/next_inpact.png'],
  38.   ['Informatique', 'Virus Total', 'virus total', 'https://www.virustotal.com/fr', null, '#292929', './img/Informatique/virus_total.svg'],
  39.   ['Informatique', 'XDA Developers', 'xda', 'https://forum.xda-developers.com/', '/sitesearch.php?q={}', '#323232', './img/Informatique/xda.svg'],
  40.  
  41.   ['Multimedia', 'Écouter  radio en ligne', 'radio', 'http://www.ecouterradioenligne.com', '/#{}', '#00323D', './img/Multimedia/radio.png'],
  42.   ['Multimedia', 'France Bleu', 'France bleu', 'https://www.francebleu.fr', null, '#0077D6', './img/Multimedia/France_bleu.svg'],
  43.   ['Multimedia', 'Dailymotion', 'dailymotion', 'https://www.dailymotion.com/fr', '/search/{}', '#07A7E0', './img/Multimedia/dailymotion.svg'],
  44.   ['Multimedia', 'Netflix', 'netflix', 'https://www.netflix.com/browse', '/search?q={}', '#1B1B1B', './img/Multimedia/netflix.svg'],
  45.       ['Multimedia', 'Play Music', 'google music', 'https://play.google.com/music/listen#/all', '/music/listen#/sr/{}', '#282828', './img/Multimedia/google_play_music.svg'], 
  46.       ['Multimedia', 'Prime Vidéo', 'prime video', 'https://www.primevideo.com', '/search/ref=atv_nb_sr?phrase={}&ie=UTF8', '#282828', './img/Multimedia/amazon_prime_video.svg'], 
  47.   ['Multimedia', 'SoundCloud', 'soundcloud', 'https://soundcloud.com/discover', '/search?q={}', '#363636', './img/Multimedia/soundcloud.svg'],
  48.   ['Multimedia', 'Spotify', 'spotify', 'https://open.spotify.com/browse/featured', '/search/results/{}', '#613031', './img/Multimedia/spotify.svg'],
  49.   ['Multimedia', 'The movie database', 'tmdb', 'https://www.themoviedb.org', '/search/movie?query={}', '#112229', './img/Multimedia/tmdb.svg'],
  50.       ['Multimedia', 'TVDB', 'tvdb', 'https://www.thetvdb.com', '/search?q={}&l=fr', '#2C2C2C', './img/Multimedia/tvdb.png'],
  51.   ['Multimedia', 'Twitch', 'twitch', 'https://www.twitch.tv/directory', null, '#302A43', './img/Multimedia/twitch.svg'],
  52.   ['Multimedia', 'Youtube Music', 'yt music', 'https://music.youtube.com', '/search?q={}', '#1A1A1A', './img/Multimedia/youtube_music.svg'],
  54.   ['Sport', 'Eurosport', 'eurosport', 'https://www.eurosport.fr', null, '#191E48', './img/Sport/eurosport.svg'],
  55.   ['Sport', 'L&rsquo;équipe', 'lequipe', 'https://www.lequipe.fr', '/recherche/search.php?r={}&jd=&md=&ad=&jf=&mf=&af=&t=ALL&s1=efr&adv=0&o=D&s=ALL', '#F8F8F8', './img/Sport/equipe.svg'],
  56.   ['Sport', 'Sports.fr', 'sports', 'http://www.sports.fr', null, '#005090', './img/Sport/sports.svg'],
  58.     ],
  60.     // instantly redirect when a key is matched
  61.     // put a space before any other queries to prevent unwanted redirects
  62.     instantRedirect: false,
  64.     // open queries in a new tab
  65.     newTab: false,
  67.     // dynamic background colors when command domains are matched
  68.     colors: true,
  70.     // specify a theme file
  71.     // remove or set to false to use the hardcoded theme
  72.     theme: false,
  74.     // the delimiter between the key and your search query
  75.     // e.g. to search GitHub for potatoes you'd type "g:potatoes"
  76.     searchDelimiter: ':',
  78.     // the delimiter between the key and a path
  79.     // e.g. type "r/r/unixporn" to go to "reddit.com/r/unixporn"
  80.    // pathDelimiter: '/',
  82.     // the delimiter between the hours and minutes in the clock
  83.     clockDelimiter: ':',
  85.     // note: you can pass in your search query via the q query param
  86.     // e.g. going to file:///path/to/tilde/index.html?q=hamsters is equivalent
  87.     // to typing "hamsters" and pressing enter
  88.   };
  89. </script>
  92. <style type="text/css">
  94. @font-face {font-family:"2018"; src:url("./font/2018.ttf" );}
  95. @font-face {font-family:"digital"; src:url("./font/digital.ttf" );}
  97.   :root {
  98.     --color0: #202020;
  99.     --color15: #ffffff;
  100. --color20: #00a5ff;
  102.   }
  104.   body {
  105.     position: absolute;
  106. top: -21%;
  107.     left: 0;
  108.     width: 100%;
  109.     height: 100%;
  110.     margin: 0;
  111.     padding: 0;
  112.     transition: background .2s;
  113.     background-color: var(--color0);
  114.     font-family:"2018";
  115.     color: var(--color15);
  116. background: url(./img/background.jpg);
  117. background-position: no-repeat center 0;
  118.     background-size: cover;
  119.   }
  121.   input,
  122.   button,
  123.   input:focus,
  124.   button:focus {
  125.     display: block;
  126.     box-sizing: border-box;
  127.     width: 100%;
  128.     margin: 0;
  129.     border: 0;
  130.     outline: 0;
  131. background: transparent;
  132.     color: #fff;
  133.     font-family:"2018";
  134.     text-align: center;
  135.     -webkit-appearance: none;
  136.     -moz-appearance: none;
  137.   }
  139.   ul,
  140.   li {
  141.     margin: 0;
  142.     padding: 0;
  143.     list-style: none;
  144.   }
  146.   a,
  147.   a:focus {
  148.     color: #DAF7A6;
  149.     outline: 0;
  150.   }
  152.   #clock {
  153. -webkit-text-fill-color: white;
  154.     color: whitesmoke;
  155.     border-radius: 5px;
  156.     -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  157.     -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  158.     /* box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6); */
  159. /* box-shadow: -1px 4px 5px 4px rgba(0, 0, 0, 0.7); */
  160. box-shadow: 3px 3px 10px 3px #000;
  161.     border: 1px solid rgba(255, 255, 255, 0.3);
  162.     padding: 0px 20px 0px 20px;
  163.     -moz-box-sizing: border-box;
  164.     -webkit-box-sizing: border-box;
  165.     box-sizing: border-box;
  166.     text-shadow: 0 5px 1px rgba(0, 0, 0, 0.4);
  167.     transition: box-shadow .3s ease;
  168.     background-color: rgba(0.12, 0.12, 0.12, 0.12);
  169. cursor: default;
  170. font-size: 8rem;
  171.     font-family:"digital";
  172.     text-align: center;
  173.   }
  175.   #search-form {
  176. background: url(./img/background.jpg);
  177. background-position: no-repeat center 0;
  178.     background-size: cover;
  179.     color: #ffffff;
  180.     z-index: 2;
  181.   }
  183.   #search-form>div {
  184. -webkit-text-fill-color: white;
  185.     color: whitesmoke;
  186.     top: 35%;
  187.     border-radius: 5px;
  188.     -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  189.     -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  190.     box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  191.     border: 1px solid rgba(255, 255, 255, 0.3);
  192.     padding: 10px;
  193. font-size: 0.7rem;
  194.     text-align: center;
  195.     -moz-box-sizing: border-box;
  196.     -webkit-box-sizing: border-box;
  197.     box-sizing: border-box;
  198.     text-shadow: 0 5px 1px rgba(0, 0, 0, 0.4);
  199.     transition: box-shadow .3s ease;
  200.     background-color: rgba(0.12, 0.12, 0.12, 0.12);
  201.   }
  203.   #search-input,
  204.   #search-input:focus {
  205.     width: 100%;
  206.     font-size: 10px;
  207.     font-weight: lighter;
  208. text-transform: none;
  209. /* font-family:"2018"; */
  210.   }
  212.   #help {
  213.    background: url(./img/background.jpg);
  214. background-position: no-repeat center 0;
  215.     background-size: cover;
  216.     display: block;
  217.     padding: 8vw;
  218.     background-color: var(--color0);
  219.     font-size: 1.3rem;
  220.     z-index: 1;
  221.   }
  223.   .category {
  224. text-align: center;
  225. font-size: 19px;
  226.     letter-spacing: 1px;
  227.   }
  229.   .category:last-of-type {
  230. text-align: center;
  231. font-size: 19px;
  232.     letter-spacing: 1px;
  233.   }
  235.   .category-name {
  236. -webkit-text-fill-color: white;
  237.     color: whitesmoke;
  238.     border-radius: 5px;
  239.     -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  240.     -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  241.     box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  242.     border: 1px solid rgba(255, 255, 255, 0.3);
  243.     padding: 0px 40px 0px 40px;
  244.     -moz-box-sizing: border-box;
  245.     -webkit-box-sizing: border-box;
  246.     box-sizing: border-box;
  247.     text-shadow: 0 5px 1px rgba(0, 0, 0, 0.4);
  248.     transition: box-shadow .3s ease;
  249.     background-color: rgba(92, 92, 92, 0.42);
  250. cursor: default;
  251.     font-family:"2018";
  252.     text-align: center;
  253.   }
  255.   .command a {
  256.     display: block;
  257.     position: relative;
  258.     margin: 1em 0;
  259.     font-size: .8em;
  260.     line-height: 1em;
  261.     text-decoration: none;
  262.   }
  264.   .command:last-of-type a {
  265.     margin-bottom: 0;
  266.   }
  269.   .command-name {
  270.     position: relative;
  271.     overflow: hidden;
  272.   }
  274.   .command-name::after {
  275.     content: ' ';
  276.     position: absolute;
  277.     right: 0;
  278.     bottom: -.35em;
  279.     left: 0;
  280.     height: 2px;
  281.     transition: .2s;
  282.     transform: translateX(-2em);
  283.     background: var(--color15);
  284.     opacity: 0;
  285.   }
  287.   .command a:hover .command-name::after,
  288.   .command a:focus .command-name::after {
  289.     transform: translateX(0);
  290.     opacity: 1;
  291.   }
  293.   .overlay {
  294.     position: fixed;
  295.     top: 0%;
  296.     left: 0;
  297.     overflow: auto;
  298.     box-sizing: border-box;
  299.     width: 100%;
  300.     height: 100%;
  301.     visibility: hidden;
  302.   }
  304.   body.help #help.overlay,
  305.   body.form #search-form.overlay {
  306.     visibility: visible;
  307.   }
  309.   .center {
  310.     display: flex;
  311.     justify-content: center;
  312.     align-items: center;
  313.     width: 100%;
  314.     height: 100%;
  315.     box-sizing: border-box;
  316.   }
  318.   @media (min-width: 500px) {
  319.     .categories {
  320.       display: grid;
  321.       grid-template-columns: 250px 185px;
  322.       justify-content: space-around;
  323.     }
  325.     .category:nth-last-child(2) {
  326.       margin-bottom: 0;
  327.     }
  329.     #search-input,
  330.     #search-input:focus {
  331.       font-size: 3em;
  332.     }
  333.   }
  335.   @media (min-width: 1000px) {
  336.     #help {
  337.       display: flex;
  338.       padding: 0;
  339.     }
  341.     .category {
  342.       margin: 2rem 0;
  343.     }
  345.     .categories {
  346.       grid-template-columns: repeat(2, 300px) 185px;
  347.     }
  348.   }
  350.   @media (min-width: 1700px) {
  351.     .categories {
  352.       grid-template-columns: repeat(5, 250px) 185px;
  353.     }
  354.   } 
  355.  
  356. </style>
  357. <div class="center">
  358.   <time id="clock"></time>
  359. </div>
  361. <form class="overlay center" id="search-form" autocomplete="off" spellcheck="false">
  362.     <img id="search-logo" src="./img/interrogation.png" style="position: fixed;padding-bottom: 400px;" height="188">
  363.   <div>
  364.     <input id="search-input" type="text">
  365.   </div>
  366. </form>
  368. <aside class="overlay center" id="help"></aside>
  370.  
  373. <script>
  374.   const $ = {
  375.     bodyClassAdd: c => $.el('body').classList.add(c),
  376.     bodyClassHas: c => $.el('body').classList.contains(c),
  377.     bodyClassRemove: c => $.el('body').classList.remove(c),
  378.     el: s => document.querySelector(s),
  379.     els: s => [].slice.call(document.querySelectorAll(s) || []),
  380.     escapeRegex: s => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),
  381.     ieq: (a, b) => a.toLowerCase() === b.toLowerCase(),
  382.     iin: (a, b) => a.toLowerCase().indexOf(b.toLowerCase()) !== -1,
  383.     isDown: e => ['c-n', 'down', 'tab'].includes($.key(e)),
  384.     isRemove: e => ['backspace', 'delete'].includes($.key(e)),
  385.     isUp: e => ['c-p', 'up', 's-tab'].includes($.key(e)),
  387.     jsonp: url => {
  388.       let script = document.createElement('script');
  389.       script.src = url;
  390.       $.el('head').appendChild(script);
  391.     },
  393.     key: e => {
  394.       const ctrl = e.ctrlKey;
  395.       const shift = e.shiftKey;
  397.       switch (e.which) {
  398.         case 8: return 'backspace';
  399.         case 9: return shift ? 's-tab' : 'tab';
  400.         case 13: return 'enter';
  401.         case 16: return 'shift';
  402.         case 17: return 'ctrl';
  403.         case 18: return 'alt';
  404.         case 27: return 'escape';
  405.         case 38: return 'up';
  406.         case 40: return 'down';
  407.         case 46: return 'delete';
  408.         case 78: return ctrl ? 'c-n' : 'n';
  409.         case 80: return ctrl ? 'c-p' : 'n';
  410.         case 91: return 'super';
  411.       }
  412.     },
  413.   };
  415.   class Clock {
  416.     constructor(options) {
  417.       this._el = $.el('#clock');
  418.       this._delimiter = options.delimiter;
  419.       this._form = options.form;
  420.       this._setTime = this._setTime.bind(this);
  421.       this._registerEvents();
  422.       this._start();
  423.     }
  425.     _pad(num) {
  426.       return ('0' + num.toString()).slice(-2);
  427.     }
  429.     _registerEvents() {
  430.       this._el.addEventListener('click', this._form.show);
  431.     }
  433.     _setTime() {
  434.       const date = new Date();
  435.       const hours = this._pad(date.getHours());
  436.       const minutes = this._pad(date.getMinutes());
  437.       this._el.innerHTML = hours + this._delimiter + minutes;
  438.     }
  440.     _start() {
  441.       this._setTime();
  442.       setInterval(this._setTime, 1000);
  443.     }
  444.   }
  446.   class Help {
  447.     constructor(options) {
  448.       this._el = $.el('#help');
  449.       this._commands = options.commands;
  450.       this._newTab = options.newTab;
  451.       this._toggled = false;
  452.       this._buildAndAppendLists();
  453.       this._bindMethods();
  454.       this._registerEvents();
  455.     }
  457.     toggle(show) {
  458.       this._toggled = (typeof show !== 'undefined') ? show : !this._toggled;
  459.       this._toggled ? $.bodyClassAdd('help') : $.bodyClassRemove('help');
  460.     }
  462.     _bindMethods() {
  463.       this._handleKeydown = this._handleKeydown.bind(this);
  464.     }
  466.     _buildAndAppendLists() {
  467.       const lists = document.createElement('ul');
  468.       lists.classList.add('categories');
  470.       this._getCategories().forEach(category => {
  471.         lists.insertAdjacentHTML(
  472.           'beforeend',
  473.           `<li class="category">
  474.             <h2 class="category-name">${category}</h2>
  475.             <ul>${this._buildListCommands(category)}</ul>
  476.           </li>`
  477.         );
  478.       });
  480.       this._el.appendChild(lists);
  481.     }
  483.     _buildListCommands(category) {
  484.       return this._commands.map(([cmdCategory, name, key, url]) => {
  485.         if (cmdCategory === category) {
  486.           return (
  487.             `<li class="command">
  488.               <a href="${url}" target="${this._newTab ? '_blank' : '_self'}">
  489.                 <!--<span class="command-key">${key}</span>-->
  490.                 <span class="command-name">${name}</span>
  491.               </a>
  492.             </li>`
  493.           );
  494.         }
  495.       }).join('');
  496.     }
  498.     _getCategories() {
  499.       const categories = this._commands
  500.         .map(([category]) => category)
  501.         .filter(category => category);
  503.       return [...new Set(categories)];
  504.     }
  506.     _handleKeydown(e) {
  507.       if ($.key(e) === 'escape') this.toggle(false);
  508.     }
  510.     _registerEvents() {
  511.       document.addEventListener('keydown', this._handleKeydown);
  512.     }
  513.   }
  515.   class Influencer {
  516.     constructor(options) {
  517.       this._limit = options.limit;
  518.       this._queryParser = options.queryParser;
  519.     }
  521.     addItem() {}
  522.     getSuggestions() {}
  524.     _addSearchPrefix(items, query) {
  525.       const searchPrefix = this._getSearchPrefix(query)
  526.       return items.map(s => searchPrefix ? searchPrefix + s : s);
  527.     }
  529.     _getSearchPrefix(query) {
  530.       const { isSearch, key, split } = this._parseQuery(query);
  531.       return isSearch ? `${key}${split} ` : false;
  532.     }
  534.     _parseQuery(query) {
  535.       return this._queryParser.parse(query);
  536.     }
  537.   }
  539.   class DuckDuckGoInfluencer extends Influencer {
  540.     constructor({ queryParser }) {
  541.       super(...arguments);
  542.     }
  544.     getSuggestions(rawQuery) {
  545.       const { query } = this._parseQuery(rawQuery);
  546.       if (!query) return Promise.resolve([]);
  548.       return new Promise(resolve => {
  549.         const endpoint = 'https://duckduckgo.com/ac/';
  550.         const callback = 'autocompleteCallback';
  552.         window[callback] = res => {
  553.           const suggestions = res.map(i => i.phrase)
  554.             .filter(s => !$.ieq(s, query))
  555.             .slice(0, this._limit)
  557.           resolve(this._addSearchPrefix(suggestions, rawQuery));
  558.         };
  560.         $.jsonp(`${endpoint}?callback=${callback}&q=${query}`);
  561.       });
  562.     }
  563.   }
  565.   class Suggester {
  566.     constructor(options) {
  567.       this._limit = options.limit;
  568.       this._suggestionEls = [];
  569.       this._bindMethods();
  570.       this._registerEvents();
  571.     }
  573.     setOnClick(callback) {
  574.       this._onClick = callback;
  575.     }
  577.     setOnHighlight(callback) {
  578.       this._onHighlight = callback;
  579.     }
  581.     setOnUnhighlight(callback) {
  582.       this._onUnhighlight = callback;
  583.     }
  585.     _unHighlight(e) {
  586.       const el = $.el('.highlight');
  588.       if (el) {
  589.         this._onUnhighlight();
  590.         el.classList.remove('highlight');
  591.         if (e) e.preventDefault();
  592.       }
  593.     }
  594.   }
  596.   class QueryParser {
  597.     constructor(options) {
  598.       this._commands = options.commands;
  599.       this._searchDelimiter = options.searchDelimiter;
  600.       this._pathDelimiter = options.pathDelimiter;
  601.       this._protocolRegex = /^[a-zA-Z]+:\/\//i;
  602.       this._urlRegex = /^((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)$/i;
  603.     }
  605.     parse(query) {
  606.       const res = { query: query, split: null };
  608.       if (query.match(this._urlRegex)) {
  609.         const hasProtocol = query.match(this._protocolRegex);
  610.         res.redirect = hasProtocol ? query : 'http://' + query;
  611.       } else {
  612.         const splitSearch = query.split(this._searchDelimiter);
  613.         const splitPath = query.split(this._pathDelimiter);
  615.         this._commands.some(([category, name, key, url, searchPath]) => {
  616.           res.isKey = query === key;
  617.           res.isSearch = !res.isKey && splitSearch[0] === key;
  618.           res.isPath = !res.isKey && splitPath[0] === key;
  620.           if (res.isKey || res.isSearch || res.isPath) {
  621.             res.key = key;
  623.             if (res.isSearch && searchPath) {
  624.               res.split = this._searchDelimiter;
  625.               res.query = this._shiftAndTrim(splitSearch, res.split);
  626.               res.redirect = this._prepSearch(url, searchPath, res.query);
  627.             } else if (res.isPath) {
  628.               res.split = this._pathDelimiter;
  629.               res.path = this._shiftAndTrim(splitPath, res.split);
  630.               res.redirect = this._prepPath(url, res.path);
  631.             } else {
  632.               res.redirect = url;
  633.             }
  635.             return true;
  636.           }
  638.           if (key === '*') {
  639.             res.redirect = this._prepSearch(url, searchPath, query);
  640.           }
  641.         });
  642.       }
  644.       res.color = this._getColorFromUrl(res.redirect);
  645.       res.logo = this._getLogoFromUrl(res.redirect);
  646.       return res;
  647.     }
  649.     _getColorFromUrl(url) {
  650.       const domain = this._getHostname(url);
  651.       const color = this._commands
  652.         .filter(c => this._getHostname(c[3]) === domain)
  653.         .map(c => c[5])[0];
  655.       return color || null;
  656.     }
  658.     _getLogoFromUrl(url) {
  659.       const domain = this._getHostname(url);
  660.       const logo = this._commands
  661.         .filter(c => this._getHostname(c[3]) === domain)
  662.         .map(c => c[6])[0];
  664.       return logo || null;
  665.     }
  666.     _getHostname(url) {
  667.       const parser = document.createElement('a');
  668.       parser.href = url;
  669.       return parser.hostname.replace(/^www./, '');
  670.     }
  672.     _prepPath(url, path) {
  673.       return this._stripUrlPath(url) + '/' + path;
  674.     }
  676.     _prepSearch(url, searchPath, query) {
  677.       if (!searchPath) return url;
  678.       const baseUrl = this._stripUrlPath(url);
  679.       const urlQuery = encodeURIComponent(query);
  680.       searchPath = searchPath.replace('{}', urlQuery);
  681.       return baseUrl + searchPath;
  682.     }
  684.     _shiftAndTrim(arr, delimiter) {
  685.       arr.shift();
  686.       return arr.join(delimiter).trim();
  687.     }
  689.     _stripUrlPath(url) {
  690.       const parser = document.createElement('a');
  691.       parser.href = url;
  692.       return `${parser.protocol}//${parser.hostname}`;
  693.     }
  694.   }
  696.   class Form {
  697.     constructor(options) {
  698.       this._formEl = $.el('#search-form');
  699.       this._inputEl = $.el('#search-input');
  700.       this._logoEl = $.el('#search-logo');
  701.       this._colors = options.colors;
  702.       this._help = options.help;
  703.       this._queryParser = options.queryParser;
  704.       this._instantRedirect = options.instantRedirect;
  705.       this._newTab = options.newTab;
  706.       this._inputElVal = '';
  707.       this._bindMethods();
  708.       this._registerEvents();
  709.       this._loadQueryParam();
  710.     }
  712.     hide() {
  713.       $.bodyClassRemove('form'),
  714.       this._inputEl.value = '';
  715.       this._inputElVal = '';
  716.     }
  718.     show() {
  719.       $.bodyClassAdd('form');
  720.       this._inputEl.focus();
  721.     }
  723.     _bindMethods() {
  724.       this.hide = this.hide.bind(this);
  725.       this.show = this.show.bind(this);
  726.       this._clearPreview = this._clearPreview.bind(this);
  727.       this._handleKeydown = this._handleKeydown.bind(this);
  728.       this._handleInput = this._handleInput.bind(this);
  729.       this._previewValue = this._previewValue.bind(this);
  730.       this._submitForm = this._submitForm.bind(this);
  731.       this._submitWithValue = this._submitWithValue.bind(this);
  732.     }
  734.     _clearPreview() {
  735.       this._previewValue(this._inputElVal);
  736.       this._inputEl.focus();
  737.     }
  739.     _handleKeydown(e) {
  740.       if ($.isUp(e) || $.isDown(e) || $.isRemove(e)) return;
  742.       switch ($.key(e)) {
  743.         case 'alt':
  744.         case 'ctrl':
  745.         case 'enter':
  746.         case 'shift':
  747.         case 'super': return;
  748.         case 'escape': this.hide(); return;
  749.       }
  751.       this.show();
  752.     }
  754.     _handleInput() {
  755.       const newQuery = this._inputEl.value;
  756.       const isHelp = newQuery === '?';
  757.       const { isKey } = this._queryParser.parse(newQuery);
  758.       this._inputElVal = newQuery;
  759.       this._setBackgroundFromQuery(newQuery);
  760.       if (!newQuery || isHelp) this.hide();
  761.       if (isHelp) this._help.toggle();
  762.       if (this._instantRedirect && isKey) this._submitWithValue(newQuery);
  763.     }
  765.     _loadQueryParam() {
  766.       const q = new URLSearchParams(window.location.search).get('q');
  767.       if (q) this._submitWithValue(q);
  768.     }
  770.     _previewValue(value) {
  771.       this._inputEl.value = value;
  772.       this._setBackgroundFromQuery(value);
  773.     }
  775.     _redirect(redirect) {
  776.       if (this._newTab) window.open(redirect, '_blank');
  777.       else window.location.href = redirect;
  778.     }
  780.     _registerEvents() {
  781.       document.addEventListener('keydown', this._handleKeydown);
  782.       this._inputEl.addEventListener('input', this._handleInput);
  783.       this._formEl.addEventListener('submit', this._submitForm, false);
  785.     }
  787.     _setBackgroundFromQuery(query) {
  788.       if (!this._colors) return;
  789.       const { color, logo } = this._queryParser.parse(query);
  790.       this._formEl.style.backgroundColor = color;
  791.       if (logo) {
  792.         this._logoEl.src = logo;
  793.         // show
  794.         this._logoEl.style.display = 'block';
  795.       } else {
  796.         // hide
  797.         this._logoEl.style.display = 'none';
  798.       }
  799.     }   
  800.     _submitForm(e) {
  801.       if (e) e.preventDefault();
  802.       const query = this._inputEl.value;
  803.       if (this._suggester) this._suggester.success(query);
  804.       this.hide();
  805.       this._redirect(this._queryParser.parse(query).redirect);
  806.     }
  808.     _submitWithValue(value) {
  809.       this._inputEl.value = value;
  810.       this._submitForm();
  811.     }
  812.   }
  813. </script>
  815. <script>
  816.   const getHelp = () => {
  817.     return new Help({
  818.       commands: CONFIG.commands,
  819.       newTab: CONFIG.newTab,
  820.     });
  821.   };
  823.   const getQueryParser = () => {
  824.     return new QueryParser({
  825.       commands: CONFIG.commands,
  826.       pathDelimiter: CONFIG.pathDelimiter,
  827.       searchDelimiter: CONFIG.searchDelimiter,
  828.     });
  829.   };
  831.   const getForm = () => {
  832.     return new Form({
  833.       colors: CONFIG.colors,
  834.       help: getHelp(),
  835.       instantRedirect: CONFIG.instantRedirect,
  836.       newTab: CONFIG.newTab,
  837.       queryParser: getQueryParser(),
  838.       suggester: CONFIG.suggestions ? getSuggester() : false,
  839.     });
  840.   };
  842.   new Clock({
  843.     delimiter: CONFIG.clockDelimiter,
  844.     form: getForm(),
  845.   });
  847.   if (CONFIG.theme) {
  848.     const link = document.createElement('link');
  849.     link.href = CONFIG.theme;
  850.     link.type = 'text/css';
  851.     link.rel = 'stylesheet';
  852.     $.el('head').appendChild(link);
  853.   }
  854. </script>


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Marsh Posté le 14-07-2018 à 15:03:13   

Reply

Marsh Posté le 14-07-2018 à 22:12:29    

Bonjour,  
 
Quelque chose comme cela ?  
 

Code :
  1. _setTime() {
  2.       const date = new Date();
  3.       /* array to change num of the months to name of the months  */
  4.       var months = new Array();
  5.       months[0] = "January";
  6.       months[1] = "February";
  7.       months[2] = "March";
  8.       months[3] = "April";
  9.       months[4] = "May";
  10.       months[5] = "June";
  11.       months[6] = "July";
  12.       months[7] = "August";
  13.       months[8] = "September";
  14.       months[9] = "October";
  15.       months[10] = "November";
  16.       months[11] = "December";
  17.       const hours = this._pad(date.getHours());
  18.       const minutes = this._pad(date.getMinutes());
  19.       const year = this._pad(date.getYear());
  20.       const month = months[date.getMonth()];
  21.       const day = this._pad(date.getDate());
  23.       /* Layout of display */
  24.       this._el.innerHTML = hours + this._delimiter + minutes + "<br>" + day  + " " + month + " " + "20" + year;
  25.     }


 
https://image.ibb.co/mTTnnT/Sans_titre.jpg


Message édité par dabear14 le 14-07-2018 à 22:22:33
Reply

Marsh Posté le 14-07-2018 à 22:15:34    

Bonjour dabear14,
 
Merci de prendre du temps pour me répondre.
Alors oui quelque chose comme cela mais avec le jour de la semaine en plus et la date au dessus de l'heure.
 
Merci à toi encore une fois d'essayer de m'aider.
 
Au départ, je pensais intégrer ce genre de script ci-dessous mais je n'y suis pas arrivé sans mauvais affichage et je n'ai pas réussi à l'intégrer avec l'heure.
 

Code :
  1. <span id="date"></span>
  2.     <script type="text/javascript">window.onload = date('date');</script>
  4. ******************************************
  7. function date(id)
  8.     {
  9.             date = new Date;
  10.             annee = date.getFullYear();
  11.             moi = date.getMonth();
  12.             mois = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
  13.             j = date.getDate();
  14.             jour = date.getDay();
  15.             jours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
  16.             h = date.getHours();
  17.             if(h<10)
  18.             {
  19.                     h = "0"+h;
  20.             }
  21.             m = date.getMinutes();
  22.             if(m<10)
  23.             {
  24.                     m = "0"+m;
  25.             }
  26.             s = date.getSeconds();
  27.             if(s<10)
  28.             {
  29.                     s = "0"+s;
  30.             }
  31.             resultat = 'Nous sommes le '+jours[jour]+' '+j+' '+mois[moi]+' '+annee;
  32.             document.getElementById(id).innerHTML = resultat;
  33.             setTimeout('date("'+id+'" );','1000');
  34.             return true;
  35.     }


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Marsh Posté le 14-07-2018 à 22:25:09    

Pour inverser la date et l'heure :  
this._el.innerHTML = day + " " + month + " " + "20" + year + "<br>" + hours + this._delimiter + minutes;

Reply

Marsh Posté le 14-07-2018 à 22:30:34    

Merci beaucoup ;)
 
Et pour les jours, tu saurais comment les mettre aussi stp car mes essais restent infructueux.
 
Encore mercidabear14 :)


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Marsh Posté le 14-07-2018 à 22:41:15    

https://image.ibb.co/j8LTu8/Sans_titre2.jpg
 
 

Code :
  1. _setTime() {
  2. const date = new Date();
  3. var months = new Array();
  4. months[0] = "Janvier";
  5. months[1] = "Février";
  6. months[2] = "Mars";
  7. months[3] = "Avril";
  8. months[4] = "Mai";
  9. months[5] = "Juin";
  10. months[6] = "Juillet";
  11. months[7] = "Aout";
  12. months[8] = "Septembre";
  13. months[9] = "Octobre";
  14. months[10] = "Novembre";
  15. months[11] = "Decembre";
  16. const hours = this._pad(date.getHours());
  17. const minutes = this._pad(date.getMinutes());
  18. const year = this._pad(date.getYear());
  19. const month = months[date.getMonth()];
  20. var days = new Array( "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche" );
  21. const day = days[date.getDay()-1];
  22. const ddate = date.getDate();
  23. this._el.innerHTML = day + " " + ddate + " " + month + " " + "20" + year + "<br>" + hours + this._delimiter + minutes;
  24. }


 
En français c'est mieux :D


Message édité par dabear14 le 14-07-2018 à 22:43:52
Reply

Marsh Posté le 14-07-2018 à 22:46:50    

Ca ne fonctionne pas chez moi le script. Il me transforme tout le contenu en un simple petite trait.


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Marsh Posté le 14-07-2018 à 23:00:29    

Je viens de check, en reprenant tout le code c'est OK de mon coté,  
N'as tu pas supprimé un point virgule ? Ou fais attention, j'ai changé des noms de variables entre les différents posts :/
 
Que dis l'inspecteur de ton navigateur ? (console)


Message édité par dabear14 le 14-07-2018 à 23:01:30
Reply

Marsh Posté le 14-07-2018 à 23:06:24    

En effet, en faisant une comparaison des deux codes, j'avais un ";" manquant.
 
Merci encore à toi de m'avoir aidé et rendu service. Tu as été un chef !
 
Merci dabear14 ;)


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Marsh Posté le 14-07-2018 à 23:21:21    

Avec plaisir :)  
 
 

Reply

Marsh Posté le 14-07-2018 à 23:21:21   

Reply

Marsh Posté le 15-07-2018 à 00:03:42    

Finalement, je reviens vers toi dabear14 parce qu'au passage d'une nouvelle journée à savoir il y a trois minutes, ça m'affiche ça maintenant. Même en rafraichissant la page et en changeant de navigateur, ça n'arrange pas le soucis.
Tu saurais d’où ça peut venir stp ?
 
https://i.imgur.com/tG7XxMM.png


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Marsh Posté le 15-07-2018 à 15:59:19    

Oui, en effet, les jours sont fait en partant de dimanche (qui est 0) et Samedi est le dernier (6)  
Donc en changeant l'ordre des jours dans le tableau et en otant le getDate() -1 cela devrait être corrigé (désolé j'ai un peu de mal à réfléchir, j'ai entamé la coupe du monde :D) :  

Code :
  1. var days = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", );
  2. const day = days[date.getDay()];
  3. const ddate = date.getDate();
  4. this._el.innerHTML = day + " " + ddate + " " + month + " " + "20" + year + "<br>" + hours + this._delimiter + minutes;


il me semble cela corrigera le problème :)
 
 
A la votre et allez les bleus !

Reply

Marsh Posté le 15-07-2018 à 17:56:55    

Merci d'avoir regardé dabear14, apparemment, le soucis est réglé ;)
 
Merci beaucoup une nouvelle fois :)


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed