html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iphone playground</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- CSS file -->
<link rel="stylesheet" href="app.css">
</head>
<body>
<!-- Main content -->
<div class=container >
<h1>F challenge </h1>
<form id="form" >
<div class="input_container">
<input type="text" placeholder="Text to transform">
</div>
<div class="input_container">
<button> transform word</button>
</div>
</form>
<div id="display_js"></div>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//css variables
:root{
--bg_body: red;
--txt_color: #f3f3f3;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body{
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 20px;
font-family: "Helvetica",arial,Sans serif;
}
body{
text-align: center;
background-color: #c6c6c6;
color: #f3f3f3;
}
.container{
position: relative;
min-height: 100vh;
display: flex;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// challenge
function cambiarPalabra(palabra){
let nuevaPalabra="";
//separar la palabre en letras
palabra = palabra.toLowerCase().split('');
//vocales
const abc= ['a','e','i','o','u'];
//console.log(palabra);
//checar la lista de paabras
palabra.forEach((letra,index) => {
//console.log(letra);
if(abc.indexOf(letra) === -1){
nuevaPalabra+= letra;
}
else{
let localisacionDeLetra = abc.indexOf(letra);
nuevaPalabra+=letra +"f"+abc[localisacionDeLetra];
}
})
//checar la letra si es una vocal
return nuevaPalabra;
}
window.addEventListener("load", function(){
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run