Alert,Prompt, Confirm

Crea un exemple al teu sandbox i demostra l’ús del mètode window.alert() Crea un exemple al teu sandbox i demostra l’ús del mètode window.prompt() Crea un exemple al teu sandbox i demostra l’ús del mètode window.confirm()

by merygarriga

HTML

<!DOCTYPE html>
<html>
<head></head>
<body>

<h1>ALERT, PROMPT and CONFIRM</h1>
<h2>WINDOW.ALERT</h2>
<p>First we're gonna try the alert. It creates an alert box to display the information.</p>
<button onclick="alertTest()">Alert Button</button>

<br><br><br>
<h2>WINDOW.PROMPT</h2>
<p>Now we're gonna try the prompt. It shows a dialog box that asks to the user for an input.</p>
<button onclick="whoAreU()">Try the Prompt</button>
<br><br>
<p id="welcome"></p>

<br>
<h2>WINDOW.CONFIRM</h2>
<p>At last we're gonna try the confirm. It displays a dialog box with a message, and an OK button and a CANCEL button.<br> This method returns <b>true</b> if u press the OK button, if not returns <b>false</b>.</p>
<button onclick="uConfirm()">Confirm Method</button>
<br><br>
<p id="confirmed"></p>

</body>
</html>

CSS

* {
    box-sizing: border-box;
}

body {
    font-family:  'Courier New', Courier, monospace;
    background: url(../imagenes/escut.png) repeat fixed 0px -81px;
    text-align: center;
    background-color: slategray;
}

h1 {
    font-size: 3em;
    color: #DED1A9;
}

h2 { 
  font-size: 2em;
  font-weight: bold; 
  font-family: Arial, Helvetica, sans-serif;
  color: #1A3651;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  color: #B0B8BF;
}

button {
  background-color: #DEBAA9;
  border-radius: 12px;
  border: 1px solid #000000;
  color: #AD7960;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

button:hover {
  background-color: #AD7960;
  color: #7D3F21;
}

#welcome, #confirmed{
  color: #DEBAA9;
  font-weight: bold;
}

JavaScript

function alertTest(){
	window.alert("Hello You!");
}

function whoAreU(){
	let person = prompt("Please enter your name", "Tom");

	if (person != null) {
    document.getElementById("welcome").innerHTML =
      "Welcome " + person + "!<br> Hope you have a nice day!😊<br>";
    let img = document.createElement("img");
    img.src= "https://media.tenor.com/cxsA-a-8uz0AAAAS/tom-and-jerry-jerry-the-mouse.gif";
    let div = document.getElementById("welcome");
    div.appendChild(img);
    block.setAttribute("style", "text-align:center");
	}
}

function uConfirm() {
  let text = "Choose either OK or Cancel.\nThen we'll see the surprise.";
  if (confirm(text) == true) {
    let img = document.createElement("img");
    img.src= "https://media.tenor.com/i3kHByYJk5kAAAAd/nice-good.gif";
    let div = document.getElementById("confirmed");
    div.appendChild(img);
    block.setAttribute("style", "text-align:center");
  } else {
  	let img = document.createElement("img");
    img.src= "https://media.tenor.com/iTYu258_py8AAAAM/why-whatever.gif";
    let div = document.getElementById("confirmed");
    div.appendChild(img);
    block.setAttribute("style", "text-align:center");
  }
  document.getElementById("confirmed").innerHTML = text;
}