primerpushOlatz

README.md

@@ -1,6 +1,47 @@
-# web_peliculas
-Web de consulta de películas con la API de OMDB
-# Objetivos proyecto:
-al menos una llamada a API
-al menos un elemento de DOM creado dinámicamente
-guardar algo en local/sessionStorage
+# Películas API Web
+
+Este proyecto web permite buscar películas utilizando la API OMDB. Puedes ingresar el título de una película, año y tipo (si lo deseas) y obtener resultados de películas relacionadas.
+
+## Funcionalidades
+
+- Búsqueda de películas por título, año y tipo.
+- Visualización de detalles de películas, como título, año, tipo y más.
+- Posibilidad de marcar películas como favoritas.
+- Eliminación de resultados de búsqueda.
+- Visualización de calificaciones y otros datos de la película.
+
+## Cómo funciona
+
+Este proyecto está construido utilizando HTML, CSS y JavaScript. Hace uso de la API OMDB para obtener información sobre películas. Aquí hay una breve descripción de cómo funciona el código:
+
+- Cuando se envía el formulario de búsqueda, se recopilan los datos de título, año y tipo de película.
+- Se realiza una solicitud a la API OMDB con los parámetros de búsqueda.
+- Los resultados se muestran en forma de tarjetas en la página web.
+- Puedes hacer clic en una tarjeta para ver más detalles de la película, incluyendo calificaciones y otra información relevante.
+- También puedes marcar películas como favoritas haciendo clic en una estrella.
+
+## Cómo usar
+
+1. Clona o descarga este repositorio en tu máquina local.
+2. Abre el archivo `index.html` en tu navegador web.
+3. Ingresa el título de una película en el formulario de búsqueda y opcionalmente el año y tipo.
+4. Haz clic en "Buscar" para ver los resultados.
+5. Haz clic en una tarjeta de película para obtener detalles adicionales.
+6. Marca películas como favoritas haciendo clic en la estrella.
+
+## Contribución
+
+Si deseas contribuir a este proyecto, siéntete libre de abrir un problema o enviar una solicitud de extracción. Estamos abiertos a mejoras y nuevas características.
+
+## Autores
+
+- David Ramos
+- Olatz Goti
+- Alex Basurto
+
+## Licencia
+
+Sin licencia.
+
+¡Esperamos que disfrutes utilizando este proyecto!
+

css/reset.css

@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/style.css

@@ -0,0 +1,247 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,500;0,700;1,100;1,200&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,500;0,700;1,100;1,200&family=Young+Serif&display=swap');
+
+body{
+    font-family: 'Montserrat', sans-serif;
+    background: #2a2a2a;
+    background: linear-gradient(90deg, rgba(42,42,42,1) 0%, rgba(144,151,153,1) 50%, rgba(42,42,42,1) 100%);
+}
+
+#titulo-header{
+    font-size: 65px;
+    text-align: center;
+    margin: 20px;
+    color: #FFC007;
+    font-family: 'Young Serif', sans-serif;
+}
+
+.movie-title-h2{
+    padding-top: 15px;
+    font-weight: 900;
+    font-size: 22px;
+    text-align: center;
+    color: rgb(37, 37, 37);
+}
+
+input[type=text]{
+    text-align: center;
+    padding: 15px 0;
+    width: 15%;
+    margin: 10px 0;
+    border-radius: 10px;
+    color: rgb(37, 37, 37);
+    font-size: 18px;
+    border: none;
+    background-color: #B8B8B8;
+    color: #2a2a2a;
+}
+
+#submit{
+    padding: 5px 15px;
+    margin: 10px 0;
+    border-radius: 10px;
+    background-color: #FFC007;
+    color: rgb(37, 37, 37);
+    font-size: 20px;
+    border: none;
+    width: 150px;
+}
+
+#submit:hover{
+    background: #B8B8B8;
+    color: rgb(37, 37, 37);
+    font-weight: 500;
+}
+
+#clear-elements{
+    padding: 5px 15px;
+    margin: 10px 0;
+    border-radius: 10px;
+    background-color: #FFC007;
+    color: rgb(37, 37, 37);
+    font-size: 20px;
+    border: none;
+    width: 150px;
+}
+
+#clear-elements:hover{
+    background: #B8B8B8;
+    color: rgb(37, 37, 37);
+    font-weight: 500;
+}
+
+#movie-search-form{
+    text-align: center;
+    padding: 20px;
+
+}
+
+#movie-year-p, #movie-type-p{
+    font-weight: 500;
+    padding-top: 10px;
+    font-size: 18px;
+    text-align: center;
+    color: rgb(37, 37, 37);
+
+}
+
+#main-container{
+    width: 80%;
+    display: flex;
+    margin: 0 auto;
+    justify-content: center;
+}
+
+.clBusqueda{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-left: 50px;
+}
+
+.movie-details{
+    width: 16%;
+    padding-bottom: 25px;
+    background-color: #b8b8b8;
+    margin-bottom: 60px;
+    border-radius: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#movie-details-container {
+    margin-left: 0;
+}
+
+.movie-image:hover{
+    cursor: pointer;
+}
+
+.movie-image{
+    height: 400px;
+    width: 90%;
+    overflow: hidden;
+    border-radius: 10px;
+    display: block;
+    margin-top: 60px;
+
+}
+
+.clFicha
+{
+
+    border: 1px solid rgb(107, 90, 90);
+    padding: 20px;
+    background-color: #A8A8A8;
+    border-radius: 10px;
+    align-items: center;
+    width: 100%;
+    position: relative;
+}
+
+.title-style
+{
+color: "red";
+font-size: 80px;
+text-align: center;
+color:rgb(37, 37, 37);
+
+}
+
+.article-principal{
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 20px;
+}
+
+.article-text
+{
+width: 65%;
+display: block;
+text-align: left;
+}
+
+.article-image
+{
+    width: 35%;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+img{
+    object-fit: cover;
+    width:400px;
+    border-radius: 10px;
+}
+
+img.favorite {
+    width: 48px;
+    height: 48px;
+}
+
+.clFicha > img.favorite {
+    position: absolute;
+    top: 40px;
+    right: 40px;
+    width: 60px;
+    height: 60px;
+}
+
+h1
+{
+    line-height: 1.6;
+}
+
+p
+{   
+    padding:10px;
+    margin-top: 5px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    line-height: 1.5;
+    font-size: 23px;
+    color:rgb(37, 37, 37);
+}
+
+
+.article-more-info{
+
+    justify-content: space-evenly;
+    align-items: center;
+    padding-bottom: 20px;
+    margin: auto 5%;
+    padding-top: 0;
+    margin-top: 0;
+
+}
+
+.article-ratings{
+
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 20px;
+}
+
+.article-rating1{
+
+    display: flex;
+
+}
+
+.favorite{
+    width: 35px;
+    height: 35px;
+    margin-top: 10px;
+}

ficha_pelicula.html

@@ -1,2 +1,13 @@
 <!--¿¿queremos la ficha de película en una página aparte o en el mismo index??-->
 
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>