Skip to content
Snippets Groups Projects
Commit 4bfd901f authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

reprise demarrage TP2

parent 105aff70
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 10841 additions and 0 deletions
.babelrc 0 → 100644
+ 3
− 0
View file @ 4bfd901f
{
"presets": ["@babel/env"]
}
\ No newline at end of file
.gitignore 0 → 100644
+ 4
− 0
View file @ 4bfd901f
.DS_Store
node_modules
*.zip
build
\ No newline at end of file
css/flatly-bootstrap.css 0 → 100644
+ 7022
− 0
View file @ 4bfd901f
This diff is collapsed.
css/fonts/glyphicons-halflings-regular.woff2 0 → 100644
+ 0
− 0
View file @ 4bfd901f
File added
css/main.css 0 → 100644
+ 146
− 0
View file @ 4bfd901f
html {
height: 100%;
}
body {
background: #f1f1f1;
padding-bottom: 50px;
position: relative;
min-height: 100%;
}
@media (min-width: 200px) {
.navbar-header{
float: left;
}
.navbar-right {
float: right !important;
margin-right: -15px;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 19.5px;
padding-bottom: 19.5px;
}
.navbar-nav {
margin:0;
}
}
#appContainer {
padding-top: 80px;
}
.row.marketing {
margin: 0 auto;
max-width: 900px;
}
.video-detail, .media-list {
background: #fff;
padding-top: 20px 0;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.video-detail {
padding: 20px;
}
.media, .pizzasContainer > a {
padding: 20px;
border-bottom: 1px solid rgba(0,0,0,.1);
margin: 0;
display: flex;
}
.media .infos, .pizzasContainer > a .infos {
display: flex;
flex-direction: column;
}
.media a {
display: flex;
}
.media p {
font-size: 12px;
}
.media img, .pizzasContainer > a img {
margin-right: 20px;
width: 246px;
height: 138px;
}
.media h4 .pizzasContainer > a h4 {
font-size: 25px;
margin: 0;
}
a, a:hover {
color: #333;
}
a h4, a:hover h4 {
color: #167ac6;
}
.comments .panel {
margin: 5px 0;
}
.navbar-inverse {
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
/*position: relative;
color: black;
}
.navbar-inverse:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;*/
background-color: #cd1a1a;
background-image: linear-gradient(45deg, #cd1a1a, #cb1a70);
}
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a:focus {
color: #f9d2d2;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
background-color: #b01717;
}
.navbar-inverse .navbar-nav > li > a:hover {
color: #fff;
background-color: #b01717;
}
.navbar-brand {
padding: 0 15px;
display: flex;
align-items: center;
}
.navbar-brand > img {
display: inline-block;
height: 50px;
margin-right: 10px;
}
.navbar-brand > small {
font-size: 12px;
font-style: italic;
margin-left:10px;
margin-top:5px;
}
footer {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 10px;
color: #0003;
}
footer a{
color: #0006;
}
form {
display:flex;
padding: 20px;
flex-direction: column;
}
form label {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
form label input,
form label select,
form label .form-control {
width: 70%;
}
\ No newline at end of file
images/icon.png 0 → 100644
+ 0
− 0
View file @ 4bfd901f
images/icon.png

5.87 KiB

images/logo.svg 0 → 100644
+ 114
− 0
View file @ 4bfd901f
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="291px" height="216px" viewBox="-0.362 -0.521 291 216" enable-background="new -0.362 -0.521 291 216"
xml:space="preserve">
<defs>
</defs>
<g>
<g>
<path fill="#E2952D" d="M113.373,17.37c-42.7,17.738-77.862,52.387-95.162,97.926l161.259,61.492L113.373,17.37z"/>
<path fill="none" stroke="#E2952D" stroke-width="17.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M113.373,17.37c-42.7,17.738-77.862,52.387-95.162,97.926l161.259,61.492L113.373,17.37z"/>
<path fill="#E2952D" d="M111.113,10.579C65.813,29.397,28.51,66.153,10.155,114.47"/>
<path fill="none" stroke="#EDAD4A" stroke-width="20.311" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M111.113,10.579C65.813,29.397,28.51,66.153,10.155,114.47"/>
</g>
<g>
<defs>
<path id="SVGID_3_" d="M18.211,115.296l161.258,61.492L113.373,17.37C70.673,35.108,35.511,69.758,18.211,115.296"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_5_)" fill="#D34030" d="M52.142,145.604c0,0-17.362-30.51,4.285-41.908
C78.072,92.3,78.285,97.612,86.55,83.335c8.265-14.279,7.185-33.295,27.62-33.475c20.435-0.178,46.596-17.166,47.163-20.131
c0.569-2.967,47.681,181.818,47.681,181.818L52.142,145.604z"/>
<path clip-path="url(#SVGID_5_)" fill="none" stroke="#D34030" stroke-width="7.792" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M52.142,145.604c0,0-17.362-30.51,4.285-41.908C78.072,92.3,78.285,97.612,86.55,83.335c8.265-14.279,7.185-33.295,27.62-33.475
c20.435-0.178,46.596-17.166,47.163-20.131c0.569-2.967,47.681,181.818,47.681,181.818L52.142,145.604z"/>
<path clip-path="url(#SVGID_5_)" fill="#B93229" d="M134.009,127.792c4.47,0,8.095,3.623,8.095,8.096
c0,4.471-3.625,8.094-8.095,8.094s-8.094-3.623-8.094-8.094C125.915,131.415,129.539,127.792,134.009,127.792"/>
<path clip-path="url(#SVGID_5_)" fill="#B93229" d="M82.425,99.731c7.421,0,13.434,6.014,13.434,13.437
c0,7.419-6.013,13.435-13.434,13.435c-7.42,0-13.436-6.016-13.436-13.435C68.989,105.745,75.005,99.731,82.425,99.731"/>
<g opacity="0.7" clip-path="url(#SVGID_5_)">
<g>
<defs>
<rect id="SVGID_4_" x="107.439" y="83.032" width="26.87" height="26.871"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_4_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_6_)" fill="#B93229" d="M120.875,83.032c7.42,0,13.434,6.016,13.434,13.436
s-6.014,13.436-13.434,13.436c-7.421,0-13.436-6.016-13.436-13.436S113.455,83.032,120.875,83.032"/>
</g>
</g>
</g>
<g>
<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M62.15,121.151c-2.963-2.924-2.996-7.695-0.072-10.656c2.924-2.965,7.695-2.994,10.658-0.07"/>
<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M108.673,74.005c-2.962-2.924-2.993-7.695-0.07-10.658c2.923-2.963,7.694-2.992,10.658-0.068"/>
<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M109.719,100.39c2.961,2.924,2.994,7.695,0.07,10.656c-2.923,2.965-7.695,2.992-10.658,0.07"/>
<path fill="#EDAD4A" d="M273.304,113.372c-17.738-42.699-52.385-77.861-97.925-95.162l-61.493,161.262L273.304,113.372z"/>
<path fill="none" stroke="#EDAD4A" stroke-width="17.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M273.304,113.372c-17.738-42.699-52.385-77.861-97.925-95.162l-61.493,161.262L273.304,113.372z"/>
<path fill="#EDAD4A" d="M280.095,111.114C261.278,65.812,224.52,28.51,176.205,10.155"/>
<path fill="none" stroke="#E2952D" stroke-width="20.311" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M280.095,111.114C261.278,65.812,224.52,28.51,176.205,10.155"/>
</g>
<g>
<defs>
<path id="SVGID_2_" d="M113.885,179.472l159.419-66.1c-17.738-42.699-52.385-77.861-97.925-95.162L113.885,179.472z"/>
</defs>
<clipPath id="SVGID_7_">
<use xlink:href="#SVGID_2_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_7_)" fill="#D34030" d="M145.07,52.14c0,0,30.509-17.361,41.907,4.285
c11.399,21.646,6.085,21.86,20.364,30.125c14.278,8.264,33.294,7.184,33.474,27.621c0.179,20.434,17.166,46.594,20.131,47.164
c2.967,0.566-181.819,47.678-181.819,47.678L145.07,52.14z"/>
<path clip-path="url(#SVGID_7_)" fill="none" stroke="#D34030" stroke-width="7.792" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M145.07,52.14c0,0,30.509-17.361,41.907,4.285c11.399,21.646,6.085,21.86,20.364,30.125c14.278,8.264,33.294,7.184,33.474,27.621
c0.179,20.434,17.166,46.594,20.131,47.164c2.967,0.566-181.819,47.678-181.819,47.678L145.07,52.14z"/>
</g>
<g>
<path fill="#B93229" d="M161.58,136.831c0,4.469-3.623,8.092-8.093,8.092c-4.47,0-8.095-3.623-8.095-8.092
c0-4.473,3.625-8.098,8.095-8.098C157.957,128.733,161.58,132.358,161.58,136.831"/>
<path fill="#B93229" d="M189.641,85.245c0,7.42-6.015,13.434-13.436,13.434c-7.42,0-13.434-6.014-13.434-13.434
c0-7.422,6.014-13.436,13.434-13.436C183.626,71.81,189.641,77.823,189.641,85.245"/>
<g opacity="0.7">
<g>
<defs>
<rect id="SVGID_1_" x="179.47" y="110.261" width="26.87" height="26.869"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_8_)" fill="#B93229" d="M206.34,123.694c0,7.422-6.014,13.436-13.435,13.436
c-7.42,0-13.436-6.014-13.436-13.436c0-7.42,6.016-13.434,13.436-13.434C200.326,110.261,206.34,116.274,206.34,123.694"/>
</g>
</g>
<path fill="#353534" d="M176.396,77.54c-2.922,2.963-7.695,2.994-10.658,0.07c-2.961-2.922-2.993-7.695-0.069-10.656
c2.923-2.963,7.694-2.996,10.656-0.072C179.289,69.806,179.32,74.577,176.396,77.54"/>
<path fill="#353534" d="M223.542,124.065c-2.922,2.961-7.695,2.992-10.656,0.068c-2.963-2.923-2.994-7.695-0.071-10.656
c2.923-2.963,7.696-2.992,10.659-0.07C226.434,116.331,226.465,121.101,223.542,124.065"/>
<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M186.431,114.522c-2.924,2.963-7.696,2.994-10.659,0.07c-2.962-2.922-2.992-7.693-0.07-10.658"/>
</g>
</g>
</svg>
index.html 0 → 100644
+ 49
− 0
View file @ 4bfd901f
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PizzaLand</title>
<link rel="icon" href="images/icon.png" sizes="96x96">
<link rel="stylesheet" type="text/css" href="css/flatly-bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="build/main.js" defer></script>
</head>
<body>
<main id="appContainer">
<div class="container">
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="images/logo.svg" /> PizzaLand
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="pizzaListButton">La carte</a></li>
<li><a href="#" class="pizzaFormButton">Ajouter une Pizza</a></li>
</ul>
</div>
</nav>
</header>
<section class="row marketing">
<div class="col-lg-12">
<header class="pageTitle"></header>
<section class="media-list pizzasContainer">
</section>
</div>
</section>
</div>
</main>
<footer>
Free photos from <a href="https://unsplash.com/unsplash">Unsplash</a>
<br>
Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
</footer>
</body>
</html>
\ No newline at end of file
js/main.js 0 → 100644
+ 134
− 0
View file @ 4bfd901f
/*
// D. Manipulation des chaînes
// D.2. Créer une constante appelée `nom` et y assigner la chaîne de caractères `Regina`
const nom = 'Regina';
// D.3. Créer une constante nommée `url`.
const url = 'images/'+nom.toLowerCase()+'.jpg';
// D.4. Créer la variable `html`
let html = `<a href="${url}">${url}</a>`;
console.log( html );
// D.5. Afficher le contenu de la variable `html` dans la page.
document.querySelector('.pizzasContainer').innerHTML = html;
// D.6. Modifier encore la variable html avant son affichage
html = `<a href="${url}">
<img src="${url}" />
<h4>${nom}</h4>
</a>`;
document.querySelector('.pizzasContainer').innerHTML = html;
// E.1. Manipulation des tableaux
let data = [ 'Regina', 'Napolitaine', 'Spicy' ];
html = '';
// E.1. boucle for :
for (let i = 0; i < data.length; i++) {
const nom = data[i],
url = `images/${nom.toLowerCase()}.jpg`;
html += `<a href="${url}">
<img src="${url}" />
<h4>${nom}</h4>
</a>`;
}
document.querySelector('.pizzasContainer').innerHTML = html;
// E.1. Array.forEach :
html = '';
data.forEach( nom => {
const url = `images/${nom.toLowerCase()}.jpg`;
html += `<a href="${url}">
<img src="${url}" />
<h4>${nom}</h4>
</a>`;
})
document.querySelector('.pizzasContainer').innerHTML = html;
// E.1. Array.map + Array.join :
html = data.map( nom => `<a href="images/${nom.toLowerCase()}.jpg">
<img src="images/${nom.toLowerCase()}.jpg" />
<h4>${nom}</h4>
</a>`).join('');
document.querySelector('.pizzasContainer').innerHTML = html;
// E.1. Array.reduce :
html = data.reduce( (str, nom) => str+`<a href="images/${nom.toLowerCase()}.jpg">
<img src="images/${nom.toLowerCase()}.jpg" />
<h4>${nom}</h4>
</a>`,'');
document.querySelector('.pizzasContainer').innerHTML = html;
*/
// E.2. Les objets littéraux
const data = [
{
nom: 'Regina',
base: 'tomate',
prix_petite: 6.5,
prix_grande: 9.95,
image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
},
{
nom: 'Napolitaine',
base: 'tomate',
prix_petite: 6.5,
prix_grande: 8.95,
image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
},
{
nom: 'Spicy',
base: 'crème',
prix_petite: 5.5,
prix_grande: 8,
image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300'
}
];
function render(pizzas) {
const html = pizzas.reduce( (str, {image, nom, prix_petite, prix_grande}) => str +
`<article class="media">
<a href="${image}">
<img src="${image}" />
<section class="infos">
<h4>${nom}</h4>
<ul>
<li>Prix petit format : ${prix_petite.toFixed(2)} €</li>
<li>Prix grand format : ${prix_grande.toFixed(2)} €</li>
</ul>
</section>
</a>
</article>`, '');
document.querySelector('.pizzasContainer').innerHTML = html;
}
// G.1. Tri de tableaux
function sortByName(a, b) {
if ( a.nom < b.nom ) {
return -1;
} else if ( a.nom > b.nom ) {
return 1;
}
return 0;
}
// tri par prix_petit croissant PUIS par prix_grande croissant
function sortByPrice(a, b) {
if ( a.prix_petite !== b.prix_petite ) {
return a.prix_petite - b.prix_petite;
}
return a.prix_grande - b.prix_grande;
}
// Attention : data.sort() modifie le tableau original
render( data.sort(sortByName) );
render( data.sort(sortByPrice) );
// // G.2. Système de filtre
render( data.filter( pizza => pizza.base == 'tomate' ))
render( data.filter( pizza => pizza.prix_petite < 6 ))
// deux possibilités pour les pizzas avec deux fois la lettre "i"
render( data.filter( pizza => pizza.nom.split('i').length == 3 ))
render( data.filter( pizza => pizza.nom.match(/i/g).length == 2 ))
// // G.3. Destructuring
render( data.filter( ({base}) => base == 'tomate' ))
render( data.filter( ({prix_petite}) => prix_petite < 6 ))
render( data.filter( ({nom}) => nom.match(/i/g).length === 2 ));
\ No newline at end of file
package-lock.json 0 → 100644
+ 3353
− 0
View file @ 4bfd901f
This diff is collapsed.
package.json 0 → 100644
+ 16
− 0
View file @ 4bfd901f
{
"name": "pizzaland",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "thomas.fritsch@univ-lille.fr",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4"
}
}
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