YzgxLzX

index.html

<div class="title">
  <h1>Sources</h1>
  <p>Outil pour faire des sources</p>
</div>
<h2>Remplir les informations suivantes: </h2>
<form id="info" method="get">
  <fieldset>
    <label><p>Le nom de l'auteur: </p><input autocomplete="off" id="nom"  type="text" required>
    </fieldset>
    <fieldset>
      <label><p>Le titre de l'article: </p><input id="article_title" autocomplete="off" type="text" required>
    </fieldset>
      <fieldset>
      <label><p>Le nom du site: </p><input autocomplete="off" required id="article_site"  type="text">
    </fieldset>
    <fieldset>
      <label><p>Le site web: </p><input autocomplete="off" required id="website"  type="url">
    </fieldset>
      <input type="submit">
</form>
        
        <h2>Result: </h2>
        <div class="textbox">
          
        </div>
             
        
             

script.js

const urlInput = document.querySelector("input[type='url']");
const area = document.querySelector(".textbox");
urlInput.addEventListener("click", (evt) =>{
  let text = evt.currentTarget.value;
  if (text === "")
    return;
   window.open("google.com/search?=allo", "_blank");
});
const form = document.getElementById("info");
form.addEventListener("submit", (evt) =>{
  evt.preventDefault();
  const name = document.getElementById("nom").value;
  const article = document.getElementById("article_title").value;
  const site = document.getElementById("article_site").value;
  const website = document.getElementById("website").value;
  area.innerHTML = copyToClipboard(name, article, site, website);
})
const monthNames = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Décembre"];

function getDate(){
  var text = "[Page consultée le "
  const now = new Date();
  text += now.getDate() + " ";
  text += monthNames[now.getMonth()] + " ";
  text += now.getFullYear() + "]";
  return text;
}

function copyToClipboard(name, article, site, website){
  const date = getDate();
  let text = "<p>" + name + ", " + "« " + article + " », " + "<i>" + site+ `</i> [En ligne], <a href="${website}">`+ website +  "</a>, "+ date + ".</p>";
  writeOnClipboard(text);  
  return text;
}


async function writeOnClipboard(text){
        const type = "text/html";
        const blob = new Blob([text], {type});
        const data = [new ClipboardItem({[type]:blob})];
        await navigator.clipboard.write(data);
        alert("It worked");
}

style.css

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
fieldset{
  border: none;
}
form label{
    width: 100%;
    display: flex;
    align-items
}
form label input{
  margin: 0 1em;
  min-width: 30%;

}
.title h1{
  
}
form{
  border: 2px solid black;
  padding-left = 0;
  min-width: 40%;
  max-width: 80%;
  margin: 1em auto;
  display: grid;
  grid-auto-flow: row;
  grid-template: auto / repeat(auto-fill, minmax(fit-content, 1fr));
  row-gap: 20px;
  padding: 20px;
}
form input[type="url"]{
  color: blue;
  text-decoration: underline;
}
form input[type="url"]:hover{
  cursor: pointer
}
.title p{
  line-height:0;
  text-align: center;
}
.title{
  margin: 1em;
}
h1{
  text-align: center;
}
.textbox{
    width: 80%;
    height: 20vh;
    border: 2px solid black;
    margin: auto;
}

yzgxlzx.markdown

YzgxLzX

A Pen by onlinemax on CodePen.

License.