BabyStore

Developer
Size
3,807 Kb
Views
18,216

How do I make an babystore?

What is a babystore? How do you make a babystore? This script and codes were developed by Pablo Ai on 03 October 2022, Monday.

BabyStore Previews

BabyStore - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BabyStore</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1>Baby<span>Store</span></h1> <button class="cambiar-col">cambiar</button> <button class="eliminar-pro">Eliminar</button> <nav> <ul> <li class="active"><a href="">Home</a></li> <li><a href="">About us</a></li> <li><a href="">Contact</a></li> </ul> </nav>
</header>
<h2>El Baby Del Momento:</h2>
<div id="babyDelMomento"></div>
<button class="newBaby">New Baby</button>
<hr />
<h3>Otros babys:</h3>
<ul class="babys"> <li> <img src="http://lorempixel.com/200/100/" alt="" /> <div>Pepo Gomez</div> <a href="mailto:[email protected]">[email protected]</a> </li>
</ul>
<footer> <form> <input class='name' placeholder='Ingrese su nombre' type="text" required/> <input class='email' placeholder='Ingrese su email' type="email" required/> <button class='send'>Enviar</button> </form> <h3 class="mensaje">Gracias <span class="nombre"></span>! Te enviaremos los newsletter a <span class="email"></span></h3> <p>BabyStore 2017</p>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

BabyStore - Script Codes CSS Codes

body { font-family: sans-serif; margin: 0; padding: 0; -webkit-transition: background 1s; transition: background 1s;
}
body.otro-color { background: grey;
}
h2 { font-weight: normal; text-transform: capitalize;
}
header { background: dodgerblue; padding: 10px;
}
header h1 { color: whitesmoke; font-size: 25px;
}
header h1 span { color: darkblue;
}
nav { display: none;
}
nav ul { margin: 0; padding: 0;
}
nav ul li { border: 1px solid black; display: inline-block; margin-left: 15px; padding: 15px;
}
nav ul li.active { background: darkblue;
}
nav ul li a { color: white; text-decoration: none;
}
.babys { list-style: none; overflow: hidden; padding: 0;
}
.babys > li { background: lightgray; border-radius: 5px; cursor: pointer; float: left; margin: 10px; text-align: center; padding: 20px;
}
.babys > li.selected { background: black;
}
.babys > li img { display: block; margin-bottom: 10px;
}
footer { background: #333; color: whitesmoke; padding: 15px;
}
button.send { background-color: darkblue; border-radius: 5px; color: lightgray; padding: 8px;
}
h3.mensaje { display: none;
}
.cont { margin-top: 10px; overflow: hidden;
}
.cont p { float: left; width: 100%; overflow: hidden;
}
@media (min-width: 500px) { .cont p { width: 50%; }
}
@media (min-width: 700px) { .cont p { width: 33%; }
}
.cont .p1 { background: salmon;
}
.cont .p2 { background: lightgreen;
}
.cont .p3 { background: lightblue;
}

BabyStore - Script Codes JS Codes

$('.cambiar-col').click(function(){ $('body').toggleClass('otro-color');
});
$('.products li').on('click', function(){ $(this).toggleClass('selected');
});
$('.eliminar-pro').on('click', function(){ if($('.selected').length === 0){ alert('Seleccione un producto'); } else { $('.selected').remove(); }
});
$('.send').on('click', function(event){ event.preventDefault(); $('form').hide(); $('span.nombre').text($('input.name').val()); $('span.email').text($('input.email').val()); $('.mensaje').fadeIn();
});
mostrarBabyDelMomento();
$('.newBaby').on('click', function(){ mostrarBabyDelMomento(); });
function mostrarBabyDelMomento() { $.ajax({ url: 'https://randomuser.me/api', dataType: 'json', success: function(data){ var first = data.results[0].name.first; var last = data.results[0].name.last; var email = data.results[0].email; var picture = data.results[0].picture.medium; var temp = ''; temp += '<h2>'; temp += first; temp += ' <strong>'; temp += last; temp +='</strong> '; temp += '</h2>'; temp += '<a href="mailto:email">'; temp += email; temp += '</a>'; temp += '<img src="' + picture +'" />'; $('#babyDelMomento').html(temp); }, error: function(error){ console.log(error); } });
};
function mostrarOtrosBabys() { $.ajax({ url: 'https://randomuser.me/api/?results=15', dataType: 'json', success: function(data){ var first = data.results[1].name.first; var last = data.results[1].name.last; var email = data.results[1].email; var picture = data.results[1].picture.medium; var temp = ''; temp += '<li>' temp += '<img src="' + picture +'" />'; temp += '<div>' temp += first; temp += ' '; temp += last; temp += '</div>'; temp += '<a href="mailto:email">'; temp += email; temp += '</a>'; temp += '</li>'; $('ul.babys').html(temp); } });
};
$(document).ready(function(){ mostrarBabyDelMomento(); mostrarOtrosBabys();
});
BabyStore - Script Codes
BabyStore - Script Codes
Home Page Home
Developer Pablo Ai
Username Pablo-Ai
Uploaded October 03, 2022
Rating 3
Size 3,807 Kb
Views 18,216
Do you need developer help for BabyStore?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pablo Ai (Pablo-Ai) Script Codes
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!