Skip to content

Commit

Permalink
weather app project
Browse files Browse the repository at this point in the history
  • Loading branch information
NielRodrigues committed Apr 10, 2023
1 parent 1b01ea6 commit 1a147d9
Showing 1 changed file with 261 additions and 0 deletions.
261 changes: 261 additions & 0 deletions projects/weather-app.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="shortcut icon" href="../src/image/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../assets/owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="../assets/owlcarousel/owl.theme.default.min.css">
<title>CARLOS DEV | Projetos - Weather App</title>
</head>
<body>
<header id="menu">
<section>
<img id="logo" class="default" src="../src/image/Logo + Letreiro.png" alt="Logo e Letreiro">
<img id="logo" class="responsive" src="../src/image/Logo.svg" alt="Logo">
<nav class="mobile">
<ul>
<li>
<a href="../index.html#init"><h1>INÍCIO</h1></a>
</li>
<li>
<a href="../index.html#about"><h1>SOBRE</h1></a>
</li>
<li>
<a href="../index.html#habilities"><h1>HABILIDADES</h1></a>
</li>
<li>
<a href="../index.html#projects"><h1>PROJETOS</h1></a>
</li>
</ul>
</nav>

<nav class="default">
<ul>
<li>
<a href="../index.html#init"><h1>INÍCIO</h1></a>
</li>
<li>
<a href="../index.html#about"><h1>SOBRE</h1></a>
</li>
<li>
<a href="../index.html#habilities"><h1>HABILIDADES</h1></a>
</li>
<li>
<a href="../index.html#projects"><h1>PROJETOS</h1></a>
</li>
</ul>
</nav>

<a href="#contact" id="contact-button">
<div class="layout-button-contact-nav-bar">
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http:https://www.w3.org/2000/svg" id="send-alt" class="icon glyph"><path d="M21.88,4.73,16.2,20.65A2,2,0,0,1,14.3,22h0a2,2,0,0,1-1.9-1.31l-2.12-5.52,1.54-1.54,2.49-2.49a1,1,0,1,0-1.42-1.42l-2.49,2.49L8.82,13.76,3.31,11.63a2,2,0,0,1,0-3.83L19.27,2.12a2,2,0,0,1,2.61,2.61Z"></path></svg>
<h1>Entrar em Contato</h1>
</div>
</a>
<button class="menu-icon" id="menu-mobile">
<div class="line" id="line1"></div>
<div class="line" id="line2"></div>
<div class="line" id="line3"></div>
</button>

</section>
</header>


<section class="page-apresentation-project">
<div class="content">
<div class="header">
<h1></h1>
<div class="date">
<h3>DATA</h3>
<h2>01/01/2001</h2>
</div>
</div>

<div class="project">

<img src="../src/image/" alt="Imagem do Projeto">

<div class="description">
<h1>Descrição</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus doloribus facilis impedit deserunt sit natus officiis eligendi, necessitatibus perferendis, eius nam veritatis velit repellendus dolore quia, accusantium corrupti commodi a.</p>
</div>

<div class="technologies">
<h1>Tecnologias</h1>
<div class="imgs">

</div>
</div>

<div class="links">
<h1>Links</h1>
<div id="link">
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http:https://www.w3.org/2000/svg">
<path d="M7.23001 18.25C6.17025 18.2535 5.15243 17.8363 4.40001 17.09C3.63614 16.2785 3.22341 15.1983 3.2515 14.0842C3.27958 12.97 3.74622 11.912 4.55001 11.14L8.31001 7.35C9.12729 6.50634 10.2456 6.0209 11.42 6C11.9475 6.00352 12.4692 6.11135 12.9549 6.3173C13.4406 6.52325 13.8807 6.82324 14.25 7.2C15.0243 8.01629 15.4433 9.10627 15.4152 10.231C15.387 11.3557 14.9141 12.4234 14.1 13.2L12.84 14.46C12.7713 14.5337 12.6885 14.5928 12.5965 14.6338C12.5045 14.6748 12.4052 14.6968 12.3045 14.6986C12.2038 14.7004 12.1038 14.6818 12.0104 14.6441C11.917 14.6064 11.8322 14.5503 11.761 14.479C11.6897 14.4078 11.6336 14.323 11.5959 14.2296C11.5582 14.1362 11.5396 14.0362 11.5414 13.9355C11.5432 13.8348 11.5652 13.7355 11.6062 13.6435C11.6472 13.5515 11.7063 13.4687 11.78 13.4L13 12.1C13.5247 11.6076 13.8338 10.9279 13.86 10.2088C13.8862 9.4897 13.6275 8.78933 13.14 8.26C12.6071 7.7953 11.9167 7.55197 11.2102 7.57986C10.5037 7.60774 9.83461 7.90474 9.34001 8.41L5.61001 12.19C5.09513 12.6812 4.79158 13.3535 4.76359 14.0646C4.73559 14.7757 4.98535 15.4698 5.46001 16C5.72088 16.2578 6.03529 16.4551 6.38093 16.5778C6.72657 16.7005 7.09497 16.7456 7.46001 16.71C7.55727 16.7004 7.65547 16.7101 7.74895 16.7386C7.84243 16.7671 7.92934 16.8139 8.00465 16.8762C8.07996 16.9385 8.14218 17.0151 8.18773 17.1015C8.23327 17.188 8.26124 17.2827 8.27001 17.38C8.28956 17.5775 8.23003 17.7747 8.10444 17.9284C7.97885 18.0821 7.79746 18.1798 7.60001 18.2L7.23001 18.25Z" fill="#000000"/>
<path d="M12.58 18C12.0525 17.9965 11.5308 17.8887 11.0451 17.6827C10.5594 17.4768 10.1193 17.1768 9.75 16.8C8.97574 15.9837 8.55674 14.8937 8.58486 13.769C8.61297 12.6443 9.08592 11.5766 9.9 10.8L11.16 9.54C11.2287 9.46632 11.3115 9.40721 11.4035 9.36622C11.4955 9.32523 11.5948 9.30319 11.6955 9.30141C11.7962 9.29964 11.8962 9.31816 11.9896 9.35588C12.083 9.3936 12.1678 9.44975 12.239 9.52097C12.3103 9.59218 12.3664 9.67702 12.4041 9.77041C12.4418 9.86379 12.4604 9.96382 12.4586 10.0645C12.4568 10.1652 12.4348 10.2645 12.3938 10.3565C12.3528 10.4485 12.2937 10.5313 12.22 10.6L11 11.9C10.4753 12.3924 10.1662 13.0721 10.14 13.7912C10.1138 14.5103 10.3726 15.2107 10.86 15.74C11.3929 16.2047 12.0833 16.448 12.7898 16.4201C13.4963 16.3923 14.1654 16.0953 14.66 15.59L18.43 11.81C18.9393 11.3134 19.2355 10.6383 19.256 9.92727C19.2766 9.21626 19.0198 8.52513 18.54 8C18.2791 7.7422 17.9647 7.54495 17.6191 7.42224C17.2734 7.29954 16.905 7.2544 16.54 7.29C16.4427 7.29964 16.3445 7.28992 16.2511 7.2614C16.1576 7.23287 16.0707 7.18612 15.9954 7.12382C15.9201 7.06153 15.8578 6.98493 15.8123 6.89846C15.7667 6.81199 15.7388 6.71735 15.73 6.62C15.7104 6.42248 15.77 6.22527 15.8956 6.07156C16.0212 5.91786 16.2025 5.82021 16.4 5.8C16.9821 5.73967 17.5704 5.80779 18.1233 5.99959C18.6762 6.19138 19.1803 6.50216 19.6 6.91C20.3639 7.72153 20.7766 8.80172 20.7485 9.91585C20.7204 11.03 20.2538 12.088 19.45 12.86L15.69 16.65C14.8727 17.4937 13.7544 17.9791 12.58 18Z" fill="#000000"/>
</svg>
<a id="link-project" href="./Gerador de Senhas/index.html" target="_blank">Link do Projeto</a>
</div>
<div id="link">
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http:https://www.w3.org/2000/svg">
<path d="M1821.63 637.76c0-130.027-43.627-236.373-116.054-319.68 11.627-30.187 50.347-151.36-11.2-315.307 0 0-94.72-32-310.4 122.134-90.133-26.454-186.773-39.68-282.773-40.107-96 .427-192.64 13.653-282.667 40.107C602.749-29.227 507.923 2.773 507.923 2.773c-61.547 163.947-22.72 285.12-11.094 315.307-72.32 83.307-116.266 189.653-116.266 319.68 0 456.533 263.68 558.72 514.453 588.8 0 0-180.267 111.68-180.267 299.413-64.32 30.507-336.533 123.947-437.333-58.133 0 0-59.627-114.347-173.013-122.773 0 0-110.294-1.494-7.787 72.426 0 0 74.027 36.694 125.44 174.294 0 0 57.173 289.92 489.067 159.68 4.373 2.24 1.6 140.266 1.6 168.533h777.173s1.28-277.013 1.28-365.12c0-216.64-144.64-292.48-185.28-329.28 251.627-29.44 515.733-130.133 515.733-587.84" fill-rule="evenodd"/>
</svg>
<a id="link-repository" href="" target="_blank">Link do Repositório</a>
</div>
</div>
</div>
</div>
</section>




<footer>
<div class="foot row-1">
<div class="slogan-and-copyright r-1 column-1">
<div class="slogan">
<img id="logo" class="responsive" src="../src/image/Logo.svg" alt="Logo">
<h1>CODIFICANDO O FUTURO<br>COM PAIXÃO E<br>INOVAÇÃO<span>.</span></h1>
</div>
<div class="copyright">
<h2>© CARLOS DANIEL RODRIGUES</h2>
<h2>Todos os direitos reservados</h2>
</div>
</div>

<div class="site-map r-1 column-2">
<h2>Mapa</h2>
<div class="links">
<a href="../index.html#init">Início</a>
<a href="../index.html#about">Sobre</a>
<a href="../index.html#habilities">Habilidades</a>
<a href="../index.html#projects">Projetos</a>
</div>
</div>

<div class="contact-btn r-1 column-3">
<h2>Contato</h2>
<a href="../index.html#contact" id="contact-button">
<div class="layout-button-contact-nav-bar">
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http:https://www.w3.org/2000/svg" id="send-alt" class="icon glyph"><path d="M21.88,4.73,16.2,20.65A2,2,0,0,1,14.3,22h0a2,2,0,0,1-1.9-1.31l-2.12-5.52,1.54-1.54,2.49-2.49a1,1,0,1,0-1.42-1.42l-2.49,2.49L8.82,13.76,3.31,11.63a2,2,0,0,1,0-3.83L19.27,2.12a2,2,0,0,1,2.61,2.61Z"></path></svg>
<h1>Entrar em Contato</h1>
</div>
</a>
</div>
</div>
<div class="foot row-2">
<div class="media-and-btn-to-top">
<div class="links-media">
<a href="https://www.instagram.com/carlosdaniel_dev/" target="_blank" id="link-social-media">
<div>
<svg style="width: 32px; height: 32px" fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http:https://www.w3.org/2000/svg"><path d="M20.445 5h-8.891A6.559 6.559 0 0 0 5 11.554v8.891A6.559 6.559 0 0 0 11.554 27h8.891a6.56 6.56 0 0 0 6.554-6.555v-8.891A6.557 6.557 0 0 0 20.445 5zm4.342 15.445a4.343 4.343 0 0 1-4.342 4.342h-8.891a4.341 4.341 0 0 1-4.341-4.342v-8.891a4.34 4.34 0 0 1 4.341-4.341h8.891a4.342 4.342 0 0 1 4.341 4.341l.001 8.891z"/><path d="M16 10.312c-3.138 0-5.688 2.551-5.688 5.688s2.551 5.688 5.688 5.688 5.688-2.551 5.688-5.688-2.55-5.688-5.688-5.688zm0 9.163a3.475 3.475 0 1 1-.001-6.95 3.475 3.475 0 0 1 .001 6.95zM21.7 8.991a1.363 1.363 0 1 1-1.364 1.364c0-.752.51-1.364 1.364-1.364z"/></svg>
</div>
</a>
<a href="https://wa.me/5538999603639" target="_blank" id="link-social-media">
<div>
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 16 16" xmlns="http:https://www.w3.org/2000/svg"><path d="M11.42 9.49c-.19-.09-1.1-.54-1.27-.61s-.29-.09-.42.1-.48.6-.59.73-.21.14-.4 0a5.13 5.13 0 0 1-1.49-.92 5.25 5.25 0 0 1-1-1.29c-.11-.18 0-.28.08-.38s.18-.21.28-.32a1.39 1.39 0 0 0 .18-.31.38.38 0 0 0 0-.33c0-.09-.42-1-.58-1.37s-.3-.32-.41-.32h-.4a.72.72 0 0 0-.5.23 2.1 2.1 0 0 0-.65 1.55A3.59 3.59 0 0 0 5 8.2 8.32 8.32 0 0 0 8.19 11c.44.19.78.3 1.05.39a2.53 2.53 0 0 0 1.17.07 1.93 1.93 0 0 0 1.26-.88 1.67 1.67 0 0 0 .11-.88c-.05-.07-.17-.12-.36-.21z"/><path d="M13.29 2.68A7.36 7.36 0 0 0 8 .5a7.44 7.44 0 0 0-6.41 11.15l-1 3.85 3.94-1a7.4 7.4 0 0 0 3.55.9H8a7.44 7.44 0 0 0 5.29-12.72zM8 14.12a6.12 6.12 0 0 1-3.15-.87l-.22-.13-2.34.61.62-2.28-.14-.23a6.18 6.18 0 0 1 9.6-7.65 6.12 6.12 0 0 1 1.81 4.37A6.19 6.19 0 0 1 8 14.12z"/></svg>
</div>
</a>
<a href="https://bit.ly/3LtPCyL" target="_blank" id="link-social-media">
<div>
<svg style="width: 32px; height: 32px;" viewBox="0 0 24 24" fill="none" xmlns="http:https://www.w3.org/2000/svg">
<path d="M19.67 8.14002C19.5811 7.7973 19.4028 7.48433 19.1533 7.23309C18.9038 6.98185 18.5921 6.80134 18.25 6.71001C16.176 6.4654 14.0883 6.35517 12 6.38001C9.91174 6.35517 7.82405 6.4654 5.75001 6.71001C5.40793 6.80134 5.09622 6.98185 4.84674 7.23309C4.59725 7.48433 4.41894 7.7973 4.33001 8.14002C4.10282 9.41396 3.99236 10.706 4.00001 12C3.99198 13.3007 4.10244 14.5994 4.33001 15.88C4.42355 16.2172 4.60391 16.5239 4.85309 16.7696C5.10226 17.0153 5.41153 17.1913 5.75001 17.28C7.82405 17.5246 9.91174 17.6349 12 17.61C14.0883 17.6349 16.176 17.5246 18.25 17.28C18.5885 17.1913 18.8978 17.0153 19.1469 16.7696C19.3961 16.5239 19.5765 16.2172 19.67 15.88C19.8976 14.5994 20.008 13.3007 20 12C20.0077 10.706 19.8972 9.41396 19.67 8.14002ZM10.36 14.39V9.63001L14.55 12L10.36 14.38V14.39Z" fill="#000000"/>
</svg>
</div>
</a>
<a href="https://www.linkedin.com/in/carlos-daniel-lopes-rodrigues/" target="_blank" id="link-social-media">
<div>
<svg version="1.1" id="Layer_1" xmlns="http:https://www.w3.org/2000/svg" xmlns:xlink="http:https://www.w3.org/1999/xlink"
viewBox="-271 283.9 256 235.1" xml:space="preserve">
<g>
<rect x="-264.4" y="359.3" width="49.9" height="159.7"/>
<path d="M-240.5,283.9c-18.4,0-30.5,11.9-30.5,27.7c0,15.5,11.7,27.7,29.8,27.7h0.4c18.8,0,30.5-12.3,30.4-27.7
C-210.8,295.8-222.1,283.9-240.5,283.9z"/>
<path d="M-78.2,357.8c-28.6,0-46.5,15.6-49.8,26.6v-25.1h-56.1c0.7,13.3,0,159.7,0,159.7h56.1v-86.3c0-4.9-0.2-9.7,1.2-13.1
c3.8-9.6,12.1-19.6,27-19.6c19.5,0,28.3,14.8,28.3,36.4V519h56.6v-88.8C-14.9,380.8-42.7,357.8-78.2,357.8z"/>
</g>
</svg>
</div>
</a>
<a href="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/NielRodrigues" target="_blank" id="link-social-media">
<div>
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http:https://www.w3.org/2000/svg">
<path d="M1821.63 637.76c0-130.027-43.627-236.373-116.054-319.68 11.627-30.187 50.347-151.36-11.2-315.307 0 0-94.72-32-310.4 122.134-90.133-26.454-186.773-39.68-282.773-40.107-96 .427-192.64 13.653-282.667 40.107C602.749-29.227 507.923 2.773 507.923 2.773c-61.547 163.947-22.72 285.12-11.094 315.307-72.32 83.307-116.266 189.653-116.266 319.68 0 456.533 263.68 558.72 514.453 588.8 0 0-180.267 111.68-180.267 299.413-64.32 30.507-336.533 123.947-437.333-58.133 0 0-59.627-114.347-173.013-122.773 0 0-110.294-1.494-7.787 72.426 0 0 74.027 36.694 125.44 174.294 0 0 57.173 289.92 489.067 159.68 4.373 2.24 1.6 140.266 1.6 168.533h777.173s1.28-277.013 1.28-365.12c0-216.64-144.64-292.48-185.28-329.28 251.627-29.44 515.733-130.133 515.733-587.84" fill-rule="evenodd"/>
</svg>
</div>
</a>
</div>
<a href="#menu" id="top">
<div>
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http:https://www.w3.org/2000/svg">
<path d="M0.256 23.481c0 0.269 0.106 0.544 0.313 0.75 0.412 0.413 1.087 0.413 1.5 0l14.119-14.119 13.913 13.912c0.413 0.413 1.087 0.413 1.5 0s0.413-1.087 0-1.5l-14.663-14.669c-0.413-0.412-1.088-0.412-1.5 0l-14.869 14.869c-0.213 0.212-0.313 0.481-0.313 0.756z"></path>
</svg>
</div>
</a>
</div>
</div>
</footer>






<div class="bg-menu"></div>
<a class="link-wpp" href="https://wa.me/5538999603639?text=*OL%C3%81%20CARLOS%20ESTOU%20INTERESSADO%20NO%20SEU%20TRABALHO*" target="_blank">
<div id="wpp">
<svg class="wpp" width="800px" height="800px" viewBox="0 0 16 16" xmlns="http:https://www.w3.org/2000/svg"><path fill="var(--white)" d="M11.42 9.49c-.19-.09-1.1-.54-1.27-.61s-.29-.09-.42.1-.48.6-.59.73-.21.14-.4 0a5.13 5.13 0 0 1-1.49-.92 5.25 5.25 0 0 1-1-1.29c-.11-.18 0-.28.08-.38s.18-.21.28-.32a1.39 1.39 0 0 0 .18-.31.38.38 0 0 0 0-.33c0-.09-.42-1-.58-1.37s-.3-.32-.41-.32h-.4a.72.72 0 0 0-.5.23 2.1 2.1 0 0 0-.65 1.55A3.59 3.59 0 0 0 5 8.2 8.32 8.32 0 0 0 8.19 11c.44.19.78.3 1.05.39a2.53 2.53 0 0 0 1.17.07 1.93 1.93 0 0 0 1.26-.88 1.67 1.67 0 0 0 .11-.88c-.05-.07-.17-.12-.36-.21z"/><path fill="var(--white)" d="M13.29 2.68A7.36 7.36 0 0 0 8 .5a7.44 7.44 0 0 0-6.41 11.15l-1 3.85 3.94-1a7.4 7.4 0 0 0 3.55.9H8a7.44 7.44 0 0 0 5.29-12.72zM8 14.12a6.12 6.12 0 0 1-3.15-.87l-.22-.13-2.34.61.62-2.28-.14-.23a6.18 6.18 0 0 1 9.6-7.65 6.12 6.12 0 0 1 1.81 4.37A6.19 6.19 0 0 1 8 14.12z"/></svg>
</div>
</a>

</body>

<script src="../assets/js/script.js"></script>
<script>
const project_name = 'Weather APP'

function projects(){
const xhr = new XMLHttpRequest() // classe responsável por fazer chamadas remotas
var data = null

// xhr.open(, )
xhr.open("GET", "../assets/js/json/list-projects.json") // Método que "abre" a conexão com os dados
xhr.send(null) // Método que faz a chamada

xhr.onreadystatechange = () => { // Quando terminar de fazer a requisição vai invocar a função de callback
if(xhr.readyState === 4){ // Estado 'positivo'
project = JSON.parse(xhr.responseText) // transformado dados da API em JSON para um Object JavaScript

for(let i = 0; i < project.length; i++){
console.log(i)
if(project_name.toLowerCase() === project[i].title.toLowerCase()){
document.querySelector('div.header h1').innerText = project_name.toUpperCase()
var date = project[i].date.split('-')
console.log(date)
document.querySelector('div.date h2').innerText = `${date[1]}/${date[0]}/${date[2]}`
document.querySelector('div.project img').src = `../src/image/${project[i].img}`
document.querySelector('div.description p').innerText = project[i].description

for(let cont = 0; cont < project[i].tech.length; cont++){
document.querySelector('div.imgs').innerHTML +=
`<img title="${project[i].tech[cont].toUpperCase()}" src="../src/image/${project[i].tech[cont].split(' ').join('-').toLowerCase()}.svg" alt="LOGO ${project[i].tech[cont].toUpperCase()}">`
}

document.querySelector('a#link-project').href = `${project[i].link}`
document.querySelector('a#link-repository').href = project[i].repository

break
}
}

}
}
}
projects()

</script>
</html>

0 comments on commit 1a147d9

Please sign in to comment.