I have this project where I connect with an api of series and I do it modularly using browserify but the web app does not want to connect with the api even though the console does not throw an error when I execute it with the command, I do not know if it's because the modules do not connect well.
body{
background-color: #bdc3cf;
margin:0;
font-family: Roboto;
}
#app-container{
width: 100%;
overflow: hidden;
}
#app-header{
width: 100%;
height: 10vh;
position: fixed;
background-color:#2ecc71;
text-align: center;
z-index: 10;
}
#app-header h1{
line-height: 10vh;
margin: 0;
color: white;
}
#app-sectionbody{
padding-top:15vh;
width: 80%;
margin: 0 auto;
min-height: 75vh;
}
#app-footer{
width: 100%;
min-height: 40vh;
}
#app-footer p{
margin: 0 auto;
width: 40%;
text-align: center;
padding-top: 30px;
border-top: 1px solid #7f8c8d;
}
.tv-show {
display: flex;
width:100%;
overflow: hidden;
padding: 16px;
background-color: white;
margin-bottom: 16px;
position: relative;
}
.tv-show:hover{
background-color: #ecf0f1;
}
.tv-show button.like{
background: transparent;
border: 0;
outline: 0;
position: absolute;
top: 10px;
right: 10px;
font-size: 22px;
cursor: pointer;
transition: all 1s ease;
}
.tv-show.liked{
background-color: #E08283;
}
.tv-show.liked:hover{
background-color: #F1A9A0;
}
.tv-show.liked button.like{
font-size: 40px;
}
.tv-show .info p,h1{
padding-left: 20px;
}
.tv-show .info p{
text-align: justify;
}
.tv-show img {
min-height: 20px;
min-width: 100px;
}
#app-sectionbody .search-form{
width: 50%;
margin: 0 auto;
text-align: center;
margin-bottom: 20px;
font-size: 22px;
}
#app-sectionbody .search-form input[type="text"]{
padding: 12px 16px;
border-radius: 6px;
width: 350px;
}
button{
height: 42px;
border-radius: 6px;
width: 100px;
}
/*codigo del efecto spinner*/
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Titulo de Página</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<!---->
<body>
<div id="app-container">
<header id="app-header">
<h1>TVify</h1>
</header>
<section id="app-sectionbody">
<form action="" class="search-form">
<input type="text">
<button type="submit">
buscar
</button>
</form>
<div class="tv-shows">
<div class="loader"></div>
</div>
</section>
<footer id="app-footer">
<p>hecho con amor <3 </p>
</footer>
</div>
<script src="app.js"></script>
</body>the app.js is the compilation in the console of the modules that are in different files the first one: render index.js
/**
* Module Dependencies
*/
var $ = require('jquery');
var $tvShows = require('..\proyecto tvfy\src\tv-shows-container');
var estructurahtmlarticle = '<article class="tv-show">'+
'<div class="left img-container">'+
'<img src=":img:" alt=":img alt:">'+
'</div>'+
'<div class="left info">'+
'<h1>:name:</h1>'+
'<p>:summary:</p>'+
'<button class="fas fa-heart like"></button>'
'</div>'+
'</article>';
module.export = function renderShows(shows){
$tvShows.find('.loader').remove();
shows.forEach(function(show){
var articleshows = estructurahtmlarticle
.replace(':name:', show.name)
.replace(':img:', show.image ? show.image.medium : '')
.replace(':summary:', show.summary)
.replace(':img alt:', show.name + " Logo")
var $articleshows = $(articleshows)
$tvShows.append($articleshows.fadeIn(7500))
})
}the second tvmaze-api-client folder contains another index.js
/**
*Module Dependecies
*/
var $ = require('jquery');
module.export = function getShows(fn){
$.ajax('http://api.tvmaze.com/shows',{
success: function(shows,textStatus, xhr){
fn(shows)
}
})
}
module.export = function searchShows(busqueda,fn){
$.ajax({url: 'http://api.tvmaze.com/search/shows',
data:busqueda,
success: function (res, textStatus, xhr){
fn(res)
}
})
}the third folder tv-shows-container contains another index.js
/**
* Module Dependencies
*/
var $ = require('jquery');
module.export = $('#app-sectionbody').find('.tv-shows');and the index.js of the src folder that contains the 3 folders that you place
var $ = require('jquery');
var page = require('page');
var { getShows } = require('..\proyecto tvfy\src\tvmaze-api-client');
var renderShows = require('..\proyecto tvfy\src\render');
var $tvShows = require('..\proyecto tvfy\src\tv-shows-container');
page('/',function (ctx,next){
if (!localStorage.shows){
getShows(function(shows){
$tvShows.find('.loader').remove();
localStorage.shows = JSON.stringify(shows);
renderShows(shows);
})
}else{
renderShows(JSON.parse(localStorage.shows));
}
})
page()Like I said I do not know if it's because the connection of the modules is doing it wrong the package.json:
{
"name": "tvify",
"description": "Una web para seleccionar tus series",
"version": "0.1.0",
"dependencies": {
"jquery": "^3.3.1",
"page": "^1.8.6",
"serve": "^7.2.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babel-core": "^6.26.3",
"babelify": "^8.0.0",
"browserify": "^16.2.2"
},
"scripts": {
"public": "mkdir public",
"build-js": "browserify src/index.js > public/app.js",
"copy-files": "copy index.html public",
"build": "npm run public && npm run build-js && npm run copy-files"
}
}