Commit 4e973b3f authored by Aline's avatar Aline

ex js

parent 0c569f42
meteo-js @ 17027d1c
Subproject commit 17027d1ce50d9e92858cd449926bea17631201b9
/* import d'une police */
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro';
body {
/*
* marge droite et gauche calculée automatiquement
* marge du haut et du bas à 0
*/
margin: 0 auto;
/*
* margin auto ne peut fonctionner qu'avec la déclaration d'une largeur
* l'unité em est relative à la taille de la police
*/
max-width: 50em;
font-family: "Source Sans Pro", "Helvetica Neue", "Arial", sans-serif;
color: #34495e;
line-height: 1.5; /* hauteur de ligne */
padding: 4em 1em;
}
h2 {
margin-top: 1em;
padding-top: 1em;
border-bottom: 2px solid #42b983;
}
h2, h3, strong {
color: #2c3e50;
}
a {
color: #42b983;
}
blockquote {
border-left: 2px solid #2c3e50;
padding-left: 1em;
}
article time {
color: #7f8c8d;
}
table {
width: 100%;
margin: 1em auto
}
table thead {
background-color: #ddd
}
table thead th {
padding: 5px;
min-width: 20px
}
table tbody tr:nth-child(2n) {
background-color: #eee
}
table tbody td {
padding: 5px;
vertical-align: text-top
}
/* Header */
#logo {
float: left;
padding: 0px 10px;
}
header {
padding-bottom: 50px;
}
header nav {
float: right;
}
header nav li {
display: inline-block;
padding: 0px 10px;
}
header nav li a {
text-decoration: none;
color: #2c3e50;
font-size: 1.0em;
}
header nav li a.active {
border-bottom: 1px solid #42b983;
}
This diff is collapsed.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Météo</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<header>
<a href="/">
<img id="logo" src="./img/logo.svg" alt="Logo" width="42" />
</a>
<nav>
<ul>
<li><a href="#" class="active">Dashboard</a></li>
</ul>
</nav>
</header>
<main>
<h2>Dashboard</h2>
<section id="container">
<section id="weather">
<h3>Météo du jour</h3>
<form id="formWeather" action="">
Location: <input type="text" id="location" />
</form>
<p>
</p>
</section>
</section>
</main>
<script src="./js/script.js"></script>
</body>
</html>
document.getElementById("location").value = "Strasbourg";
getWeather();
document
.getElementById("formWeather")
.addEventListener("submit", function(event) {
event.preventDefault();
getWeather();
}, false)
;
function getWeather() {
var location = document.getElementById("location").value;
if (location.length == 0) {
return;
}
var img = "<img src='http://wttr.in/" + location + "_0tqp_lang=fr.png' />";
document
.getElementById("weather")
.getElementsByTagName("p")[0]
.innerHTML = img;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment